mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-05-19 13:55:40 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refactor routes (#535)

Browse Source 
* refactor routes

* use default export for screens

* use "route" relative routing

* don't use absolute import for root screens

* no absolute importing folders!!!

* fine we can absolute import folders
This commit is contained in:
Brendan Allan
2023-01-20 12:40:36 -08:00
committed by GitHub
parent 24de617b92
commit e4e80fa603
11 changed files with 101 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/landing/package.json
View File

@@ -35,7 +35,7 @@
"ts-node": "^10.9.1",
"tsparticles": "^2.3.4",
"typescript": "^4.8.4",
"vite": "^3.1.4",
"vite": "^4.0.4",
"vite-plugin-ssr": "^0.4.39"
},
"devDependencies": {

2
crates/sync/example/web/package.json
View File

@@ -15,7 +15,7 @@
"@tanstack/react-query": "^4.10.1",
"@vitejs/plugin-react": "^2.1.0",
"typescript": "^4.8.2",
"vite": "^3.0.9"
"vite": "^4.0.4"
},
"dependencies": {
"clsx": "^1.2.1",

14
packages/config/vite/index.js
View File

@@ -17,7 +17,19 @@ module.exports = {
const item = folderItems.find((i) => i.startsWith(sourcePath.split('/').at(-1)));
return absolutePath + path.extname(item);
const fullPath = absolutePath + path.extname(item);
const stats = await fs.stat(fullPath);
if (stats.isDirectory()) {
const directoryItems = await fs.readdir(absolutePath + path.extname(item));
const indexFile = directoryItems.find((i) => i.startsWith('index'));
return `${absolutePath}/${indexFile}`;
} else {
return fullPath;
}
}
}
};

2
packages/interface/package.json
View File

@@ -75,7 +75,7 @@
"@vitejs/plugin-react": "^1.3.1",
"prettier": "^2.7.1",
"typescript": "^4.8.4",
"vite": "^3.1.4",
"vite": "^4.0.4",
"vite-plugin-svgr": "^2.2.1"
}
}

1
packages/interface/src/AppLayout.tsx
View File

@@ -2,7 +2,6 @@ import clsx from 'clsx';
import { Suspense } from 'react';
import { Outlet } from 'react-router-dom';
import { useCurrentLibrary } from '@sd/client';
import { Dialogs } from '@sd/ui';
import { Sidebar } from '~/components/layout/Sidebar';
import { Toasts } from '~/components/primitive/Toasts';
import { useOperatingSystem } from '~/hooks/useOperatingSystem';

80
packages/interface/src/AppRouter.tsx
View File

@@ -1,42 +1,12 @@
import { lazy } from '@loadable/component';
import { Navigate, Route, Routes } from 'react-router-dom';
import { Route, Routes } from 'react-router-dom';
import { useCurrentLibrary, useInvalidateQuery } from '@sd/client';
import { AppLayout } from '~/AppLayout';
import { useKeybindHandler } from '~/hooks/useKeyboardHandler';
import { AppLayout } from './AppLayout';
import screens from '~/screens';
import { lazyEl } from '~/util';
// Using React.lazy breaks hot reload so we don't use it.
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'));
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(
() => 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 Onboarding = lazyEl(() => import('./components/onboarding/Onboarding'));
const NotFound = lazyEl(() => import('./NotFound'));
export function AppRouter() {
const { library } = useCurrentLibrary();
@@ -46,7 +16,7 @@ export function AppRouter() {
return (
<Routes>
<Route path="onboarding" element={<OnboardingScreen />} />
<Route path="onboarding" element={Onboarding} />
<Route element={<AppLayout />}>
{/* As we are caching the libraries in localStore so this *shouldn't* result is visual problems unless something else is wrong */}
{library === undefined ? (
@@ -58,40 +28,8 @@ export function AppRouter() {
/>
) : (
<>
<Route index element={<Navigate to="/overview" />} />
<Route path="overview" element={<OverviewScreen />} />
<Route path="content" element={<ContentScreen />} />
<Route path="photos" element={<PhotosScreen />} />
<Route path="debug" element={<DebugScreen />} />
<Route path={'settings'} element={<SettingsScreen />}>
<Route index element={<GeneralSettings />} />
<Route path="general" element={<GeneralSettings />} />
<Route path="appearance" element={<AppearanceSettings />} />
<Route path="keybindings" element={<KeybindingSettings />} />
<Route path="extensions" element={<ExtensionSettings />} />
<Route path="p2p" element={<P2PSettings />} />
<Route path="contacts" element={<ContactsSettings />} />
<Route path="experimental" element={<ExperimentalSettings />} />
<Route path="keys" element={<KeysSettings />} />
<Route path="libraries" element={<LibrarySettings />} />
<Route path="security" element={<SecuritySettings />} />
<Route path="locations" element={<LocationSettings />} />
<Route path="sharing" element={<SharingSettings />} />
<Route path="sync" element={<SyncSettings />} />
<Route path="tags" element={<TagsSettings />} />
<Route path="library" element={<LibraryGeneralSettings />} />
<Route path="locations" element={<LocationSettings />} />
<Route path="tags" element={<TagsSettings />} />
<Route path="nodes" element={<NodesSettings />} />
<Route path="keys" element={<KeysSettings />} />
<Route path="privacy" element={<PrivacySettings />} />
<Route path="about" element={<AboutSpacedrive />} />
<Route path="changelog" element={<Changelog />} />
<Route path="support" element={<Support />} />
</Route>
<Route path="location/:id" element={<LocationExplorer />} />
<Route path="tag/:id" element={<TagExplorer />} />
<Route path="*" element={<NotFound />} />
{screens}
<Route path="*" element={NotFound} />
</>
)}
</Route>

32
packages/interface/src/screens/index.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { Navigate, Route, RouteProps } from 'react-router-dom';
import { lazyEl } from '~/util';
import settingsScreens from './settings';
const routes: RouteProps[] = [
{
index: true,
element: <Navigate to="overview" relative="route" />
},
{
path: 'overview',
element: lazyEl(() => import('./Overview'))
},
{ path: 'content', element: lazyEl(() => import('./Content')) },
{ path: 'photos', element: lazyEl(() => import('./Photos')) },
{ path: 'debug', element: lazyEl(() => import('./Debug')) },
{ path: 'location/:id', element: lazyEl(() => import('./LocationExplorer')) },
{ path: 'tag/:id', element: lazyEl(() => import('./TagExplorer')) },
{
path: 'settings',
element: lazyEl(() => import('./settings/Layout')),
children: settingsScreens
}
];
export default (
<>
{routes.map((route) => (
<Route key={route.path} {...route} />
))}
</>
);

0
packages/interface/src/screens/settings/Settings.tsx → packages/interface/src/screens/settings/Layout.tsx
View File

37
packages/interface/src/screens/settings/index.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { Navigate, Route, RouteProps } from 'react-router-dom';
import { lazyEl } from '~/util';
const routes: RouteProps[] = [
{ index: true, element: <Navigate to="general" relative="route" /> },
{ path: 'general', element: lazyEl(() => import('./client/GeneralSettings')) },
{ path: 'appearance', element: lazyEl(() => import('./client/AppearanceSettings')) },
{ path: 'keybindings', element: lazyEl(() => import('./client/KeybindingSettings')) },
{ path: 'extensions', element: lazyEl(() => import('./client/ExtensionsSettings')) },
{ path: 'p2p', element: lazyEl(() => import('./node/P2PSettings')) },
{ path: 'contacts', element: lazyEl(() => import('./library/ContactsSettings')) },
{ path: 'experimental', element: lazyEl(() => import('./node/ExperimentalSettings')) },
{ path: 'keys', element: lazyEl(() => import('./library/KeysSetting')) },
{ path: 'libraries', element: lazyEl(() => import('./node/LibrariesSettings')) },
{ path: 'security', element: lazyEl(() => import('./library/SecuritySettings')) },
{ path: 'locations', element: lazyEl(() => import('./library/LocationSettings')) },
{ path: 'sharing', element: lazyEl(() => import('./library/SharingSettings')) },
{ path: 'sync', element: lazyEl(() => import('./library/SyncSettings')) },
{ path: 'tags', element: lazyEl(() => import('./library/TagsSettings')) },
{ path: 'library', element: lazyEl(() => import('./library/LibraryGeneralSettings')) },
{ path: 'locations', element: lazyEl(() => import('./library/LocationSettings')) },
{ path: 'tags', element: lazyEl(() => import('./library/TagsSettings')) },
{ path: 'nodes', element: lazyEl(() => import('./library/NodesSettings')) },
{ path: 'keys', element: lazyEl(() => import('./library/KeysSetting')) },
{ path: 'privacy', element: lazyEl(() => import('./client/PrivacySettings')) },
{ path: 'about', element: lazyEl(() => import('./info/AboutSpacedrive')) },
{ path: 'changelog', element: lazyEl(() => import('./info/Changelog')) },
{ path: 'support', element: lazyEl(() => import('./info/Support')) }
];
export default (
<>
{routes.map((route) => (
<Route key={route.path} {...route} />
))}
</>
);

7
packages/interface/src/util/index.tsx Normal file
View File

@@ -0,0 +1,7 @@
import { lazy } from '@loadable/component';
import { ReactNode } from 'react';
export function lazyEl(fn: Parameters<typeof lazy>[0]): ReactNode {
const Element = lazy(fn);
return <Element />;
}

BIN
pnpm-lock.yaml generated
View File

Binary file not shown.