feat: 🎸 adds user page

README.md

@@ -1,12 +1,15 @@
 # Remix + Cloudflare Workers + Prisma!
+
 - [Remix Docs](https://remix.run/docs)
 
 ## Live Demo
+
 - [Demo](https://remix-cloudflare-workers.marcomafessolli.workers.dev)
 
 ## Setup
+
 Check [Prisma and Cloudflare](https://www.prisma.io/docs/guides/deployment/deployment-guides/deploying-to-cloudflare-workers) documentation and follow setup steps.
-NOTE: You can safely ignore steps 1, 3 and 4 as they are not valid/relevant for Remix.   
+NOTE: You can safely ignore steps 1, 3 and 4 as they are not valid/relevant for Remix.
 
 ## Development
 

app/root.tsx

@@ -6,6 +6,7 @@ import {
   Scripts,
   ScrollRestoration,
 } from 'remix'
+
 import type { MetaFunction } from 'remix'
 
 export const meta: MetaFunction = () => {

app/routes/index.tsx

@@ -1,55 +1,42 @@
-import { LoaderFunction, useLoaderData } from 'remix'
+import { Link, useLoaderData } from 'remix'
+import type { LoaderFunction, MetaFunction } from 'remix'
+
 import { db } from '~/utils/prisma.server'
+import type { User } from '@prisma/client'
 
-type LoaderData = {
-  id: string
-  name: string
-  email: string
+export let meta: MetaFunction = () => {
+  return {
+    title: 'Remix + Prisma + Cloudflare Workers',
+    description: 'Remix + Prisma + Cloudflare Workers example project',
+  }
 }
 
 export let loader: LoaderFunction = async () => {
-  const users = await db.user.findMany()
+  const users = await db.user.findMany({
+    take: 5,
+    select: { id: true, name: true },
+  })
+
   return users
 }
 
 export default function Index() {
-  const users = useLoaderData<LoaderData[]>()
+  const users = useLoaderData<User[]>()
 
   return (
     <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
       <h1>Welcome to Remix</h1>
-      <ul>
-        <li>
-          <a
-            target='_blank'
-            href='https://remix.run/tutorials/blog'
-            rel='noreferrer'
-          >
-            15m Quickstart Blog Tutorial
-          </a>
-        </li>
-        <li>
-          <a
-            target='_blank'
-            href='https://remix.run/tutorials/jokes'
-            rel='noreferrer'
-          >
-            Deep Dive Jokes App Tutorial
-          </a>
-        </li>
-        <li>
-          <a target='_blank' href='https://remix.run/docs' rel='noreferrer'>
-            Remix Docs
-          </a>
-        </li>
-      </ul>
       <main>
-        {users.map((user) => (
-          <div key={user.id}>
-            <h2>{user.name}</h2>
-            <p>{user.email}</p>
-          </div>
-        ))}
+        <h2>Users</h2>
+        <ul>
+          {users.map((user) => (
+            <li key={user.id}>
+              <Link to={`/users/${user.id}`} prefetch='intent'>
+                {user.name}
+              </Link>
+            </li>
+          ))}
+        </ul>
       </main>
     </div>
   )

app/routes/users/$id.tsx

@@ -0,0 +1,53 @@
+import { Link, useLoaderData } from 'remix'
+import type { LoaderFunction, MetaFunction, HeadersFunction } from 'remix'
+
+import { db } from '~/utils/prisma.server'
+import type { User } from '@prisma/client'
+
+export let meta: MetaFunction = ({ data }: { data: User | undefined }) => {
+  if (!data) {
+    return {
+      title: 'User not found',
+      description: 'User not found',
+    }
+  }
+
+  return {
+    title: `User ${data.name}`,
+    description: `User ${data.name} details`,
+  }
+}
+
+export let loader: LoaderFunction = async ({ params }) => {
+  try {
+    const user = await db.user.findUnique({
+      where: {
+        id: params.id,
+      },
+    })
+
+    return user
+  } catch (error) {
+    throw new Response('Not Found', {
+      status: 404,
+    })
+  }
+}
+
+export let headers: HeadersFunction = () => {
+  return {
+    'Cache-Control': 'max-age=60',
+  }
+}
+
+export default function Index() {
+  const user = useLoaderData<User>()
+
+  return (
+    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
+      <h1>{user.name}</h1>
+      <p>{user.email}</p>
+      <Link to='/'>Back to users</Link>
+    </div>
+  )
+}

app/utils/prisma.server.ts

@@ -1,4 +1,4 @@
-import { PrismaClient } from '@prisma/client';
-const db = new PrismaClient();
+import { PrismaClient } from '@prisma/client'
+const db = new PrismaClient()
 
-export { db }
+export { db }

remix.config.js

@@ -2,12 +2,12 @@
  * @type {import('@remix-run/dev/config').AppConfig}
  */
 module.exports = {
-  appDirectory: "app",
-  assetsBuildDirectory: "public/build",
-  publicPath: "/build/",
-  serverModuleFormat: "esm",
-  serverPlatform: "neutral",
-  serverBuildDirectory: "build",
+  appDirectory: 'app',
+  assetsBuildDirectory: 'public/build',
+  publicPath: '/build/',
+  serverModuleFormat: 'esm',
+  serverPlatform: 'neutral',
+  serverBuildDirectory: 'build',
   devServerBroadcastDelay: 1000,
-  ignoredRouteFiles: [".*"]
-};
+  ignoredRouteFiles: ['.*'],
+}