Merge pull request #303 from acelaya-forks/feature/react-router-7

Update to react-router 7
shlinkio · Dec 9, 2024 · 2d71020 · 2d71020
2 parents b329752 + 4842f02
commit 2d71020
Show file tree

Hide file tree

Showing 33 changed files with 5,392 additions and 8,703 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+.react-router/
 build
 node_modules
 coverage
diff --git a/app/auth/auth-helper.server.ts b/app/auth/auth-helper.server.ts
@@ -1,5 +1,5 @@
-import type { SessionStorage } from '@remix-run/node';
-import { redirect } from '@remix-run/node';
+import type { SessionStorage } from 'react-router';
+import { redirect } from 'react-router';
 import type { Authenticator } from 'remix-auth';
 import { CREDENTIALS_STRATEGY } from './auth.server';
 import type { SessionData } from './session-context';

diff --git a/app/auth/session.server.ts b/app/auth/session.server.ts
@@ -1,4 +1,4 @@
-import { createCookieSessionStorage } from '@remix-run/node';
+import { createCookieSessionStorage } from 'react-router';
 import { env, isProd } from '../utils/env.server';
 import type { SessionData } from './session-context';
 

diff --git a/app/common/MainHeader.tsx b/app/common/MainHeader.tsx
@@ -4,9 +4,9 @@ import {
   faCogs,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Link, useLocation } from '@remix-run/react';
 import { useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
+import { Link, useLocation } from 'react-router';
 import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
 import { useSession } from '../auth/session-context';
 import { ShlinkLogo } from './ShlinkLogo';

diff --git a/app/root.tsx b/app/root.tsx
@@ -1,8 +1,8 @@
-import type { LoaderFunctionArgs } from '@remix-run/node';
-import { Links, Meta, Outlet, Scripts, useLoaderData } from '@remix-run/react';
 import type { Theme } from '@shlinkio/shlink-frontend-kit';
 import { getSystemPreferredTheme } from '@shlinkio/shlink-frontend-kit';
 import { useEffect, useState } from 'react';
+import type { LoaderFunctionArgs } from 'react-router';
+import { Links, Meta, Outlet, Scripts, useLoaderData } from 'react-router';
 import { AuthHelper } from './auth/auth-helper.server';
 import { SessionProvider } from './auth/session-context';
 import { MainHeader } from './common/MainHeader';
@@ -23,7 +23,7 @@ export async function loader(
     : authHelper.getSession(request, `/login?redirect-to=${encodeURIComponent(pathname)}`)
   );
 
-  const settings = sessionData && await settingsService.userSettings(sessionData.userId);
+  const settings = sessionData && (await settingsService.userSettings(sessionData.userId));
 
   return { sessionData, settings };
 }

diff --git a/app/routes.ts b/app/routes.ts
@@ -0,0 +1,17 @@
+import type { RouteConfig } from '@react-router/dev/routes';
+import { index, route } from '@react-router/dev/routes';
+
+// eslint-disable-next-line no-restricted-exports
+export default [
+  index('./routes/_index/route.tsx'),
+  route('/login', './routes/login.tsx'),
+  route('/logout', './routes/logout.ts'),
+  route('/settings/*', './routes/settings.$.tsx'),
+
+  // RPC-style proxy for Shlink API
+  route('/server/:serverId/shlink-api/:method', './routes/server.$serverId.shlink-api.$method.ts'),
+  // ShlinkWebComponent wrapper
+  route('/server/:serverId/*', './routes/server.$serverId.$.tsx'),
+  // Saves tag colors
+  route('/server/:serverId/tags/colors', './routes/server.$serverId.tags.colors.ts'),
+] satisfies RouteConfig;
diff --git a/app/routes/_index/NoServers.tsx b/app/routes/_index/NoServers.tsx
@@ -1,8 +1,8 @@
 import { faPlus, faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Link } from '@remix-run/react';
 import type { FC } from 'react';
 import { ExternalLink } from 'react-external-link';
+import { Link } from 'react-router';
 import { Button } from 'reactstrap';
 
 export const NoServers: FC = () => (

diff --git a/app/routes/_index/ServersList.tsx b/app/routes/_index/ServersList.tsx
@@ -1,8 +1,8 @@
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Link } from '@remix-run/react';
 import clsx from 'clsx';
 import type { FC } from 'react';
+import { Link } from 'react-router';
 import type { Server } from '../../entities/Server';
 
 export type ServersListProps = {

diff --git a/app/routes/_index/route.tsx b/app/routes/_index/route.tsx
@@ -1,5 +1,5 @@
-import type { LoaderFunctionArgs } from '@remix-run/node';
-import { useLoaderData } from '@remix-run/react';
+import type { LoaderFunctionArgs } from 'react-router';
+import { useLoaderData } from 'react-router';
 import { AuthHelper } from '../../auth/auth-helper.server';
 import { Layout } from '../../common/Layout';
 import { serverContainer } from '../../container/container.server';

diff --git a/app/routes/login.tsx b/app/routes/login.tsx
@@ -1,9 +1,8 @@
-import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
-import { redirect } from '@remix-run/node';
-import { json } from '@remix-run/node';
-import { useActionData } from '@remix-run/react';
 import { SimpleCard } from '@shlinkio/shlink-frontend-kit';
 import { useId } from 'react';
+import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
+import { useActionData } from 'react-router';
+import { redirect } from 'react-router';
 import { Button, Input } from 'reactstrap';
 import { AuthHelper } from '../auth/auth-helper.server';
 import { serverContainer } from '../container/container.server';
@@ -19,7 +18,7 @@ export async function action(
   } catch (e: any) {
     // TODO Use a more robust way to detect errors
     if (INCORRECT_CREDENTIAL_ERROR_PREFIXES.some((prefix) => e.message.startsWith(prefix))) {
-      return json({ error: true });
+      return { error: true };
     }
 
     throw e;
@@ -53,7 +52,9 @@ export default function Login() {
             <Input id={passwordId} type="password" name="password" required />
           </div>
           <Button color="primary" type="submit">Login</Button>
-          {actionData?.error && <div className="text-danger">Username or password are incorrect</div>}
+          {actionData && 'error' in actionData && actionData.error && (
+            <div className="text-danger">Username or password are incorrect</div>
+          )}
         </form>
       </SimpleCard>
     </div>

diff --git a/app/routes/logout.ts b/app/routes/logout.ts
@@ -1,4 +1,4 @@
-import type { ActionFunctionArgs } from '@remix-run/node';
+import type { ActionFunctionArgs } from 'react-router';
 import { AuthHelper } from '../auth/auth-helper.server';
 import { serverContainer } from '../container/container.server';
 

diff --git a/app/routes/server.$serverId.$.tsx b/app/routes/server.$serverId.$.tsx
@@ -1,8 +1,8 @@
-import type { LoaderFunctionArgs } from '@remix-run/node';
-import { useLoaderData, useLocation, useParams } from '@remix-run/react';
 import type { Settings } from '@shlinkio/shlink-web-component/settings';
 import type { ReactNode } from 'react';
 import { useEffect, useMemo, useState } from 'react';
+import type { LoaderFunctionArgs } from 'react-router';
+import { useLoaderData, useLocation, useParams } from 'react-router';
 import { ShlinkApiProxyClient } from '../api/ShlinkApiProxyClient.client';
 import { AuthHelper } from '../auth/auth-helper.server';
 import { serverContainer } from '../container/container.server';

diff --git a/app/routes/server.$serverId.shlink-api.$method.ts b/app/routes/server.$serverId.shlink-api.$method.ts
@@ -1,7 +1,6 @@
-import type { ActionFunctionArgs } from '@remix-run/node';
-import { json } from '@remix-run/node';
 import type { ShlinkApiClient } from '@shlinkio/shlink-js-sdk';
 import { ErrorType } from '@shlinkio/shlink-js-sdk/api-contract';
+import type { ActionFunctionArgs } from 'react-router';
 import type { ApiClientBuilder } from '../api/apiClientBuilder.server';
 import { AuthHelper } from '../auth/auth-helper.server';
 import { serverContainer } from '../container/container.server';
@@ -89,7 +88,7 @@ export async function action(
 
   try {
     const response = await apiMethod.bind(client)(...args as Parameters<typeof apiMethod>);
-    return json(response);
+    return Response.json(response);
   } catch (e) {
     console_.error(e);
     return problemDetails({

diff --git a/app/routes/server.$serverId.tags.colors.ts b/app/routes/server.$serverId.tags.colors.ts
@@ -1,4 +1,4 @@
-import type { ActionFunctionArgs } from '@remix-run/node';
+import type { ActionFunctionArgs } from 'react-router';
 import { AuthHelper } from '../auth/auth-helper.server';
 import { serverContainer } from '../container/container.server';
 import { TagsService } from '../tags/TagsService.server';

diff --git a/app/routes/settings.$.tsx b/app/routes/settings.$.tsx
@@ -1,8 +1,9 @@
-import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
-import { useFetcher, useLoaderData } from '@remix-run/react';
 import type { Settings as AppSettings } from '@shlinkio/shlink-web-component/settings';
 import { ShlinkWebSettings } from '@shlinkio/shlink-web-component/settings';
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
+import { Route, Routes } from 'react-router';
+import { useFetcher, useLoaderData } from 'react-router';
 import { AuthHelper } from '../auth/auth-helper.server';
 import { Layout } from '../common/Layout';
 import { serverContainer } from '../container/container.server';
@@ -38,14 +39,28 @@ export default function Settings() {
     method: 'POST',
     encType: 'application/json',
   }), [fetcher]);
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
 
   return (
     <Layout>
-      <ShlinkWebSettings
-        settings={settings}
-        updateSettings={submitSettings}
-        defaultShortUrlsListOrdering={{}}
-      />
+      {isClient && (
+        <Routes>
+          <Route
+            path="*"
+            element={(
+              <ShlinkWebSettings
+                settings={settings}
+                updateSettings={submitSettings}
+                defaultShortUrlsListOrdering={{}}
+              />
+            )}
+          />
+        </Routes>
+      )}
     </Layout>
   );
 }
diff --git a/app/tailwind.scss b/app/tailwind.scss
@@ -28,6 +28,10 @@
     font-weight: 500;
     line-height: 1.2;
   }
+
+  hr {
+    @apply my-3
+  }
 }
 
 @tailwind components;

diff --git a/app/utils/response.server.ts b/app/utils/response.server.ts
@@ -1,6 +1,8 @@
-import { json } from '@remix-run/node';
 import type { ProblemDetailsError } from '@shlinkio/shlink-js-sdk/api-contract';
 
 export const empty = () => new Response(null, { status: 204 });
 
-export const problemDetails = (errorPayload: ProblemDetailsError) => json(errorPayload, errorPayload.status);
+export const problemDetails = (errorPayload: ProblemDetailsError) => Response.json(
+  errorPayload,
+  { status: errorPayload.status },
+);
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -2,7 +2,7 @@ services:
   shlink_dashboard_node:
     container_name: shlink_dashboard_node
     user: 1000:1000
-    image: node:22.10-alpine
+    image: node:22.12-alpine
     command: /bin/sh -c "cd /home/shlink-dashboard && npm install && node --run start"
     volumes:
       - ./:/home/shlink-dashboard