Sharing file browser

packages/files-ui/src/Components/FilesRoutes.tsx

@@ -8,6 +8,7 @@ import SearchPage from "./Pages/SearchPage"
 import BinPage from "./Pages/BinPage"
 import PurchasePlanPage from "./Pages/PurchasePlanPage"
 import { useThresholdKey } from "../Contexts/ThresholdKeyContext"
+import ShareFilesPage from "./Pages/ShareFilesPage"
 import SharedFoldersOverview from "./Modules/FileBrowsers/SharedFoldersOverview"
 
 export const SETTINGS_BASE = "/settings"
@@ -17,15 +18,17 @@ export const ROUTE_LINKS = {
   Terms: "https://files.chainsafe.io/terms-of-service",
   ChainSafe: "https://chainsafe.io/",
   Drive: (rawCurrentPath: string) => `/drive${rawCurrentPath}`,
-  Search: (rawSearchTerm: string) => `/search/${rawSearchTerm}`,
   Bin: (rawBinPath: string) => `/bin${rawBinPath}`,
+  Search: (rawSearchTerm: string) => `/search/${rawSearchTerm}`,
   ApplyCryptography: "https://medium.com/chainsafe-systems/major-improvement-to-chainsafe-files-ab489d3e52a2",
   Settings: `${SETTINGS_BASE}/:path`,
   SettingsDefault: `${SETTINGS_BASE}`,
   PurchasePlan: "/purchase",
   UserSurvey: "https://shrl.ink/kmAL",
   GeneralFeedbackForm: "https://shrl.ink/gvVJ",
-  SharedFolders: "/shared"
+  SharedFolders: "/shared-overview",
+  ShareBrowserRoot: "/shared",
+  ShareExplorer: (bucketId: string, rawCurrentPath: string) => `/shared/${bucketId}${rawCurrentPath}`
 }
 
 export const SETTINGS_PATHS = ["profile", "plan", "security"] as const
@@ -37,32 +40,31 @@ const FilesRoutes = () => {
 
   const isAuthorized = useMemo(() => isLoggedIn && secured && !!publicKey && !isNewDevice && !shouldInitializeAccount,
     [isLoggedIn, isNewDevice, publicKey, secured, shouldInitializeAccount])
-
   return (
     <Switch>
       <ConditionalRoute
-        path={ROUTE_LINKS.Drive("/")}
+        exact
+        path={ROUTE_LINKS.SharedFolders}
         isAuthorized={isAuthorized}
-        component={DrivePage}
+        component={SharedFoldersOverview}
         redirectPath={ROUTE_LINKS.Landing}
       />
       <ConditionalRoute
-        path={ROUTE_LINKS.Bin("/")}
+        path={ROUTE_LINKS.ShareBrowserRoot}
         isAuthorized={isAuthorized}
-        component={BinPage}
+        component={ShareFilesPage}
         redirectPath={ROUTE_LINKS.Landing}
       />
       <ConditionalRoute
-        path={ROUTE_LINKS.SharedFolders}
+        path={ROUTE_LINKS.Drive("/")}
         isAuthorized={isAuthorized}
-        component={SharedFoldersOverview}
+        component={DrivePage}
         redirectPath={ROUTE_LINKS.Landing}
       />
       <ConditionalRoute
-        exact
-        path={ROUTE_LINKS.Search("")}
+        path={ROUTE_LINKS.Bin("/")}
         isAuthorized={isAuthorized}
-        component={SearchPage}
+        component={BinPage}
         redirectPath={ROUTE_LINKS.Landing}
       />
       <ConditionalRoute
@@ -72,7 +74,6 @@ const FilesRoutes = () => {
         component={SearchPage}
         redirectPath={ROUTE_LINKS.Landing}
       />
-
       <ConditionalRoute
         exact
         path={ROUTE_LINKS.SettingsDefault}

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

@@ -6,55 +6,8 @@ import { CSFTheme } from "../../../Themes/types"
 import { Bucket } from "@chainsafe/files-api-client"
 import SharedFolderItem from "./views/FileSystemItem/SharedFolderRow"
 
-const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) => {
+const useStyles = makeStyles(({ constants }: CSFTheme) => {
   return createStyles({
-    renameInput: {
-      width: "100%",
-      [breakpoints.up("md")]: {
-        margin: 0
-      },
-      [breakpoints.down("md")]: {
-        margin: `${constants.generalUnit * 4.2}px 0`
-      }
-    },
-    modalRoot: {
-      [breakpoints.down("md")]: {}
-    },
-    modalInner: {
-      [breakpoints.down("md")]: {
-        bottom:
-          Number(constants?.mobileButtonHeight) + constants.generalUnit,
-        borderTopLeftRadius: `${constants.generalUnit * 1.5}px`,
-        borderTopRightRadius: `${constants.generalUnit * 1.5}px`,
-        borderBottomLeftRadius: `${constants.generalUnit * 1.5}px`,
-        borderBottomRightRadius: `${constants.generalUnit * 1.5}px`,
-        maxWidth: `${breakpoints.width("md")}px !important`
-      }
-    },
-    renameHeader: {
-      textAlign: "center"
-    },
-    renameFooter: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "flex-end"
-    },
-    renameModal: {
-      padding: constants.generalUnit * 4
-    },
-    okButton: {
-      marginLeft: constants.generalUnit
-    },
-    cancelButton: {
-      [breakpoints.down("md")]: {
-        position: "fixed",
-        bottom: 0,
-        left: 0,
-        width: "100%",
-        height: constants?.mobileButtonHeight
-      }
-    },
     menuIcon: {
       display: "flex",
       justifyContent: "center",
@@ -64,24 +17,19 @@ const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) => {
       "& svg": {
         fill: constants.fileSystemItemRow.menuIcon
       }
-    },
-    dropdownIcon: {
-      "& svg": {
-        fill: constants.fileSystemItemRow.dropdownIcon
-      }
     }
   })
 })
 
 interface Props {
   bucket: Bucket
+  openSharedFolder: (bucketId: string) => void
 }
 
-const SharedFolderRowWrapper = ({ bucket }: Props) => {
+const SharedFolderRowWrapper = ({ bucket, openSharedFolder }: Props) => {
   const { desktop } = useThemeSwitcher()
   const classes = useStyles()
 
-
   const menuItems: IMenuItem[] = [{
     contents: (
       <>
@@ -111,21 +59,23 @@ const SharedFolderRowWrapper = ({ bucket }: Props) => {
         // on desktop 
       } else {
         // on mobile
+        openSharedFolder(bucket.id)
       }
     },
-    [desktop]
+    [desktop, openSharedFolder, bucket]
   )
 
   const onDoubleClick = useCallback(
     () => {
       if (desktop) {
         // on desktop
+        openSharedFolder(bucket.id)
       } else {
         // on mobile
         return
       }
     },
-    [desktop]
+    [desktop, openSharedFolder, bucket]
   )
 
   const { click } = useDoubleClick(onSingleClick, onDoubleClick)

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

@@ -1,12 +1,23 @@
-import React, { useMemo, useState } from "react"
-import { Typography, Table, TableHead, TableRow, TableHeadCell, TableBody, SortDirection, Loading } from "@chainsafe/common-components"
+import React, { useCallback, useMemo, useState } from "react"
+import {
+  Typography,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeadCell,
+  TableBody,
+  SortDirection,
+  Loading,
+  useHistory
+} from "@chainsafe/common-components"
 import { useFiles } from "../../../Contexts/FilesContext"
 import { Trans } from "@lingui/macro"
 import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../Themes/types"
 import { useFilesApi } from "../../../Contexts/FilesApiContext"
 import SharedFolderRowWrapper from "./SharedFolderRowWrapper"
 import clsx from "clsx"
+import { ROUTE_LINKS } from "../../FilesRoutes"
 
 export const desktopSharedGridSettings = "69px 3fr 190px 150px 45px !important"
 export const mobileSharedGridSettings = "3fr 50px 45px !important"
@@ -88,6 +99,7 @@ const SharedFolderOverview = () => {
   const { filesApiClient, encryptedEncryptionKey } = useFilesApi()
   const [direction, setDirection] = useState<SortDirection>("ascend")
   const [column, setColumn] = useState<"name" | "size" | "date_uploaded">("name")
+  const { redirect } = useHistory()
   const { desktop } = useThemeSwitcher()
 
   const bucketsToShow = useMemo(() => buckets.filter(b => b.type === "share"), [buckets])
@@ -107,6 +119,10 @@ const SharedFolderOverview = () => {
     }
   }
 
+  const openSharedFolder = useCallback((bucketId: string) => {
+    redirect(ROUTE_LINKS.ShareExplorer(bucketId, "/"))
+  }, [redirect])
+
   return (
     <article
       className={classes.root}
@@ -193,6 +209,7 @@ const SharedFolderOverview = () => {
               <SharedFolderRowWrapper
                 key={bucket.id}
                 bucket={bucket}
+                openSharedFolder={openSharedFolder}
               />
             )}
           </TableBody>