diff --git a/packages/dashboard-v2/src/components/FileList/FileList.js b/packages/dashboard-v2/src/components/FileList/FileList.js
new file mode 100644
index 00000000..6342b970
--- /dev/null
+++ b/packages/dashboard-v2/src/components/FileList/FileList.js
@@ -0,0 +1,74 @@
+import * as React from "react";
+import useSWR from "swr";
+import { useMedia } from "react-use";
+
+import theme from "../../lib/theme";
+
+import { ContainerLoadingIndicator } from "../LoadingIndicator";
+import { Select, SelectOption } from "../Select";
+import { Switch } from "../Switch";
+import { TextInputIcon } from "../TextInputIcon/TextInputIcon";
+import { SearchIcon } from "../Icons";
+
+import FileTable from "./FileTable";
+import useFormattedFilesData from "./useFormattedFilesData";
+
+const FileList = ({ type }) => {
+ const isMediumScreenOrLarger = useMedia(`(min-width: ${theme.screens.md})`);
+ const { data, error } = useSWR(`user/${type}?pageSize=10`);
+ const items = useFormattedFilesData(data?.items || []);
+
+ const setFilter = (name, value) => console.log("filter", name, "set to", value);
+
+ if (!items.length) {
+ return (
+
+ {/* TODO: proper error message */}
+ {!data && !error &&
}
+ {!data && error &&
An error occurred while loading this data.
}
+ {data &&
No {type} found.
}
+
+ );
+ }
+
+ return (
+
+
+
}
+ onChange={console.log.bind(console)}
+ />
+
+
setFilter("showSmallFiles", value)} className="mr-8">
+
+ Show small files
+
+
+
+ File type:
+
+
+
+ Sort:
+
+
+
+
+ {/* TODO: mobile view (it's not tabular) */}
+ {isMediumScreenOrLarger ?
: "Mobile view"}
+
+ );
+};
+
+export default FileList;
diff --git a/packages/dashboard-v2/src/components/FileList/FileTable.js b/packages/dashboard-v2/src/components/FileList/FileTable.js
new file mode 100644
index 00000000..90c9600f
--- /dev/null
+++ b/packages/dashboard-v2/src/components/FileList/FileTable.js
@@ -0,0 +1,111 @@
+import { CogIcon, ShareIcon } from "../Icons";
+import { PopoverMenu } from "../PopoverMenu/PopoverMenu";
+import { Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow } from "../Table";
+import { CopyButton } from "../CopyButton";
+
+const buildShareMenu = (item) => {
+ return [
+ {
+ label: "Facebook",
+ callback: () => {
+ console.info("share to Facebook", item);
+ },
+ },
+ {
+ label: "Twitter",
+ callback: () => {
+ console.info("share to Twitter", item);
+ },
+ },
+ {
+ label: "Discord",
+ callback: () => {
+ console.info("share to Discord", item);
+ },
+ },
+ ];
+};
+
+const buildOptionsMenu = (item) => {
+ return [
+ {
+ label: "Preview",
+ callback: () => {
+ console.info("preview", item);
+ },
+ },
+ {
+ label: "Download",
+ callback: () => {
+ console.info("download", item);
+ },
+ },
+ {
+ label: "Unpin",
+ callback: () => {
+ console.info("unpin", item);
+ },
+ },
+ {
+ label: "Report",
+ callback: () => {
+ console.info("report", item);
+ },
+ },
+ ];
+};
+
+export default function FileTable({ items }) {
+ return (
+
+
+
+ Name
+ Type
+
+ Size
+
+ Uploaded
+ Skylink
+ Activity
+
+
+
+ {items.map((item) => {
+ const { id, name, type, size, date, skylink } = item;
+
+ return (
+
+ {name}
+ {type}
+
+ {size}
+
+ {date}
+
+
+
+ {skylink}
+
+
+
+
+
+
+ );
+ })}
+
+
+ );
+}
diff --git a/packages/dashboard-v2/src/components/FileList/index.js b/packages/dashboard-v2/src/components/FileList/index.js
new file mode 100644
index 00000000..93296508
--- /dev/null
+++ b/packages/dashboard-v2/src/components/FileList/index.js
@@ -0,0 +1 @@
+export * from "./FileList";
diff --git a/packages/dashboard-v2/src/components/FileList/useFormattedFilesData.js b/packages/dashboard-v2/src/components/FileList/useFormattedFilesData.js
new file mode 100644
index 00000000..82d95090
--- /dev/null
+++ b/packages/dashboard-v2/src/components/FileList/useFormattedFilesData.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 useFormattedFilesData = (items) => useMemo(() => items.map(formatItem), [items]);
+
+export default useFormattedFilesData;
diff --git a/packages/dashboard-v2/src/pages/files.js b/packages/dashboard-v2/src/pages/files.js
index 348a95b3..197cc031 100644
--- a/packages/dashboard-v2/src/pages/files.js
+++ b/packages/dashboard-v2/src/pages/files.js
@@ -2,8 +2,28 @@ import * as React from "react";
import DashboardLayout from "../layouts/DashboardLayout";
+import { Panel } from "../components/Panel";
+import { Tab, TabPanel, Tabs } from "../components/Tabs";
+import FileList from "../components/FileList/FileList";
+import { useSearchParam } from "react-use";
+
const FilesPage = () => {
- return <>FILES>;
+ const defaultTab = useSearchParam("tab");
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
};
FilesPage.Layout = DashboardLayout;