Feature: Use updated FileUploader from evergreen (#102)

* Bump evergreen to 6.9.0

* Port over multiple upload FileUploader implementation from evergreen docs

* Bump collation to 0.7.1

* Begin building out custom FileCard

* Swap FileListItem component with FileCard, wire up delete + dialog

* Add 'Flex' row/column components

* Break out useTimeoutRender hook for getting around react-query issue, re-implement file upload

* Properly handle API call per file + loading state for upload button

* Reinstate border in Input style

* Remove old FileUpload and FileListItem components

* Break out wrapper <IconButton /> for larger spinner when loading

Author: brandongregoryscott

package-lock.json

@@ -14,8 +14,9 @@
     "dependencies": {
         "@octokit/rest": "18.12.0",
         "@supabase/supabase-js": "1.24.0",
-        "evergreen-ui": "6.7.1",
+        "evergreen-ui": "6.9.0",
         "glamor": "2.20.40",
+        "humanize-plus": "1.8.2",
         "immutable": "4.0.0",
         "jotai": "1.5.2",
         "keymirror": "0.1.1",
@@ -45,6 +46,7 @@
         "@testing-library/user-event": "12.8.3",
         "@types/chalk": "2.2.0",
         "@types/dotenv": "8.2.0",
+        "@types/humanize-plus": "1.8.0",
         "@types/jest": "26.0.24",
         "@types/keymirror": "0.1.1",
         "@types/lodash": "4.14.172",
@@ -58,7 +60,7 @@
         "@types/react-router-dom": "5.1.8",
         "@types/uuid": "8.3.1",
         "chalk": "4.1.2",
-        "collation": "0.7.0",
+        "collation": "0.7.1",
         "dotenv": "10.0.0",
         "husky": "7.0.4",
         "node-pg-migrate": "6.0.0",

package.json

@@ -0,0 +1,115 @@
+import {
+    majorScale,
+    MusicIcon,
+    Pane,
+    FileCardProps as EvergreenFileCardProps,
+    Paragraph,
+    TrashIcon,
+    CogIcon,
+    minorScale,
+} from "evergreen-ui";
+import { useTheme } from "utils/hooks/use-theme";
+import humanize from "humanize-plus";
+import { useDeleteFile } from "utils/hooks/domain/files/use-delete-file";
+import { FileRecord } from "models/file-record";
+import { StorageProviderFileRecord } from "models/storage-provider-file-record";
+import { useCallback } from "react";
+import { useBoolean } from "utils/hooks/use-boolean";
+import { FileDialog } from "components/files/file-dialog";
+import { Flex } from "components/flex";
+import { IconButton } from "components/icon-button";
+
+interface FileCardProps
+    extends Omit<EvergreenFileCardProps, "name" | "type" | "sizeInBytes"> {
+    file: FileRecord;
+    storageProviderFile: StorageProviderFileRecord;
+}
+
+const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
+    const { file, storageProviderFile } = props;
+    const {
+        value: isOpen,
+        setTrue: handleOpenDialog,
+        setFalse: handleCloseDialog,
+    } = useBoolean(false);
+    const { mutate, isLoading } = useDeleteFile();
+    const handleDelete = useCallback(() => mutate(file.id), [file.id, mutate]);
+    const { colors } = useTheme();
+    const { name, size } = file;
+    return (
+        <Flex.Row
+            alignItems="center"
+            border={true}
+            borderColor={colors.gray400}
+            borderRadius={minorScale(1)}
+            height={majorScale(8)}
+            justifyContent="space-between"
+            marginBottom={majorScale(2)}
+            marginRight={majorScale(2)}
+            maxWidth={majorScale(40)}
+            width="100%">
+            <Flex.Row justifyContent="flex-start">
+                <Flex.Row alignItems="center">
+                    <Pane
+                        marginLeft={majorScale(2)}
+                        marginRight={majorScale(1)}>
+                        <Flex.Row
+                            alignItems="center"
+                            backgroundColor={colors.gray90}
+                            borderRadius={minorScale(1)}
+                            height={majorScale(5)}
+                            justifyContent="center"
+                            width={majorScale(5)}>
+                            <MusicIcon color={colors.gray600} />
+                        </Flex.Row>
+                    </Pane>
+                </Flex.Row>
+                <Flex.Column overflow="hidden">
+                    <Paragraph
+                        color={colors.gray800}
+                        overflow="hidden"
+                        textOverflow="ellipsis"
+                        whiteSpace="nowrap">
+                        {name}
+                    </Paragraph>
+                    {size != null && (
+                        <Paragraph color={colors.gray700} size={300}>
+                            {humanize.fileSize(size, 0)}
+                        </Paragraph>
+                    )}
+                </Flex.Column>
+            </Flex.Row>
+            <Flex.Row justifyContent="flex-end">
+                <IconButton
+                    appearance="minimal"
+                    color={colors.gray600}
+                    disabled={isLoading}
+                    icon={CogIcon}
+                    marginLeft="auto"
+                    onClick={handleOpenDialog}
+                    type="button"
+                />
+                <IconButton
+                    appearance="minimal"
+                    color={colors.gray600}
+                    icon={TrashIcon}
+                    isLoading={isLoading}
+                    marginLeft="auto"
+                    marginRight={majorScale(2)}
+                    onClick={handleDelete}
+                    type="button"
+                />
+            </Flex.Row>
+            {isOpen && (
+                <FileDialog
+                    file={file}
+                    isShown={isOpen}
+                    onCloseComplete={handleCloseDialog}
+                    storageProviderFile={storageProviderFile}
+                />
+            )}
+        </Flex.Row>
+    );
+};
+
+export { FileCard };

src/components/files/file-card.tsx

@@ -1,11 +1,14 @@
 import { BucketName } from "enums/bucket-name";
 import { SortOrder } from "enums/sort-order";
-import { Pane } from "evergreen-ui";
 import { useListStorageProviderFiles } from "utils/hooks/supabase/use-list-storage-provider-files";
-import { FileListItem } from "components/files/file-list-item";
 import { useGlobalState } from "utils/hooks/use-global-state";
 import { groupBy } from "utils/collection-utils";
 import { useListFiles } from "generated/hooks/domain/files/use-list-files";
+import { FileCard } from "components/files/file-card";
+import { Flex } from "components/flex";
+import { useTimeoutRender } from "utils/hooks/use-timeout-render";
+import { Spinner } from "evergreen-ui";
+import React from "react";
 
 interface FileListProps {
     bucketName: BucketName;
@@ -14,33 +17,42 @@ interface FileListProps {
 const FileList: React.FC<FileListProps> = (props: FileListProps) => {
     const { bucketName } = props;
     const { globalState } = useGlobalState();
-    const { resultObject: storageProviderFiles } = useListStorageProviderFiles({
+    const {
+        resultObject: storageProviderFiles,
+        isLoading: isLoadingStorageProviderFiles,
+    } = useListStorageProviderFiles({
         bucketName,
         path: globalState.userId(),
         sortBy: {
             column: "created_at",
             order: SortOrder.DESC,
         },
     });
-
-    const { resultObject: files } = useListFiles();
+    const { resultObject: files, isLoading: isLoadingFiles } = useListFiles();
+    useTimeoutRender();
 
     const groupedFiles = groupBy(
         storageProviderFiles,
         files,
         (a, b) => a.id === b.id
     );
+    const isLoading = isLoadingFiles || isLoadingStorageProviderFiles;
 
     return (
-        <Pane>
-            {groupedFiles.map(({ left: storageProviderFile, right: file }) => (
-                <FileListItem
-                    file={file}
-                    key={file.id}
-                    storageProviderFile={storageProviderFile}
-                />
-            ))}
-        </Pane>
+        <Flex.Column>
+            <Flex.Row flexWrap="wrap" width="100%">
+                {isLoading && <Spinner />}
+                {groupedFiles.map(
+                    ({ left: storageProviderFile, right: file }) => (
+                        <FileCard
+                            file={file}
+                            key={file.id}
+                            storageProviderFile={storageProviderFile}
+                        />
+                    )
+                )}
+            </Flex.Row>
+        </Flex.Column>
     );
 };