File rename refactor

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

@@ -106,7 +106,7 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
  const itemToRename = pathContents.find(i => i.cid === cid)
  if (!bucket || !itemToRename) return
 
- filesApiClient.moveBucketObjects(bucket.id, {
+ return filesApiClient.moveBucketObjects(bucket.id, {
  paths: [getPathWithFile(currentPath, itemToRename.name)],
  new_path: getPathWithFile(currentPath, newName) })
  .then(() => refreshContents())
@@ -116,7 +116,6 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
  const moveItems = useCallback(async (cids: string[], newPath: string) => {
  if (!bucket) return
 
-
  const pathsToMove = getAbsolutePathsFromCids(cids, currentPath, pathContents)
 
  filesApiClient.moveBucketObjects(bucket.id, {
@@ -210,7 +209,7 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
  deleteItems: moveItemsToBin,
  downloadFile: handleDownload,
  moveItems,
- renameItem: renameItem,
+ renameItem,
  viewFolder,
  handleUploadOnDrop,
  loadingCurrentPath,

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

@@ -155,7 +155,7 @@ const SharedFileBrowser = () => {
  const itemToRename = pathContents.find(i => i.cid === cid)
  if (!bucket || !itemToRename) return
 
- filesApiClient.moveBucketObjects(bucket.id, {
+ return filesApiClient.moveBucketObjects(bucket.id, {
  paths: [getPathWithFile(currentPath, itemToRename.name)],
  new_path: getPathWithFile(currentPath, newName) }).then(() => refreshContents())
  .catch(console.error)

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

@@ -178,7 +178,7 @@ const SharedFolderOverview = () => {
  }, [column, direction])
 
  const handleRename = useCallback((bucket: BucketKeyPermission, newName: string) => {
- filesApiClient.updateBucket(bucket.id, {
+ return filesApiClient.updateBucket(bucket.id, {
  ...bucket,
  name: newName
  }).then(() => refreshBuckets(false))

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemGridItem.tsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { makeStyles, createStyles, useThemeSwitcher, useOnClickOutside, LongPressEvents } from "@chainsafe/common-theme"
 import { t } from "@lingui/macro"
 import clsx from "clsx"
 import {
  FormikTextInput,
  IMenuItem,
+ Loading,
  MoreIcon,
  Typography
 } from "@chainsafe/common-components"
@@ -118,6 +119,10 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) =>
  },
  focusVisible: {
  backgroundColor: "transparent !important"
+ },
+ loadingIcon: {
+ marginLeft: constants.generalUnit,
+ verticalAlign: "middle"
  }
  })
 })
@@ -133,7 +138,7 @@ interface IFileSystemTableItemProps {
  icon: React.ReactNode
  preview: ConnectDragPreview
  setEditing: (editing: string | undefined) => void
- handleRename?: (path: string, newPath: string) => Promise<void>
+ handleRename?: (path: string, newPath: string) => Promise<void> | undefined
  currentPath: string | undefined
  menuItems: IMenuItem[]
  resetSelectedFiles: () => void
@@ -161,11 +166,9 @@ const FileSystemGridItem = React.forwardRef(
  const { name, cid } = file
  const { desktop } = useThemeSwitcher()
  const formRef = useRef(null)
+ const [isEditingLoading, setIsEditingLoading] = useState(false)
 
- const {
- fileName,
- extension
- } = useMemo(() => {
+ const { fileName, extension } = useMemo(() => {
  if (isFolder) {
  return {
  fileName : name,
@@ -196,8 +199,11 @@ const FileSystemGridItem = React.forwardRef(
  onSubmit: (values: { name: string }) => {
  const newName = extension !== "" ? `${values.name.trim()}.${extension}` : values.name.trim()
 
- if (newName !== name) {
- newName && handleRename && handleRename(file.cid, newName)
+ if (newName !== name && !!newName && handleRename) {
+ setIsEditingLoading(true)
+
+ handleRename(cid, newName)
+ ?.then(() => setIsEditingLoading(false))
  } else {
  stopEditing()
  }
@@ -232,7 +238,7 @@ const FileSystemGridItem = React.forwardRef(
  formik.resetForm()
  }, [formik, setEditing])
 
- useOnClickOutside(formRef, stopEditing)
+ useOnClickOutside(formRef, formik.submitForm)
 
  return (
  <div
@@ -279,7 +285,7 @@ const FileSystemGridItem = React.forwardRef(
  ? t`Please enter a folder name`
  : t`Please enter a file name`
  }
- autoFocus={editing === cid}
+ autoFocus
  />
  {
  !isFolder && extension !== "" && (
@@ -291,7 +297,13 @@ const FileSystemGridItem = React.forwardRef(
  </Form>
  </FormikProvider>
  )
- : <div className={classes.gridFolderName}>{name}</div>
+ : <div className={classes.gridFolderName}>
+ {name}{isEditingLoading && <Loading
+ className={classes.loadingIcon}
+ size={16}
+ type="initial"
+ />}
+ </div>
  }
  </div>
  <div>

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx

@@ -109,7 +109,7 @@ interface IFileSystemItemProps {
  handleAddToSelectedItems(selectedItems: FileSystemItemType): void
  editing: string | undefined
  setEditing(editing: string | undefined): void
- handleRename?: (cid: string, newName: string) => Promise<void>
+ handleRename?: (cid: string, newName: string) => Promise<void> | undefined
  handleMove?: (cid: string, newPath: string) => Promise<void>
  deleteFile?: () => void
  recoverFile?: () => void
@@ -524,7 +524,7 @@ const FileSystemItem = ({
  className={classes.renameInput}
  name="name"
  placeholder={isFolder ? t`Please enter a folder name` : t`Please enter a file name`}
- autoFocus={editing === cid}
+ autoFocus
  />
  {
  !isFolder && extension !== "" && (

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemTableItem.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef } from "react"
+import React, { useCallback, useMemo, useRef, useState } from "react"
 import { makeStyles, createStyles, useThemeSwitcher, useOnClickOutside, LongPressEvents } from "@chainsafe/common-theme"
 import { t } from "@lingui/macro"
 import clsx from "clsx"
@@ -7,6 +7,7 @@ import {
  formatBytes,
  FormikTextInput,
  IMenuItem,
+ Loading,
  MoreIcon,
  TableCell,
  TableRow,
@@ -104,6 +105,10 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) =>
  },
  focusVisible: {
  backgroundColor: "transparent !important"
+ },
+ loadingIcon: {
+ marginLeft: constants.generalUnit,
+ verticalAlign: "middle"
  }
  })
 })
@@ -114,13 +119,13 @@ interface IFileSystemTableItemProps {
  isOverUpload: boolean
  selectedCids: string[]
  file: FileSystemItem
- editing: string | undefined
+ editing?: string
  handleAddToSelectedItems: (selected: FileSystemItem) => void
  onFolderOrFileClicks: (e?: React.MouseEvent) => void
  icon: React.ReactNode
  preview: ConnectDragPreview
  setEditing: (editing: string | undefined) => void
- handleRename?: (path: string, newPath: string) => Promise<void>
+ handleRename?: (path: string, newPath: string) => Promise<void> | undefined
  currentPath: string | undefined
  menuItems: IMenuItem[]
  longPressEvents?: LongPressEvents
@@ -147,11 +152,9 @@ const FileSystemTableItem = React.forwardRef(
  const { name, cid, created_at, size } = file
  const { desktop } = useThemeSwitcher()
  const formRef = useRef(null)
+ const [isEditingLoading, setIsEditingLoading] = useState(false)
 
- const {
- fileName,
- extension
- } = useMemo(() => {
+ const { fileName, extension } = useMemo(() => {
  if (isFolder) {
  return {
  fileName : name,
@@ -178,10 +181,14 @@ const FileSystemTableItem = React.forwardRef(
  initialValues: { name: fileName },
  validationSchema: nameValidator,
  onSubmit: (values: { name: string }) => {
+
  const newName = extension !== "" ? `${values.name.trim()}.${extension}` : values.name.trim()
 
- if (newName !== name) {
- newName && handleRename && handleRename(file.cid, newName)
+ if (newName !== name && !!newName && handleRename) {
+ setIsEditingLoading(true)
+
+ handleRename(file.cid, newName)
+ ?.then(() => setIsEditingLoading(false))
  } else {
  stopEditing()
  }
@@ -194,7 +201,7 @@ const FileSystemTableItem = React.forwardRef(
  formik.resetForm()
  }, [formik, setEditing])
 
- useOnClickOutside(formRef, stopEditing)
+ useOnClickOutside(formRef, formik.submitForm)
 
  return (
  <TableRow
@@ -230,7 +237,7 @@ const FileSystemTableItem = React.forwardRef(
  onClick={(e) => !editing && onFolderOrFileClicks(e)}
  {...longPressEvents}
  >
- {editing === cid && desktop
+ { editing === cid && desktop
  ? (
  <FormikProvider value={formik}>
  <Form
@@ -252,7 +259,7 @@ const FileSystemTableItem = React.forwardRef(
  ? t`Please enter a folder name`
  : t`Please enter a file name`
  }
- autoFocus={editing === cid}
+ autoFocus
  />
  {
  !isFolder && extension !== "" && (
@@ -264,14 +271,19 @@ const FileSystemTableItem = React.forwardRef(
  </Form>
  </FormikProvider>
  )
- : <Typography>{name}</Typography>}
+ : <>
+ <Typography>{name}</Typography>
+ {isEditingLoading && <Loading
+ className={classes.loadingIcon}
+ size={16}
+ type="initial"
+ />}
+ </>}
  </TableCell>
  {desktop && (
  <>
  <TableCell align="left">
- {
- !isFolder && !!created_at && dayjs.unix(created_at).format("DD MMM YYYY h:mm a")
- }
+ {!isFolder && !!created_at && dayjs.unix(created_at).format("DD MMM YYYY h:mm a")}
  </TableCell>
  <TableCell align="left">
  {!isFolder && formatBytes(size, 2)}
@@ -296,3 +308,4 @@ const FileSystemTableItem = React.forwardRef(
 FileSystemTableItem.displayName = "FileSystemTableItem"
 
 export default FileSystemTableItem
+

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx

@@ -9,6 +9,7 @@ import {
  formatBytes,
  FormikTextInput,
  IMenuItem,
+ Loading,
  MoreIcon,
  TableCell,
  TableRow,
@@ -139,13 +140,17 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) =>
  },
  okButton: {
  marginLeft: constants.generalUnit
+ },
+ loadingIcon: {
+ marginLeft: constants.generalUnit,
+ verticalAlign: "middle"
  }
  })
 })
 
 interface Props {
  bucket: BucketKeyPermission
- handleRename: (bucket: BucketKeyPermission, newName: string) => void
+ handleRename: (bucket: BucketKeyPermission, newName: string) => Promise<void>
  openSharedFolder: (bucketId: string) => void
  onEditSharedFolder: () => void
  handleDeleteSharedFolder: () => void
@@ -160,6 +165,7 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
  const formRef = useRef(null)
  const isOwner = useMemo(() => bucket.permission === "owner", [bucket.permission])
  const [ownerName, setOwnerName] = useState("")
+ const [isEditingLoading, setIsEditingLoading] = useState(false)
 
  useEffect(() => {
  if (isOwner) {
@@ -246,15 +252,20 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
  }
 
  const formik = useFormik({
- initialValues:{
- name
- },
+ initialValues:{ name },
  enableReinitialize: true,
  validationSchema: nameValidator,
  onSubmit:(values, { resetForm }) => {
  const newName = values.name?.trim()
 
- newName && handleRename && handleRename(bucket, newName)
+ if (newName !== name && !!newName && handleRename) {
+ setIsEditingLoading(true)
+
+ handleRename(bucket, newName)
+ .then(() => setIsEditingLoading(false))
+ } else {
+ stopEditing()
+ }
  setIsRenaming(false)
  resetForm()
  }
@@ -265,7 +276,7 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
  formik.resetForm()
  }, [formik, setIsRenaming])
 
- useOnClickOutside(formRef, stopEditing)
+ useOnClickOutside(formRef, formik.submitForm)
 
  return (
  <>
@@ -290,7 +301,14 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
  onClick={(e) => onFolderClick(e)}
  >
  {!isRenaming || !desktop
- ? <Typography>{name}</Typography>
+ ? <>
+ <Typography>{name}</Typography>
+ {isEditingLoading && <Loading
+ className={classes.loadingIcon}
+ size={16}
+ type="initial"
+ />}
+ </>
  : (
  <FormikProvider value={formik}>
  <Form
@@ -404,7 +422,14 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
  </Form>
  </FormikProvider>
  </CustomModal>
- <Typography>{name}</Typography>
+ <>
+ <Typography>{name}</Typography>
+ {isEditingLoading && <Loading
+ className={classes.loadingIcon}
+ size={16}
+ type="initial"
+ />}
+ </>
  </>
  )
  }