Skip to content

Commit a491187

Browse files
dawsontothdawsontoth
committed
chore: Split all modals out
1 parent eb2c15f commit a491187

File tree

5 files changed

+33
-54
lines changed

5 files changed

+33
-54
lines changed

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

Lines changed: 14 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,8 @@ import { isLocalStudio } from '@/config/constants';
44
import { useInstanceClientIdParams } from '@/config/useInstanceClient';
55
import { isDirectory } from '@/features/instance/applications/context/isDirectory';
66
import { useEditorView } from '@/features/instance/applications/hooks/useEditorView';
7-
import { AddDirectoryOrFileModal } from '@/features/instance/applications/modals/AddDirectoryOrFileModal';
8-
import { RenameFileModal } from '@/features/instance/applications/modals/RenameFileModal';
97
import { useEffectedState } from '@/hooks/useEffectedState';
108
import { useInstanceBrowseManagePermission } from '@/hooks/usePermissions';
11-
import { useToggler } from '@/hooks/useToggler';
129
import { currySetWatchedValue, useSetWatchedValue } from '@/hooks/useWatchedValue';
1310
import { WatchedValueKeys } from '@/lib/storage/watchedValueKeys';
1411
import { parseFileExtension } from '@/lib/string/parseFileExtension';
@@ -82,19 +79,6 @@ export function TextEditorView() {
8279
mountedRef.current = [editor, monaco];
8380
}, [mountedRef, onSaveClick]);
8481

85-
const {
86-
toggled: isAddingDirectory,
87-
toggleOn: onAddDirectoryClicked,
88-
toggleOff: hideAddingDirectory,
89-
} = useToggler(false);
90-
const { toggled: isAddingFile, toggleOn: onAddFileClicked, toggleOff: hideAddingFile } = useToggler(false);
91-
const { toggled: isRenamingFile, toggleOn: onRenameClick, toggleOff: onHideRenamingFileModal } = useToggler(false);
92-
93-
const onHideAddDirectoryModal = useCallback(() => {
94-
hideAddingDirectory();
95-
hideAddingFile();
96-
}, []);
97-
9882
const restrictPackageModification = useMemo(() => {
9983
if (!openedEntry) {
10084
return false;
@@ -103,32 +87,30 @@ export function TextEditorView() {
10387
|| openedEntry.package?.includes('github.com/HarperFast/status-check-fabric');
10488
}, [openedEntry?.package]);
10589

106-
const onDeleteClick = useSetWatchedValue(WatchedValueKeys.ShowDeleteDirectoryOrFileModal, true);
107-
const onRedeployClicked = useSetWatchedValue(WatchedValueKeys.ShowRedeployApplicationModal, true);
108-
10990
useEffect(() => {
11091
if (!mountedRef.current || !canManageBrowseInstance || !!openedEntry?.package) {
11192
return;
11293
}
11394
const [editor, monaco] = mountedRef.current;
95+
// TODO: Split these out too.
11496
const disposables = [
11597
editor.addAction({
11698
id: 'new-file',
11799
label: 'New File',
118100
keybindings: [monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KeyN],
119-
run: onAddFileClicked,
101+
run: currySetWatchedValue(WatchedValueKeys.ShowAddDirectoryOrFileModalType, 'file'),
120102
}),
121103
editor.addAction({
122104
id: 'rename-file',
123105
label: 'Rename File',
124106
keybindings: [monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KeyR],
125-
run: onRenameClick,
107+
run: currySetWatchedValue(WatchedValueKeys.ShowRenameFileModal, true),
126108
}),
127109
editor.addAction({
128110
id: 'new-directory',
129111
label: 'New Directory',
130112
keybindings: [monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyN],
131-
run: onAddDirectoryClicked,
113+
run: currySetWatchedValue(WatchedValueKeys.ShowAddDirectoryOrFileModalType, 'directory'),
132114
}),
133115
editor.addAction({
134116
id: 'save-file',
@@ -152,7 +134,13 @@ export function TextEditorView() {
152134
disposable?.dispose();
153135
}
154136
};
155-
}, [mountedRef, canManageBrowseInstance, openedEntry, onAddFileClicked, onRenameClick, onAddDirectoryClicked, onSaveClick, onRevertChangesClicked]);
137+
}, [mountedRef, canManageBrowseInstance, openedEntry, onSaveClick, onRevertChangesClicked]);
138+
139+
const onAddFileClick = useSetWatchedValue(WatchedValueKeys.ShowAddDirectoryOrFileModalType, 'file');
140+
const onAddDirectoryClick = useSetWatchedValue(WatchedValueKeys.ShowAddDirectoryOrFileModalType, 'directory');
141+
const onRenameClick = useSetWatchedValue(WatchedValueKeys.ShowRenameFileModal, true);
142+
const onDeleteClick = useSetWatchedValue(WatchedValueKeys.ShowDeleteDirectoryOrFileModal, true);
143+
const onRedeployClick = useSetWatchedValue(WatchedValueKeys.ShowRedeployApplicationModal, true);
156144

157145
if (!openedEntry) {
158146
return null;
@@ -211,7 +199,7 @@ export function TextEditorView() {
211199
{!openedEntry.package && canManageBrowseInstance && <Button
212200
variant="ghost"
213201
className="rounded-none"
214-
onClick={onAddFileClicked}
202+
onClick={onAddFileClick}
215203
>
216204
<FileIcon />
217205
<span className="hidden lg:inline-block"><u>N</u>ew File</span>
@@ -220,7 +208,7 @@ export function TextEditorView() {
220208
{!openedEntry.package && canManageBrowseInstance && <Button
221209
variant="ghost"
222210
className="rounded-none"
223-
onClick={onAddDirectoryClicked}
211+
onClick={onAddDirectoryClick}
224212
>
225213
<FolderIcon />
226214
<span className="hidden lg:inline-block"><u>A</u>dd Directory</span>
@@ -229,7 +217,7 @@ export function TextEditorView() {
229217
{!!openedEntry.package && canManageBrowseInstance && !restrictPackageModification && <Button
230218
variant="ghost"
231219
className="rounded-none"
232-
onClick={onRedeployClicked}
220+
onClick={onRedeployClick}
233221
>
234222
<PackageIcon />
235223
<span>Redeploy <u>P</u>ackage</span>
@@ -266,16 +254,6 @@ export function TextEditorView() {
266254
<span className="hidden xl:inline-block"><u>D</u>elete</span>
267255
</Button>}
268256
</div>
269-
270-
<AddDirectoryOrFileModal
271-
isModalOpen={isAddingDirectory || isAddingFile}
272-
hideModal={onHideAddDirectoryModal}
273-
type={isAddingDirectory ? 'directory' : 'file'}
274-
/>
275-
<RenameFileModal
276-
isModalOpen={isRenamingFile}
277-
hideModal={onHideRenamingFileModal}
278-
/>
279257
</>
280258
);
281259
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import { AddDirectoryOrFileModal } from '@/features/instance/applications/modals/AddDirectoryOrFileModal';
12
import { DeleteDirectoryOrFileModal } from '@/features/instance/applications/modals/DeleteDirectoryOrFileModal';
23
import { RedeployApplicationModal } from '@/features/instance/applications/modals/RedeployApplicationModal';
4+
import { RenameFileModal } from '@/features/instance/applications/modals/RenameFileModal';
35
import { useToggler } from '@/hooks/useToggler';
46
import { cx } from 'class-variance-authority';
57
import { PanelRightCloseIcon, PanelRightOpenIcon } from 'lucide-react';
@@ -36,8 +38,10 @@ export function ApplicationsEditor() {
3638
<TextEditorView />
3739
</div>
3840

41+
<AddDirectoryOrFileModal />
3942
<DeleteDirectoryOrFileModal />
4043
<RedeployApplicationModal />
44+
<RenameFileModal />
4145
</EditorViewProvider>
4246
);
4347
}

‎src/features/instance/applications/modals/AddDirectoryOrFileModal.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,22 +18,20 @@ import { useInstanceClientIdParams } from '@/config/useInstanceClient';
1818
import { isDirectory } from '@/features/instance/applications/context/isDirectory';
1919
import { useEditorView } from '@/features/instance/applications/hooks/useEditorView';
2020
import { useSetComponentFile } from '@/features/instance/operations/mutations/setComponentFile';
21+
import { useSetWatchedValue, useWatchedValue } from '@/hooks/useWatchedValue';
2122
import { excludeFalsy } from '@/lib/arrays/excludeFalsy';
23+
import { WatchedValueKeys } from '@/lib/storage/watchedValueKeys';
2224
import { zodResolver } from '@hookform/resolvers/zod';
2325
import { Ban, Plus } from 'lucide-react';
2426
import { useCallback } from 'react';
2527
import { useForm } from 'react-hook-form';
2628
import z from 'zod';
2729

28-
export function AddDirectoryOrFileModal({
29-
isModalOpen = false,
30-
hideModal,
31-
type,
32-
}: {
33-
readonly isModalOpen?: boolean;
34-
readonly hideModal: () => void;
35-
readonly type: 'directory' | 'file';
36-
}) {
30+
export function AddDirectoryOrFileModal() {
31+
type ModalType = 'directory' | 'file' | false;
32+
const type = useWatchedValue<ModalType>(WatchedValueKeys.ShowAddDirectoryOrFileModalType, false);
33+
const hideModal = useSetWatchedValue<ModalType>(WatchedValueKeys.ShowAddDirectoryOrFileModalType, false);
34+
3735
const { openedEntry, reloadRootEntries, setFocusedItem, setSelectedItems, setExpandedItems } = useEditorView();
3836
const instanceParams = useInstanceClientIdParams();
3937
const { mutate: addFolderFile, isPending } = useSetComponentFile();
@@ -94,7 +92,7 @@ export function AddDirectoryOrFileModal({
9492
}, [hideModal, form]);
9593

9694
return (
97-
<Dialog onOpenChange={hideModal} open={isModalOpen}>
95+
<Dialog onOpenChange={hideModal} open={!!type}>
9896
<DialogContent aria-describedby={undefined} className="text-white">
9997
<Form {...form}>
10098
<form onSubmit={form.handleSubmit(submitForm)}>

‎src/features/instance/applications/modals/RenameFileModal.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,18 @@ import { FormMessage } from '@/components/ui/form/FormMessage';
1616
import { Input } from '@/components/ui/input';
1717
import { useEditorView } from '@/features/instance/applications/hooks/useEditorView';
1818
import { useRenameFile } from '@/features/instance/applications/hooks/useRenameFile';
19+
import { useSetWatchedValue, useWatchedValue } from '@/hooks/useWatchedValue';
20+
import { WatchedValueKeys } from '@/lib/storage/watchedValueKeys';
1921
import { zodResolver } from '@hookform/resolvers/zod';
2022
import { Ban, PencilIcon } from 'lucide-react';
2123
import { useCallback, useEffect, useState } from 'react';
2224
import { useForm } from 'react-hook-form';
2325
import z from 'zod';
2426

25-
export function RenameFileModal({
26-
isModalOpen = false,
27-
hideModal,
28-
}: {
29-
readonly isModalOpen?: boolean;
30-
readonly hideModal: () => void;
31-
}) {
27+
export function RenameFileModal() {
28+
const isModalOpen = useWatchedValue(WatchedValueKeys.ShowRenameFileModal, false);
29+
const hideModal = useSetWatchedValue(WatchedValueKeys.ShowRenameFileModal, false);
30+
3231
const { openedEntry } = useEditorView();
3332
const RenameFileSchema = z.object({
3433
name: z

‎src/lib/storage/watchedValueKeys.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const enum WatchedValueKeys {
2-
ShowAddDirectoryOrFileModal = 'ShowAddDirectoryOrFileModal',
2+
ShowAddDirectoryOrFileModalType = 'ShowAddDirectoryOrFileModalType',
33
ShowDeleteDirectoryOrFileModal = 'ShowDeleteDirectoryOrFileModal',
44
ShowRedeployApplicationModal = 'ShowRedeployApplicationModal',
55
ShowRenameFileModal = 'ShowRenameFileModal',

0 commit comments

Comments
 (0)