From 0c59cc27c162ff2d1f48c2fa32812705d06bc56f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 23 Feb 2022 11:49:36 +0100
Subject: [PATCH] feat(dashboard-v2): add ActivityTable component

---
 .../LatestActivity/ActivityTable.js           | 22 ++++++++
 .../LatestActivity/LatestActivity.js          | 24 +++++++++
 .../src/components/LatestActivity/index.js    |  3 ++
 .../LatestActivity/useActivityData.js         | 54 +++++++++++++++++++
 4 files changed, 103 insertions(+)
 create mode 100644 packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
 create mode 100644 packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js
 create mode 100644 packages/dashboard-v2/src/components/LatestActivity/index.js
 create mode 100644 packages/dashboard-v2/src/components/LatestActivity/useActivityData.js

diff --git a/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js b/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
new file mode 100644
index 00000000..c7c9c550
--- /dev/null
+++ b/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Table, TableBody, TableCell, TableRow } from "../Table";
+
+export default function ActivityTable({ data }) {
+  return (
+    <Table style={{ tableLayout: "fixed" }}>
+      <TableBody>
+        {data.map(({ name, type, size, uploaded, skylink }) => (
+          <TableRow key={skylink}>
+            <TableCell>{name}</TableCell>
+            <TableCell width="80px">{type}</TableCell>
+            <TableCell width="80px" align="right">
+              {size}
+            </TableCell>
+            <TableCell width="180px">{uploaded}</TableCell>
+            <TableCell>{skylink}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js b/packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js
new file mode 100644
index 00000000..7e7fdf6c
--- /dev/null
+++ b/packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js
@@ -0,0 +1,24 @@
+import * as React from "react";
+import { Panel } from "../Panel";
+import { Tab, TabPanel, Tabs } from "../Tabs";
+import ActivityTable from "./ActivityTable";
+import useRecentActivityData from "./useActivityData";
+
+export default function LatestActivity() {
+  const { downloads, uploads } = useRecentActivityData();
+
+  return (
+    <Panel title="Latest activity">
+      <Tabs>
+        <Tab id="uploads" title="Uploads" />
+        <Tab id="downloads" title="Downloads" />
+        <TabPanel tabId="uploads" className="pt-4">
+          <ActivityTable data={uploads} />
+        </TabPanel>
+        <TabPanel tabId="downloads" className="pt-4">
+          <ActivityTable data={downloads} />
+        </TabPanel>
+      </Tabs>
+    </Panel>
+  );
+}
diff --git a/packages/dashboard-v2/src/components/LatestActivity/index.js b/packages/dashboard-v2/src/components/LatestActivity/index.js
new file mode 100644
index 00000000..32a02f82
--- /dev/null
+++ b/packages/dashboard-v2/src/components/LatestActivity/index.js
@@ -0,0 +1,3 @@
+import LatestActivity from "./LatestActivity";
+
+export default LatestActivity;
diff --git a/packages/dashboard-v2/src/components/LatestActivity/useActivityData.js b/packages/dashboard-v2/src/components/LatestActivity/useActivityData.js
new file mode 100644
index 00000000..a262816e
--- /dev/null
+++ b/packages/dashboard-v2/src/components/LatestActivity/useActivityData.js
@@ -0,0 +1,54 @@
+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,
+  };
+}