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;