From bea74aede48ecc485ba408ddbb23c36a325d0cc9 Mon Sep 17 00:00:00 2001 From: Oscar Beaumont Date: Sat, 15 Oct 2022 03:56:55 +0800 Subject: [PATCH] fix hot reload + move navigate() to --- apps/landing/src/components/NavBar.tsx | 1 + packages/client/package.json | 1 - packages/interface/package.json | 2 + packages/interface/src/AppRouter.tsx | 62 +++++------ .../components/dialog/CreateLibraryDialog.tsx | 2 - .../interface/src/components/layout/Modal.tsx | 13 +-- .../src/components/layout/Sidebar.tsx | 2 +- .../settings/node/LibrariesSettings.tsx | 16 +-- packages/ui/package.json | 1 + packages/ui/src/Button.tsx | 32 ++++++ packages/ui/src/Dropdown.tsx | 97 ++++++++++++------ pnpm-lock.yaml | Bin 683033 -> 684048 bytes 12 files changed, 142 insertions(+), 87 deletions(-) diff --git a/apps/landing/src/components/NavBar.tsx b/apps/landing/src/components/NavBar.tsx index 1c36dccd9..ad9c7101b 100644 --- a/apps/landing/src/components/NavBar.tsx +++ b/apps/landing/src/components/NavBar.tsx @@ -142,6 +142,7 @@ export default function NavBar() { buttonIcon={} buttonProps={{ className: '!p-1 ml-[140px] hover:!bg-transparent' }} /> +
diff --git a/packages/client/package.json b/packages/client/package.json index 9f8fd64dc..6e0ca3c10 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -20,7 +20,6 @@ "@rspc/client": "^0.1.2", "@rspc/react": "^0.1.2", "@sd/config": "workspace:*", - "@sd/interface": "workspace:*", "@tanstack/react-query": "^4.10.1", "eventemitter3": "^4.0.7", "immer": "^9.0.15", diff --git a/packages/interface/package.json b/packages/interface/package.json index 387b62f82..bc17a2b6a 100644 --- a/packages/interface/package.json +++ b/packages/interface/package.json @@ -18,6 +18,7 @@ "@fontsource/inter": "^4.5.13", "@headlessui/react": "^1.7.3", "@heroicons/react": "^2.0.12", + "@loadable/component": "^5.15.2", "@radix-ui/react-dialog": "^1.0.0", "@radix-ui/react-dropdown-menu": "^1.0.0", "@radix-ui/react-icons": "^1.1.1", @@ -77,6 +78,7 @@ "@sd/config": "workspace:*", "@types/babel-core": "^6.25.7", "@types/byte-size": "^8.1.0", + "@types/loadable__component": "^5.13.4", "@types/lodash": "^4.14.186", "@types/node": "^18.8.2", "@types/pretty-bytes": "^5.2.0", diff --git a/packages/interface/src/AppRouter.tsx b/packages/interface/src/AppRouter.tsx index db5b6a7a2..d3149b853 100644 --- a/packages/interface/src/AppRouter.tsx +++ b/packages/interface/src/AppRouter.tsx @@ -1,42 +1,44 @@ +import loadable from '@loadable/component'; import { useCurrentLibrary, useInvalidateQuery } from '@sd/client'; -import { Suspense, lazy } from 'react'; +import { Suspense } from 'react'; import { Navigate, Route, Routes } from 'react-router-dom'; import { AppLayout } from './AppLayout'; import { useKeybindHandler } from './hooks/useKeyboardHandler'; -const DebugScreen = lazy(() => import('./screens/Debug')); -const SettingsScreen = lazy(() => import('./screens/settings/Settings')); -const TagExplorer = lazy(() => import('./screens/TagExplorer')); -const PhotosScreen = lazy(() => import('./screens/Photos')); -const OverviewScreen = lazy(() => import('./screens/Overview')); -const ContentScreen = lazy(() => import('./screens/Content')); -const LocationExplorer = lazy(() => import('./screens/LocationExplorer')); -const OnboardingScreen = lazy(() => import('./components/onboarding/Onboarding')); -const NotFound = lazy(() => import('./NotFound')); +// Using React.lazy breaks hot reload so we don't use it. +const DebugScreen = loadable(() => import('./screens/Debug')); +const SettingsScreen = loadable(() => import('./screens/settings/Settings')); +const TagExplorer = loadable(() => import('./screens/TagExplorer')); +const PhotosScreen = loadable(() => import('./screens/Photos')); +const OverviewScreen = loadable(() => import('./screens/Overview')); +const ContentScreen = loadable(() => import('./screens/Content')); +const LocationExplorer = loadable(() => import('./screens/LocationExplorer')); +const OnboardingScreen = loadable(() => import('./components/onboarding/Onboarding')); +const NotFound = loadable(() => import('./NotFound')); -const AppearanceSettings = lazy(() => import('./screens/settings/client/AppearanceSettings')); -const ExtensionSettings = lazy(() => import('./screens/settings/client/ExtensionsSettings')); -const GeneralSettings = lazy(() => import('./screens/settings/client/GeneralSettings')); -const KeybindingSettings = lazy(() => import('./screens/settings/client/KeybindingSettings')); -const PrivacySettings = lazy(() => import('./screens/settings/client/PrivacySettings')); -const AboutSpacedrive = lazy(() => import('./screens/settings/info/AboutSpacedrive')); -const Changelog = lazy(() => import('./screens/settings/info/Changelog')); -const Support = lazy(() => import('./screens/settings/info/Support')); -const ContactsSettings = lazy(() => import('./screens/settings/library/ContactsSettings')); -const KeysSettings = lazy(() => import('./screens/settings/library/KeysSetting')); -const LibraryGeneralSettings = lazy( +const AppearanceSettings = loadable(() => import('./screens/settings/client/AppearanceSettings')); +const ExtensionSettings = loadable(() => import('./screens/settings/client/ExtensionsSettings')); +const GeneralSettings = loadable(() => import('./screens/settings/client/GeneralSettings')); +const KeybindingSettings = loadable(() => import('./screens/settings/client/KeybindingSettings')); +const PrivacySettings = loadable(() => import('./screens/settings/client/PrivacySettings')); +const AboutSpacedrive = loadable(() => import('./screens/settings/info/AboutSpacedrive')); +const Changelog = loadable(() => import('./screens/settings/info/Changelog')); +const Support = loadable(() => import('./screens/settings/info/Support')); +const ContactsSettings = loadable(() => import('./screens/settings/library/ContactsSettings')); +const KeysSettings = loadable(() => import('./screens/settings/library/KeysSetting')); +const LibraryGeneralSettings = loadable( () => import('./screens/settings/library/LibraryGeneralSettings') ); -const LocationSettings = lazy(() => import('./screens/settings/library/LocationSettings')); -const NodesSettings = lazy(() => import('./screens/settings/library/NodesSettings')); -const SecuritySettings = lazy(() => import('./screens/settings/library/SecuritySettings')); -const SharingSettings = lazy(() => import('./screens/settings/library/SharingSettings')); -const SyncSettings = lazy(() => import('./screens/settings/library/SyncSettings')); -const TagsSettings = lazy(() => import('./screens/settings/library/TagsSettings')); -const ExperimentalSettings = lazy(() => import('./screens/settings/node/ExperimentalSettings')); -const LibrarySettings = lazy(() => import('./screens/settings/node/LibrariesSettings')); -const P2PSettings = lazy(() => import('./screens/settings/node/P2PSettings')); +const LocationSettings = loadable(() => import('./screens/settings/library/LocationSettings')); +const NodesSettings = loadable(() => import('./screens/settings/library/NodesSettings')); +const SecuritySettings = loadable(() => import('./screens/settings/library/SecuritySettings')); +const SharingSettings = loadable(() => import('./screens/settings/library/SharingSettings')); +const SyncSettings = loadable(() => import('./screens/settings/library/SyncSettings')); +const TagsSettings = loadable(() => import('./screens/settings/library/TagsSettings')); +const ExperimentalSettings = loadable(() => import('./screens/settings/node/ExperimentalSettings')); +const LibrarySettings = loadable(() => import('./screens/settings/node/LibrariesSettings')); +const P2PSettings = loadable(() => import('./screens/settings/node/P2PSettings')); export function AppRouter() { const { library } = useCurrentLibrary(); diff --git a/packages/interface/src/components/dialog/CreateLibraryDialog.tsx b/packages/interface/src/components/dialog/CreateLibraryDialog.tsx index 6ee5faa54..6195dac6f 100644 --- a/packages/interface/src/components/dialog/CreateLibraryDialog.tsx +++ b/packages/interface/src/components/dialog/CreateLibraryDialog.tsx @@ -17,8 +17,6 @@ export default function CreateLibraryDialog({ 'library.create', { onSuccess: (library: any) => { - console.log('SUBMITTING'); - setOpenCreateModal(false); queryClient.setQueryData(['library.list'], (libraries: any) => [ diff --git a/packages/interface/src/components/layout/Modal.tsx b/packages/interface/src/components/layout/Modal.tsx index 4f0d7989b..675ae4326 100644 --- a/packages/interface/src/components/layout/Modal.tsx +++ b/packages/interface/src/components/layout/Modal.tsx @@ -1,8 +1,7 @@ import { Transition } from '@headlessui/react'; import { XMarkIcon } from '@heroicons/react/24/solid'; -import { Button } from '@sd/ui'; +import { ButtonLink } from '@sd/ui'; import clsx from 'clsx'; -import { useNavigate } from 'react-router-dom'; export interface ModalProps { full?: boolean; @@ -10,7 +9,6 @@ export interface ModalProps { } export const Modal: React.FC = (props) => { - const navigate = useNavigate(); return (
= (props) => { >
navigate('/')} className="absolute top-0 left-0 w-screen h-screen bg-white -z-50 rounded-2xl dark:bg-gray-800 bg-opacity-90" /> - + navigate('settings/library') + to: 'settings/library' }, { name: 'Add Library', diff --git a/packages/interface/src/screens/settings/node/LibrariesSettings.tsx b/packages/interface/src/screens/settings/node/LibrariesSettings.tsx index 3d8665755..a213a72ba 100644 --- a/packages/interface/src/screens/settings/node/LibrariesSettings.tsx +++ b/packages/interface/src/screens/settings/node/LibrariesSettings.tsx @@ -1,10 +1,9 @@ import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline'; import { useBridgeMutation, useBridgeQuery } from '@sd/client'; import { LibraryConfigWrapped } from '@sd/client'; -import { Button } from '@sd/ui'; +import { Button, ButtonLink } from '@sd/ui'; import { DotsSixVertical } from 'phosphor-react'; import { useState } from 'react'; -import { useNavigate } from 'react-router'; import CreateLibraryDialog from '../../../components/dialog/CreateLibraryDialog'; import DeleteLibraryDialog from '../../../components/dialog/DeleteLibraryDialog'; @@ -13,7 +12,6 @@ import { SettingsContainer } from '../../../components/settings/SettingsContaine import { SettingsHeader } from '../../../components/settings/SettingsHeader'; function LibraryListItem(props: { library: LibraryConfigWrapped }) { - const navigate = useNavigate(); const [openDeleteModal, setOpenDeleteModal] = useState(false); const { mutate: deleteLib, isLoading: libDeletePending } = useBridgeMutation('library.delete', { @@ -22,14 +20,6 @@ function LibraryListItem(props: { library: LibraryConfigWrapped }) { } }); - function handleEditLibrary() { - // switch library if requesting to edit non-current library - navigate('/settings/library'); - // if (props.library.uuid !== store.currentLibraryUuid) { - // switchLibrary(props.library.uuid); - // } - } - return ( @@ -38,9 +28,9 @@ function LibraryListItem(props: { library: LibraryConfigWrapped }) {

{props.library.uuid}

- + + {button.to ? ( + + {button.icon && ( + + )} + {button.name} + + ) : ( + + )} ); }} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 018a6fe2eb93b69e33c0ae764e93ecf1d2d4d0e1..969a410287929a9b985d1feb1443be4dc1f8e415 100644 GIT binary patch delta 703 zcmbPvLvz9d%?&n+lP551Os=xx+dNgVopG`xyX^Gy+DxpQ)0HJyWODKoQxcPMQuUMb za|`nGQu9jGtrX%+^$bn*j3$3nm)P8=zJN&@q9#5bU6HY#$>ahniOr^3nQT&6jRKoA zxlurT`hv%d{FD3CIX7=JIL#@A%|xJDpn;nUti;$R{}X1Le860AbG^e!rpW;!AdYdf zhx2w1XGYB?NldHsAx@s2Sjb@%T2$%g808;f8emlBmK~Z>mFQR!;%;H#>7G|)Sy&OA zQsxs>=2aOSksRu1;$%`07G7Eu>gVWEYV4Tj9gtmI;UATlm6KH%Qsm<5k{p?p>SK~q z<}>}_DK?eq9043k(;GuM6s8|o$0#qAk)K&yqMMhWr(2Yom|UV;T#{IlnOtn8U_9Nx zlS6j$0V$5@d(}92ra!7;6lpI!%DBDoDASRpq8Q!>xqo`0E~7?hWJbQTb46uoS%6VQ zYLs7+M^dImc#@^7Z(^udsiRStyGMmrT3T{oWRaJ*r+096Wv*9IMp9LAnq{R)RY6E@ zk!gWzg`=ZuhG|BUo0*YCfMb+}%k;o*M)~Ons+slMjkB47m}R?hHtX}3qF9|jJ^nVU zcBp>3duCZhriE94cer1!ez-waaBfwyZ$Lp>L4Z%PaZ04VnR`V>gi%JIWu|+UaiU9F zc21ayYlyjDmUlsLW}Z)hmuXpITB2oUrn{$WRJx%-aGKL}!G|oe(+}KWWSzc8je{2y YF2d~+p=?0R4#XTl%(-16l#5Xu0E=1jg8%>k delta 165 zcmbR6Ky&5|%?&n+lc$O+PoBW6G5NL?-()K-iRl}@F|$vuXAzhl!O6oSAtgsYPjt$*GeU8q03xRaRq}%x%lRIbD4L)8q%r?3=B$GTEjJJYy8x{M6tQ zCs0Ukll61f&8&`xn3`O+xiD%rwXZ$SxP9$$rXx$+gY%eym}Pr#9_!PW?ShePK+F!r O96-#uT`-dCzZd|r(mZ|u