refactor: data fetching for the public paste page

This includes changing routing to use createBrowserRouter and createRoutesFromElements which includes the use of the loader function.

.dockerignore

@@ -2,4 +2,5 @@ node_modules
 .github
 example_request_do.log
 bin/
-.git
+.git
+hemmelig.backup.db

.gitignore

@@ -121,4 +121,5 @@ hemmelig.db*
 prisma_test.js
 database/
 data/
-.vscode
+.vscode
+hemmelig.backup.db

.npmignore

@@ -6,3 +6,4 @@ config/
 public/
 .github/
 tests/
+hemmelig.backup.db

package.json

@@ -65,6 +65,7 @@
     "node-fetch": "^2.6.7",
     "pretty-bytes": "^4.0.2",
     "react-qr-code": "^2.0.8",
+    "react-router-dom": "^6.21.3",
     "sanitize-filename": "^1.6.3",
     "tweetnacl": "^0.14.5",
     "tweetnacl-util": "^0.15.1",
@@ -97,7 +98,6 @@
     "react-i18next": "^11.18.5",
     "react-quill": "^2.0.0",
     "react-redux": "^7.2.5",
-    "react-router-dom": "^6.10.0",
     "redux": "^4.1.1",
     "vite": "^4.2.1"
   },

src/client/app.jsx

@@ -1,54 +1,52 @@
 import { MantineProvider } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
-import { BrowserRouter } from 'react-router-dom';
-import AppRoutes from './routes.jsx';
+import { RouterProvider } from 'react-router-dom';
+import appRouter from './routes.jsx';
 
 const HemmeligApplication = () => {
     return (
-        <BrowserRouter>
-            <MantineProvider
-                withGlobalStyles
-                withNormalizeCSS
-                theme={{
-                    colorScheme: 'dark',
-                    colors: {
-                        hemmelig: [
-                            '#ffffff',
-                            '#eaf5f4',
-                            '#d4ebe9',
-                            '#bfe2dd',
-                            '#aad8d2',
-                            '#95cec7',
-                            '#7fc4bc',
-                            '#6abab1',
-                            '#55b1a5',
-                            '#3fa79a',
-                            '#2a9d8f',
-                        ],
-                        'hemmelig-orange': [
-                            '#ffffff',
-                            '#fff5f0',
-                            '#ffeae1',
-                            '#ffe0d2',
-                            '#ffd5c3',
-                            '#ffcbb4',
-                            '#ffc1a5',
-                            '#ffb696',
-                            '#ffac87',
-                            '#ffa178',
-                            '#ff9769',
-                        ],
-                    },
-                    fontFamily: 'Inter, sans-serif',
-                    fontFamilyMonospace: 'Inter, sans-serif',
-                    headings: { fontFamily: 'Inter, sans-serif' },
-                }}
-            >
-                <ModalsProvider>
-                    <AppRoutes />
-                </ModalsProvider>
-            </MantineProvider>
-        </BrowserRouter>
+        <MantineProvider
+            withGlobalStyles
+            withNormalizeCSS
+            theme={{
+                colorScheme: 'dark',
+                colors: {
+                    hemmelig: [
+                        '#ffffff',
+                        '#eaf5f4',
+                        '#d4ebe9',
+                        '#bfe2dd',
+                        '#aad8d2',
+                        '#95cec7',
+                        '#7fc4bc',
+                        '#6abab1',
+                        '#55b1a5',
+                        '#3fa79a',
+                        '#2a9d8f',
+                    ],
+                    'hemmelig-orange': [
+                        '#ffffff',
+                        '#fff5f0',
+                        '#ffeae1',
+                        '#ffe0d2',
+                        '#ffd5c3',
+                        '#ffcbb4',
+                        '#ffc1a5',
+                        '#ffb696',
+                        '#ffac87',
+                        '#ffa178',
+                        '#ff9769',
+                    ],
+                },
+                fontFamily: 'Inter, sans-serif',
+                fontFamilyMonospace: 'Inter, sans-serif',
+                headings: { fontFamily: 'Inter, sans-serif' },
+            }}
+        >
+            <ModalsProvider>
+                <RouterProvider router={appRouter}></RouterProvider>
+            </ModalsProvider>
+        </MantineProvider>
     );
 };
 

src/client/routes.jsx

@@ -1,5 +1,5 @@
 import { lazy } from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, createBrowserRouter, createRoutesFromElements } from 'react-router-dom';
 import AdminShell from './admin-shell.jsx';
 import ApplicationShell from './app-shell.jsx';
 
@@ -18,21 +18,29 @@ const Settings = lazy(() => import('./routes/account/settings'));
 const Users = lazy(() => import('./routes/account/users'));
 const UserAccount = lazy(() => import('./routes/account/account'));
 
-const AppRoutes = () => {
-    return (
-        <Routes>
+// loader: https://reactrouter.com/en/main/route/loader
+const appRouter = createBrowserRouter(
+    createRoutesFromElements(
+        <>
             <Route path="/" element={<ApplicationShell />}>
                 <Route index element={<Home />} />
                 <Route path="secret/:encryptionKey/:secretId" element={<Secret />} />
                 <Route path="secret/:secretId" element={<Secret />} />
-                <Route path="public" element={<PublicSecrets />} />
+                <Route
+                    element={<PublicSecrets />}
+                    path="public"
+                    loader={async () => {
+                        const { getPublicSecrets } = await import('./api/secret');
+
+                        return await getPublicSecrets();
+                    }}
+                />
                 <Route path="signin" element={<SignIn />} />
                 <Route path="signup" element={<SignUp />} />
                 <Route path="signout" element={<SignOut />} />
                 <Route path="privacy" element={<Privacy />} />
                 <Route path="terms" element={<Terms />} />
             </Route>
-
             <Route path="/account" element={<AdminShell />}>
                 <Route index element={<Account />} />
                 <Route path="account" element={<Account />} />
@@ -43,8 +51,8 @@ const AppRoutes = () => {
                 <Route path="privacy" element={<Privacy />} />
                 <Route path="terms" element={<Terms />} />
             </Route>
-        </Routes>
-    );
-};
+        </>
+    )
+);
 
-export default AppRoutes;
+export default appRouter;

src/client/routes/public/index.jsx

@@ -1,29 +1,15 @@
-import { Anchor, Container, Group, Loader, Stack, Table, Title } from '@mantine/core';
+import { Anchor, Container, Group, Stack, Table, Title } from '@mantine/core';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-
-import { getPublicSecrets } from '../../api/secret';
+import { Link, useLoaderData } from 'react-router-dom';
 
 dayjs.extend(relativeTime);
 
 const PublicSecrets = () => {
     const { t } = useTranslation();
 
-    const [secrets, setPublicSecrets] = useState([]);
-    const [isLoading, setIsLoading] = useState(true);
-
-    useEffect(() => {
-        (async () => {
-            const secrets = await getPublicSecrets();
-
-            setPublicSecrets(secrets);
-
-            setIsLoading(false);
-        })();
-    }, []);
+    const secrets = useLoaderData();
 
     const getTime = (expiresAt) => {
         return dayjs().to(dayjs(expiresAt));
@@ -46,14 +32,6 @@ const PublicSecrets = () => {
         </tr>
     ));
 
-    if (isLoading) {
-        return (
-            <Container>
-                <Loader color="teal" variant="bars" />
-            </Container>
-        );
-    }
-
     return (
         <Container>
             <Stack>

src/server/controllers/secret.js

@@ -236,7 +236,7 @@ async function secret(fastify) {
         });
 
         if (!data?.length) {
-            return reply.code(404).send({ error: 'Public pastes not found' });
+            return reply.code(204).send([]);
         }
 
         return data.map((secret) => ({