Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

File rename refactor #2054

Merged
merged 12 commits into from
Apr 1, 2022
Merged

File rename refactor #2054

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
cdecb4b
should be good
Tbaut Mar 28, 2022
5e8fd3d
this is getting biiiig
Tbaut Mar 30, 2022
b9711fa
blur on storage
Tbaut Mar 30, 2022
47062e7
Merge branch 'dev' into fix/tbaut-save-on-blur-edit-loader-2050
asnaith Mar 31, 2022
bdb73d8
Merge branch 'dev' into fix/tbaut-save-on-blur-edit-loader-2050
Tbaut Mar 31, 2022
b846ad8
lingui extract
actions-user Mar 31, 2022
37c92d0
spinner color
Tbaut Mar 31, 2022
95a399b
Merge branch 'fix/tbaut-save-on-blur-edit-loader-2050' of github.com:…
Tbaut Mar 31, 2022
6788375
Merge branch 'dev' into fix/tbaut-save-on-blur-edit-loader-2050
Tbaut Mar 31, 2022
db04c3e
Merge branch 'dev' into fix/tbaut-save-on-blur-edit-loader-2050
Tbaut Mar 31, 2022
7c59311
Update packages/files-ui/src/Components/Modules/FileBrowsers/views/Fi…
Tbaut Apr 1, 2022
0001c36
Update packages/files-ui/src/Components/Modules/FileBrowsers/views/Fi…
Tbaut Apr 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions packages/files-ui/src/Components/Modules/FileBrowsers/CSFFileBrowser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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())
Expand All @@ -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, {
Expand Down Expand Up @@ -210,7 +209,7 @@ const CSFFileBrowser: React.FC<IFileBrowserModuleProps> = () => {
deleteItems: moveItemsToBin,
downloadFile: handleDownload,
moveItems,
renameItem: renameItem,
renameItem,
viewFolder,
handleUploadOnDrop,
loadingCurrentPath,
Expand Down
2 changes: 1 addition & 1 deletion packages/files-ui/src/Components/Modules/FileBrowsers/SharedFileBrowser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion packages/files-ui/src/Components/Modules/FileBrowsers/SharedFoldersOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
34 changes: 23 additions & 11 deletions .../files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemGridItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -118,6 +119,10 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) =>
},
focusVisible: {
backgroundColor: "transparent !important"
},
loadingIcon: {
marginLeft: constants.generalUnit,
verticalAlign: "middle"
}
})
})
Expand All @@ -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
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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) {
Tbaut marked this conversation as resolved.
Show resolved Hide resolved
setIsEditingLoading(true)

handleRename(cid, newName)
?.then(() => setIsEditingLoading(false))
} else {
stopEditing()
}
Expand Down Expand Up @@ -232,7 +238,7 @@ const FileSystemGridItem = React.forwardRef(
formik.resetForm()
}, [formik, setEditing])

useOnClickOutside(formRef, stopEditing)
useOnClickOutside(formRef, formik.submitForm)

return (
<div
Expand Down Expand Up @@ -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 !== "" && (
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions ...ages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 !== "" && (
Expand Down
45 changes: 29 additions & 16 deletions ...files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemTableItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -7,6 +7,7 @@ import {
formatBytes,
FormikTextInput,
IMenuItem,
Loading,
MoreIcon,
TableCell,
TableRow,
Expand Down Expand Up @@ -104,6 +105,10 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) =>
},
focusVisible: {
backgroundColor: "transparent !important"
},
loadingIcon: {
marginLeft: constants.generalUnit,
verticalAlign: "middle"
}
})
})
Expand All @@ -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
Expand All @@ -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,
Expand All @@ -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) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yup that's in the code, if newName is "" it'll be falsy and go to the else and stop editing.

setIsEditingLoading(true)

handleRename(file.cid, newName)
?.then(() => setIsEditingLoading(false))
} else {
stopEditing()
}
Expand All @@ -194,7 +201,7 @@ const FileSystemTableItem = React.forwardRef(
formik.resetForm()
}, [formik, setEditing])

useOnClickOutside(formRef, stopEditing)
useOnClickOutside(formRef, formik.submitForm)

return (
<TableRow
Expand Down Expand Up @@ -230,7 +237,7 @@ const FileSystemTableItem = React.forwardRef(
onClick={(e) => !editing && onFolderOrFileClicks(e)}
{...longPressEvents}
>
{editing === cid && desktop
{ editing === cid && desktop
? (
<FormikProvider value={formik}>
<Form
Expand All @@ -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 !== "" && (
Expand All @@ -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)}
Expand All @@ -296,3 +308,4 @@ const FileSystemTableItem = React.forwardRef(
FileSystemTableItem.displayName = "FileSystemTableItem"

export default FileSystemTableItem

41 changes: 33 additions & 8 deletions ...ges/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/SharedFolderRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
formatBytes,
FormikTextInput,
IMenuItem,
Loading,
MoreIcon,
TableCell,
TableRow,
Expand Down Expand Up @@ -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
Expand All @@ -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) {
Expand Down Expand Up @@ -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()
}
Expand All @@ -265,7 +276,7 @@ const SharedFolderRow = ({ bucket, handleRename, openSharedFolder, handleDeleteS
formik.resetForm()
}, [formik, setIsRenaming])

useOnClickOutside(formRef, stopEditing)
useOnClickOutside(formRef, formik.submitForm)

return (
<>
Expand All @@ -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
Expand Down Expand Up @@ -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"
/>}
</>
</>
)
}
Expand Down
Loading