Jobs List

The jobs application list page lists all the jobs that we’ve applied for. For this tutorial, it will also serve as the Dashboard.

The finished page will look like this:

Let’s start with the backend code and then make it look good.

But, first, we need a page and a route.

In the src > app > pages directory, create a new folder called applications. Inside, create a file called List.tsx.

Directorysrc/
- Directoryapp/
  - Directorypages/
    Directoryapplications/
    List.tsx
    Directoryauth/
    …
    Home.tsx

We can stub out a basic page, just to make sure it’s loading correctly.

1
const List = () => {
2
  return (
3
    <div>List</div>
4
  )
5
}
6

7
export { List }

Now, within our worker.tsx file, we can add a route for our new page.

import { List } from "./app/pages/applications/List";
...
prefix("/applications", [
  route("/", List),
])

We'll group all of our application routes (List, New, Detail, Update) under the /applications prefix.
When the user visits /applications, they'll see our List component.

Let’s test this out in the browser. Go to http://localhost:5173/applications and you should see our stubbed out page.

Since we’ve already set up authentication, we can also protect this route.

66
prefix("/applications", [
67
  route("/", [
68
    ({ ctx }) => {
69
      if (!ctx.user) {
70
        return new Response(null, {
71
          status: 302,
72
          headers: { Location: "/user/login" },
73
        });
74
      }
75
    }, List]),
76
])

This would get cumbersome (and annoying) if we have to do this for every.single.route we wanted to protect. Let’s abstract this code into a reusable function.

20
const isAuthenticated = ({ ctx }: { ctx: AppContext}) => {
21
  if (!ctx.user) {
22
    return new Response(null, {
23
      status: 302,
24
      headers: { Location: "/user/login" },
25
    });
26
  }
27
}

We're passing in the ctx that we get with each request. Then, we're checking to see if the user exists on the context object. If it doesn't, we're returning a response that redirects the user to the login page.

Then, we can update our /applications route to use isAuthenticated:

75
prefix("/applications", [
76
  route("/", [isAuthenticated, List]),
77
])

Now, we can also update our protected page route to use the isAuthenticated function, too:

61
route("/protected", [ isAuthenticated, Home ]),

Actually, let’s refactor this. The protected route was meant as an example. We don’t need /protected, but we do want to protect our home page: route("/", Home),. Let’s change /protected to /, and then delete route("/", Home),.

route("/", () => new Response("Hello, World!")),
route("/protected", [isAuthenticated, Home]),
route("/", [isAuthenticated, Home]),

I want to take this a step further, though, and show you another option. With the homepage route, you can also use the index function. This works very similar to the route function, but it already knows the path is /, so it only takes one argument: the response.

route("/", [isAuthenticated, Home]),
index([ isAuthenticated, Home ]),

Be sure to import index at the top of the file:

2
import { route, render, prefix, index } from "rwsdk/router";

Test it out. 👨‍🍳 Chef’s kiss! If you’re logged in, you should see the “List” text. If you’re not logged in, you’ll be redirected to the login page.

You can use multiple layers of middleware, by continuing to write functions and adding them to the array. They’ll run in the order they’re listed. For example:

1
prefix("/applications", [
2
  route("/", [isAuthenticated, isAdmin, List]),
3
])

Now, let’s get some data into the database.

We can do this one of two ways:

Option 1: Create a Seed File

Earlier, I mentioned that sometimes I’ll create multiple seed files with various purposes.. This is a perfect opportunity to create a separate file just for adding job applications to our database.

Inside the src/scripts directory, create a new file called applicationSeed.ts.

Let’s stub it out:

1
import { defineScript } from "rwsdk/worker";
2
import { db, setupDb } from "@/db";
3

4
export default defineScript(async ({ env }) => {
5
  setupDb(env);
6

7
  console.log("🌱 Finished seeding");
8
});

On line 4, we're setting up the Cloudflare Worker environment to run our script. By default, we get the env object.
On line 5, we're setting up our database.
On line 7, we're logging a message to the console to indicate that the script has finished running.

Inside our function, we can reach for a standard Prisma create function:

7
const createApplication = async () => {
8
  await db.application.create({
9
    data: {
10
      salaryMin: "100000",
11
      salaryMax: "120000",
12
      jobTitle: "Software Engineer",
13
      jobDescription: "Software Engineer",
14
      postingUrl: "https://redwoodjs.com",
15
      dateApplied: new Date(),
16
    }
17
  })
18
};
19

20
await createApplication();

On line 8, we're referencing the application table. Then, using the Prisma create function to add all the data in our database object. You'll notice that these values match the columns we defined in schema.prisma file.

You’ll probably see a few linting errors.

If you run the script now, you’ll hit a few errors because it’s also looking for related user, status, and company entries. For the user and status connections, we already have entries within the database we can reference.

Let’s start with the user connection. If you look at the user table, you’ll see that their ID is 0f9a097c-d7bc-4ab5-8b11-6942163df348. (Obviously, yours will be slightly different.) Copy that value.

Now, we can connect the entries, by setting user to an object with a connect key. Inside, we’ll specify the id of the user we want to connect to.

4
export default defineScript(async ({ env }) => {
5
  setupDb(env);
6

7
  const createApplication = async () => {
8
    await db.application.create({
9
      data: {
10
        user: {
11
          connect: {
12
            id: "0f9a097c-d7bc-4ab5-8b11-6942163df348",
13
          },
14
        },
15
        ...

We want to do something similar for the status. If we look at the ApplicationStatus table, you’ll notice that an id of 1 is associated with a New application.

We can connect the application record to the status record, by referencing an object with a connect key that contains an object with an id of 1.

4
export default defineScript(async ({ env }) => {
5
  setupDb(env);
6

7
  const createApplication = async () => {
8
    await db.application.create({
9
      data: {
10
        ...
11
        status: {
12
          connect: {
13
            id: 1,
14
          },
15
        },
16
        ...

The company field is a little different because we haven’t created any company records yet. However, we can create and connect a company record at the same time:

4
export default defineScript(async ({ env }) => {
5
  setupDb(env);
6

7
  const createApplication = async () => {
8
    await db.application.create({
9
      data: {
10
        ...
11
        company: {
12
          create: {
13
            name: "RedwoodSDK",
14
            contacts: {
15
              create: {
16
                firstName: "John",
17
                lastName: "Doe",
18
                email: "john.doe@example.com",
19
                role: "Hiring Manager",
20
              },
21
            },
22
          },
23
        },
24
        ...

This time instead of using an object with a connect key, we’ll use a create key inside. Then, we can list an object with all the company’s data.

Complete applicationSeed.ts file

1
import { defineScript } from "rwsdk/worker";
2
import { db, setupDb } from "@/db";
3

4
export default defineScript(async ({ env }) => {
5
  setupDb(env);
6

7
  const createApplication = async () => {
8
    await db.application.create({
9
      data: {
10
        salaryMin: "100000",
11
        salaryMax: "120000",
12
        jobTitle: "Software Engineer",
13
        jobDescription: "Software Engineer",
14
        postingUrl: "https://redwoodjs.com",
15
        dateApplied: new Date(),
16
        user: {
17
          connect: {
18
            id: "d7bfbc91-e869-4041-9980-88da4a749c99",
19
          },
20
        },
21
        status: {
22
          connect: {
23
            id: 1,
24
          },
25
        },
26
        company: {
27
          create: {
28
            name: "RedwoodSDK",
29
            contacts: {
30
              create: {
31
                firstName: "John",
32
                lastName: "Doe",
33
                email: "john.doe@example.com",
34
                role: "Hiring Manager",
35
              },
36
            },
37
          },
38
        },
39
      },
40
    });
41
  };
42

43
  createApplication();
44

45
  console.log("🌱 Finished seeding");
46
});

Prisma also has a createMany function where you can create multiple entries at the same time. In fact, we used it in the seed.ts file, when adding application statuses:

17
  await db.applicationStatus.createMany({
18
    data: [
19
      { id: 1, status: "New" },
20
      { id: 2, status: "Applied" },
21
      { id: 3, status: "Interview" },
22
      { id: 4, status: "Rejected" },
23
      { id: 5, status: "Offer" },
24
    ],
25
  });

However, there are a few limitations:

It does not return the created records, only the count of inserted rows, which can be problematic for certain use cases.
There’s limited support for complex relational constraints and upsert operations.

For reference: createMany on Prisma’s Documentation

To run the seed file, within the Terminal:

npm run worker:run ./src/scripts/applicationSeed.ts

pnpm run worker:run ./src/scripts/applicationSeed.ts

yarn run worker:run ./src/scripts/applicationSeed.ts

If this feels hard to remember, you can create a script in your package.json file. Inside the scripts block:

...
  "scripts": {
    ...
    "seed": "pnpm worker:run ./src/scripts/seed.ts",
    "seed:applications": "pnpm worker:run ./src/scripts/applicationSeed.ts",
    ...
  },

Now, you can run the seed file by saying:

npm run seed:applications

pnpm run seed:applications

yarn run seed:applications

😅 Much more straight forward!

When you’re creating custom seed files, this does take more time on the frontend to set up. But, it makes it much easier in the long run. Now, anytime you need a fresh set of data, you can run the seed file.

Option 2: Prisma Studio

Another option is to use Prisma Studio. This option is easier, but requires manual entry and can take more time in the long run. (We already set up Prisma Studio, here.)

npx prisma studio

Prisma Studio should now be available at http://localhost:5555. From here, you can create, read, update, and delete records.

Displaying the Job Application Data

Once you’ve added some data, let’s go back to our application and display the data on the page.

On the Applications list page, let’s import the db at the top of the file. Then, inside the List function, let’s use the findMany function to get all the applications:

1
import { db } from "src/db";
2

3
const List = async () => {
4
  const applications = await db.application.findMany();
5

6
  return (
7
    <div>
8
      <pre>{JSON.stringify(applications, null, 2)}</pre>
9
    </div>
10
  )
11
}
12

13
export { List }

Notice, we also made our List function an async function. We need to await the database call before rendering the page.

All the data from the database is returned as an array and saved in a variable called applications. Then, we can display all the data by using the JSON.stringify function. Wrapping our code in pre tags, it makes it easier to read.

Easy, right?! Since we’re using React Server Components, this code runs on the server. We’re able to make database calls directly from the page and don’t need to worry about creating API routes. 🎉

Also, if you right click on the page and select View Source, you’ll see that the data is being rendered directly on the page.

In comparison, if you were you were working with a traditional SPA (Single Page Application), all the data would be rendered on the client side with JavaScript and the View Source might look like this:

<div id="app"></div>

Now that we know the content from our database is getting on the page, let’s style it.

Styling the Job Applications List Page

Similar to the auth pages, let’s start by creating a layout that will wrap all of our interior pages.

Creating an Interior Page Layout

Inside our layouts folder, let’s create a new file called InteriorLayout.tsx.

Directorysrc/
- Directoryapp/
  - Directorylayouts/
    AuthLayout.tsx
    InteriorLayout.tsx

Inside, we need should use some of the same styles that we used within our AuthLayout.tsx file. As a quick reminder, let’s take a look at the AuthLayout.tsx file:

1
const AuthLayout = ({ children }: { children: React.ReactNode }) => {
2
  return (
3
    <div className="bg-bg min-h-screen min-w-screen p-12">
4
      <div className="grid grid-cols-2 min-h-[calc(100vh-96px)] rounded-xl border-2 border-[#D6D5C5]">
5
      ...

The wrapping div sets the background color, the minimum height and width of the page, and adds some padding.
The child div sets up the grid, applies rounded corners, and adds a border.

We don’t need to set up a grid, but we can abstract the styles and reuse them within our interior layout.

From the AuthLayout.tsx file, I’m going to copy the bg-bg min-h-screen min-w-screen p-12 styles and create a class inside our styles.css file, inside the @layer components block:

167
.page-wrapper {
168
  @apply bg-bg min-h-screen min-w-screen p-12;
169
}

Then, let’s do something similar with the child div from our AuthLayout.tsx. We don’t need the grid, but we can grab everything else: min-h-[calc(100vh-96px)] rounded-xl border-2 border-[#D6D5C5]

250
.page {
251
  @apply min-h-[calc(100vh-96px)] rounded-xl border-2 border-[#D6D5C5];
252
}

Let’s also add our route to our links.ts file for type hinting:

1
import { defineLinks } from "rwsdk/router";
2

3
export const link = defineLinks([
6 collapsed lines
4
  "/",
5
  "/user/login",
6
  "/user/signup",
7
  "/user/logout",
8
  "/legal/privacy",
9
  "/legal/terms",
10
  "/applications",
11
]);

Now, let’s update the class list within our AuthLayout.tsx file:

1
const AuthLayout = ({ children }: { children: React.ReactNode }) => {
2
  return (
3
    <div className="page-wrapper">
4
      <div className="grid grid-cols-2 page">
5
      ...

Now, let’s jump over to our InteriorLayout.tsx file and use these classes there as well:

1
const InteriorLayout = ({ children }: { children: React.ReactNode}) => {
2
  return (
3
    <div className="page-wrapper">
4
      <main className="page bg-white">
5
        {children}
6
      </main>
7
    </div>
8
  )
9
}
10

11
export { InteriorLayout }

You'll also notice I added a background of white with bg-white

To see how this looks, we need to add this to our List.tsx:

7
return (
8
  <InteriorLayout>
9
    <pre>{JSON.stringify(applications, null, 2)}</pre>
10
  </InteriorLayout>
11
)

It’s coming together! Across the top, let’s add the logo and navigation. We may need to reuse this component in the future, so let’s make it it’s own component. Inside the components folder, let’s create a new file called Header.tsx.

Directorysrc/
- Directoryapp/
  - Directorycomponents/
    Header.tsx

1
const Header = () => {
2
  return (
3
    <header>
4
      {/* left side */}
5
      <div></div>
6

7
      {/* right side */}
8
      <div></div>
9
    </header>
10
  )
11
}

Here are the basic building blocks we need.

I used a semantic HTML element header to wrap everything.
Then, we'll have a left and right side. On the left, we'll display the logo and the navigation. On the right, we'll display a link the user's settings, the logout button, and the user's avatar.

Inside the left div, let’s add the logo and “Apply Wize” text and wrap it in a link:

4
{/* left side */}
5
<div>
6
  <a href={link("/")}>
7
    <img src="/images/logo.svg" alt="Apply Wize" />
8
    <span>Apply Wize</span>
9
  </a>
10
</div>

Pretty straightforward. We’re using the same logo.svg that we used on the auth pages. It should already be in your public/images folder.
Then, we’re using the link helper to link to home page. At the top of your file, you’ll need to import the link helper:

1
import { link } from '@/app/shared/links'

Now, let’s add the navigation. For now this is only one link that goes to the dashboard page.

1
{/* left side */}
2
<div>
4 collapsed lines
3
  <a href={link("/")}>
4
    <img src="/images/logo.svg" alt="Apply Wize" />
5
    <span>Apply Wize</span>
6
  </a>
7
  <nav>
8
    <ul>
9
      <li><a href={link("/applications")}>Dashboard</a></li>
10
    </ul>
11
  </nav>
12
</div>

For the right side, we want another unordered list and the Avatar component:

19
{/* right side */}
20
<nav>
21
  <ul>
22
    <li><a href="#">Settings</a></li>
23
    <li><a href={link("/user/logout")}>Logout</a></li>
24
    <li>
25
      <Avatar>
26
        <AvatarFallback>R</AvatarFallback>
27
      </Avatar>
28
    </li>
29
  </ul>
30
</nav>

Notice, I replaced the right side div with a nav element, keeping things nice and semantic.
Inside, I’ve included links for the settings and logout pages.
For the Avatar component, you’ll need to import it at the top of your file. This is a shadcn/ui component, so it should already be part of your project.

import { Avatar, AvatarFallback } from '@/app/components/ui/avatar'

Normally, when you’re using the Avatar component, you’ll also want to use the AvatarImage component. This is where you define the Avatar image:

import { Avatar, AvatarFallback, AvatarImage } from '@/app/components/ui/avatar'

...

<li>
  <Avatar>
    <AvatarFallback>R</AvatarFallback>
    <AvatarImage src="./images/avatar.png" />
  </Avatar>
</li>

If you want to go this route, you can download the avatar.png placeholder image and hard code the image source. However, we’re not going to cover file uploads and storage in this tutorial. So, we’ll use the AvatarFallback component to display the first character of the username.

The shadcn/ui Avatar component uses client side interactivity. So, you’ll need to add the use client directive to the top of the Avatar.tsx file:

1
"use client"
2

3
import * as React from "react"
4
import * as AvatarPrimitive from "@radix-ui/react-avatar"
5

6
import { cn } from "@/app/lib/utils"
7

8
function Avatar({
9
  ...

If you forget to add the use client directive, you’ll see a “null reading useState” error in the browser:

Now that we have all the elements, let’s add some styling:

6
<header className="py-5 px-10 h-20 flex justify-between items-center border-b-1 border-border mb-12">

py-5 adds 20px of padding to the top and bottom.
px-10 adds 40px of padding to the left and right.
h-20 sets the height to 80px.
flex and justify-between are used to align the items inside the header, putting as much space between each of the elements as possible.
items-center centers the items vertically.
border-border and border-b-1 adds a border to the bottom of the header with a color of border (defined as a custom color in the @theme block of our styles.css file).
mb-12 adds 48px of margin to the bottom of the header.

We set the left and right padding to 40px with px-10. We’ll use this throughout our entire application. In order to maintain consistency, let’s define it as a custom utility. This will make it easy to reference (and change, if necessary).

136
--spacing-page-side: 40px;

Inside the @theme block, below our color definitions, we'll add a new variable called --spacing-page-side and set it to 40px. Now, we can use this variable with margin or padding: mx-page-side or px-page-side respectively.

Now, we can update our header element to use the new utility, replacing px-10 with px-page-side:

6
<header className="py-5 px-page-side h-20 flex justify-between items-center border-b-1 border-border mb-12">

On the left side div, we want the logo and the Dashboard link to align vertically:

7
{/* left side */}
8
<div className="flex items-center gap-8">
9 collapsed lines
9
  <a href={link("/")}>
10
    <img src="/images/logo.svg" alt="Apply Wize" />
11
    <span>Apply Wize</span>
12
  </a>
13
  <nav>
14
    <ul>
15
      <li><a href={link("/applications")}>Dashboard</a></li>
16
    </ul>
17
  </nav>
18
</div>

We're using flex and items-center to align the items vertically.
gap-8 adds 32px of space between the logo and the Dashboard link.

On the home page link, we want the logo and the “Apply Wize” text to align vertically too:

9
<a href={link("/")} className="flex items-center gap-3 font-display font-bold text-3xl">

flex, items-center, and gap-3 aligns the logo and text and puts 12px of space between them.
font-display and font-bold are used to style the text, applying the font Poppins and making the text bold.
text-3xl sets the font size to 30px

If you look at the logo, it overlaps with the bottom border of the header.

In order to achieve this, we also need to add some styles to the img tag:

10
<img src="/images/logo.svg" alt="Apply Wize" className="pt-5 -mb-3" />

pt-5 adds 20px of padding to the top.
-mb-3 removes 12px of margin from the bottom and will make the bottom of the header shift up.

For the right side ul, we need to add a few styles to position the links properly:

20
{/* right side */}
21
<nav>
22
  <ul className="flex items-center gap-7">
23
  ...

Similar to techniques we've used before, we're using flex and items-center to align the items vertically.
gap-7 adds 28px of space between each of the links.

To style our nav links, I want these styles to apply to both the left and the right side. So, let’s stick these inside the styles.css file, inside the @layer base block:

164
nav {
165
  @apply font-display font-medium text-sm;
166
}

That should be it! (for the header at least)

Finished Header.tsx component

1
import { link } from "@/app/shared/links";
2
import { Avatar, AvatarFallback } from "./ui/avatar";
3

4
const Header = () => {
5
  return (
6
    <header className="py-5 px-page-side h-20 flex justify-between items-center border-b-1 border-border mb-12">
7
      {/* left side */}
8
      <div className="flex items-center gap-8">
9
        <a
10
          href={link("/")}
11
          className="flex items-center gap-3 font-display font-bold text-3xl"
12
        >
13
          <img src="/images/logo.svg" alt="Apply Wize" className="pt-5 -mb-3" />
14
          <span>Apply Wize</span>
15
        </a>
16
        <nav>
17
          <ul>
18
            <li>
19
              <a href={link("/applications")}>Dashboard</a>
20
            </li>
21
          </ul>
22
        </nav>
23
      </div>
24

25
      {/* right side */}
26
      <nav>
27
        <ul className="flex items-center gap-7">
28
          <li>
29
            <a href="#">Settings</a>
30
          </li>
31
          <li>
32
            <a href={link("/user/logout")}>Logout</a>
33
          </li>
34
          <li>
35
            <Avatar>
36
              <AvatarFallback>R</AvatarFallback>
37
            </Avatar>
38
          </li>
39
        </ul>
40
      </nav>
41
    </header>
42
  );
43
};
44

45
export { Header };

Now, let’s stick our Header component into our InteriorLayout.tsx file:

1
import { Header } from "@/app/components/Header";
2

3
const InteriorLayout = ({ children }: { children: React.ReactNode}) => {
4
  return (
5
    <div className="page-wrapper">
6
      <main className="page bg-white">
7
        <Header />
8
        <div>{children}</div>
9
      </main>
10
    </div>
11
  )
12
}
13

14
export { InteriorLayout }

Check it out in the browser!

Moving on.

At the top of our file, let’s add a page heading and a button/link to add a new application:

import { Button } from "@/app/components/ui/button";
...
return (
  <InteriorLayout>
    <>
      <div>
        <h1>All Applications</h1>
        <div>
          <Button asChild><a href="#">New Application</a></Button>
        </div>
      </div>
      <pre>{JSON.stringify(applications, null, 2)}</pre>
    </>
  </InteriorLayout>
)

InteriorLayout can only have one react node, so we need to wrap everything with a React fragment (<>)
Above our application content, I added a wrapping div with a h1 heading for “All Applications”.
Then, I have another div that wraps a <Button> component. Inside, I have a link that points to the new application page. The Button component is coming from shadcn/ui. It should already be part of your project, but you’ll need to import it at the top of your file.
Since we’re not triggering an event, we’re linking to another page, we have an a tag. Eventually, this will reference the applications/new route, but since we haven’t set that up yet, I used a placeholder # instead.

If you take a look at this within the browser, right now, you’ll probably see an error:

The error is happening because the Slot component from Radix UI (shadcn/ui is built on top of Radix UI) is trying to use hooks in a server component context.

To fix this, open the src/app/components/ui/button.tsx file and add the use client directive to the top of the file:

1
"use client";

You may need to restart the server for this to take effect.

Now, let’s add some styling:

12
<div className="px-page-side flex justify-between items-center">
13
  <h1 className="page-title">All Applications</h1>

On the wrapping div we can use our custom px-page-side that adds 20px of padding to the left and right.
We can align the heading and the button withflex, justify-between, and items-center.
We can use our page-title class to style the heading.

Styling the Applications Table

Now, let’s style the list of applications.

Inside our components directory, let’s create a new file, called ApplicationsTable.tsx.

Directorysrc/
- Directoryapp/
  - Directorycomponents/
    ApplicationsTable.tsx

I’m going to stub out a basic component:

1
const ApplicationsTable = () => {
2
  return (
3
    <div>ApplicationsTable</div>
4
  )
5
}
6

7
export { ApplicationsTable }

Let’s go ahead and put this on our ApplicationsList.tsx page, so we can see the updates we’re making in the browser:

1
import { ApplicationsTable } from "@/app/components/ApplicationsTable";
2
...
3
return (
4
  <InteriorLayout>
5
    <>
6
      <div className="px-page-side flex justify-between items-center">
7
        <h1 className="page-title">All Applications</h1>
8
        <div>
9
          <Button asChild><a href="#">New Application</a></Button>
10
        </div>
11
      </div>
12
      <ApplicationsTable />
13
      <pre>{JSON.stringify(applications, null, 2)}</pre>
14
    </>
15
  </InteriorLayout>
16
)

We’ve already added the shadcn/ui Table component to our project, so let’s go back to our ApplicationsTable.tsx file and use it. Just to start, I’m going to copy the example code from the shadcn/ui documentation and then we can rework it for our needs:

1
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "./ui/table"
2

3
const ApplicationsTable = () => {
4
  return (
5
    <Table>
6
      <TableCaption>A list of your recent invoices.</TableCaption>
7
      <TableHeader>
8
        <TableRow>
9
          <TableHead className="w-[100px]">Invoice</TableHead>
10
          <TableHead>Status</TableHead>
11
          <TableHead>Method</TableHead>
12
          <TableHead className="text-right">Amount</TableHead>
13
        </TableRow>
14
      </TableHeader>
15
      <TableBody>
16
        <TableRow>
17
          <TableCell className="font-medium">INV001</TableCell>
18
          <TableCell>Paid</TableCell>
19
          <TableCell>Credit Card</TableCell>
20
          <TableCell className="text-right">$250.00</TableCell>
21
        </TableRow>
22
      </TableBody>
23
    </Table>
24
  )
25
}
26

27
export { ApplicationsTable }

It looks pretty good, but we need to make a few changes to make it work for our data.

First, we can get rid of the TableCaption:

<TableCaption>A list of your recent invoices.</TableCaption>

Then, I’m going to change the TableHeader to match our design within Figma:

6
<TableHeader>
7
  <TableRow>
8
    <TableHead className="w-[100px]">Status</TableHead>
9
    <TableHead>Date Applied</TableHead>
10
    <TableHead>Job Title</TableHead>
11
    <TableHead>Company</TableHead>
12
    <TableHead>Contact</TableHead>
13
    <TableHead>Salary Range</TableHead>
14
    <TableHead></TableHead>
15
  </TableRow>
16
</TableHeader>

We now have columns for status, date applied, job title, company, contact, and salary range.
You’ll notice that the last column is empty. <TableHead></TableHead> Within the table body, this will be our view icon, but this column doesn’t have a header.

For our TableBody, we need our application data. First, let’s set up our table row, statically. Then, we’ll make it dynamic.

17
<TableBody>
18
  <TableRow>
19
    <TableCell>New</TableCell>
20
    <TableCell>April 15, 2025</TableCell>
21
    <TableCell>Software Engineer</TableCell>
22
    <TableCell>RedwoodJS</TableCell>
23
    <TableCell>John Doe</TableCell>
24
    <TableCell>$150,000-$250,000</TableCell>
25
    <TableCell><a href="#">View</a></TableCell>
26
  </TableRow>
27
</TableBody>

Cool. Let’s make a few stylistic changes before we plug in the data.

Adding Badges to the Status Column

The status column should be a badge. We can reach for the Badge component from shadcn/ui.

import { Badge } from "./ui/badge"
...
<TableCell>
  <Badge>New</Badge>
</TableCell>

Let’s add styles based on the application status. We’ve already added some custom colors to our styles.css file, so let’s use those.

229
  --color-tag-applied: #b1c7c0;
230
  --color-tag-interview: #da9b7c;
231
  --color-tag-new: #db9a9f;
232
  --color-tag-rejected: #e4e3d4;
233
  --color-tag-offer: #aae198;

Inside of our badge.tsx component, there’s a section at the top of variants:

10
variants: {
11
  variant: {
8 collapsed lines
12
    default:
13
      "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
14
    secondary:
15
      "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
16
    destructive:
17
      "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
18
    outline:
19
      "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
20
    applied: "bg-tag-applied text-black",
21
    interview: "bg-tag-interview text-black",
22
    new: "bg-tag-new text-black",
23
    rejected: "bg-tag-rejected text-black",
24
    offer: "bg-tag-offer text-black",
25
  },
26
},

I added a custom variant for applied, interview, new, rejected, and offer.

While, we’re here, I’m also going to add a few more classes to the default styling:

7
const badgeVariants = cva(
8
  "font-bold inline-flex items-center justify-center rounded-md rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",

I added a font weight of font-bold
I changed the rounded corners to rounded-full

Let’s go back to our ApplicationsTable.tsx component and update our badge:

20
<TableCell><Badge variant="new">New</Badge></TableCell>

For the contact column, let’s include an avatar:

24
<TableCell>
25
  <Avatar>
26
    <AvatarFallback>J</AvatarFallback>
27
  </Avatar>
28
  John Doe
29
</TableCell>

This is the same avatar component we used in the Header component.

Be sure to import the Avatar and AvatarFallback components at the top of your file:

import { Avatar, AvatarFallback } from "./ui/avatar"

Let’s add a few styles to fix the positioning:

34
<TableCell className="flex items-center gap-2">
35
  <Avatar>
36
    <AvatarFallback>J</AvatarFallback>
37
  </Avatar>
38
  John Doe
39
</TableCell>

flex and items-center aligns the avatar and name vertically.
gap-2 adds 8px of padding between the avatar and the name.

Next, let’s replace the “View” text with an SVG icon.

Using an SVG Icon

We have several icons we want to use throughout our application. You can export all the SVGs directly from the Figma file, or you can download all of them within this project’s assets directory.

I’m going to create a new folder in the root of our our project called other and then a sub directory inside that called svg-icons and place all of the icons inside the svg-icons directory.

Directoryother/
- Directorysvg-icons/
  - …
Directorysrc/
- …

My favorite way to implement SVG icons is through an SVG sprite. Basically, this combines all our SVG files into a single sprite.svg file. We can control which icon is displayed by setting the id attribute on the use element.

You could set all of this up, manually, but I do this on every single project I build, so I’ve built an npm package to do all the heavy lifting. It’s called Lemon Lime SVGs.

Within the Terminal run:

npm i -D lemon-lime-svgs

pnpm add -D lemon-lime-svgs

yarn add -D lemon-lime-svgs

Once installed, run the setup command:

npx lemon-lime-svgs setup

This will ask a series of questions:

First, it will ask you what framework you’re using. At it’s core RedwoodSDK is React and Vite = 6
Next, it will ask you about file names and folder paths. It will make recommendations based on the framework you’re using. Most of the defaults, work:
- Input directory for SVG files: ./other/svg-icons — we’ve already set this directory up!
- Output directory for sprite: ./public/images/icons This is the same location as the background and logo.svg
- Directory for TypeScript types: ./types
- Sprite file name: sprite.svg
- Type definition file name: icons.d.ts
- Enable verbose logging: The default is set to “no”, but I usually like to turn this on and get a little extra feedback.
- Generate a README. The default is set to “yes”, but I usually like to turn this off. The README lives inside the same directory as your sprite and tells future developers that this file was created programmatically. It also provides a list of all the SVG icons available.
- The last prompt asks us if we want to add an Icon component to our project. Say y.
- Then, it will ask us where we want to save our component. We need to veer from the recommendation slightly: src/app/components/Icon.tsx
These settings are saved inside your package.json file, in its own section called, lemonLimeSvgs.
This script will also create a new script command inside your package.json file, called icons. Once we add the icons to our svg-icons folder, we can generate the sprite using this command: pnpm run icons.

Now, if you look inside your src/app/components directory, you’ll see a new Icon.tsx file.

1
interface Props {
2
  size?: number;
3
  id: string;
4
  className?: string;
5
}
6

7
const Icon = ({ className, size = 24, id }: Props) => {
8
  return (
9
    <svg width={size} height={size} className={className}>
10
      <use href={`/images/icons/sprite.svg#${id}`}></use>
11
    </svg>
12
  );
13
};
14

15
export default Icon;

This component takes a className, if you want to add additional styles to the component, a size (the default is set to 24px), and the id of the icon you want to display. The id matches the file name of the original icon SVG file.

Before we move on, I’m going to change this to a named export to be consistent with the other components we’ve created:

15
export { Icon }

Now, let’s take all our icon SVGs and dump them inside our other/svg-icons directory.

Inside the terminal, let’s generate our sprite:

npx icons

pnpm icons

yarn icons

Sweet! Now we can use our Icon component.

Inside our ApplicationsTable.tsx file:

 import { Icon } from "./Icon"
...
<TableCell>
  <a href="#">
    View
    <Icon id="view" />
  </a>
</TableCell>

Making our Table Dynamic

Awesome! Now, let’s make it dynamic. Inside our List.tsx page, let’s pass in all of our application data:

17
<ApplicationsTable applications={applications} />

We already have our applications saved inside a variable called applications, which makes passing in all our data, easy.

When you first set this up, you’ll probably see an error

Our component isn’t expecting the applications data we’re passing it. Inside our ApplicationsTable component:

1
import { Application } from "@prisma/client"
2
...
3
const ApplicationsTable = ({ applications }: { applications: Application[] }) => {

We’ll set it up to receive the applications data as a prop.
Then, we need to set the type. Fortunate for us, Prisma generates these for us. So, we can use the Application type and since there’s an array of them, we’ll use square brackets [].
At the top of our, file we can import the Application type from @prisma/client.

Now, let’s go down to our TableBody. First we want to loop over all the applications within our applications array and display a row in the table for each:

20
<TableBody>
21
  {applications.map(application => (
22
  <TableRow>
23
    <TableCell><Badge>New</Badge></TableCell>
24
    <TableCell>April 15, 2025</TableCell>
25
    <TableCell>Software Engineer</TableCell>
26
    <TableCell>RedwoodJS</TableCell>
27
    <TableCell className="flex items-center gap-2">
28
      <Avatar>
29
        <AvatarFallback>J</AvatarFallback>
30
      </Avatar>
31
      John Doe
32
    </TableCell>
33
    <TableCell>$150,000-$250,000</TableCell>
34
    <TableCell>
35
      <a href="#">
36
        <Icon id="view" />
37
      </a>
38
    </TableCell>
39
    </TableRow>
40
  ))}
41
</TableBody>

We also need to add a key to our TableRow component. This helps React identify which items have changed, been added, or been removed.

22
<TableRow key={application.id}>

Now, we can start replacing the static content with dynamic content.

For our application status and our Badge component, we can swap out the new text with {application.status.status}.

22
<TableCell>
23
    <Badge variant={application.status.status}>
24
      {application.status.status}
25
    </Badge>
26
</TableCell>

I’m starting to get an error within my code editor.

Basically, it’s saying that it’s not aware of the status relationship.

Using Relationships

Let’s go back to our List.tsx file. On line 6, we’re getting all the applications from our table:

6
const applications = await db.application.findMany();

But, we also need it to include the applicationStatus, company, and contact relationships. Prisma has an easy want to do this using include:

6
const applications = await db.application.findMany({
7
  include: {
8
    status: true,
9
    company: {
10
      include: {
11
        contacts: true
12
      }
13
    }
14
  }
15
});

On line 8 we're telling it to include the status relationship.
On line 9 we're telling it to include the company relationship.
The contact relationship is a little different because it's through the company relationship, but we can continue to drill down, including the contacts relationship on line 11.

You might need to temporarily comment out the Badge component inside the ApplicationsTable.tsx file, to avoid errors, but if you take a look at the result within the browser, you’ll see the JSON data change shape:

Now, if we go back to our ApplicationsTable.tsx file, the TypeScript error is still there. We’re getting the status information now, but we need to make sure the type is updated to include it.

We’re already getting the Application type from @prisma/client. We need a way to also include the ApplicationStatus, Company, and Contact types.

We could use the & to create a new type that has status and company. Contacts is an array, nested inside the company object.

type ApplicationWithRelations = (Application & {
  status: ApplicationStatus;
  company: Company & {
    contacts: Contact[];
  };
})[];

However, Prisma has a special way to do this.

import { Prisma } from "@prisma/client"
...
export type ApplicationWithRelations = Prisma.ApplicationGetPayload<{
  include: {
    status: true,
    company: {
      include: {
        contacts: true
      }
    }
  }
}>

With export type ApplicationWithRelations we're creating a new type called ApplicationWithRelations, but you could name this whatever you want.
We're exporting the type so that we can use it in other files. I like to to put this as close to my Prisma query as possible since the type is directly related to the data I'm getting back. Then, we can use this type in other components, like the ApplicationsTable.tsx file.
Prisma is a utility object that we're using to create a new type. This is provided by the Prisma client.
ApplicationGetPayload is a method that takes an object as an argument. The object uses the include property, to include the data relationships.
- Each model has it's own GetPayload method. Since we're referencing the Application model, we're using ApplicationGetPayload.

At first glance, this looks like more lines of code, but it’s a lot easier to write. When trying to write it by hand with unions (&), you have to determine what the resulting shape of data is. In the second method, Prisma determines the shape of data for us and the include object looks similar our original Prisma call.

For reference, this was the original Prisma query. You can see that the include object matches the ApplicationGetPayload object:

const applications = await db.application.findMany({
  include: {
    status: true,
    company: {
      include: {
        contacts: true,
      },
    },
  },
});

Awesome. Let’s add our ApplicationWithRelations at the top of our List.tsx file. This goes outside the component definition:

import { Prisma } from "@prisma/client"
...
export type ApplicationWithRelations = Prisma.ApplicationGetPayload<{
  include: {
    status: true,
    company: {
      include: {
        contacts: true
      }
    }
  }
}>

const List = async () => {
  ...

Now, we can use it in our ApplicationsTable.tsx file:

14
import { ApplicationWithRelations } from "../pages/applications/List";
15

16
const ApplicationsTable = ({
17
  applications,
18
}: {
19
  applications: ApplicationWithRelations[];
20
}) => {

If you look at the TableCell with the status again, you’re probably still seeing an error 🤯

31
<TableCell>
32
    <Badge variant={application.applicationStatus.status}>
33
      {application.applicationStatus.status}
34
    </Badge>
35
</TableCell>

Inside our badge component, when we defined our badgeVariants for styles, it used our variant options to create a type definition. badgeVariants is exported from the badge.tsx component, making it easy to reuse and reference within our ApplicationsTable.tsx:

32
<Badge variant={application.applicationStatus?.status.toLowerCase() as VariantProps<typeof badgeVariants>['variant']}>
33
  {application.applicationStatus?.status}
34
</Badge>

On the application.applicationStatus?.status, we can append .toLowerCase() to make sure the status is formatted correctly and always lowercase.
typeof badgeVariants - Gets the type of our badgeVariants configuration object, created with cva(). This includes all our variant definitions.
VariantProps<...> - This is a utility type from class-variance-authority that extracts the prop types. It creates a type that includes all possible variants as properties.
['variant'] - This accesses the variant property type only from those props. In our case, it resolves to the union type: "default" | "secondary" | "destructive" | "outline" | "applied" | "interview" | "new" | "rejected" | "offer" | null | undefined

At the top of the ApplicationsTable.tsx file, be sure to update your imports:

import { Badge, badgeVariants } from "./ui/badge";
import { VariantProps } from "class-variance-authority";

Sweet! Now, all of our TypeScript errors should be taken care of.

Let’s keep making our data dynamic.

<TableCell>
  April 15, 2025
  {application.dateApplied?.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })}
</TableCell>

For the date, we can use the application.dateApplied property. Then, we can format the date using the toLocaleDateString JavaScript method. For more options, see MDN's Date.prototype.toLocaleDateString documentation.

For the job title:

<TableCell>
  Software Engineer
  {application.jobTitle}
</TableCell>

For the company name:

<TableCell>
  RedwoodJS
  {application.company.name}
</TableCell>

For the contact name, we’re just going to reference the first name within our contacts array.

<TableCell className="flex items-center gap-2">
  <Avatar>
    <AvatarFallback>J</AvatarFallback>
    <AvatarFallback>{application.company.contacts[0].firstName.charAt(0).toUpperCase()}</AvatarFallback>
  </Avatar>
  John Doe
  {application.company.contacts[0].firstName} {application.company.contacts[0].lastName}
</TableCell>

For the salary range:

<TableCell>
  $150,000-$250,000
  {application.salaryMin}-{application.salaryMax}
</TableCell>

For the view link:

<TableCell>
  <a href="#">
  <a href={link("/applications/:id", { id: application.id })}>
    <Icon id="view" />
  </a>
</TableCell>

Be sure to import link at the top of the file:

1
import { link } from "../shared/links";

You’ll probably see another error.

We need to do a little more setup to make this work.

In our worker.tsx file, let’s add our route:

64
prefix("/applications", [
65
  route("/", [isAuthenticated, List]),
66
  route("/:id", [isAuthenticated, () => <h1>Application</h1>]),
67
]),

We can nest our route definition within the applications prefix.
The : designates that our route is dynamic and contains the id in the URL.
We included isAuthenticated to ensure that the route is protected.
Temporarily, we'll display an <h1> Application heading.

Now, let’s jump over to shared/links.ts file and add /applications/:id to our array:

3
export const link = defineLinks([
7 collapsed lines
4
  "/",
5
  "/user/login",
6
  "/user/signup",
7
  "/user/logout",
8
  "/legal/privacy",
9
  "/legal/terms",
10
  "/applications",
11
  "/applications/:id",
12
]);

Perfect. Everything should check out. Try clicking on the view icon in the browser. You should be redirected to a page with an “Application” heading.

Final ApplicationsTable.tsx file

1
import { Icon } from "./Icon";
2
import { Avatar, AvatarFallback } from "./ui/avatar";
3
import { Badge, badgeVariants } from "./ui/badge";
4
import {
5
  Table,
6
  TableBody,
7
  TableCell,
8
  TableHead,
9
  TableHeader,
10
  TableRow,
11
} from "./ui/table";
12
import { ApplicationWithRelations } from "../pages/applications/List";
13
import { VariantProps } from "class-variance-authority";
14
import { link } from "../shared/links";
15

16
const ApplicationsTable = ({
17
  applications,
18
}: {
19
  applications: ApplicationWithRelations[];
20
}) => {
21
  return (
22
    <Table>
23
      <TableHeader>
24
        <TableRow>
25
          <TableHead className="w-[100px]">Status</TableHead>
26
          <TableHead>Date Applied</TableHead>
27
          <TableHead>Job Title</TableHead>
28
          <TableHead>Company</TableHead>
29
          <TableCell className="flex items-center gap-2">
30
            <Avatar>
31
              <AvatarFallback>J</AvatarFallback>
32
            </Avatar>
33
            John Doe
34
          </TableCell>
35
          <TableHead>Salary Range</TableHead>
36
          <TableHead></TableHead>
37
        </TableRow>
38
      </TableHeader>
39
      <TableBody>
40
        {applications.map((application) => (
41
          <TableRow>
42
            <TableCell>
43
              <Badge
44
                variant={
45
                  application.status.status.toLowerCase() as VariantProps<
46
                    typeof badgeVariants
47
                  >["variant"]
48
                }
49
              >
50
                {application.status.status}
51
              </Badge>
52
            </TableCell>
53
            <TableCell>
54
              {application.dateApplied?.toLocaleDateString("en-US", {
55
                year: "numeric",
56
                month: "long",
57
                day: "numeric",
58
              })}
59
            </TableCell>
60
            <TableCell>{application.jobTitle}</TableCell>
61
            <TableCell>{application.company.name}</TableCell>
62
            <TableCell className="flex items-center gap-2">
63
              <Avatar>
64
                <AvatarFallback>
65
                  {application.company.contacts[0].firstName
66
                    .charAt(0)
67
                    .toUpperCase()}
68
                </AvatarFallback>
69
              </Avatar>
70
              {application.salaryMin}-{application.salaryMax}
71
            </TableCell>
72
            <TableCell>$150,000-$250,000</TableCell>
73
            <TableCell>
74
              <a href={link("/applications/:id", { id: application.id })}>
75
                <Icon id="view" />
76
              </a>
77
            </TableCell>
78
          </TableRow>
79
        ))}
80
      </TableBody>
81
    </Table>
82
  );
83
};
84

85
export { ApplicationsTable };

Finalizing the List Page

Now, let’s go back to our List.tsx and tidy up a few things.

On line 42, we can remove our JSON.stringify function:

<pre>{JSON.stringify(applications, null, 2)}</pre>

Below our table, let’s add a couple of buttons. An “Archive” button on the left and another “New Application” button on the right:

42
<div className="flex justify-between items-center">
43
  <Button asChild variant="secondary">
44
    <a href="#">
45
      <Icon id="archive" />
46
      Archive
47
    </a>
48
  </Button>
49
  <Button asChild>
50
    <a href="#">
51
      <Icon id="plus" />
52
      New Application
53
    </a>
54
  </Button>
55
</div>

The classes flex justify-between items-center on the wrapping div position our buttons.
On the first button, I've added a variant="secondary" which will make the button a light beige.
I also included the archive icon next to the archive text: <Icon id="archive" />
On the "New Application" button, I added the plus icon: <Icon id="plus" />

You’ll also need to import the Icon component at the top of the file:

import { Icon } from "@/app/components/Icon";

If you look at this within the browser, we’re getting closer:

The Archive button should link to a filtered view of all applications that have been archived. Let’s update our link:

45
<a href={`${link("/applications")}?status=archived`}>
46
  <Icon id="archive" />
47
  Archive
48
</a>

Be sure to import the link object at the top of the file:

import { link } from "@/app/shared/links";

This is really a filtered view of our existing /applications page, so we can use the existing /applications link. Then, we’re attaching the query parameter: ?status=archived. We don’t need to do anything extra to make this link work, but we do need to adjust our List page to account for the status query parameter. We’ll come back to this!

For the New Application button, let’s update the href:

31
<Button asChild>
32
  <a href={link("/applications/new")}>
33
    <Icon id="plus" />
34
    New Application
35
  </a>
36
</Button>

/applications/new doesn’t exist yet. We need to set up this page. In our worker.tsx file, let’s add a new route:

64
prefix("/applications", [
65
  route("/", [isAuthenticated, List]),
66
  route("/new", [isAuthenticated, () => <h1>New Application</h1>]),
67
  route("/:id", [isAuthenticated, () => <h1>Application</h1>]),
68
]),

We can nest our route definition within the applications prefix.
We included isAuthenticated to ensure that the route is protected.
Temporarily, we'll display an <h1> New Application heading.

Now, let’s add our link to the links.ts file:

3
export const link = defineLinks([
7 collapsed lines
4
  "/",
5
  "/user/login",
6
  "/user/signup",
7
  "/user/logout",
8
  "/legal/privacy",
9
  "/legal/terms",
10
  "/applications",
11
  "/applications/new",
12
  "/applications/:id",
13
]);

If we test this out within the browser, clicking on the “New Application” button at the bottom, you should see our temporary “New Application” page:

Let’s make the “New Application” button at the top, match the button at the bottom.

19
return (
20
  <InteriorLayout>
21
    <>
22
      <div className="px-page-side flex justify-between items-center">
23
        <h1 className="page-title">All Applications</h1>
24
        <div>
25
          <Button asChild>
26
            <a href={link("/applications/new")}>
27
              <Icon id="plus" />
28
              New Application
29
            </a>
30
          </Button>
31
        </div>
9 collapsed lines
32
      </div>
33
      <ApplicationsTable applications={applications} />
34
      <div className="flex justify-between items-center">
35
        <Button asChild variant="secondary">
36
          <a href={`${link("/applications")}?status=archived`}>
37
          <Icon id="archive" />
38
            Archive
39
          </a>
40
        </Button>
41
        <Button asChild>
42
          <a href={link("/applications/new")}>
43
            <Icon id="plus" />
44
            New Application
45
          </a>
46
        </Button>
47
      </div>
48
    </>
49
  </InteriorLayout>
50
)

Now, let’s adjust the spacing around our table. On line 35, we’re using a class of px-page-side to add some padding to the left and right side.

32
return (
33
  <InteriorLayout>
34
    <>
35
      <div className="px-page-side flex justify-between items-center">

Let’s remove this from the div and add it to a wrapping div.

<InteriorLayout>
  <div className="px-page-side">
  <>
    <div className="flex justify-between items-center">
    ...
    </div>
  </div>
 </>
</InteriorLayout>

You'll notice, we converted the React Fragment <> to a div and added a class of px-page-side to it. Then, we removed px-page-side from nested div that contains our page title.

Before we preview this in the browser, let’s adjust the vertical spacing.

33
<InteriorLayout>
34
  <div className="px-page-side">
35
    <div className="flex justify-between items-center mb-5">
10 collapsed lines
36
      <h1 className="page-title">All Applications</h1>
37
      <div>
38
        <Button asChild>
39
          <a href={link("/applications/new")}>
40
            <Icon id="plus" />
41
            New Application
42
          </a>
43
        </Button>
44
      </div>
45
    </div>
46
    <div className="mb-8"><ApplicationsTable applications={applications} /></div>
47
    <div className="flex justify-between items-center mb-10">

On line 22, I added mb-5 for 20px of margin on the bottom.
On line 33, I added mb-8 for 32px of margin on the bottom.
On line 44, I added mb-10 for 40px of margin on the bottom.

Now, let’s preview this in the browser:

Before we call this done, make sure that our Archive filter is working.

Using Query Params to Filter Applications

On every page we get an object that contains ctx, request, and headers. In our case, the request contains the query parameters that we’re looking for.

On List.tsx, when we define our List function, let’s accept request as a prop:

20
const List = async ({ request }: { request: Request }) => {

You'll notice when I type the request, I'm using a standard Request type.

Now, at the top of our function, we can get the status query parameter using the URLSearchParams method from the standard WebAPI:

21
const url = new URL(request.url);
22
const status = url.searchParams.get("status");
23

24
console.log({ status });

If you run this in the browser, you should see { status: 'archived' } displayed.

Now, that we’ve checked that our query parameter is working, we can remove our console.log statement and adjust our Prisma findMany query.

After the include object, let’s add a where object:

24
const applications = await db.application.findMany({
25
  include: {
26
    applicationStatus: true,
27
    company: {
28
      include: {
29
        contacts: true
30
      }
31
    }
32
  },
33
  where: {
34
    archived: status === "archived" ? true : false
35
  }
36
});

The where clause filters the results of our query based on whether archived is true or false. We can se it to true or false depending on whether status is set to archived or not.

You can test this in the browser, by clicking on the Archive button. You should see the URL change to include /applications?status=archived and the entry applications table should be empty.

Let’s make this better by adding an empty state:

52
<div className="mb-8">
53
  {applications.length > 0 ? (
54
    <ApplicationsTable applications={applications} />
55
  ) : (
56
    <div className="text-center text-sm text-muted-foreground">
57
      No applications found
58
    </div>
59
  )}
60
</div>

On line 41, we're checking if the applications array has more than one item. If it does, display the ApplicationsTable.
If it doesn't, display a message that says "No applications were found."
I also added a few styles to our message.
- Centered with text-center
- Reduced the text size with text-sm
- Changed the text color to text-muted-foreground

Once we click on the “Archive” button, it’s easy to feel “stuck”.

Let’s change the “Archive” button so that it toggles based on the query parameter.

61
<Button asChild variant="secondary">
62
  {status === "archived" ? (
63
    <a href={`${link("/applications")}`}>
64
      <Icon id="archive" />
65
      Active
66
    </a>
67
  ) : (
68
    <a href={`${link("/applications")}?status=archived`}>
69
      <Icon id="archive" />
70
      Archive
71
    </a>
72
  )}
73
</Button>

If the status is equal to archived then the link should go to /applications and the button label should be Active.
Otherwise, display the Archive button, with the query parameter ?status=archived

Test it out in the browser:

It looks and works great!

Remember, you can use Prisma Studio to add more seed data, if you want to test various states.