refa: introduce document repo (#21)

.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+charset = utf-8
+
+[*.md]
+trim_trailing_whitespace = false
+
+[package.json]
+indent_size = 2

app/repos/document.ts

@@ -0,0 +1,23 @@
+import { eq } from "drizzle-orm";
+import { db } from "~/db";
+import { documentsTable } from "~/db/schema";
+
+export interface Document {
+  id: string;
+  content: string | null;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export async function createDocument(): Promise<Document> {
+  const response = await db.insert(documentsTable).values({}).returning();
+  return response[0];
+}
+
+export async function getDocument(id: string): Promise<Document | undefined> {
+  const response = await db.query.documentsTable.findFirst({
+    where: eq(documentsTable.id, id),
+  })
+
+  return response;
+}

app/routes/$docId.tsx

@@ -5,10 +5,8 @@ import {
   type MetaFunction,
 } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
-import { eq } from "drizzle-orm";
 import invariant from "tiny-invariant";
-import { db } from "~/db";
-import { documentsTable } from "~/db/schema";
+import { getDocument } from "~/repos/document";
 
 export const meta: MetaFunction = () => {
   return [{ title: "Document" }];
@@ -17,9 +15,7 @@ export const meta: MetaFunction = () => {
 export async function loader({ params: { docId } }: LoaderFunctionArgs) {
   invariant(docId, "Document ID is required");
 
-  const document = await db.query.documentsTable.findFirst({
-    where: eq(documentsTable.id, docId),
-  });
+  const document = await getDocument(docId);
 
   if (!document) {
     return redirect("/");
@@ -36,7 +32,7 @@ export default function DocumentPage() {
       <div className="flex flex-col items-center gap-16">
         <header className="flex flex-col items-center gap-9">
           <h1 className="leading text-2xl font-bold text-gray-800 dark:text-gray-100">
-            {document.id}
+            Document {document.id}
           </h1>
         </header>
       </div>

app/routes/_index.tsx

@@ -1,36 +1,5 @@
-import type { MetaFunction } from "@remix-run/node";
-import { Button } from "~/ui";
+import { redirect } from "@remix-run/node";
 
-export const meta: MetaFunction = () => {
-  return [
-    { title: "New Remix App" },
-    { name: "description", content: "Welcome to Remix!" },
-  ];
-};
-
-export default function Index() {
-  return (
-    <div className="flex h-screen items-center justify-center">
-      <div className="flex flex-col items-center gap-16">
-        <header className="flex flex-col items-center gap-9">
-          <h1 className="leading text-2xl font-bold text-gray-800 dark:text-gray-100">
-            Welcome to <span className="sr-only">Remix</span>
-          </h1>
-          <div className="h-[144px] w-[434px]">
-            <img
-              src="/logo-light.png"
-              alt="Remix"
-              className="block w-full dark:hidden"
-            />
-            <img
-              src="/logo-dark.png"
-              alt="Remix"
-              className="hidden w-full dark:block"
-            />
-          </div>
-        </header>
-        <Button>Hello World</Button>
-      </div>
-    </div>
-  );
+export async function loader() {
+  return redirect("/new");
 }

app/routes/new.tsx

@@ -1,8 +1,7 @@
 import { redirect } from "@remix-run/node";
-import { db } from "~/db";
-import { documentsTable } from "~/db/schema";
+import { createDocument } from "~/repos/document";
 
 export async function loader() {
-  const document = await db.insert(documentsTable).values({}).returning();
-  return redirect(`/${document[0].id}`);
+  const document = await createDocument();
+  return redirect(`/${document.id}`);
 }

e2e/startpage.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test';
 
-test('hello world', async ({ page }) => {
+test('redirects to document', async ({ page }) => {
   await page.goto('/');
 
-  await expect(page.getByRole('heading', { name: 'Welcome to Remix' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Document' })).toBeVisible();
 });