loader

packages/common-components/src/Icons/icons/UserShare.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as UserShareSvg } from "../svgs/user-share.svg"
+
+export { UserShareSvg }
+
+export default createSvgIcon(<UserShareSvg />)

packages/common-components/src/Icons/index.ts

@@ -65,6 +65,7 @@ export { default as TableIcon, TableSvg } from "./icons/Table.icon"
 export { default as UploadIcon, UploadSvg } from "./icons/Upload.icon"
 export { default as UnionpayCardIcon, UnionpayCardSvg } from "./icons/UnionpayCard.icon"
 export { default as UserIcon, UserSvg } from "./icons/User.icon"
+export { default as UserShareIcon, UserShareSvg } from "./icons/UserShare.icon"
 export { default as VisaCardIcon, VisaCardSvg } from "./icons/VisaCard.icon"
 export { default as WarningIcon, WarningSvg } from "./icons/Warning.icon"
 export { default as ZoomInIcon, ZoomInSvg } from "./icons/ZoomIn.icon"

packages/files-ui/src/Components/Layouts/AppNav.tsx

@@ -16,7 +16,8 @@ import {
   ProgressBar,
   Button,
   formatBytes,
-  DeleteSvg } from "@chainsafe/common-components"
+  DeleteSvg,
+  UserShareSvg } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../FilesRoutes"
 import { FREE_PLAN_LIMIT } from "../../Utils/Constants"
 import { Trans } from "@lingui/macro"
@@ -298,7 +299,7 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
                 className={classes.navItem}
                 to={ROUTE_LINKS.SharedFolders}
               >
-                <DeleteSvg />
+                <UserShareSvg />
                 <Typography
                   variant="h5"
                   className={classes.navItemText}

packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx

@@ -1,11 +1,21 @@
 import React, { useMemo, useState } from "react"
-import { Typography, Table, TableHead, TableRow, TableHeadCell, TableBody, SortDirection } from "@chainsafe/common-components"
+import {
+  Typography,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeadCell,
+  TableBody,
+  SortDirection,
+  Loading
+} from "@chainsafe/common-components"
 import { useFiles } from "../../../Contexts/FilesContext"
 import { Trans } from "@lingui/macro"
 import { createStyles, makeStyles } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../Themes/types"
 import { useFilesApi } from "../../../Contexts/FilesApiContext"
 import SharedFolderRowWrapper from "./SharedFolderRowWrapper"
+import clsx from "clsx"
 
 export const desktopSharedGridSettings = "69px 3fr 190px 150px 69px !important"
 export const mobileSharedGridSettings = "69px 3fr 45px !important"
@@ -64,15 +74,27 @@ const useStyles = makeStyles(
         [breakpoints.down("md")]: {
           gridTemplateColumns: mobileSharedGridSettings
         }
+      },
+      loadingContainer: {
+        position: "absolute",
+        width: "100%",
+        paddingTop: constants.generalUnit * 6,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        transition: `${animation.transform * 3}ms`,
+        "& svg": {
+          marginBottom: constants.generalUnit * 2
+        }
       }
     })
   }
 )
 
 const SharedFolderOverview = () => {
   const classes = useStyles()
-  const { buckets } = useFiles()
-  const { filesApiClient } = useFilesApi()
+  const { buckets, refreshBuckets, isLoadingBuckets } = useFiles()
+  const { filesApiClient, encryptedEncryptionKey } = useFilesApi()
   const [direction, setDirection] = useState<SortDirection>("ascend")
   const [column, setColumn] = useState<"name" | "size" | "date_uploaded">("name")
 
@@ -110,62 +132,78 @@ const SharedFolderOverview = () => {
       </header>
       <button
         onClick={() => {
-          filesApiClient.createBucket({
-            name: "Cat Bucket",
-            // eslint-disable-next-line max-len
-            encryption_key:"51f27f1f1b7f342299e643eaf437ac80022b162728144ab79f3c0e966306b8d01da374c427d7614bcf8a67a2317e6748258dd8367499838316a0a63cdcbe0ff624e1c5284f70279b7d87d2d7a42d09e032f98adbbbe488abf74001f0dfb549fc2d4e8b11ccb082eab47fbef1d0012e81fdf12748e9355bbf1996a473b3ef1b2682",
+          !!encryptedEncryptionKey && filesApiClient.createBucket({
+            name: `Cat Bucket ${Date.now()}`,
+            encryption_key: encryptedEncryptionKey,
             type: "share"
-          }).then(console.log)
+          }).then((res) => {
+            console.log(res)
+            refreshBuckets()
+          })
             .catch(console.error)
         }}>
-        create shared bucket (hardcoded encryption key!)
+        Create a shared &quot;Cat Bucket&quot;
       </button>
-      <Table
-        fullWidth={true}
-        striped={true}
-        hover={true}
-      >
-        <TableHead className={classes.tableHead}>
-          <TableRow type="grid"
-            className={classes.tableRow}>
-            <TableHeadCell>
-              {/* Icon */}
-            </TableHeadCell>
-            <TableHeadCell
-              sortButtons={true}
-              align="left"
-              onSortChange={() => handleSortToggle("name")}
-              sortDirection={column === "name" ? direction : undefined}
-              sortActive={column === "name"}
-            >
-              <Trans>Name</Trans>
-            </TableHeadCell>
-            <TableHeadCell align="left">
-              <Trans>Shared with</Trans>
-            </TableHeadCell>
-            <TableHeadCell
-              sortButtons={true}
-              align="left"
-              onSortChange={() => handleSortToggle("date_uploaded")}
-              sortDirection={
-                column === "date_uploaded" ? direction : undefined
-              }
-              sortActive={column === "date_uploaded"}
-            >
-              <Trans>Size</Trans>
-            </TableHeadCell>
-            <TableHeadCell>{/* Menu */}</TableHeadCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {bucketsToShow.map((bucket) =>
-            <SharedFolderRowWrapper
-              key={bucket.id}
-              bucket={bucket}
-            />
-          )}
-        </TableBody>
-      </Table>
+      {isLoadingBuckets && (
+        <div
+          className={clsx(classes.loadingContainer)}
+        >
+          <Loading size={24}
+            type="light" />
+          <Typography variant="body2"
+            component="p">
+            <Trans>Loading your shared folders...</Trans>
+          </Typography>
+        </div>
+      )}
+      {!isLoadingBuckets && (
+        <Table
+          fullWidth={true}
+          striped={true}
+          hover={true}
+        >
+          <TableHead className={classes.tableHead}>
+            <TableRow type="grid"
+              className={classes.tableRow}>
+              <TableHeadCell>
+                {/* Icon */}
+              </TableHeadCell>
+              <TableHeadCell
+                sortButtons={true}
+                align="left"
+                onSortChange={() => handleSortToggle("name")}
+                sortDirection={column === "name" ? direction : undefined}
+                sortActive={column === "name"}
+              >
+                <Trans>Name</Trans>
+              </TableHeadCell>
+              <TableHeadCell align="left">
+                <Trans>Shared with</Trans>
+              </TableHeadCell>
+              <TableHeadCell
+                sortButtons={true}
+                align="left"
+                onSortChange={() => handleSortToggle("date_uploaded")}
+                sortDirection={
+                  column === "date_uploaded" ? direction : undefined
+                }
+                sortActive={column === "date_uploaded"}
+              >
+                <Trans>Size</Trans>
+              </TableHeadCell>
+              <TableHeadCell>{/* Menu */}</TableHeadCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {bucketsToShow.map((bucket) =>
+              <SharedFolderRowWrapper
+                key={bucket.id}
+                bucket={bucket}
+              />
+            )}
+          </TableBody>
+        </Table>
+      )}
     </article>
   )
 }

packages/files-ui/src/Contexts/FilesContext.tsx

@@ -69,6 +69,7 @@ type FilesContext = {
   getFileContent: (bucketId: string, params: GetFileContentParams) => Promise<Blob | undefined>
   refreshBuckets: () => Promise<void>
   secureAccountWithMasterPassword: (candidatePassword: string) => Promise<void>
+  isLoadingBuckets?: boolean
 }
 
 // This represents a File or Folder on the
@@ -100,6 +101,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
   const [buckets, setBuckets] = useState<Bucket[]>([])
   const { profile } = useUser()
   const { userId } = profile || {}
+  const [isLoadingBuckets, setIsLoadingBuckets] = useState(false)
 
   const getKeyForSharedBucket = useCallback(async (bucket: FilesBucket) => {
     const bucketUsers = [...bucket.readers, ...bucket.writers, ...bucket.owners]
@@ -118,6 +120,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
   const refreshBuckets = useCallback(async () => {
     if (!personalEncryptionKey || !userId) return
 
+    setIsLoadingBuckets(true)
     const result = await filesApiClient.listBuckets()
 
     const bucketsWithKeys: Bucket[] = await Promise.all(
@@ -152,6 +155,7 @@ const FilesProvider = ({ children }: FilesContextProps) => {
       })
     )
     setBuckets(bucketsWithKeys)
+    setIsLoadingBuckets(false)
     return Promise.resolve()
   }, [personalEncryptionKey, userId, filesApiClient, profile, getKeyForSharedBucket])
 
@@ -223,7 +227,6 @@ const FilesProvider = ({ children }: FilesContextProps) => {
         secureAccount()
       } else {
         console.log("decrypting key")
-        console.log("encryptedEncryptionKey", encryptedEncryptionKey)
         if (encryptedEncryptionKey) {
           decryptKey(encryptedEncryptionKey)
         }
@@ -240,7 +243,8 @@ const FilesProvider = ({ children }: FilesContextProps) => {
     personalEncryptionKey,
     isMasterPasswordSet,
     secureAccount,
-    decryptKey
+    decryptKey,
+    isLoadingBuckets
   ])
 
   const secureAccountWithMasterPassword = async (candidatePassword: string) => {
@@ -472,8 +476,8 @@ const FilesProvider = ({ children }: FilesContextProps) => {
         downloadsInProgress,
         secureAccountWithMasterPassword,
         buckets,
-        refreshBuckets
-
+        refreshBuckets,
+        isLoadingBuckets
       }}
     >
       {children}