diff --git a/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js b/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js
index 3f6f23c2..de4e7e46 100644
--- a/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js
+++ b/packages/dashboard-v2/src/components/CurrentUsage/UsageGraph.js
@@ -1,9 +1,11 @@
import styled from "styled-components";
+import usageGraphBg from "../../../static/images/usage-graph-bg.svg";
+
export const UsageGraph = styled.div.attrs({
className: "w-full my-3 grid grid-flow-row grid-rows-2",
})`
height: 146px;
- background: url(/images/usage-graph-bg.svg) no-repeat;
+ background: url(${usageGraphBg}) no-repeat;
background-size: cover;
`;
diff --git a/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js b/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js
index 86cbad5f..1bf6f001 100644
--- a/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js
+++ b/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js
@@ -7,13 +7,10 @@ import { ChevronDownIcon } from "../Icons";
const dropDown = keyframes`
0% {
- transform: scaleY(0);
- }
- 80% {
- transform: scaleY(1.1);
+ transform: rotateX(-90deg);
}
100% {
- transform: scaleY(1);
+ transform: rotateX(0deg);
}
`;
@@ -35,10 +32,11 @@ const Flyout = styled.div.attrs(({ open }) => ({
bg-white shadow-md shadow-palette-200/50
${open ? "visible" : "invisible"}`,
}))`
+ transform-origin: top center;
animation: ${({ open }) =>
open
? css`
- ${dropDown} 0.1s ease-in-out
+ ${dropDown} .15s ease-in-out forwards;
`
: "none"};
`;
diff --git a/packages/dashboard-v2/src/components/FileList/FileList.js b/packages/dashboard-v2/src/components/FileList/FileList.js
index 6342b970..ad6087ed 100644
--- a/packages/dashboard-v2/src/components/FileList/FileList.js
+++ b/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 (
- {/* TODO: proper error message */}
{!data && !error &&
}
{!data && error &&
An error occurred while loading this data.
}
{data &&
No {type} found.
}
@@ -32,42 +43,14 @@ const FileList = ({ type }) => {
}
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"}
-
+ <>
+ {isMediumScreenOrLarger ? (
+
+ ) : (
+
+ )}
+
+
);
};
diff --git a/packages/dashboard-v2/src/components/FileList/FileTable.js b/packages/dashboard-v2/src/components/FileList/FileTable.js
index 90c9600f..88477648 100644
--- a/packages/dashboard-v2/src/components/FileList/FileTable.js
+++ b/packages/dashboard-v2/src/components/FileList/FileTable.js
@@ -2,110 +2,78 @@ 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) => {
- 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 SkylinkOptionsMenu = ({ skylink, onUpdated }) => {
+ const { inProgress, options } = useSkylinkOptions({ skylink, onUpdated });
-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}
-
-
-
-
-
-
- );
- })}
-
-
+const SkylinkSharingMenu = ({ skylink }) => {
+ const { options } = useSkylinkSharing(skylink);
+
+ return (
+
+
+
+ );
+};
+
+export default function FileTable({ items, onUpdated }) {
+ 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/MobileFileList.js b/packages/dashboard-v2/src/components/FileList/MobileFileList.js
new file mode 100644
index 00000000..bd11aa10
--- /dev/null
+++ b/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 (
+
+ {options.map(({ label, callback }, index) => (
+
+ ))}
+
+ );
+};
+
+const OptionsMenu = ({ skylink, onUpdated }) => {
+ const { inProgress, options } = useSkylinkOptions({ skylink, onUpdated });
+
+ return (
+
+
+ {options.map(({ label, callback }, index) => (
+
+ ))}
+
+ {inProgress && (
+
+ )}
+
+ );
+};
+
+const ListItem = ({ item, onUpdated }) => {
+ const { name, type, size, date, skylink } = item;
+ const [open, setOpen] = useState(false);
+
+ const toggle = () => setOpen((open) => !open);
+
+ return (
+
+
+
+
{name}
+
+ {type}
+ {size}
+ {date}
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export const MobileFileList = ({ items, onUpdated }) => {
+ return (
+
+ {items.map((item) => (
+
+ ))}
+
+ );
+};
diff --git a/packages/dashboard-v2/src/components/FileList/Pagination.js b/packages/dashboard-v2/src/components/FileList/Pagination.js
new file mode 100644
index 00000000..248c03a3
--- /dev/null
+++ b/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 (
+
+ );
+};
diff --git a/packages/dashboard-v2/src/components/FileList/useFormattedFilesData.js b/packages/dashboard-v2/src/components/FileList/useFormattedFilesData.js
index 82d95090..10639458 100644
--- a/packages/dashboard-v2/src/components/FileList/useFormattedFilesData.js
+++ b/packages/dashboard-v2/src/components/FileList/useFormattedFilesData.js
@@ -1,6 +1,7 @@
import { useMemo } from "react";
-import prettyBytes from "pretty-bytes";
import dayjs from "dayjs";
+import { DATE_FORMAT } from "../../lib/config";
+import humanBytes from "../../lib/humanBytes";
const parseFileName = (fileName) => {
const lastDotIndex = Math.max(0, fileName.lastIndexOf(".")) || Infinity;
@@ -10,12 +11,12 @@ const parseFileName = (fileName) => {
const formatItem = ({ size, name: rawFileName, uploadedOn, downloadedOn, ...rest }) => {
const [name, type] = parseFileName(rawFileName);
- const date = dayjs(uploadedOn || downloadedOn).format("MM/DD/YYYY; HH:MM");
+ const date = dayjs(uploadedOn || downloadedOn).format(DATE_FORMAT);
return {
...rest,
date,
- size: prettyBytes(size),
+ size: humanBytes(size, { precision: 2 }),
type,
name,
};
diff --git a/packages/dashboard-v2/src/components/FileList/useSkylinkOptions.js b/packages/dashboard-v2/src/components/FileList/useSkylinkOptions.js
new file mode 100644
index 00000000..ad116cd4
--- /dev/null
+++ b/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,
+ };
+};
diff --git a/packages/dashboard-v2/src/components/FileList/useSkylinkSharing.js b/packages/dashboard-v2/src/components/FileList/useSkylinkSharing.js
new file mode 100644
index 00000000..0b09302b
--- /dev/null
+++ b/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,
+ };
+};
diff --git a/packages/dashboard-v2/src/components/Footer/Footer.js b/packages/dashboard-v2/src/components/Footer/Footer.js
index 501d502d..8096337a 100644
--- a/packages/dashboard-v2/src/components/Footer/Footer.js
+++ b/packages/dashboard-v2/src/components/Footer/Footer.js
@@ -1,8 +1,19 @@
import * as React from "react";
+import styled from "styled-components";
+
import { PageContainer } from "../PageContainer";
+const FooterLink = styled.a.attrs({
+ className: "text-palette-400 underline decoration-dotted decoration-offset-4 decoration-1",
+ rel: "noreferrer",
+ target: "_blank",
+})``;
+
export const Footer = () => (
- © Skynet Labs Inc. All rights reserved.
+
+ Made by Skynet Labs. Open-sourced{" "}
+ on Github.
+
);
diff --git a/packages/dashboard-v2/src/components/HighlightedLink.js b/packages/dashboard-v2/src/components/HighlightedLink.js
index 5fa6b079..f189b98b 100644
--- a/packages/dashboard-v2/src/components/HighlightedLink.js
+++ b/packages/dashboard-v2/src/components/HighlightedLink.js
@@ -2,5 +2,5 @@ import { Link } from "gatsby";
import styled from "styled-components";
export default styled(Link).attrs({
- className: "text-primary underline-offset-3 decoration-dotted hover:text-primary-light hover:underline",
+ className: "text-primary underline-offset-2 decoration-1 decoration-dotted hover:text-primary-light hover:underline",
})``;
diff --git a/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js b/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
index 345a2daa..3bea206f 100644
--- a/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
+++ b/packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js
@@ -3,12 +3,13 @@ import useSWR from "swr";
import { Table, TableBody, TableCell, TableRow } from "../Table";
import { ContainerLoadingIndicator } from "../LoadingIndicator";
+import useFormattedFilesData from "../FileList/useFormattedFilesData";
-import useFormattedActivityData from "./useFormattedActivityData";
+import { ViewAllLink } from "./ViewAllLink";
export default function ActivityTable({ type }) {
const { data, error } = useSWR(`user/${type}?pageSize=3`);
- const items = useFormattedActivityData(data?.items || []);
+ const items = useFormattedFilesData(data?.items || []);
if (!items.length) {
return (
@@ -22,20 +23,23 @@ export default function ActivityTable({ type }) {
}
return (
-
-
- {items.map(({ id, name, type, size, date, skylink }) => (
-
- {name}
- {type}
-
- {size}
-
- {date}
- {skylink}
-
- ))}
-
-
+ <>
+
+
+ {items.map(({ id, name, type, size, date, skylink }) => (
+
+ {name}
+ {type}
+
+ {size}
+
+ {date}
+ {skylink}
+
+ ))}
+
+
+
+
);
}
diff --git a/packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js b/packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js
index 87825661..627314b7 100644
--- a/packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js
+++ b/packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js
@@ -1,36 +1,13 @@
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";
-const ViewAllLink = (props) => (
-
-
-
-
-
View all
-
-);
-
export default function LatestActivity() {
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
);
}
diff --git a/packages/dashboard-v2/src/components/LatestActivity/ViewAllLink.js b/packages/dashboard-v2/src/components/LatestActivity/ViewAllLink.js
new file mode 100644
index 00000000..2cee28ea
--- /dev/null
+++ b/packages/dashboard-v2/src/components/LatestActivity/ViewAllLink.js
@@ -0,0 +1,12 @@
+import { Link } from "gatsby";
+
+import { ArrowRightIcon } from "../Icons";
+
+export const ViewAllLink = (props) => (
+
+
+
+
+ View all
+
+);
diff --git a/packages/dashboard-v2/src/components/LatestActivity/useFormattedActivityData.js b/packages/dashboard-v2/src/components/LatestActivity/useFormattedActivityData.js
deleted file mode 100644
index cf55703c..00000000
--- a/packages/dashboard-v2/src/components/LatestActivity/useFormattedActivityData.js
+++ /dev/null
@@ -1,26 +0,0 @@
-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;
diff --git a/packages/dashboard-v2/src/components/Metadata/Metadata.js b/packages/dashboard-v2/src/components/Metadata/Metadata.js
new file mode 100644
index 00000000..0e1dd2b6
--- /dev/null
+++ b/packages/dashboard-v2/src/components/Metadata/Metadata.js
@@ -0,0 +1,42 @@
+import { Helmet } from "react-helmet";
+import { graphql, useStaticQuery } from "gatsby";
+
+import favicon from "../../../static/favicon.ico";
+import favicon16 from "../../../static/favicon-16x16.png";
+import favicon32 from "../../../static/favicon-32x32.png";
+import appleIcon144 from "../../../static/apple-touch-icon-144x144.png";
+import appleIcon152 from "../../../static/apple-touch-icon-152x152.png";
+import msTileIcon from "../../../static/mstile-144x144.png";
+
+export const Metadata = ({ children }) => {
+ const { site } = useStaticQuery(
+ graphql`
+ query Q {
+ site {
+ siteMetadata {
+ title
+ }
+ }
+ }
+ `
+ );
+
+ const { title } = site.siteMetadata;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+ );
+};
diff --git a/packages/dashboard-v2/src/components/Metadata/index.js b/packages/dashboard-v2/src/components/Metadata/index.js
new file mode 100644
index 00000000..8abb6696
--- /dev/null
+++ b/packages/dashboard-v2/src/components/Metadata/index.js
@@ -0,0 +1 @@
+export * from "./Metadata";
diff --git a/packages/dashboard-v2/src/components/Modal/Modal.js b/packages/dashboard-v2/src/components/Modal/Modal.js
index c183e190..ac7bd98e 100644
--- a/packages/dashboard-v2/src/components/Modal/Modal.js
+++ b/packages/dashboard-v2/src/components/Modal/Modal.js
@@ -11,7 +11,7 @@ export const Modal = ({ children, className, onClose }) => (
-