11 | About 12 |

13 |

14 | This is a demo app to show off the features of Replicache to compare 15 | them with those of vanilla Remix and React Query.{" "} 16 | 20 | More context on Twitter 21 | 22 | . 23 |

24 |

25 | It's a recreation of the popular drag and drop interface in{" "} 26 | 27 | Trello 28 | {" "} 29 | and other similar apps. 30 |

31 |

If you want to play around, click sign up!

32 |

33 |

34 | 38 | Sign up 39 | 40 |

41 | 45 | Login 46 | 47 |

48 |

49 | ); 50 | } 51 | -------------------------------------------------------------------------------- /app/auth/auth.ts: -------------------------------------------------------------------------------- 1 | import { type DataFunctionArgs, createCookie, redirect } from "@remix-run/node"; 2 | 3 | let secret = process.env.COOKIE_SECRET || "default"; 4 | if (secret === "default") { 5 | console.warn( 6 | "🚨 No COOKIE_SECRET environment variable set, using default. The app is insecure in production.", 7 | ); 8 | secret = "default-secret"; 9 | } 10 | 11 | let cookie = createCookie("auth", { 12 | secrets: [secret], 13 | // 30 days 14 | maxAge: 30 * 24 * 60 * 60, 15 | httpOnly: true, 16 | secure: process.env.NODE_ENV === "production", 17 | sameSite: "lax", 18 | }); 19 | 20 | export async function getAuthFromRequest( 21 | request: Request, 22 | ): Promise { 23 | let userId = await cookie.parse(request.headers.get("Cookie")); 24 | return userId ?? null; 25 | } 26 | 27 | export async function setAuthOnResponse( 28 | response: Response, 29 | userId: string, 30 | ): Promise { 31 | let header = await cookie.serialize(userId); 32 | response.headers.append("Set-Cookie", header); 33 | return response; 34 | } 35 | 36 | export async function requireAuthCookie(request: Request) { 37 | let userId = await getAuthFromRequest(request); 38 | if (!userId) { 39 | throw redirect("/login", { 40 | headers: { 41 | "Set-Cookie": await cookie.serialize("", { 42 | maxAge: 0, 43 | }), 44 | }, 45 | }); 46 | } 47 | return userId; 48 | } 49 | 50 | export async function redirectIfLoggedInLoader({ request }: DataFunctionArgs) { 51 | let userId = await getAuthFromRequest(request); 52 | if (userId) { 53 | throw redirect("/home"); 54 | } 55 | return null; 56 | } 57 | 58 | export async function redirectWithClearedCookie(): Promise { 59 | return redirect("/", { 60 | headers: { 61 | "Set-Cookie": await cookie.serialize(null, { 62 | expires: new Date(0), 63 | }), 64 | }, 65 | }); 66 | } 67 | -------------------------------------------------------------------------------- /prisma/schema.prisma: -------------------------------------------------------------------------------- 1 | // This is your Prisma schema file, 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema 3 | 4 | generator client { 5 | provider = "prisma-client-js" 6 | } 7 | 8 | datasource db { 9 | provider = "postgresql" 10 | url = env("POSTGRES_PRISMA_URL") // uses connection pooling 11 | directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection 12 | } 13 | 14 | model Account { 15 | id String @id @default(uuid()) 16 | email String @unique 17 | boards Board[] 18 | 19 | Password Password? 20 | ReplicacheClientGroup ReplicacheClientGroup[] 21 | } 22 | 23 | model Password { 24 | id String @id @default(uuid()) 25 | salt String 26 | hash String 27 | Account Account @relation(fields: [accountId], references: [id], onDelete: Cascade) 28 | accountId String @unique 29 | } 30 | 31 | model Board { 32 | id String @id 33 | name String 34 | color String @default("#e0e0e0") 35 | createdAt DateTime @default(now()) 36 | columns Column[] 37 | items Item[] 38 | Account Account @relation(fields: [accountId], references: [id], onDelete: Cascade) 39 | accountId String 40 | } 41 | 42 | model Column { 43 | id String @id 44 | name String 45 | order Float @default(0) 46 | items Item[] 47 | Board Board @relation(fields: [boardId], references: [id], onDelete: Cascade) 48 | boardId String 49 | } 50 | 51 | model Item { 52 | id String @id 53 | title String 54 | content String? 55 | 56 | // we split the difference between the prev/next items. If an item is dropped 57 | // between 1.00 and 2.00 it will be 1.50. If dropped between 1.50 and 2.00 it 58 | // will be 1.75, etc. 59 | order Float 60 | 61 | Column Column @relation(fields: [columnId], references: [id], onDelete: Cascade) 62 | columnId String 63 | Board Board @relation(fields: [boardId], references: [id], onDelete: Cascade) 64 | boardId String 65 | } 66 | 67 | model ReplicacheClientGroup { 68 | id String @id 69 | accountId String 70 | Account Account @relation(fields: [accountId], references: [id], onDelete: Cascade) 71 | ReplicacheClient ReplicacheClient[] 72 | } 73 | 74 | model ReplicacheClient { 75 | id String @id 76 | clientGroupId String 77 | ReplicacheClientGroup ReplicacheClientGroup @relation(fields: [clientGroupId], references: [id], onDelete: Cascade) 78 | lastMutationID Int 79 | } 80 | -------------------------------------------------------------------------------- /app/routes/board.$id/new-card.tsx: -------------------------------------------------------------------------------- 1 | import { useRef } from "react"; 2 | import invariant from "tiny-invariant"; 3 | import { CancelButton, SaveButton } from "./components"; 4 | import { nanoid } from "nanoid"; 5 | import { undoManager } from "~/replicache/undo"; 6 | import { useReplicache } from "~/replicache/provider"; 7 | 8 | export function NewCard({ 9 | columnId, 10 | boardId, 11 | nextOrder, 12 | onComplete, 13 | onAddCard, 14 | }: { 15 | columnId: string; 16 | boardId: string; 17 | nextOrder: number; 18 | onComplete: () => void; 19 | onAddCard: () => void; 20 | }) { 21 | let textAreaRef = useRef(null); 22 | let buttonRef = useRef(null); 23 | let replicache = useReplicache(); 24 | 25 | return ( 26 |

{ 29 | event.preventDefault(); 30 | 31 | let formData = new FormData(event.currentTarget); 32 | 33 | const item = { 34 | id: nanoid(), 35 | columnId, 36 | boardId, 37 | order: nextOrder, 38 | title: formData.get("title") as string, 39 | }; 40 | 41 | await undoManager.add({ 42 | execute: () => replicache?.mutate.createItem(item), 43 | undo: () => replicache?.mutate.deleteItem(item.id), 44 | }); 45 | 46 | invariant(textAreaRef.current); 47 | textAreaRef.current.value = ""; 48 | onAddCard(); 49 | }} 50 | onBlur={(event) => { 51 | if (!event.currentTarget.contains(event.relatedTarget)) { 52 | onComplete(); 53 | } 54 | }} 55 | > 56 |

{
64 |           if (event.key === "Enter") {
65 |             event.preventDefault();
66 |             invariant(buttonRef.current, "expected button ref");
67 |             buttonRef.current.click();
68 |           }
69 |           if (event.key === "Escape") {
70 |             onComplete();
71 |           }
72 |         }}
73 |         onChange={(event) => {
74 |           let el = event.currentTarget;
75 |           el.style.height = el.scrollHeight + "px";
76 |         }}
77 |       />
78 |       <div className="flex justify-between">
79 |         <SaveButton ref={buttonRef}>Save Card</SaveButton>
80 |         <CancelButton onClick={onComplete}>Cancel</CancelButton>
81 |       </div>
82 |     </form>
83 |   );
84 | }
85 |

--------------------------------------------------------------------------------
/app/routes/board.$id/new-column.tsx:
--------------------------------------------------------------------------------
 1 | import { useRef, useState } from "react";
 2 | import { flushSync } from "react-dom";
 3 | import invariant from "tiny-invariant";
 4 | import { Icon } from "~/icons/icons";
 5 | 
 6 | import { CancelButton, SaveButton } from "./components";
 7 | import { nanoid } from "nanoid";
 8 | import { ColumnData } from "~/replicache/data";
 9 | import { undoManager } from "~/replicache/undo";
10 | import { useReplicache } from "~/replicache/provider";
11 | 
12 | export function NewColumn({
13 |   boardId,
14 |   nextOrder,
15 |   onAdd,
16 |   editInitially,
17 | }: {
18 |   boardId: string;
19 |   nextOrder: number;
20 |   onAdd: () => void;
21 |   editInitially: boolean;
22 | }) {
23 |   let [editing, setEditing] = useState(editInitially);
24 |   let inputRef = useRef<HTMLInputElement>(null);
25 |   let replicache = useReplicache();
26 | 
27 |   return editing ? (
28 |     <form
29 |       className="p-2 flex-shrink-0 flex flex-col gap-5 overflow-hidden max-h-full w-80 border rounded-xl shadow bg-slate-100"
30 |       onSubmit={(event) => {
31 |         event.preventDefault();
32 | 
33 |         let formData = new FormData(event.currentTarget);
34 | 
35 |         const column: ColumnData = {
36 |           id: nanoid(),
37 |           boardId,
38 |           name: formData.get("name") as string,
39 |           order: nextOrder,
40 |         };
41 | 
42 |         undoManager.add({
43 |           execute: () => replicache?.mutate.createColumn(column),
44 |           undo: () => replicache?.mutate.deleteColumn(column.id),
45 |         });
46 | 
47 |         onAdd();
48 | 
49 |         invariant(inputRef.current, "missing input ref");
50 |         inputRef.current.value = "";
51 |       }}
52 |       onBlur={(event) => {
53 |         if (!event.currentTarget.contains(event.relatedTarget)) {
54 |           setEditing(false);
55 |         }
56 |       }}
57 |     >
58 |       <input
59 |         autoFocus
60 |         required
61 |         ref={inputRef}
62 |         type="text"
63 |         name="name"
64 |         className="border border-slate-400 w-full rounded-lg py-1 px-2 font-medium text-black"
65 |       />
66 |       <div className="flex justify-between">
67 |         <SaveButton>Save Column</SaveButton>
68 |         <CancelButton onClick={() => setEditing(false)}>Cancel</CancelButton>
69 |       </div>
70 |     </form>
71 |   ) : (
72 |     <button
73 |       onClick={() => {
74 |         flushSync(() => {
75 |           setEditing(true);
76 |         });
77 |         onAdd();
78 |       }}
79 |       aria-label="Add new column"
80 |       className="flex-shrink-0 flex justify-center h-16 w-16 bg-black hover:bg-white bg-opacity-10 hover:bg-opacity-5 rounded-xl"
81 |     >
82 |       <Icon name="plus" size="xl" />
83 |     </button>
84 |   );
85 | }
86 |

--------------------------------------------------------------------------------
/app/routes/replicache.$op/pull.ts:
--------------------------------------------------------------------------------
 1 | import { json } from "@remix-run/node";
 2 | import { requireAuthCookie } from "~/auth/auth";
 3 | import { PatchOperation, PullRequestV1, PullResponseV1 } from "replicache";
 4 | import { prisma } from "~/db/prisma";
 5 | import { BoardData, ColumnData, ItemData } from "~/replicache/data";
 6 | 
 7 | export async function handleReplicachePull(
 8 |   request: Request,
 9 | ): Promise<Response> {
10 |   const accountId = await requireAuthCookie(request);
11 |   const pull = (await request.json()) as PullRequestV1;
12 | 
13 |   const payload = await prisma.$transaction(async (tx) => {
14 |     let replicacheClientGroup = await tx.replicacheClientGroup.findFirst({
15 |       where: {
16 |         id: pull.clientGroupID,
17 |         accountId,
18 |       },
19 |     });
20 |     replicacheClientGroup ??= { id: pull.clientGroupID, accountId };
21 | 
22 |     const patch: PatchOperation[] = [{ op: "clear" }];
23 | 
24 |     const boards = await tx.board.findMany({
25 |       where: {
26 |         accountId,
27 |       },
28 |       include: {
29 |         columns: {
30 |           include: {
31 |             items: true,
32 |           },
33 |         },
34 |       },
35 |     });
36 | 
37 |     for (const board of boards) {
38 |       patch.push({
39 |         op: "put",
40 |         key: `board/${board.id}`,
41 |         value: {
42 |           id: board.id,
43 |           name: board.name,
44 |           color: board.color,
45 |           createdAt: board.createdAt.toISOString(),
46 |         } satisfies BoardData,
47 |       });
48 | 
49 |       for (const column of board.columns) {
50 |         patch.push({
51 |           op: "put",
52 |           key: `column/${column.id}`,
53 |           value: {
54 |             id: column.id,
55 |             boardId: column.boardId,
56 |             name: column.name,
57 |             order: column.order,
58 |           } satisfies ColumnData,
59 |         });
60 | 
61 |         for (const item of column.items) {
62 |           patch.push({
63 |             op: "put",
64 |             key: `item/${item.id}`,
65 |             value: {
66 |               id: item.id,
67 |               columnId: item.columnId,
68 |               boardId: item.boardId,
69 |               order: item.order,
70 |               title: item.title,
71 |             } satisfies ItemData,
72 |           });
73 |         }
74 |       }
75 |     }
76 | 
77 |     const replicacheClients = await tx.replicacheClient.findMany({
78 |       where: {
79 |         clientGroupId: replicacheClientGroup.id,
80 |       },
81 |     });
82 | 
83 |     const lastMutationIDChanges = Object.fromEntries(
84 |       replicacheClients.map((c) => [c.id, c.lastMutationID]),
85 |     );
86 | 
87 |     return {
88 |       lastMutationIDChanges,
89 |       cookie: Date.now(),
90 |       patch,
91 |     } satisfies PullResponseV1;
92 |   });
93 | 
94 |   return json(payload);
95 | }
96 |

--------------------------------------------------------------------------------
/app/routes/board.$id/components.tsx:
--------------------------------------------------------------------------------
  1 | import { useFetcher } from "@remix-run/react";
  2 | import { forwardRef, useRef, useState } from "react";
  3 | import { flushSync } from "react-dom";
  4 | 
  5 | export let SaveButton = forwardRef<
  6 |   HTMLButtonElement,
  7 |   React.ButtonHTMLAttributes<HTMLButtonElement>
  8 | >((props, ref) => {
  9 |   return (
 10 |     <button
 11 |       ref={ref}
 12 |       // this makes it so the button takes focus on clicks in safari I can't
 13 |       // remember if this is the proper workaround or not, it's been a while!
 14 |       // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
 15 |       // https://bugs.webkit.org/show_bug.cgi?id=22261
 16 |       tabIndex={0}
 17 |       {...props}
 18 |       className="text-sm rounded-lg text-left p-2 font-medium text-white bg-brand-blue"
 19 |     />
 20 |   );
 21 | });
 22 | 
 23 | export let CancelButton = forwardRef<
 24 |   HTMLButtonElement,
 25 |   React.ButtonHTMLAttributes<HTMLButtonElement>
 26 | >((props, ref) => {
 27 |   return (
 28 |     <button
 29 |       ref={ref}
 30 |       type="button"
 31 |       tabIndex={0}
 32 |       {...props}
 33 |       className="text-sm rounded-lg text-left p-2 font-medium hover:bg-slate-200 focus:bg-slate-200"
 34 |     />
 35 |   );
 36 | });
 37 | 
 38 | export function EditableText({
 39 |                                fieldName,
 40 |                                value,
 41 |                                inputClassName,
 42 |                                inputLabel,
 43 |                                buttonClassName,
 44 |                                buttonLabel,
 45 |                                onEdit
 46 |                              }: {
 47 |   fieldName: string;
 48 |   value: string;
 49 |   inputClassName: string;
 50 |   inputLabel: string;
 51 |   buttonClassName: string;
 52 |   buttonLabel: string;
 53 |   onEdit: (text: string) => any;
 54 | }) {
 55 |   let fetcher = useFetcher();
 56 |   let [edit, setEdit] = useState(false);
 57 |   let inputRef = useRef<HTMLInputElement>(null);
 58 |   let buttonRef = useRef<HTMLButtonElement>(null);
 59 | 
 60 |   // optimistic update
 61 |   if (fetcher.formData?.has(fieldName)) {
 62 |     value = String(fetcher.formData.get("name"));
 63 |   }
 64 | 
 65 |   return edit ? (
 66 |     <form
 67 |       method="post"
 68 |       onSubmit={(event) => {
 69 |         event.preventDefault();
 70 | 
 71 |         onEdit(inputRef.current?.value || "");
 72 | 
 73 |         flushSync(() => {
 74 |           setEdit(false);
 75 |         });
 76 |         buttonRef.current?.focus();
 77 |       }}
 78 |     >
 79 |       <input
 80 |         required
 81 |         ref={inputRef}
 82 |         type="text"
 83 |         aria-label={inputLabel}
 84 |         name={fieldName}
 85 |         defaultValue={value}
 86 |         className={inputClassName}
 87 |         onKeyDown={(event) => {
 88 |           if (event.key === "Escape") {
 89 |             flushSync(() => {
 90 |               setEdit(false);
 91 |             });
 92 |             buttonRef.current?.focus();
 93 |           }
 94 |         }}
 95 |         onBlur={(event) => {
 96 |           if (
 97 |             inputRef.current?.value !== value &&
 98 |             inputRef.current?.value.trim() !== ""
 99 |           ) {
100 |             onEdit(inputRef.current?.value || "");
101 |           }
102 |           setEdit(false);
103 |         }}
104 |       />
105 |     </form>
106 |   ) : (
107 |     <button
108 |       aria-label={buttonLabel}
109 |       type="button"
110 |       ref={buttonRef}
111 |       onClick={() => {
112 |         flushSync(() => {
113 |           setEdit(true);
114 |         });
115 |         inputRef.current?.select();
116 |       }}
117 |       className={buttonClassName}
118 |     >
119 |       {value || <span className="text-slate-400 italic">Edit</span>}
120 |     </button>
121 |   );
122 | }
123 |

--------------------------------------------------------------------------------
/app/routes/login/route.tsx:
--------------------------------------------------------------------------------
  1 | import { json, redirect, type DataFunctionArgs } from "@remix-run/node";
  2 | import { Form, Link, useActionData } from "@remix-run/react";
  3 | 
  4 | import { redirectIfLoggedInLoader, setAuthOnResponse } from "~/auth/auth";
  5 | import { Button } from "~/components/button";
  6 | import { Input, Label } from "~/components/input";
  7 | 
  8 | import { validate } from "./validate";
  9 | import { login } from "./queries";
 10 | 
 11 | export const loader = redirectIfLoggedInLoader;
 12 | 
 13 | export const meta = () => {
 14 |   return [{ title: "Trellix Login" }];
 15 | };
 16 | 
 17 | export async function action({ request }: DataFunctionArgs) {
 18 |   let formData = await request.formData();
 19 |   let email = String(formData.get("email") || "");
 20 |   let password = String(formData.get("password") || "");
 21 | 
 22 |   let errors = validate(email, password);
 23 |   if (errors) {
 24 |     return json({ ok: false, errors }, 400);
 25 |   }
 26 | 
 27 |   let userId = await login(email, password);
 28 |   if (userId === false) {
 29 |     return json(
 30 |       { ok: false, errors: { password: "Invalid credentials" } },
 31 |       400,
 32 |     );
 33 |   }
 34 | 
 35 |   let response = redirect("/home");
 36 |   return setAuthOnResponse(response, userId);
 37 | }
 38 | 
 39 | export default function Signup() {
 40 |   let actionResult = useActionData<typeof action>();
 41 | 
 42 |   return (
 43 |     <div className="flex min-h-full flex-1 flex-col mt-20 sm:px-6 lg:px-8">
 44 |       <div className="sm:mx-auto sm:w-full sm:max-w-md">
 45 |         <h2
 46 |           id="login-header"
 47 |           className="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900"
 48 |         >
 49 |           Log in
 50 |         </h2>
 51 |       </div>
 52 | 
 53 |       <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
 54 |         <div className="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
 55 |           <Form className="space-y-6" method="post">
 56 |             <div>
 57 |               <Label htmlFor="email">
 58 |                 Email address{" "}
 59 |                 {actionResult?.errors?.email && (
 60 |                   <span id="email-error" className="text-brand-red">
 61 |                     {actionResult.errors.email}
 62 |                   </span>
 63 |                 )}
 64 |               </Label>
 65 |               <Input
 66 |                 autoFocus
 67 |                 id="email"
 68 |                 name="email"
 69 |                 type="email"
 70 |                 autoComplete="email"
 71 |                 aria-describedby={
 72 |                   actionResult?.errors?.email ? "email-error" : "login-header"
 73 |                 }
 74 |                 required
 75 |               />
 76 |             </div>
 77 | 
 78 |             <div>
 79 |               <Label htmlFor="password">
 80 |                 Password{" "}
 81 |                 {actionResult?.errors?.password && (
 82 |                   <span id="password-error" className="text-brand-red">
 83 |                     {actionResult.errors.password}
 84 |                   </span>
 85 |                 )}
 86 |               </Label>
 87 |               <Input
 88 |                 id="password"
 89 |                 name="password"
 90 |                 type="password"
 91 |                 autoComplete="current-password"
 92 |                 aria-describedby="password-error"
 93 |                 required
 94 |               />
 95 |             </div>
 96 | 
 97 |             <div>
 98 |               <Button type="submit">Sign in</Button>
 99 |             </div>
100 |             <div className="text-sm text-slate-500">
101 |               Don't have an account?{" "}
102 |               <Link className="underline" to="/signup">
103 |                 Sign up
104 |               </Link>
105 |               .
106 |             </div>
107 |           </Form>
108 |         </div>
109 |       </div>
110 |     </div>
111 |   );
112 | }
113 |

--------------------------------------------------------------------------------
/app/root.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Link,
  3 |   Links,
  4 |   Meta,
  5 |   Outlet,
  6 |   Scripts,
  7 |   ScrollRestoration,
  8 |   type ShouldRevalidateFunctionArgs,
  9 |   useLoaderData,
 10 | } from "@remix-run/react";
 11 | import { type DataFunctionArgs, redirect } from "@remix-run/node";
 12 | 
 13 | import { LoginIcon, LogoutIcon } from "./icons/icons";
 14 | import { getAuthFromRequest } from "./auth/auth";
 15 | 
 16 | import "./styles.css";
 17 | import { useHotkeys } from "react-hotkeys-hook";
 18 | import { undoManager } from "~/replicache/undo";
 19 | import { ReplicacheProvider } from "~/replicache/provider";
 20 | import { AuthProvider } from "~/auth/provider";
 21 | 
 22 | export async function loader({ request }: DataFunctionArgs) {
 23 |   let auth = await getAuthFromRequest(request);
 24 |   if (auth && new URL(request.url).pathname === "/") {
 25 |     throw redirect("/home");
 26 |   }
 27 |   return auth;
 28 | }
 29 | 
 30 | export function shouldRevalidate({ formAction }: ShouldRevalidateFunctionArgs) {
 31 |   return formAction && ["/login", "/signup", "logout"].includes(formAction);
 32 | }
 33 | 
 34 | export default function App() {
 35 |   let userId = useLoaderData<typeof loader>();
 36 | 
 37 |   useHotkeys("mod+z", () => undoManager.undo(), []);
 38 |   useHotkeys("mod+shift+z", () => undoManager.redo(), []);
 39 | 
 40 |   return (
 41 |     <html lang="en">
 42 |       <head>
 43 |         <meta charSet="utf-8" />
 44 |         <meta name="viewport" content="width=device-width, initial-scale=1" />
 45 | 
 46 |         <Meta />
 47 |         <Links />
 48 |       </head>
 49 |       <body className="h-screen bg-slate-100 text-slate-900">
 50 |         <div className="h-full flex flex-col min-h-0">
 51 |           <div className="bg-slate-900 border-b border-slate-800 flex items-center justify-between py-4 px-8 box-border">
 52 |             <Link to="/home" className="block leading-3 w-1/3">
 53 |               <div className="font-black text-2xl text-white">
 54 |                 Trellix Replicache
 55 |               </div>
 56 |               <div className="text-slate-500">a Replicache Demo</div>
 57 |             </Link>
 58 |             <div className="w-1/3 flex justify-end gap-6">
 59 |               <IconLink
 60 |                 href="https://github.com/vimtor/trellix-replicache"
 61 |                 label="Source"
 62 |                 icon="/github-mark-white.png"
 63 |               />
 64 |               <IconLink
 65 |                 href="https://replicache.dev"
 66 |                 icon="/r.png"
 67 |                 label="Docs"
 68 |               />
 69 |               {userId ? (
 70 |                 <form method="post" action="/logout">
 71 |                   <button className="block text-center">
 72 |                     <LogoutIcon />
 73 |                     <br />
 74 |                     <span className="text-slate-500 text-xs uppercase font-bold">
 75 |                       Log out
 76 |                     </span>
 77 |                   </button>
 78 |                 </form>
 79 |               ) : (
 80 |                 <Link to="/login" className="block text-center">
 81 |                   <LoginIcon />
 82 |                   <br />
 83 |                   <span className="text-slate-500 text-xs uppercase font-bold">
 84 |                     Log in
 85 |                   </span>
 86 |                 </Link>
 87 |               )}
 88 |             </div>
 89 |           </div>
 90 | 
 91 |           <div className="flex-grow min-h-0 h-full">
 92 |             <AuthProvider userId={userId}>
 93 |               <ReplicacheProvider>
 94 |                 <Outlet />
 95 |               </ReplicacheProvider>
 96 |             </AuthProvider>
 97 |           </div>
 98 |         </div>
 99 | 
100 |         <ScrollRestoration />
101 |         <Scripts />
102 |       </body>
103 |     </html>
104 |   );
105 | }
106 | 
107 | function IconLink({
108 |   icon,
109 |   href,
110 |   label,
111 | }: {
112 |   icon: string;
113 |   href: string;
114 |   label: string;
115 | }) {
116 |   return (
117 |     <a
118 |       href={href}
119 |       className="text-slate-500 text-xs uppercase font-bold text-center"
120 |     >
121 |       <img src={icon} aria-hidden className="inline-block h-8" />
122 |       <span className="block mt-2">{label}</span>
123 |     </a>
124 |   );
125 | }
126 |

--------------------------------------------------------------------------------
/app/routes/signup/route.tsx:
--------------------------------------------------------------------------------
  1 | import { json, type ActionFunctionArgs, redirect } from "@remix-run/node";
  2 | import { Form, Link, useActionData } from "@remix-run/react";
  3 | 
  4 | import { redirectIfLoggedInLoader, setAuthOnResponse } from "~/auth/auth";
  5 | import { Label, Input } from "~/components/input";
  6 | import { Button } from "~/components/button";
  7 | 
  8 | import { validate } from "./validate";
  9 | import { createAccount } from "./queries";
 10 | 
 11 | export const loader = redirectIfLoggedInLoader;
 12 | 
 13 | export const meta = () => {
 14 |   return [{ title: "Trellix Signup" }];
 15 | };
 16 | 
 17 | export async function action({ request }: ActionFunctionArgs) {
 18 |   let formData = await request.formData();
 19 | 
 20 |   let email = String(formData.get("email") || "");
 21 |   let password = String(formData.get("password") || "");
 22 | 
 23 |   let errors = await validate(email, password);
 24 |   if (errors) {
 25 |     return json({ ok: false, errors }, 400);
 26 |   }
 27 | 
 28 |   let user = await createAccount(email, password);
 29 |   return setAuthOnResponse(redirect("/home"), user.id);
 30 | }
 31 | 
 32 | export default function Signup() {
 33 |   let actionResult = useActionData<typeof action>();
 34 | 
 35 |   return (
 36 |     <div className="flex min-h-full flex-1 flex-col mt-20 sm:px-6 lg:px-8">
 37 |       <div className="sm:mx-auto sm:w-full sm:max-w-md">
 38 |         <h2
 39 |           id="signup-header"
 40 |           className="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900"
 41 |         >
 42 |           Sign up
 43 |         </h2>
 44 |       </div>
 45 | 
 46 |       <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
 47 |         <div className="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
 48 |           <Form className="space-y-6" method="post">
 49 |             <div>
 50 |               <Label htmlFor="email">
 51 |                 Email address{" "}
 52 |                 {actionResult?.errors?.email && (
 53 |                   <span id="email-error" className="text-brand-red">
 54 |                     {actionResult.errors.email}
 55 |                   </span>
 56 |                 )}
 57 |               </Label>
 58 |               <Input
 59 |                 autoFocus
 60 |                 id="email"
 61 |                 name="email"
 62 |                 type="email"
 63 |                 autoComplete="email"
 64 |                 aria-describedby={
 65 |                   actionResult?.errors?.email ? "email-error" : "signup-header"
 66 |                 }
 67 |                 required
 68 |               />
 69 |             </div>
 70 | 
 71 |             <div>
 72 |               <Label htmlFor="password">
 73 |                 Password{" "}
 74 |                 {actionResult?.errors?.password && (
 75 |                   <span id="password-error" className="text-brand-red">
 76 |                     {actionResult.errors.password}
 77 |                   </span>
 78 |                 )}
 79 |               </Label>
 80 |               <Input
 81 |                 id="password"
 82 |                 name="password"
 83 |                 type="password"
 84 |                 autoComplete="current-password"
 85 |                 aria-describedby="password-error"
 86 |                 required
 87 |               />
 88 |             </div>
 89 | 
 90 |             <Button type="submit">Sign in</Button>
 91 | 
 92 |             <div className="text-sm text-slate-500">
 93 |               Already have an account?{" "}
 94 |               <Link className="underline" to="/login">
 95 |                 Log in
 96 |               </Link>
 97 |               .
 98 |             </div>
 99 |           </Form>
100 |         </div>
101 |         <div className="mt-8 space-y-2 mx-2">
102 |           <h3 className="font-bold text-black">Privacy Notice</h3>
103 |           <p>
104 |             We won't use your email address for anything other than
105 |             authenticating with this demo application. This app doesn't send
106 |             email anyway, so you can put whatever fake email address you want.
107 |           </p>
108 |           <h3 className="font-bold text-black">Terms of Service</h3>
109 |           <p>
110 |             This is a demo app, there are no terms of service. Don't be
111 |             surprised if your data dissappears.
112 |           </p>
113 |         </div>
114 |       </div>
115 |     </div>
116 |   );
117 | }
118 |

--------------------------------------------------------------------------------
/app/routes/board.$id/board.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useRef } from "react";
  2 | import invariant from "tiny-invariant";
  3 | import { Link, useNavigate, useParams } from "@remix-run/react";
  4 | import { Column } from "./column";
  5 | import { NewColumn } from "./new-column";
  6 | import { EditableText } from "./components";
  7 | import { useSubscribe } from "replicache-react";
  8 | import { BoardData, ColumnData } from "~/replicache/data";
  9 | import { Icon } from "~/icons/icons";
 10 | import { useHotkeys } from "react-hotkeys-hook";
 11 | import { undoManager } from "~/replicache/undo";
 12 | import { useReplicache } from "~/replicache/provider";
 13 | import { useEnsureLoggedIn } from "~/auth/provider";
 14 | 
 15 | export function Board() {
 16 |   const { id } = useParams();
 17 | 
 18 |   const replicache = useReplicache();
 19 | 
 20 |   const boards = useSubscribe(replicache, async (tx) => {
 21 |     return tx
 22 |       .scan<BoardData>({ prefix: `board/${id}`, limit: 1 })
 23 |       .values()
 24 |       .toArray();
 25 |   });
 26 | 
 27 |   const board = boards?.[0];
 28 |   const doesBoardExist = !!board || !boards;
 29 | 
 30 |   const columns = useSubscribe(
 31 |     replicache,
 32 |     async (tx) => {
 33 |       const columns = await tx
 34 |         .scan<ColumnData>({ prefix: `column/` })
 35 |         .values()
 36 |         .toArray();
 37 | 
 38 |       return columns
 39 |         .filter((c) => c.boardId === id)
 40 |         .sort((a, b) => a.order - b.order);
 41 |     },
 42 |     {
 43 |       dependencies: [id],
 44 |       default: [],
 45 |     },
 46 |   );
 47 | 
 48 |   const navigate = useNavigate();
 49 | 
 50 |   useHotkeys("esc", () => navigate("/home"), []);
 51 | 
 52 |   let scrollContainerRef = useRef<HTMLDivElement>(null);
 53 | 
 54 |   useEnsureLoggedIn();
 55 | 
 56 |   useEffect(() => {
 57 |     if (!doesBoardExist) {
 58 |       navigate("/home");
 59 |     }
 60 |   }, [doesBoardExist]);
 61 | 
 62 |   if (!board) {
 63 |     return null;
 64 |   }
 65 | 
 66 |   function scrollRight() {
 67 |     invariant(scrollContainerRef.current, "no scroll container");
 68 |     scrollContainerRef.current.scrollLeft =
 69 |       scrollContainerRef.current.scrollWidth;
 70 |   }
 71 | 
 72 |   return (
 73 |     <div
 74 |       className="h-full min-h-0 flex flex-col overflow-x-scroll"
 75 |       ref={scrollContainerRef}
 76 |       style={{ backgroundColor: board.color }}
 77 |     >
 78 |       <div className="mx-8 my-4 flex items-center gap-3">
 79 |         <Link to="/home">
 80 |           <span className="sr-only">Go to home</span>
 81 |           <Icon name="arrow-left" size="lg" />
 82 |         </Link>
 83 |         <h1>
 84 |           <EditableText
 85 |             value={board.name}
 86 |             fieldName="name"
 87 |             inputClassName="text-2xl font-medium border border-slate-400 rounded-lg py-1 px-2 text-black"
 88 |             buttonClassName="text-2xl font-medium block rounded-lg text-left border border-transparent py-1 px-2 text-slate-800"
 89 |             buttonLabel={`Edit board "${board.name}" name`}
 90 |             inputLabel="Edit board name"
 91 |             onEdit={(text) => {
 92 |               undoManager.add({
 93 |                 execute: () => {
 94 |                   replicache?.mutate.updateBoard({ id: board.id, name: text });
 95 |                 },
 96 |                 undo: () => {
 97 |                   replicache?.mutate.updateBoard({
 98 |                     id: board.id,
 99 |                     name: board.name,
100 |                   });
101 |                 },
102 |               });
103 |             }}
104 |           />
105 |         </h1>
106 |       </div>
107 | 
108 |       <div className="flex flex-grow min-h-0 h-full items-start gap-4 px-8 pb-4">
109 |         {[...columns.values()].map((col) => (
110 |           <Column
111 |             key={col.id}
112 |             name={col.name}
113 |             columnId={col.id}
114 |             boardId={board.id}
115 |           />
116 |         ))}
117 | 
118 |         <NewColumn
119 |           boardId={board.id}
120 |           onAdd={scrollRight}
121 |           editInitially={columns.length === 0}
122 |           nextOrder={columns.length + 1}
123 |         />
124 | 
125 |         {/* trolling you to add some extra margin to the right of the container with a whole dang div */}
126 |         <div data-lol className="w-8 h-1 flex-shrink-0" />
127 |       </div>
128 |     </div>
129 |   );
130 | }
131 |

--------------------------------------------------------------------------------
/app/routes/board.$id/card.tsx:
--------------------------------------------------------------------------------
  1 | import invariant from "tiny-invariant";
  2 | import { useState } from "react";
  3 | 
  4 | import { Icon } from "~/icons/icons";
  5 | 
  6 | import { CONTENT_TYPES } from "./types";
  7 | import { ItemData } from "~/replicache/data";
  8 | import { undoManager } from "~/replicache/undo";
  9 | import { useReplicache } from "~/replicache/provider";
 10 | 
 11 | interface CardProps {
 12 |   title: string;
 13 |   content?: string | null;
 14 |   id: string;
 15 |   columnId: string;
 16 |   order: number;
 17 |   nextOrder: number;
 18 |   previousOrder: number;
 19 | }
 20 | 
 21 | export function Card({
 22 |   title,
 23 |   content,
 24 |   id,
 25 |   columnId,
 26 |   order,
 27 |   nextOrder,
 28 |   previousOrder,
 29 | }: CardProps) {
 30 |   let [acceptDrop, setAcceptDrop] = useState<"none" | "top" | "bottom">("none");
 31 |   let replicache = useReplicache();
 32 | 
 33 |   return (
 34 |     <li
 35 |       onDragOver={(event) => {
 36 |         if (event.dataTransfer.types.includes(CONTENT_TYPES.card)) {
 37 |           event.preventDefault();
 38 |           event.stopPropagation();
 39 |           let rect = event.currentTarget.getBoundingClientRect();
 40 |           let midpoint = (rect.top + rect.bottom) / 2;
 41 |           setAcceptDrop(event.clientY <= midpoint ? "top" : "bottom");
 42 |         }
 43 |       }}
 44 |       onDragLeave={() => {
 45 |         setAcceptDrop("none");
 46 |       }}
 47 |       onDrop={async (event) => {
 48 |         event.stopPropagation();
 49 | 
 50 |         let transfer = JSON.parse(
 51 |           event.dataTransfer.getData(CONTENT_TYPES.card),
 52 |         );
 53 |         invariant(transfer.id, "missing cardId");
 54 |         invariant(transfer.title, "missing title");
 55 | 
 56 |         let droppedOrder = acceptDrop === "top" ? previousOrder : nextOrder;
 57 |         let moveOrder = (droppedOrder + order) / 2;
 58 | 
 59 |         const item = await replicache?.query(async (tx) => {
 60 |           const [result] = await tx
 61 |             .scan<ItemData>({
 62 |               prefix: `item/${transfer.id}`,
 63 |               limit: 1,
 64 |             })
 65 |             .values()
 66 |             .toArray();
 67 |           return result;
 68 |         });
 69 | 
 70 |         invariant(item, "missing item");
 71 | 
 72 |         undoManager.add({
 73 |           execute: () =>
 74 |             replicache?.mutate.updateItem({
 75 |               id: transfer.id,
 76 |               order: moveOrder,
 77 |               columnId: columnId,
 78 |             }),
 79 |           undo: () => {
 80 |             console.log("undoing");
 81 |             replicache?.mutate.updateItem(item);
 82 |           },
 83 |         });
 84 | 
 85 |         setAcceptDrop("none");
 86 |       }}
 87 |       className={
 88 |         "border-t-2 border-b-2 -mb-[2px] last:mb-0 cursor-grab active:cursor-grabbing px-2 py-1 " +
 89 |         (acceptDrop === "top"
 90 |           ? "border-t-brand-red border-b-transparent"
 91 |           : acceptDrop === "bottom"
 92 |             ? "border-b-brand-red border-t-transparent"
 93 |             : "border-t-transparent border-b-transparent")
 94 |       }
 95 |     >
 96 |       <div
 97 |         draggable
 98 |         className="bg-white shadow shadow-slate-300 border-slate-300 text-sm rounded-lg w-full py-1 px-2 relative"
 99 |         onDragStart={(event) => {
100 |           event.dataTransfer.effectAllowed = "move";
101 |           event.dataTransfer.setData(
102 |             CONTENT_TYPES.card,
103 |             JSON.stringify({ id, title }),
104 |           );
105 |         }}
106 |       >
107 |         <h3>{title}</h3>
108 |         <div className="mt-2">{content || <> </>}</div>
109 |         <form
110 |           onSubmit={async (event) => {
111 |             event.preventDefault();
112 | 
113 |             const item = await replicache?.query(async (tx) => {
114 |               const [result] = await tx
115 |                 .scan<ItemData>({
116 |                   prefix: `item/${id}`,
117 |                   limit: 1,
118 |                 })
119 |                 .values()
120 |                 .toArray();
121 |               return result;
122 |             });
123 | 
124 |             invariant(item, "missing item");
125 | 
126 |             undoManager.add({
127 |               execute: () => replicache?.mutate.deleteItem(id),
128 |               undo: () => replicache?.mutate.updateItem(item),
129 |             });
130 |           }}
131 |         >
132 |           <button
133 |             aria-label="Delete card"
134 |             className="absolute top-4 right-4 hover:text-brand-red"
135 |             type="submit"
136 |             onClick={(event) => {
137 |               event.stopPropagation();
138 |             }}
139 |           >
140 |             <Icon name="trash" />
141 |           </button>
142 |         </form>
143 |       </div>
144 |     </li>
145 |   );
146 | }
147 |

--------------------------------------------------------------------------------
/app/routes/home/route.tsx:
--------------------------------------------------------------------------------
  1 | import { Link, useNavigate } from "@remix-run/react";
  2 | import { Button } from "~/components/button";
  3 | import { Label, LabeledInput } from "~/components/input";
  4 | import { Icon } from "~/icons/icons";
  5 | import { useSubscribe } from "replicache-react";
  6 | import { BoardData } from "~/replicache/data";
  7 | import { nanoid } from "nanoid";
  8 | import { undoManager } from "~/replicache/undo";
  9 | import { useReplicache } from "~/replicache/provider";
 10 | import { useEnsureLoggedIn } from "~/auth/provider";
 11 | 
 12 | export const meta = () => {
 13 |   return [{ title: "Boards" }];
 14 | };
 15 | 
 16 | export default function Projects() {
 17 |   return (
 18 |     <div className="h-full">
 19 |       <NewBoard />
 20 |       <Boards />
 21 |     </div>
 22 |   );
 23 | }
 24 | 
 25 | function Boards() {
 26 |   const replicache = useReplicache();
 27 | 
 28 |   const boards = useSubscribe(
 29 |     replicache,
 30 |     async (tx) => {
 31 |       const result = await tx
 32 |         .scan<BoardData>({ prefix: `board/` })
 33 |         .values()
 34 |         .toArray();
 35 | 
 36 |       // Filter out boards created in the last milliseconds to avoid flashing them.
 37 |       return result
 38 |         .filter(
 39 |           (board) => new Date(board.createdAt).getTime() < Date.now() - 100,
 40 |         )
 41 |         .sort((a, b) => a.createdAt.localeCompare(b.createdAt) * -1);
 42 |     },
 43 |     {
 44 |       default: [],
 45 |     },
 46 |   );
 47 | 
 48 |   useEnsureLoggedIn();
 49 | 
 50 |   return (
 51 |     <div className="p-8">
 52 |       <h2 className="font-bold mb-2 text-xl">Boards</h2>
 53 |       <nav className="flex flex-wrap gap-8">
 54 |         {boards.map((board) => (
 55 |           <Board
 56 |             key={board.id}
 57 |             name={board.name}
 58 |             id={board.id}
 59 |             color={board.color}
 60 |           />
 61 |         ))}
 62 |       </nav>
 63 |     </div>
 64 |   );
 65 | }
 66 | 
 67 | function Board({
 68 |   name,
 69 |   id,
 70 |   color,
 71 | }: {
 72 |   name: string;
 73 |   id: string;
 74 |   color: string;
 75 | }) {
 76 |   const replicache = useReplicache();
 77 | 
 78 |   return (
 79 |     <Link
 80 |       to={`/board/${id}`}
 81 |       className="w-60 h-40 p-4 block border-b-8 shadow rounded hover:shadow-lg bg-white relative"
 82 |       style={{ borderColor: color }}
 83 |     >
 84 |       <div className="font-bold">{name}</div>
 85 |       <form
 86 |         onSubmit={async (event) => {
 87 |           event.preventDefault();
 88 | 
 89 |           if (
 90 |             window.confirm(
 91 |               `Are you sure you want to delete the "${name}" board?\nThis action cannot be undone.`,
 92 |             )
 93 |           ) {
 94 |             replicache?.mutate.deleteBoard(id);
 95 |           }
 96 |         }}
 97 |       >
 98 |         <button
 99 |           aria-label="Delete board"
100 |           className="absolute top-4 right-4 hover:text-brand-red"
101 |           type="submit"
102 |           onClick={(event) => {
103 |             event.stopPropagation();
104 |           }}
105 |         >
106 |           <Icon name="trash" />
107 |         </button>
108 |       </form>
109 |     </Link>
110 |   );
111 | }
112 | 
113 | function NewBoard() {
114 |   let navigate = useNavigate();
115 |   let replicache = useReplicache();
116 | 
117 |   return (
118 |     <form
119 |       className="p-8 max-w-md"
120 |       onSubmit={(event) => {
121 |         event.preventDefault();
122 | 
123 |         const formData = new FormData(event.currentTarget);
124 | 
125 |         const board: BoardData = {
126 |           id: nanoid(),
127 |           name: formData.get("name") as string,
128 |           color: formData.get("color") as string,
129 |           createdAt: new Date().toISOString(),
130 |         };
131 | 
132 |         undoManager.add({
133 |           execute: () => {
134 |             navigate(`/board/${board.id}`);
135 |             replicache?.mutate.createBoard(board);
136 |           },
137 |           undo: () => {
138 |             replicache?.mutate.deleteBoard(board.id);
139 |             navigate("/home");
140 |           },
141 |         });
142 |       }}
143 |     >
144 |       <div>
145 |         <h2 className="font-bold mb-2 text-xl">New Board</h2>
146 |         <LabeledInput label="Name" name="name" type="text" required autoFocus />
147 |       </div>
148 | 
149 |       <div className="mt-4 flex items-center gap-4">
150 |         <div className="flex items-center gap-1">
151 |           <Label htmlFor="board-color">Color</Label>
152 |           <input
153 |             id="board-color"
154 |             name="color"
155 |             type="color"
156 |             defaultValue="#cbd5e1"
157 |             className="bg-transparent"
158 |           />
159 |         </div>
160 |         <Button type="submit">Create</Button>
161 |       </div>
162 |     </form>
163 |   );
164 | }
165 |

--------------------------------------------------------------------------------
/app/routes/board.$id/column.tsx:
--------------------------------------------------------------------------------
  1 | import { useRef, useState } from "react";
  2 | import invariant from "tiny-invariant";
  3 | 
  4 | import { Icon } from "~/icons/icons";
  5 | 
  6 | import { CONTENT_TYPES } from "./types";
  7 | import { NewCard } from "./new-card";
  8 | import { flushSync } from "react-dom";
  9 | import { Card } from "./card";
 10 | import { EditableText } from "./components";
 11 | import { useSubscribe } from "replicache-react";
 12 | import { ItemData } from "~/replicache/data";
 13 | import { undoManager } from "~/replicache/undo";
 14 | import { useReplicache } from "~/replicache/provider";
 15 | 
 16 | interface ColumnProps {
 17 |   name: string;
 18 |   columnId: string;
 19 |   boardId: string;
 20 | }
 21 | 
 22 | export function Column({ name, columnId, boardId }: ColumnProps) {
 23 |   let replicache = useReplicache();
 24 | 
 25 |   const items = useSubscribe(
 26 |     replicache,
 27 |     async (tx) => {
 28 |       const items = await tx
 29 |         .scan<ItemData>({ prefix: `item/` })
 30 |         .values()
 31 |         .toArray();
 32 | 
 33 |       return items
 34 |         .filter((c) => c.columnId === columnId)
 35 |         .sort((a, b) => a.order - b.order);
 36 |     },
 37 |     {
 38 |       dependencies: [columnId],
 39 |       default: [],
 40 |     },
 41 |   );
 42 | 
 43 |   let [acceptDrop, setAcceptDrop] = useState(false);
 44 |   let [edit, setEdit] = useState(false);
 45 |   let listRef = useRef<HTMLUListElement>(null);
 46 | 
 47 |   function scrollList() {
 48 |     invariant(listRef.current);
 49 |     listRef.current.scrollTop = listRef.current.scrollHeight;
 50 |   }
 51 | 
 52 |   return (
 53 |     <div
 54 |       className={
 55 |         "flex-shrink-0 flex flex-col overflow-hidden max-h-full w-80 border-slate-400 rounded-xl shadow-sm shadow-slate-400 bg-slate-100 " +
 56 |         (acceptDrop ? `outline outline-2 outline-brand-red` : ``)
 57 |       }
 58 |       onDragOver={(event) => {
 59 |         if (
 60 |           items.length === 0 &&
 61 |           event.dataTransfer.types.includes(CONTENT_TYPES.card)
 62 |         ) {
 63 |           event.preventDefault();
 64 |           setAcceptDrop(true);
 65 |         }
 66 |       }}
 67 |       onDragLeave={() => {
 68 |         setAcceptDrop(false);
 69 |       }}
 70 |       onDrop={async (event) => {
 71 |         let transfer = JSON.parse(
 72 |           event.dataTransfer.getData(CONTENT_TYPES.card),
 73 |         );
 74 |         invariant(transfer.id, "missing transfer.id");
 75 |         invariant(transfer.title, "missing transfer.title");
 76 | 
 77 |         const item = await replicache?.query(async (tx) => {
 78 |           const [result] = await tx
 79 |             .scan<ItemData>({
 80 |               prefix: `item/${transfer.id}`,
 81 |               limit: 1,
 82 |             })
 83 |             .values()
 84 |             .toArray();
 85 |           return result;
 86 |         });
 87 | 
 88 |         invariant(item, "missing item");
 89 | 
 90 |         undoManager.add({
 91 |           execute: () => {
 92 |             replicache?.mutate.updateItem({
 93 |               id: transfer.id,
 94 |               columnId: columnId,
 95 |               order: 1,
 96 |             });
 97 |           },
 98 |           undo: () => replicache?.mutate.updateItem(item),
 99 |         });
100 | 
101 |         setAcceptDrop(false);
102 |       }}
103 |     >
104 |       <div className="p-2">
105 |         <EditableText
106 |           fieldName="name"
107 |           value={name}
108 |           inputLabel="Edit column name"
109 |           buttonLabel={`Edit column "${name}" name`}
110 |           inputClassName="border border-slate-400 w-full rounded-lg py-1 px-2 font-medium text-black"
111 |           buttonClassName="block rounded-lg text-left w-full border border-transparent py-1 px-2 font-medium text-slate-600"
112 |           onEdit={(text) => {
113 |             undoManager.add({
114 |               execute: () => {
115 |                 replicache?.mutate.updateColumn({ id: columnId, name: text });
116 |               },
117 |               undo: () => {
118 |                 replicache?.mutate.updateColumn({ id: columnId, name });
119 |               },
120 |             });
121 |           }}
122 |         />
123 |       </div>
124 | 
125 |       <ul ref={listRef} className="flex-grow overflow-auto">
126 |         {items
127 |           .sort((a, b) => a.order - b.order)
128 |           .map((item, index, items) => (
129 |             <Card
130 |               key={item.id}
131 |               title={item.title}
132 |               content={item.content}
133 |               id={item.id}
134 |               order={item.order}
135 |               columnId={columnId}
136 |               previousOrder={items[index - 1] ? items[index - 1].order : 0}
137 |               nextOrder={
138 |                 items[index + 1] ? items[index + 1].order : item.order + 1
139 |               }
140 |             />
141 |           ))}
142 |       </ul>
143 |       {edit ? (
144 |         <NewCard
145 |           boardId={boardId}
146 |           columnId={columnId}
147 |           nextOrder={items.length === 0 ? 1 : items[items.length - 1].order + 1}
148 |           onAddCard={() => scrollList()}
149 |           onComplete={() => setEdit(false)}
150 |         />
151 |       ) : (
152 |         <div className="p-2">
153 |           <button
154 |             type="button"
155 |             onClick={() => {
156 |               flushSync(() => {
157 |                 setEdit(true);
158 |               });
159 |               scrollList();
160 |             }}
161 |             className="flex items-center gap-2 rounded-lg text-left w-full p-2 font-medium text-slate-500 hover:bg-slate-200 focus:bg-slate-200"
162 |           >
163 |             <Icon name="plus" /> Add a card
164 |           </button>
165 |         </div>
166 |       )}
167 |     </div>
168 |   );
169 | }
170 |

--------------------------------------------------------------------------------
/app/routes/replicache.$op/push.ts:
--------------------------------------------------------------------------------
  1 | import { json } from "@remix-run/node";
  2 | import { requireAuthCookie } from "~/auth/auth";
  3 | import { PushRequestV1 } from "replicache";
  4 | import { prisma } from "~/db/prisma";
  5 | import { BoardData, ColumnData, ItemData } from "~/replicache/data";
  6 | import invariant from "tiny-invariant";
  7 | 
  8 | export async function handleReplicachePush(
  9 |   request: Request,
 10 | ): Promise<Response> {
 11 |   const accountId = await requireAuthCookie(request);
 12 |   const push = (await request.json()) as PushRequestV1;
 13 | 
 14 |   let replicacheClientGroup = await prisma.replicacheClientGroup.findFirst({
 15 |     where: {
 16 |       id: push.clientGroupID,
 17 |       accountId,
 18 |     },
 19 |   });
 20 |   replicacheClientGroup ??= { id: push.clientGroupID, accountId };
 21 | 
 22 |   for (const mutation of push.mutations) {
 23 |     await prisma.$transaction(async (tx) => {
 24 |       let replicacheClient = await tx.replicacheClient.findFirst({
 25 |         where: {
 26 |           id: mutation.clientID,
 27 |         },
 28 |       });
 29 |       replicacheClient ??= {
 30 |         id: mutation.clientID,
 31 |         clientGroupId: push.clientGroupID,
 32 |         lastMutationID: 0,
 33 |       };
 34 | 
 35 |       const nextMutationID = replicacheClient.lastMutationID + 1;
 36 | 
 37 |       if (mutation.id < nextMutationID) {
 38 |         console.log(
 39 |           `Mutation ${mutation.id} has already been processed - skipping`,
 40 |         );
 41 |         return;
 42 |       }
 43 | 
 44 |       if (mutation.id > nextMutationID) {
 45 |         throw new Error(
 46 |           `Mutation ${mutation.id} is from the future - aborting. This can happen in development if the server restarts. In that case, clear appliation data in browser and refresh.`,
 47 |         );
 48 |       }
 49 | 
 50 |       switch (mutation.name) {
 51 |         case "createBoard": {
 52 |           const data = mutation.args as BoardData;
 53 |           await tx.board.create({
 54 |             data: {
 55 |               id: data.id,
 56 |               name: data.name,
 57 |               color: data.color,
 58 |               createdAt: new Date(data.createdAt),
 59 |               accountId,
 60 |             },
 61 |           });
 62 |           break;
 63 |         }
 64 |         case "updateBoard": {
 65 |           const { id, ...data } = mutation.args as BoardData;
 66 |           await tx.board.updateMany({
 67 |             where: { id, accountId },
 68 |             data: data,
 69 |           });
 70 |           break;
 71 |         }
 72 |         case "deleteBoard": {
 73 |           await tx.board.deleteMany({
 74 |             where: { id: mutation.args as string, accountId },
 75 |           });
 76 |           break;
 77 |         }
 78 |         case "createColumn": {
 79 |           const { id, boardId, ...data } = mutation.args as ColumnData;
 80 | 
 81 |           const board = await tx.board.findFirst({
 82 |             where: { id: boardId, accountId },
 83 |           });
 84 | 
 85 |           if (!board) break;
 86 | 
 87 |           invariant(board.accountId === accountId, "User does not own board");
 88 | 
 89 |           await tx.column.create({
 90 |             data: {
 91 |               id,
 92 |               boardId,
 93 |               name: data.name,
 94 |               order: data.order,
 95 |             },
 96 |           });
 97 |           break;
 98 |         }
 99 |         case "updateColumn": {
100 |           const { id, ...data } = mutation.args as ColumnData;
101 | 
102 |           const column = await tx.column.findFirst({
103 |             where: { id },
104 |             include: {
105 |               Board: true,
106 |             },
107 |           });
108 | 
109 |           if (!column) break;
110 | 
111 |           invariant(
112 |             column.Board.accountId === accountId,
113 |             "User does not own board",
114 |           );
115 | 
116 |           await tx.column.updateMany({
117 |             where: { id },
118 |             data: data,
119 |           });
120 |           break;
121 |         }
122 |         case "deleteColumn": {
123 |           const id = mutation.args as string;
124 |           const column = await tx.column.findFirst({
125 |             where: { id: id },
126 |             include: {
127 |               Board: true,
128 |             },
129 |           });
130 | 
131 |           if (!column) break;
132 | 
133 |           invariant(
134 |             column.Board.accountId === accountId,
135 |             "User does not own board",
136 |           );
137 | 
138 |           await tx.column.deleteMany({
139 |             where: { id },
140 |           });
141 |           break;
142 |         }
143 |         case "createItem": {
144 |           const { id, columnId, ...data } = mutation.args as ItemData;
145 |           const column = await tx.column.findFirst({
146 |             where: { id: columnId },
147 |             include: {
148 |               Board: true,
149 |             },
150 |           });
151 | 
152 |           if (!column) break;
153 | 
154 |           invariant(
155 |             column.Board.accountId === accountId,
156 |             "User does not own board",
157 |           );
158 | 
159 |           await tx.item.create({
160 |             data: {
161 |               id,
162 |               columnId,
163 |               title: data.title,
164 |               content: data.content,
165 |               order: data.order,
166 |               boardId: data.boardId,
167 |             },
168 |           });
169 |           break;
170 |         }
171 |         case "updateItem": {
172 |           const { id, ...data } = mutation.args as ItemData;
173 |           const item = await tx.item.findFirst({
174 |             where: { id },
175 |             include: {
176 |               Column: {
177 |                 include: {
178 |                   Board: true,
179 |                 },
180 |               },
181 |             },
182 |           });
183 | 
184 |           if (!item) break;
185 | 
186 |           invariant(
187 |             item.Column.Board.accountId === accountId,
188 |             "User does not own board",
189 |           );
190 | 
191 |           await tx.item.updateMany({
192 |             where: { id },
193 |             data: data,
194 |           });
195 |           break;
196 |         }
197 |         case "deleteItem": {
198 |           const id = mutation.args as string;
199 |           const item = await tx.item.findFirst({
200 |             where: { id },
201 |             include: {
202 |               Column: {
203 |                 include: {
204 |                   Board: true,
205 |                 },
206 |               },
207 |             },
208 |           });
209 | 
210 |           if (!item) break;
211 | 
212 |           invariant(
213 |             item.Column.Board.accountId === accountId,
214 |             "User does not own board",
215 |           );
216 | 
217 |           await tx.item.deleteMany({
218 |             where: { id },
219 |           });
220 |           break;
221 |         }
222 |       }
223 | 
224 |       await tx.replicacheClientGroup.upsert({
225 |         where: { id: push.clientGroupID, accountId },
226 |         update: replicacheClientGroup,
227 |         create: replicacheClientGroup,
228 |       });
229 | 
230 |       await tx.replicacheClient.upsert({
231 |         where: { id: mutation.clientID },
232 |         update: {
233 |           id: mutation.clientID,
234 |           clientGroupId: push.clientGroupID,
235 |           lastMutationID: nextMutationID,
236 |         },
237 |         create: {
238 |           id: mutation.clientID,
239 |           clientGroupId: push.clientGroupID,
240 |           lastMutationID: nextMutationID,
241 |         },
242 |       });
243 |     });
244 |   }
245 | 
246 |   return json({});
247 | }
248 |

--------------------------------------------------------------------------------