feat(dashboard-v2): add sharing features, pagination and mobile view for /files page

packages/dashboard-v2/src/components/FileList/FileList.js

@@ -1,29 +1,40 @@
-import * as React from "react";
+import { useState } 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";
+import { MobileFileList } from "./MobileFileList";
+import { Pagination } from "./Pagination";
+
+const PAGE_SIZE = 10;
 
 const FileList = ({ type }) => {
   const isMediumScreenOrLarger = useMedia(`(min-width: ${theme.screens.md})`);
-  const { data, error } = useSWR(`user/${type}?pageSize=10`);
+  const [offset, setOffset] = useState(0);
+  const baseUrl = `user/${type}?pageSize=${PAGE_SIZE}`;
+  const {
+    data,
+    error,
+    mutate: refreshList,
+  } = useSWR(`${baseUrl}&offset=${offset}`, {
+    revalidateOnMount: true,
+  });
   const items = useFormattedFilesData(data?.items || []);
+  const count = data?.count || 0;
 
-  const setFilter = (name, value) => console.log("filter", name, "set to", value);
+  // Next page preloading
+  const hasMoreRecords = data ? data.offset + data.pageSize < data.count : false;
+  const nextPageOffset = hasMoreRecords ? data.offset + data.pageSize : offset;
+  useSWR(`${baseUrl}&offset=${nextPageOffset}`);
 
   if (!items.length) {
     return (
       <div className="flex w-full h-full justify-center items-center text-palette-400">
-        {/* TODO: proper error message */}
         {!data && !error && <ContainerLoadingIndicator />}
         {!data && error && <p>An error occurred while loading this data.</p>}
         {data && <p>No {type} found.</p>}
@@ -32,42 +43,14 @@ const FileList = ({ type }) => {
   }
 
   return (
-    <div className="flex flex-col gap-4 pt-4">
+    <>
-      <div className="flex flex-col gap-4 lg:flex-row justify-between items-center">
+      {isMediumScreenOrLarger ? (
-        <TextInputIcon
+        <FileTable onUpdated={refreshList} items={items} />
-          className="w-full lg:w-[280px] xl:w-[420px]"
+      ) : (
-          placeholder="Search"
+        <MobileFileList items={items} onUpdated={refreshList} />
-          icon={<SearchIcon size={20} />}
+      )}
-          onChange={console.log.bind(console)}
+      <Pagination count={count} offset={offset} setOffset={setOffset} pageSize={PAGE_SIZE} />
-        />
+    </>
-        <div className="flex flex-row items-center uppercase font-light text-sm gap-4">
-          <Switch onChange={(value) => setFilter("showSmallFiles", value)} className="mr-8">
-            <span className="underline decoration-dashed underline-offset-2 decoration-2 decoration-gray-300">
-              Show small files
-            </span>
-          </Switch>
-          <div>
-            <span className="pr-2">File type:</span>
-            <Select onChange={(value) => setFilter("type", value)}>
-              <SelectOption value="all" label="All" />
-              <SelectOption value="mp4" label=".mp4" />
-              <SelectOption value="pdf" label=".pdf" />
-            </Select>
-          </div>
-          <div>
-            <span className="pr-2">Sort:</span>
-            <Select onChange={(value) => setFilter("type", value)}>
-              <SelectOption value="size-desc" label="Biggest size" />
-              <SelectOption value="size-asc" label="Smallest size" />
-              <SelectOption value="date-desc" label="Latest" />
-              <SelectOption value="date-asc" label="Oldest" />
-            </Select>
-          </div>
-        </div>
-      </div>
-      {/* TODO: mobile view (it's not tabular) */}
-      {isMediumScreenOrLarger ? <FileTable items={items} /> : "Mobile view"}
-    </div>
   );
 };
 

packages/dashboard-v2/src/components/FileList/FileTable.js

@@ -2,72 +2,47 @@ import { CogIcon, ShareIcon } from "../Icons";
 import { PopoverMenu } from "../PopoverMenu/PopoverMenu";
 import { Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow } from "../Table";
 import { CopyButton } from "../CopyButton";
+import { useSkylinkOptions } from "./useSkylinkOptions";
+import { useSkylinkSharing } from "./useSkylinkSharing";
 
-const buildShareMenu = (item) => {
+const SkylinkOptionsMenu = ({ skylink, onUpdated }) => {
-  return [
+  const { inProgress, options } = useSkylinkOptions({ skylink, onUpdated });
-    {
-      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 (
+    <PopoverMenu inProgress={inProgress} options={options} openClassName="text-primary">
+      <button aria-label="Manage this skylink">
+        <CogIcon />
+      </button>
+    </PopoverMenu>
+  );
+};
+
+const SkylinkSharingMenu = ({ skylink }) => {
+  const { options } = useSkylinkSharing(skylink);
+
+  return (
+    <PopoverMenu options={options} openClassName="text-primary">
+      <button aria-label="Share this skylink">
+        <ShareIcon size={22} />
+      </button>
+    </PopoverMenu>
+  );
+};
+
+export default function FileTable({ items, onUpdated }) {
+  return (
+    <div className="flex flex-col gap-4">
       <Table style={{ tableLayout: "fixed" }}>
         <TableHead>
           <TableRow noHoverEffect>
-          <TableHeadCell className="w-[240px] xl:w-[360px]">Name</TableHeadCell>
+            <TableHeadCell className="w-[180px] xl:w-[360px]">Name</TableHeadCell>
             <TableHeadCell className="w-[80px]">Type</TableHeadCell>
-          <TableHeadCell className="w-[80px]" align="right">
+            <TableHeadCell className="w-[100px]" align="right">
               Size
             </TableHeadCell>
-          <TableHeadCell className="w-[180px]">Uploaded</TableHeadCell>
+            <TableHeadCell className="w-[160px]">Uploaded</TableHeadCell>
             <TableHeadCell className="hidden lg:table-cell">Skylink</TableHeadCell>
-          <TableHeadCell className="w-[100px]">Activity</TableHeadCell>
+            <TableHeadCell className="w-[90px]">Activity</TableHeadCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -76,30 +51,22 @@ export default function FileTable({ items }) {
 
             return (
               <TableRow key={id}>
-              <TableCell className="w-[240px] xl:w-[360px]">{name}</TableCell>
+                <TableCell className="w-[180px] xl:w-[360px]">{name}</TableCell>
                 <TableCell className="w-[80px]">{type}</TableCell>
-              <TableCell className="w-[80px]" align="right">
+                <TableCell className="w-[100px]" align="right">
                   {size}
                 </TableCell>
-              <TableCell className="w-[180px]">{date}</TableCell>
+                <TableCell className="w-[160px]">{date}</TableCell>
                 <TableCell className="hidden lg:table-cell pr-6 !overflow-visible">
                   <div className="flex items-center">
                     <CopyButton value={skylink} className="mr-2" aria-label="Copy skylink" />
                     <span className="w-full inline-block truncate">{skylink}</span>
                   </div>
                 </TableCell>
-              <TableCell className="w-[100px] !overflow-visible">
+                <TableCell className="w-[90px] !overflow-visible">
                   <div className="flex text-palette-600 gap-4">
-                  <PopoverMenu options={buildShareMenu(item)} openClassName="text-primary">
+                    <SkylinkOptionsMenu skylink={skylink} onUpdated={onUpdated} />
-                    <button aria-label="Share this skylink">
+                    <SkylinkSharingMenu skylink={skylink} />
-                      <ShareIcon size={22} />
-                    </button>
-                  </PopoverMenu>
-                  <PopoverMenu options={buildOptionsMenu(item)} openClassName="text-primary">
-                    <button aria-label="Manage this skylink">
-                      <CogIcon />
-                    </button>
-                  </PopoverMenu>
                   </div>
                 </TableCell>
               </TableRow>
@@ -107,5 +74,6 @@ export default function FileTable({ items }) {
           })}
         </TableBody>
       </Table>
+    </div>
   );
 }

packages/dashboard-v2/src/components/FileList/MobileFileList.js

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import cn from "classnames";
+
+import { ChevronDownIcon } from "../Icons";
+import { useSkylinkSharing } from "./useSkylinkSharing";
+import { ContainerLoadingIndicator } from "../LoadingIndicator";
+import { useSkylinkOptions } from "./useSkylinkOptions";
+
+const SharingMenu = ({ skylink }) => {
+  const { options } = useSkylinkSharing(skylink);
+
+  return (
+    <div className="flex flex-col gap-4 bg-white px-4 py-6 w-1/2">
+      {options.map(({ label, callback }, index) => (
+        <button key={index} className="uppercase text-left" onClick={callback}>
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+const OptionsMenu = ({ skylink, onUpdated }) => {
+  const { inProgress, options } = useSkylinkOptions({ skylink, onUpdated });
+
+  return (
+    <div className={cn("relative px-4 py-6 w-1/2", { "bg-primary/10": !inProgress })}>
+      <div className={cn("flex flex-col gap-4", { "opacity-0": inProgress })}>
+        {options.map(({ label, callback }, index) => (
+          <button key={index} className="uppercase text-left" onClick={callback}>
+            {label}
+          </button>
+        ))}
+      </div>
+      {inProgress && (
+        <ContainerLoadingIndicator className="absolute inset-0 !p-0 z-50 bg-primary/10 !text-palette-200" />
+      )}
+    </div>
+  );
+};
+
+const ListItem = ({ item, onUpdated }) => {
+  const { name, type, size, date, skylink } = item;
+  const [open, setOpen] = useState(false);
+
+  const toggle = () => setOpen((open) => !open);
+
+  return (
+    <div className={cn("p-4 flex flex-col bg-palette-100", { "bg-opacity-50": !open })}>
+      <div className="flex items-center gap-4 justify-between">
+        <div className="info flex flex-col gap-2 truncate">
+          <div className="truncate">{name}</div>
+          <div className="flex divide-x divide-palette-200 text-xs">
+            <span className="px-1">{type}</span>
+            <span className="px-1">{size}</span>
+            <span className="px-1">{date}</span>
+          </div>
+        </div>
+        <button onClick={toggle}>
+          <ChevronDownIcon className={cn("transition-[transform]", { "-scale-100": open })} />
+        </button>
+      </div>
+      <div
+        className={cn(
+          "flex transition-[max-height_padding] overflow-hidden text-xs text-left font-sans tracking-normal",
+          { "pt-4 max-h-[150px]": open, "pt-0 max-h-0": !open }
+        )}
+      >
+        <SharingMenu skylink={skylink} />
+        <OptionsMenu skylink={skylink} onUpdated={onUpdated} />
+      </div>
+    </div>
+  );
+};
+
+export const MobileFileList = ({ items, onUpdated }) => {
+  return (
+    <div className="flex flex-col gap-2">
+      {items.map((item) => (
+        <ListItem key={item.id} item={item} onUpdated={onUpdated} />
+      ))}
+    </div>
+  );
+};

packages/dashboard-v2/src/components/FileList/Pagination.js

@@ -0,0 +1,32 @@
+import { Button } from "../Button";
+
+export const Pagination = ({ count, offset, setOffset, pageSize }) => {
+  const start = count ? offset + 1 : 0;
+  const end = offset + pageSize > count ? count : offset + pageSize;
+
+  const showPaginationButtons = offset > 0 || count > end;
+
+  return (
+    <nav className="px-4 py-3 flex items-center justify-between" aria-label="Pagination">
+      <div className="hidden sm:block">
+        <p className="text-sm text-gray-700">
+          Showing {start} to {end} of {count} results
+        </p>
+      </div>
+      {showPaginationButtons && (
+        <div className="flex-1 flex justify-between sm:justify-end space-x-3">
+          <Button disabled={offset - pageSize < 0} onClick={() => setOffset(offset - pageSize)} className="!border-0">
+            Previous page
+          </Button>
+          <Button
+            disabled={offset + pageSize >= count}
+            onClick={() => setOffset(offset + pageSize)}
+            className="!border-0"
+          >
+            Next page
+          </Button>
+        </div>
+      )}
+    </nav>
+  );
+};

packages/dashboard-v2/src/components/FileList/useSkylinkOptions.js

@@ -0,0 +1,35 @@
+import { useMemo, useState } from "react";
+
+import accountsService from "../../services/accountsService";
+import skynetClient from "../../services/skynetClient";
+
+export const useSkylinkOptions = ({ skylink, onUpdated }) => {
+  const [inProgress, setInProgress] = useState(false);
+
+  const options = useMemo(
+    () => [
+      {
+        label: "Preview",
+        callback: async () => window.open(await skynetClient.getSkylinkUrl(skylink)),
+      },
+      {
+        label: "Download",
+        callback: () => skynetClient.downloadFile(skylink),
+      },
+      {
+        label: "Unpin",
+        callback: async () => {
+          setInProgress(true);
+          await accountsService.delete(`user/uploads/${skylink}`);
+          await onUpdated(); // No need to setInProgress(false), since at this point this hook should already be unmounted
+        },
+      },
+    ],
+    [skylink, onUpdated]
+  );
+
+  return {
+    inProgress,
+    options,
+  };
+};

packages/dashboard-v2/src/components/FileList/useSkylinkSharing.js

@@ -0,0 +1,40 @@
+import { useEffect, useMemo, useState } from "react";
+import copy from "copy-text-to-clipboard";
+
+import skynetClient from "../../services/skynetClient";
+
+const COPY_LINK_LABEL = "Copy link";
+
+export const useSkylinkSharing = (skylink) => {
+  const [copied, setCopied] = useState(false);
+  const [copyLabel, setCopyLabel] = useState(COPY_LINK_LABEL);
+
+  useEffect(() => {
+    if (copied) {
+      setCopyLabel("Copied!");
+
+      const timeout = setTimeout(() => setCopied(false), 1500);
+
+      return () => clearTimeout(timeout);
+    } else {
+      setCopyLabel(COPY_LINK_LABEL);
+    }
+  }, [copied]);
+
+  const options = useMemo(
+    () => [
+      {
+        label: copyLabel,
+        callback: async () => {
+          setCopied(true);
+          copy(await skynetClient.getSkylinkUrl(skylink));
+        },
+      },
+    ],
+    [skylink, copyLabel]
+  );
+
+  return {
+    options,
+  };
+};

packages/dashboard-v2/src/components/PopoverMenu/PopoverMenu.js

@@ -2,6 +2,9 @@ import { Children, cloneElement, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { useClickAway } from "react-use";
 import styled, { css, keyframes } from "styled-components";
+import cn from "classnames";
+
+import { ContainerLoadingIndicator } from "../LoadingIndicator";
 
 const dropDown = keyframes`
   0% {
@@ -41,15 +44,15 @@ const Option = styled.li.attrs({
               hover:before:content-['']`,
 })``;
 
-export const PopoverMenu = ({ options, children, openClassName, ...props }) => {
+export const PopoverMenu = ({ options, children, openClassName, inProgress, ...props }) => {
   const containerRef = useRef();
   const [open, setOpen] = useState(false);
 
   useClickAway(containerRef, () => setOpen(false));
 
-  const handleChoice = (callback) => () => {
+  const handleChoice = (callback) => async () => {
+    await callback();
     setOpen(false);
-    callback();
   };
 
   return (
@@ -62,11 +65,16 @@ export const PopoverMenu = ({ options, children, openClassName, ...props }) => {
       )}
       {open && (
         <Flyout>
+          <div className={cn("relative", { "opacity-50": inProgress })}>
             {options.map(({ label, callback }) => (
               <Option key={label} onClick={handleChoice(callback)}>
                 {label}
               </Option>
             ))}
+            {inProgress && (
+              <ContainerLoadingIndicator className="absolute inset-0 !p-0 z-50 bg-white !text-palette-300" />
+            )}
+          </div>
         </Flyout>
       )}
     </Container>
@@ -87,4 +95,9 @@ PopoverMenu.propTypes = {
       callback: PropTypes.func.isRequired,
     })
   ).isRequired,
+
+  /**
+   * If true, a loading icon will be displayed to signal an async action is taking place.
+   */
+  inProgress: PropTypes.bool,
 };

packages/dashboard-v2/src/pages/files.js

@@ -12,7 +12,7 @@ const FilesPage = () => {
       <Metadata>
         <title>Files</title>
       </Metadata>
-      <Panel title="Files">
+      <Panel title="Uploads">
         <FileList type="uploads" />
       </Panel>
     </>

packages/dashboard-v2/tailwind.config.js

@@ -29,6 +29,7 @@ module.exports = {
     textColor: (theme) => ({ ...theme("colors"), ...colors }),
     placeholderColor: (theme) => ({ ...theme("colors"), ...colors }),
     outlineColor: (theme) => ({ ...theme("colors"), ...colors }),
+    divideColor: (theme) => ({ ...theme("colors"), ...colors }),
     extend: {
       fontFamily: {
         sans: ["Sora", ...defaultTheme.fontFamily.sans],