Swap Zustand for Redux, upgrade to React Router v7

.gitignore

@@ -3,4 +3,5 @@ node_modules
 
 .env
 web/vite.config.ts.*
+web/.react-router/
 .opencode/

README.md

@@ -12,7 +12,7 @@ This is a monorepo with the following packages:
 - `Web`
   - path
     - `./web`
-  - [Remix](https://remix.run/)
+  - [React-Router](https://reactrouter.com/)
   - [Mantine](https://mantine.dev/)
 
 ## Development

web/app/.server/session.ts

@@ -1,11 +1,9 @@
 import {
-  ActionFunction,
   ActionFunctionArgs,
   createCookieSessionStorage,
   data,
-  LoaderFunction,
   LoaderFunctionArgs,
-} from "@remix-run/node"
+} from "react-router"
 import { environment } from "app/.server/env"
 
 export const cookieSession = createCookieSessionStorage<

web/app/components/navigation/navigation.tsx

@@ -1,9 +1,10 @@
 import { Grid, NavLink, Button } from "@mantine/core"
-import { useGlobals } from "~/stores/global"
-import { Link } from "@remix-run/react"
+import { useSelector } from "react-redux"
+import { Link } from "react-router"
+import { RootState } from "~/stores/global"
 
 export function Navigation() {
-  const { user } = useGlobals()
+  const user = useSelector((state: RootState) => state.user.value)
 
   return (
     <>

web/app/components/recipeCard/recipeCard.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react"
 import { Flex, Text, Button, Image, Rating, Title } from "@mantine/core"
 import { ListRecipesQuery } from "~/gql/forkd.g"
-import { Link } from "@remix-run/react"
+import { Link } from "react-router"
 
 interface Props {
   recipe: Recipe

web/app/entry.client.tsx

@@ -4,15 +4,15 @@
  * For more information, see https://remix.run/file-conventions/entry.client
  */
 
-import { RemixBrowser } from "@remix-run/react"
+import { HydratedRouter } from "react-router/dom"
 import { startTransition, StrictMode } from "react"
 import { hydrateRoot } from "react-dom/client"
 
 startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
-      <RemixBrowser />
+      <HydratedRouter />
     </StrictMode>
   )
 })

web/app/entry.server.tsx

@@ -6,9 +6,9 @@
 
 import { PassThrough } from "node:stream"
 
-import type { AppLoadContext, EntryContext } from "@remix-run/node"
-import { createReadableStreamFromReadable } from "@remix-run/node"
-import { RemixServer } from "@remix-run/react"
+import type { AppLoadContext, EntryContext } from "react-router"
+import { createReadableStreamFromReadable } from "@react-router/node"
+import { ServerRouter } from "react-router"
 import { isbot } from "isbot"
 import { renderToPipeableStream } from "react-dom/server"
 
@@ -18,7 +18,7 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  reactRouterContext: EntryContext,
   // This is ignored so we can keep it in the template for visibility.  Feel
   // free to delete this parameter in your app if you're not using it!
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -29,27 +29,27 @@ export default function handleRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext
+        reactRouterContext
       )
     : handleBrowserRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext
+        reactRouterContext
       )
 }
 
 function handleBotRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  reactRouterContext: EntryContext
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
+      <ServerRouter
+        context={reactRouterContext}
         url={request.url}
         abortDelay={ABORT_DELAY}
       />,
@@ -93,13 +93,13 @@ function handleBrowserRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  reactRouterContext: EntryContext
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
+      <ServerRouter
+        context={reactRouterContext}
         url={request.url}
         abortDelay={ABORT_DELAY}
       />,

web/app/gql/forkd.g.ts

@@ -19,6 +19,11 @@ export type Scalars = {
   UUID: { input: any; output: any; }
 };
 
+export type AddRatingInput = {
+  revisionId: Scalars['UUID']['input'];
+  starValue: Scalars['Int']['input'];
+};
+
 export type AddRevisionInput = {
   id: Scalars['UUID']['input'];
   parent: Scalars['UUID']['input'];
@@ -69,6 +74,7 @@ export type ListRecipeInput = {
   nextCursor?: InputMaybe<Scalars['String']['input']>;
   publishEnd?: InputMaybe<Scalars['Time']['input']>;
   publishStart?: InputMaybe<Scalars['Time']['input']>;
+  query?: InputMaybe<Scalars['String']['input']>;
   sortCol?: InputMaybe<ListRecipeSortCol>;
   sortDir?: InputMaybe<SortDir>;
 };
@@ -165,11 +171,17 @@ export type RecipeIngredient = {
 
 export type RecipeMutation = {
   __typename?: 'RecipeMutation';
+  addRating: Scalars['Boolean']['output'];
   addRevision: RecipeRevision;
   create: Recipe;
 };
 
 
+export type RecipeMutationAddRatingArgs = {
+  input: AddRatingInput;
+};
+
+
 export type RecipeMutationAddRevisionArgs = {
   input: AddRevisionInput;
 };
@@ -205,6 +217,7 @@ export type RecipeQueryListArgs = {
 export type RecipeRevision = {
   __typename?: 'RecipeRevision';
   changeComment?: Maybe<Scalars['String']['output']>;
+  hasRated?: Maybe<Scalars['Boolean']['output']>;
   id: Scalars['UUID']['output'];
   ingredients: Array<RecipeIngredient>;
   parent?: Maybe<RecipeRevision>;

web/app/root.tsx

@@ -5,19 +5,20 @@ import {
   Scripts,
   ScrollRestoration,
   useLoaderData,
-} from "@remix-run/react"
+  LoaderFunctionArgs,
+} from "react-router"
 import { MantineProvider } from "@mantine/core"
 import "@mantine/core/styles.css"
 import { getSessionOrThrow } from "~/.server/session"
 import { getSDK } from "~/gql/client"
 import { environment } from "~/.server/env"
-import { useGlobals } from "~/stores/global"
-import { LoaderFunctionArgs } from "@remix-run/node"
+import { getStore } from "~/stores/global"
+import { Provider } from "react-redux"
 import { ClientError } from "graphql-request"
+import { useMemo } from "react"
 
 export async function loader(args: LoaderFunctionArgs) {
   const session = await getSessionOrThrow(args, false)
-  console.log("Session Token: ", session.get("sessionToken"))
   const auth = session.get("sessionToken")
   const sdk = getSDK(`${environment.BACKEND_URL}`, auth)
   try {
@@ -32,6 +33,12 @@ export async function loader(args: LoaderFunctionArgs) {
 }
 
 export function Layout({ children }: { children: React.ReactNode }) {
+  const data = useLoaderData<typeof loader>()
+  const store = useMemo(() => {
+    return getStore({ user: { value: data } })
+  }, [data])
+  console.log(data)
+
   return (
     <html lang="en" data-mantine-color-scheme="light">
       <head>
@@ -41,7 +48,9 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Links />
       </head>
       <body>
-        <MantineProvider>{children}</MantineProvider>
+        <MantineProvider>
+          <Provider store={store}>{children} </Provider>
+        </MantineProvider>
         <ScrollRestoration />
         <Scripts />
       </body>
@@ -50,9 +59,5 @@ export function Layout({ children }: { children: React.ReactNode }) {
 }
 
 export default function App() {
-  const data = useLoaderData<typeof loader>()
-  useGlobals.getInitialState().setUser(data)
-  console.log(useGlobals.getState().user, "user signing in")
-
   return <Outlet />
 }

web/app/routes.ts

@@ -0,0 +1,4 @@
+import { type RouteConfig } from "@react-router/dev/routes"
+import { flatRoutes } from "@react-router/fs-routes"
+
+export default flatRoutes() satisfies RouteConfig

web/app/routes/_app.$author.$slug/route.tsx

@@ -11,11 +11,10 @@ import {
 } from "@mantine/core"
 import { IconArrowLeft, IconShare } from "@tabler/icons-react"
 import { useMediaQuery } from "@mantine/hooks"
-import { LoaderFunctionArgs } from "@remix-run/node"
+import { LoaderFunctionArgs, useLoaderData } from "react-router"
 import { getSessionOrThrow } from "~/.server/session"
 import { getSDK } from "~/gql/client"
 import { environment } from "~/.server/env"
-import { useLoaderData } from "@remix-run/react"
 import { RecipeBySlugQuery } from "~/gql/forkd.g"
 
 type Recipe = Exclude<RecipeBySlugQuery["recipe"], null | undefined>["bySlug"]
@@ -30,7 +29,6 @@ export async function loader(args: LoaderFunctionArgs) {
         slug: args.params.slug,
         authorDisplayName: args.params.author,
       })
-      console.log("recipe by author/ slug", data)
       return data?.recipe?.bySlug
     }
   } catch (error) {
@@ -42,11 +40,6 @@ export async function loader(args: LoaderFunctionArgs) {
 export default function Recipe() {
   const isMobile = useMediaQuery("(max-width: 1199px)")
   const recipe: Recipe = useLoaderData<typeof loader>()
-  console.log(
-    recipe?.featuredRevision?.photo
-      ? recipe.featuredRevision.photo
-      : "/images/image.png"
-  )
 
   return (
     <Flex style={styles.container} direction="column">

web/app/routes/_app._index/route.tsx

@@ -1,5 +1,4 @@
-import { MetaFunction, useLoaderData } from "@remix-run/react"
-import { LoaderFunctionArgs } from "@remix-run/node"
+import { MetaFunction, useLoaderData, LoaderFunctionArgs } from "react-router"
 import { ClientError } from "graphql-request"
 import { getSessionOrThrow } from "~/.server/session"
 import { getSDK } from "~/gql/client"
@@ -22,7 +21,6 @@ export async function loader(args: LoaderFunctionArgs) {
   const sdk = getSDK(`${environment.BACKEND_URL}`, auth)
   try {
     const data = await sdk.ListRecipes()
-    // console.log(data?.recipe?.list || null)
     return data?.recipe?.list ?? null
   } catch (err) {
     if (err instanceof ClientError && err.message === "missing auth") {