From 16e33694698f9aca3b534a2177007407b14a600a Mon Sep 17 00:00:00 2001 From: Nicholas Nelson Date: Fri, 21 Apr 2023 12:09:47 -0700 Subject: [PATCH] Prettier formatting for menus and modal dialogs --- src/components/NavItem/NavItem.tsx | 6 ++-- src/components/NavMenu/NavMenu.tsx | 53 +++++++++++++++++++++--------- src/containers/dialogs.ts | 49 +++++++++++++++++++-------- src/store/slices/modals.ts | 45 +++++++++++++------------ 4 files changed, 100 insertions(+), 53 deletions(-) diff --git a/src/components/NavItem/NavItem.tsx b/src/components/NavItem/NavItem.tsx index fc10bb615..638f8b24d 100644 --- a/src/components/NavItem/NavItem.tsx +++ b/src/components/NavItem/NavItem.tsx @@ -10,8 +10,10 @@ export type NavItemProps = { const NavItem = ({ label, click, disabled }: NavItemProps) => { return ( - {label} + + {label} + ); }; -export default NavItem; \ No newline at end of file +export default NavItem; diff --git a/src/components/NavMenu/NavMenu.tsx b/src/components/NavMenu/NavMenu.tsx index a03b773d0..85313df73 100644 --- a/src/components/NavMenu/NavMenu.tsx +++ b/src/components/NavMenu/NavMenu.tsx @@ -11,13 +11,13 @@ import NavItem, { NavItemProps } from '../NavItem/NavItem'; type NavMenuProps = { label: string; submenu: NavItemProps[]; -} +}; const NavMenu = ({ label, submenu }: NavMenuProps) => { const [open, setOpen] = React.useState(false); const anchorRef = React.useRef(null); - const handleToggle = () => setOpen((prevOpen) => !prevOpen); + const handleToggle = () => setOpen(prevOpen => !prevOpen); const handleClose = (event: React.MouseEvent) => { if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) { @@ -35,22 +35,45 @@ const NavMenu = ({ label, submenu }: NavMenuProps) => { return ( <> - - + {({ TransitionProps, placement }) => ( - + - - {submenu.map(item => ) => { - item.click(event); - setOpen(false); - }} />)} + + {submenu.map(item => ( + ) => { + item.click(event); + setOpen(false); + }} + /> + ))} @@ -59,6 +82,6 @@ const NavMenu = ({ label, submenu }: NavMenuProps) => { ); -} +}; -export default NavMenu; \ No newline at end of file +export default NavMenu; diff --git a/src/containers/dialogs.ts b/src/containers/dialogs.ts index 9bd121e17..9da9643db 100644 --- a/src/containers/dialogs.ts +++ b/src/containers/dialogs.ts @@ -13,10 +13,21 @@ export const fileOpenDialog = createAppAsyncThunk( 'dialogs/fileOpenDialog', async (pickerType, thunkAPI) => { const isMac = process.platform === 'darwin'; - const properties: ('openFile' | 'openDirectory')[] = pickerType ? [pickerType] : (isMac ? ['openFile', 'openDirectory'] : ['openFile']); - const paths: Electron.OpenDialogReturnValue = await ipcRenderer.invoke('fileOpenDialog', properties); + const properties: ('openFile' | 'openDirectory')[] = pickerType + ? [pickerType] + : isMac + ? ['openFile', 'openDirectory'] + : ['openFile']; + const paths: Electron.OpenDialogReturnValue = await ipcRenderer.invoke( + 'fileOpenDialog', + properties + ); if (!paths.canceled && paths.filePaths) { - await Promise.all(paths.filePaths.map(async filePath => await thunkAPI.dispatch(buildCard({ path: filePath })))); + await Promise.all( + paths.filePaths.map( + async filePath => await thunkAPI.dispatch(buildCard({ path: filePath })) + ) + ); } } ); @@ -25,17 +36,24 @@ export const fileSaveDialog = createAppAsyncThunk( 'dialogs/fileSaveDialog', async (metafile, thunkAPI) => { const isMac = process.platform === 'darwin'; - const properties: ('showHiddenFiles' | 'createDirectory')[] = isMac ? ['showHiddenFiles', 'createDirectory'] : ['showHiddenFiles']; - const response: Electron.SaveDialogReturnValue = await ipcRenderer.invoke('fileSaveDialog', - { defaultPath: join(process.cwd(), metafile.name), properties: properties }); + const properties: ('showHiddenFiles' | 'createDirectory')[] = isMac + ? ['showHiddenFiles', 'createDirectory'] + : ['showHiddenFiles']; + const response: Electron.SaveDialogReturnValue = await ipcRenderer.invoke('fileSaveDialog', { + defaultPath: join(process.cwd(), metafile.name), + properties: properties + }); if (!response.canceled && response.filePath && metafile.content) { // update metafile - thunkAPI.dispatch(metafileUpdated({ ...metafile, path: response.filePath, state: 'unmodified' })); + thunkAPI.dispatch( + metafileUpdated({ ...metafile, path: response.filePath, state: 'unmodified' }) + ); // write file await writeFileAsync(response.filePath, metafile.content); // update git info await Promise.all( - metafileSelectors.selectByFilepath(thunkAPI.getState(), response.filePath) + metafileSelectors + .selectByFilepath(thunkAPI.getState(), response.filePath) .filter(isFilebasedMetafile) .map(async m => await thunkAPI.dispatch(updateVersionedMetafile(m))) ); @@ -47,14 +65,19 @@ export const fileSaveDialog = createAppAsyncThunk( export const cloneDirectoryDialog = createAppAsyncThunk( 'dialogs/cloneDirectoryDialog', - async (repoName) => { + async repoName => { const isMac = process.platform === 'darwin'; - const properties: ('showHiddenFiles' | 'createDirectory')[] = isMac ? ['showHiddenFiles', 'createDirectory'] : ['showHiddenFiles']; - const response: Electron.SaveDialogReturnValue = await ipcRenderer.invoke('fileSaveDialog', - { defaultPath: join(process.cwd(), repoName), properties: properties, buttonLabel: 'Select Repo Location' }); + const properties: ('showHiddenFiles' | 'createDirectory')[] = isMac + ? ['showHiddenFiles', 'createDirectory'] + : ['showHiddenFiles']; + const response: Electron.SaveDialogReturnValue = await ipcRenderer.invoke('fileSaveDialog', { + defaultPath: join(process.cwd(), repoName), + properties: properties, + buttonLabel: 'Select Repo Location' + }); if (!response.canceled && response.filePath) { return response.filePath; } return null; } -); \ No newline at end of file +); diff --git a/src/store/slices/modals.ts b/src/store/slices/modals.ts index e5493cad4..0fa53397a 100644 --- a/src/store/slices/modals.ts +++ b/src/store/slices/modals.ts @@ -4,33 +4,32 @@ import { ModalType, UUID } from '../types'; /** A queued modal event (dialog or error) that requires a visible response from the system. */ export type Modal = { - /** The UUID for Modal object. */ - readonly id: UUID; - /** The type of modal (e.g. `NewCardDialog` or `Error`). */ - readonly type: ModalType; - /** The UUID for related object that triggered the modal event. */ - readonly target?: UUID; - /** Options targeting specific types of modals. */ - readonly options?: { [key: string]: string | number | boolean } -} + /** The UUID for Modal object. */ + readonly id: UUID; + /** The type of modal (e.g. `NewCardDialog`, `Error`, etc). */ + readonly type: ModalType; + /** The UUID for related object that triggered the modal event. */ + readonly target?: UUID; + /** Options targeting specific types of modals. */ + readonly options?: { [key: string]: string | number | boolean }; +}; export const modalAdapter = createEntityAdapter(); export const modalSlice = createSlice({ - name: 'modals', - initialState: modalAdapter.getInitialState(), - reducers: { - modalAdded: modalAdapter.addOne, - modalRemoved: modalAdapter.removeOne - }, - extraReducers: (builder) => { - builder - .addCase(PURGE, (state) => { - modalAdapter.removeAll(state); - }) - } -}) + name: 'modals', + initialState: modalAdapter.getInitialState(), + reducers: { + modalAdded: modalAdapter.addOne, + modalRemoved: modalAdapter.removeOne + }, + extraReducers: builder => { + builder.addCase(PURGE, state => { + modalAdapter.removeAll(state); + }); + } +}); export const { modalAdded, modalRemoved } = modalSlice.actions; -export default modalSlice.reducer; \ No newline at end of file +export default modalSlice.reducer;