Skip to content

Commit ad05993

Browse files
dawsontothdawsontoth
committed
chore: Extract rename file hook
1 parent 7b40ade commit ad05993

File tree

2 files changed

+92
-76
lines changed

2 files changed

+92
-76
lines changed

‎src/features/instance/applications/components/ApplicationsSidebar/index.tsx‎

Lines changed: 3 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useInstanceClientIdParams } from '@/config/useInstanceClient';
21
import { buildItems } from '@/features/instance/applications/components/ApplicationsSidebar/buildItems';
32
import {
43
DirectoryIcon,
@@ -8,19 +7,15 @@ import type { DirectoryEntry } from '@/features/instance/applications/context/di
87
import type { FileEntry } from '@/features/instance/applications/context/fileEntry';
98
import { isDirectory } from '@/features/instance/applications/context/isDirectory';
109
import { useEditorView } from '@/features/instance/applications/hooks/useEditorView';
11-
import { dropComponent } from '@/features/instance/operations/mutations/dropComponent';
12-
import { setComponentFile } from '@/features/instance/operations/mutations/setComponentFile';
13-
import { getComponentFile } from '@/features/instance/operations/queries/getComponentFile';
10+
import { useRenameFile } from '@/features/instance/applications/hooks/useRenameFile';
1411
import { useCallback, useEffect, useMemo } from 'react';
1512
import { ControlledTreeEnvironment, Tree, TreeItem } from 'react-complex-tree';
1613
import './file-explorer-modern.css';
17-
import { toast } from 'sonner';
1814
import { FileTypeIcon } from './FileTreeExplorer/FileTypeIcon';
1915

2016
export function ApplicationsSidebar() {
2117
const {
2218
rootEntries,
23-
reloadRootEntries,
2419
openedEntry,
2520
setOpenedEntry,
2621
focusedItem,
@@ -31,7 +26,6 @@ export function ApplicationsSidebar() {
3126
setSelectedItems,
3227
} = useEditorView();
3328

34-
const instanceParams = useInstanceClientIdParams();
3529
const { items, rootId } = useMemo(() => buildItems(rootEntries), [rootEntries]);
3630

3731
useEffect(function setOpenedEntryFromFocusedItem() {
@@ -60,75 +54,8 @@ export function ApplicationsSidebar() {
6054
// TODO: on drop file or folder from outside the editor to upload stuff rapidly
6155
// TODO: open file after creating it
6256
// TODO: select folder after creating it
63-
64-
const onRenameItem = useCallback(async (item: TreeItem<FileEntry | DirectoryEntry | null>, name: string) => {
65-
if (item.data && item.data?.name !== name) {
66-
const oldFile = item.data.path.split('/').slice(1).join('/');
67-
const newFile = item.data.path.split('/').slice(1, -1).join('/') + '/' + name;
68-
69-
const toastId = toast.loading('Renaming', {
70-
description: 'Loading existing contents...',
71-
duration: 0,
72-
});
73-
const fileContents = await getComponentFile({
74-
...instanceParams,
75-
file: oldFile,
76-
project: item.data.project,
77-
});
78-
79-
toast.loading('Renaming', {
80-
id: toastId,
81-
description: 'Copying to new name...',
82-
duration: 0,
83-
});
84-
await setComponentFile({
85-
...instanceParams,
86-
file: newFile,
87-
project: item.data.project,
88-
payload: fileContents.message,
89-
});
90-
91-
toast.loading('Renaming', {
92-
id: toastId,
93-
description: 'Removing old copy...',
94-
duration: 0,
95-
});
96-
await dropComponent({
97-
...instanceParams,
98-
file: oldFile,
99-
project: item.data.project,
100-
});
101-
toast.success('Renamed!', {
102-
id: toastId,
103-
description: 'All done!',
104-
duration: 3000,
105-
});
106-
107-
reloadRootEntries();
108-
109-
const existingIndex = item.index;
110-
const newIndex = (item.index as string).split('/').slice(0, -1).join('/') + '/' + name;
111-
112-
setSelectedItems(selectedItems => {
113-
const selectedIndex = selectedItems.indexOf(existingIndex);
114-
if (selectedIndex >= 0) {
115-
return [
116-
...selectedItems.slice(0, selectedIndex),
117-
...selectedItems.slice(selectedIndex + 1),
118-
newIndex,
119-
];
120-
}
121-
return selectedItems;
122-
});
123-
124-
setFocusedItem(focusedItem => {
125-
if (focusedItem === existingIndex) {
126-
return newIndex;
127-
}
128-
return focusedItem;
129-
});
130-
}
131-
}, [openedEntry]);
57+
const renameFile = useRenameFile();
58+
const onRenameItem = useCallback((item: TreeItem<FileEntry | DirectoryEntry | null>, name: string) => renameFile(item.data, name), [renameFile]);
13259

13360
return (
13461
<div className="h-full overflow-auto pr-1.5">

‎src/features/instance/applications/hooks/useRenameFile.ts‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { useInstanceClientIdParams } from '@/config/useInstanceClient';
2+
import { DirectoryEntry } from '@/features/instance/applications/context/directoryEntry';
3+
import { FileEntry } from '@/features/instance/applications/context/fileEntry';
4+
import { useEditorView } from '@/features/instance/applications/hooks/useEditorView';
5+
import { dropComponent } from '@/features/instance/operations/mutations/dropComponent';
6+
import { setComponentFile } from '@/features/instance/operations/mutations/setComponentFile';
7+
import { getComponentFile } from '@/features/instance/operations/queries/getComponentFile';
8+
import { useCallback } from 'react';
9+
import { toast } from 'sonner';
10+
11+
export function useRenameFile() {
12+
const {
13+
reloadRootEntries,
14+
setFocusedItem,
15+
setSelectedItems,
16+
} = useEditorView();
17+
18+
const instanceParams = useInstanceClientIdParams();
19+
20+
return useCallback(async (data: FileEntry | DirectoryEntry | null, name: string) => {
21+
if (data && data?.name !== name) {
22+
const oldFile = data.path.split('/').slice(1).join('/');
23+
const newFile = data.path.split('/').slice(1, -1).join('/') + '/' + name;
24+
25+
const toastId = toast.loading('Renaming', {
26+
description: 'Loading existing contents...',
27+
duration: 0,
28+
});
29+
const fileContents = await getComponentFile({
30+
...instanceParams,
31+
file: oldFile,
32+
project: data.project,
33+
});
34+
35+
toast.loading('Renaming', {
36+
id: toastId,
37+
description: 'Copying to new name...',
38+
duration: 0,
39+
});
40+
await setComponentFile({
41+
...instanceParams,
42+
file: newFile,
43+
project: data.project,
44+
payload: fileContents.message,
45+
});
46+
47+
toast.loading('Renaming', {
48+
id: toastId,
49+
description: 'Removing old copy...',
50+
duration: 0,
51+
});
52+
await dropComponent({
53+
...instanceParams,
54+
file: oldFile,
55+
project: data.project,
56+
});
57+
toast.success('Renamed!', {
58+
id: toastId,
59+
description: 'All done!',
60+
duration: 3000,
61+
});
62+
63+
reloadRootEntries();
64+
65+
const existingIndex = `${data.project}/${data.path}`;
66+
const newIndex = `${existingIndex.split('/').slice(0, -1).join('/')}/${name}`;
67+
68+
setSelectedItems(selectedItems => {
69+
const selectedIndex = selectedItems.indexOf(existingIndex);
70+
if (selectedIndex >= 0) {
71+
return [
72+
...selectedItems.slice(0, selectedIndex),
73+
...selectedItems.slice(selectedIndex + 1),
74+
newIndex,
75+
];
76+
}
77+
return selectedItems;
78+
});
79+
80+
setFocusedItem(focusedItem => {
81+
if (focusedItem === existingIndex) {
82+
return newIndex;
83+
}
84+
return focusedItem;
85+
});
86+
}
87+
88+
}, [instanceParams, reloadRootEntries, setFocusedItem, setSelectedItems]);
89+
}

0 commit comments

Comments
 (0)