diff --git a/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js b/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
index 095ad728..647f9bf8 100644
--- a/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
+++ b/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
@@ -1,18 +1,36 @@
import * as React from "react";
+import useSWR from "swr";
+
import { Table, TableBody, TableCell, TableRow } from "../Table";
-export default function ActivityTable({ data }) {
+import useFormattedActivityData from "./useFormattedActivityData";
+
+export default function ActivityTable({ type }) {
+ const { data, error } = useSWR(`user/${type}?pageSize=3`);
+ const items = useFormattedActivityData(data?.items || []);
+
+ if (!items.length) {
+ return (
+
+ {/* TODO: proper loading indicator / error message */}
+ {!data && !error &&
Loading...
}
+ {!data && error &&
An error occurred while loading this data.
}
+ {data &&
No files found.
}
+
+ );
+ }
+
return (
- {data.map(({ name, type, size, uploaded, skylink }) => (
-
+ {items.map(({ id, name, type, size, date, skylink }) => (
+
{name}
{type}
{size}
- {uploaded}
+ {date}
{skylink}
))}
diff --git a/packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js b/packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js
index 7e7fdf6c..9c53554a 100644
--- a/packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js
+++ b/packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js
@@ -1,22 +1,34 @@
import * as React from "react";
+import { Link } from "gatsby";
+
import { Panel } from "../Panel";
import { Tab, TabPanel, Tabs } from "../Tabs";
+import { ArrowRightIcon } from "../Icons";
+
import ActivityTable from "./ActivityTable";
-import useRecentActivityData from "./useActivityData";
+
+const ViewAllLink = (props) => (
+
+
+
+
+ View all
+
+);
export default function LatestActivity() {
- const { downloads, uploads } = useRecentActivityData();
-
return (
-
+
+
-
+
+
diff --git a/packages/dashboard-v2/src/components/LatestActivity/useActivityData.js b/packages/dashboard-v2/src/components/LatestActivity/useActivityData.js
deleted file mode 100644
index a262816e..00000000
--- a/packages/dashboard-v2/src/components/LatestActivity/useActivityData.js
+++ /dev/null
@@ -1,54 +0,0 @@
-const UPLOADS_DATA = [
- {
- name: "At_vereo_eos_censes",
- type: ".mp4",
- size: "2.45 MB",
- uploaded: "a few seconds ago",
- skylink: "_HyFqH632Rmy99c93idTtBVXeRDgaDAAWg6Bmm5P1izriu",
- },
- {
- name: "Miriam Klein IV",
- type: ".pdf",
- size: "7.52 MB",
- uploaded: "01/04/2021; 17:11",
- skylink: "_izriuHyFqH632Rmy99c93idTtBVXeRDgaDAAWg6Bmm5P1",
- },
- {
- name: "tmp/QmWR6eVDVkwhAYq7X99w4xT9KNKBzwK39Fj1PDmr4ZnzMm/QmWR6eVDVkwhAYq7X99w4xT9KNKBzwK39Fj1PDmr4ZnzMm",
- type: ".doc",
- size: "8.15 MB",
- uploaded: "10/26/2020; 7:21",
- skylink: "_VXeRDgaDAAWg6Bmm5P1izriuHyFqH632Rmy99c93idTtB",
- },
- {
- name: "Perm_London",
- type: ".avi",
- size: "225.6 MB",
- uploaded: "09/12/2020; 19:28",
- skylink: "_eRDgaDAAWg6Bmm5P1izriuHyFqH632Rmy99c93idTtBVX",
- },
- {
- name: "Santa_Clara",
- type: ".pdf",
- size: "7.52 MB",
- uploaded: "09/12/2020; 19:23",
- skylink: "_AWg6Bmm5P1izriuHyFqH632Rmy99c93idTtBVXeRDgaDA",
- },
- {
- name: "Marysa_Labrone",
- type: ".doc",
- size: "8.15 MB",
- uploaded: "09/12/2020; 19:21",
- skylink: "_P1izriuHyFqH632Rmy99c93idTtBVXeRDgaDAAWg6Bmm5",
- },
-];
-
-const DOWNLOADS_DATA = UPLOADS_DATA.slice().reverse();
-
-// TODO: get real data
-export default function useRecentActivityData() {
- return {
- uploads: UPLOADS_DATA,
- downloads: DOWNLOADS_DATA,
- };
-}
diff --git a/packages/dashboard-v2/src/components/LatestActivity/useFormattedActivityData.js b/packages/dashboard-v2/src/components/LatestActivity/useFormattedActivityData.js
new file mode 100644
index 00000000..cf55703c
--- /dev/null
+++ b/packages/dashboard-v2/src/components/LatestActivity/useFormattedActivityData.js
@@ -0,0 +1,26 @@
+import { useMemo } from "react";
+import prettyBytes from "pretty-bytes";
+import dayjs from "dayjs";
+
+const parseFileName = (fileName) => {
+ const lastDotIndex = Math.max(0, fileName.lastIndexOf(".")) || Infinity;
+
+ return [fileName.substr(0, lastDotIndex), fileName.substr(lastDotIndex)];
+};
+
+const formatItem = ({ size, name: rawFileName, uploadedOn, downloadedOn, ...rest }) => {
+ const [name, type] = parseFileName(rawFileName);
+ const date = dayjs(uploadedOn || downloadedOn).format("MM/DD/YYYY; HH:MM");
+
+ return {
+ ...rest,
+ date,
+ size: prettyBytes(size),
+ type,
+ name,
+ };
+};
+
+const useFormattedActivityData = (items) => useMemo(() => items.map(formatItem), [items]);
+
+export default useFormattedActivityData;