Jobs Details

Can you believe it?! This is the last piece we need before deploying our application.

We’ve already done the bulk of our set up, so this part should be easy…er? 🙃

First, let’s take a look at what we’re building in Figma.

Pretty simple, right?

Styling the Jobs Details Page

Let’s start by creating a new file in our src/app/pages/applications folder called Details.tsx.

Directorysrc
- Directoryapp
  - Directorypages
    Directoryapplications
    actions.ts
    Details.tsx
    List.tsx
    New.tsx

We can start with the basics:

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

7
export { Details }

Now, let’s jump over to our worker.tsx file and update the route for our details page.

 import { Details } from "./app/pages/applications/Details";

render(Document, [
4 collapsed lines
  index([ isAuthenticated, Home ]),
  prefix("/user", userRoutes),
  route("/legal/privacy", () => <h1>Privacy Policy</h1>),
  route("/legal/terms", () => <h1>Terms of Service</h1>),
  prefix("/applications", [
    route("/", [isAuthenticated, List]),
    route("/new", [isAuthenticated, New]),
    route("/:id", [isAuthenticated, () => <h1>Application</h1>]),
    route("/:id", [isAuthenticated, () => Details]),
  ]),
]),

We replaced our placeholder h1 with our Details component and imported it at the top of our file.

If run go to our Applications list view and click on the eye icon, next to any application, it should take us to the detail page:

Right now, it’s pretty sparse:

Let’s go back to our Details.tsx file and add our InteriorLayout.

1
return (
2
  <InteriorLayout>
3
    <p>Details</p>
4
  </InteriorLayout>
5
)

Be sure to import InteriorLayout at the top of our file:

1
import { InteriorLayout } from "@/app/layouts/InteriorLayout"

Already, that makes a huge difference:

Let’s start at the top of our page and work our way down. Up first, we’ll add our breadcrumbs. We already used the shadcn/ui Breadcrumb component on the New page. Let’s take a second and look at the implementation there:

26
<div className="mb-12 -mt-7 pl-[120px]">
27
  <Breadcrumb>
28
    <BreadcrumbList>
29
      <BreadcrumbItem>
30
        <BreadcrumbLink href="/applications">Applications</BreadcrumbLink>
31
      </BreadcrumbItem>
32
      <BreadcrumbSeparator />
33
      <BreadcrumbItem>
34
        <BreadcrumbPage>Add an Application</BreadcrumbPage>
35
      </BreadcrumbItem>
36
    </BreadcrumbList>
37
  </Breadcrumb>
38
</div>

It’s pretty standard, but we have a wrapping div with styles applied for placement. Let’s abstract that out into a CSS class so that we can use it on both pages. In our styles.css file, at the bottom of the @layer components section:

236
.breadcrumbs {
237
  @apply mb-12 -mt-7 pl-[120px];
238
}

Now, let’s update the styles on the New page:

19
<div className="breadcrumbs">
20
  <Breadcrumb>
21
    <BreadcrumbList>
22
      <BreadcrumbItem>
23
        <BreadcrumbLink href="/applications">Applications</BreadcrumbLink>
24
      </BreadcrumbItem>
25
      <BreadcrumbSeparator />
26
      <BreadcrumbItem>
27
        <BreadcrumbPage>Add an Application</BreadcrumbPage>
28
      </BreadcrumbItem>
29
    </BreadcrumbList>
30
  </Breadcrumb>
31
</div>

Then, let’s copy this code and past it into our Details.tsx file:

5
return (
6
  <InteriorLayout>
7
    <div className="breadcrumbs">
8
      <Breadcrumb>
9
        <BreadcrumbList>
10
          <BreadcrumbItem>
11
            <BreadcrumbLink href="/applications">Applications</BreadcrumbLink>
12
          </BreadcrumbItem>
13
          <BreadcrumbSeparator />
14
          <BreadcrumbItem>
15
            <BreadcrumbPage>Add an Application</BreadcrumbPage>
16
          </BreadcrumbItem>
17
        </BreadcrumbList>
18
      </Breadcrumb>
19
    </div>
20
    <p>Details</p>
21
  </InteriorLayout>
22
)

Make sure you import the Breadcrumb component at the top of your file:

1
import {
2
  Breadcrumb,
3
  BreadcrumbItem,
4
  BreadcrumbLink,
5
  BreadcrumbList,
6
  BreadcrumbPage,
7
  BreadcrumbSeparator,
8
} from "@/app/components/ui/breadcrumb";

We need to update the breadcrumb links. The first link is for our Dashboard:

17
<BreadcrumbItem>
18
  <BreadcrumbLink href="/applications">Dashboard</BreadcrumbLink>
19
</BreadcrumbItem>

The second page should contain the job title and company name.

We need to get that data dynamically, based on the URL, where the application id is being passed in as a parameter.

Getting the Content Based on the URL

The URL for your page should look something like this: http://localhost:5173/applications/cc70d03f-6bf0-4a07-a46c-7f940be774b6

Everything after applications/ is the application id.

We can get all the details we need based on the RequestInfo object that gets passed into all pages by default.

3
import { RequestInfo } from "rwsdk/worker"
4

5
const Details = async ({ params }: RequestInfo) => {

Let’s console.log the params, right before our return statement:

6
console.log({ params })

Since this code is running on the server, this will get logged to the terminal, not the browser.

Perfect! We can get the application ID by referencing params.id.

Now, we can remove our console.log({ params }) and make our database call:

11
import { db } from "@/db"
12

13
const Details = async ({ params }: RequestInfo) => {
14
  const application = await db.application.findUnique({
15
    where: {
16
      id: params.id,
17
    },
18
  })
19

20
  console.log({ application })

We're using the Prisma API to find the unique application by based on its ID. Then, we're logging the result to the terminal.
Since we're awaiting the database call, we need to make this function async.

If you check the terminal again, you should see the application data:

Now, that we know we’re getting the right application back, let’s update our <BreadcrumbPage> to display the job title and company name.

<BreadcrumbPage>Add an Application</BreadcrumbPage>
<BreadcrumbPage>{application?.jobTitle} at {application?.company?.name}</BreadcrumbPage>

We’re using the Elvis operator (?.) or optional chaining to ensure that we don’t throw an error if the application object is null.

When you preview this in the browser, you might be surprised to see that the company information is not showing up.

We need to include the company relationship in our database call:.

7
const application = await db.application.findUnique({
8
  where: {
9
    id: params.id,
10
  },
11
  include: {
12
    company: true,
13
  },
14
})

and actually, while we’re here, let’s go ahead and include our status and contact relationships as well. Since the contact relationship is through our company object, we need to go another level deeper:

1
const application = await db.application.findUnique({
2
  where: {
3
    id: params.id,
4
  },
5
  include: {
6
    status: true,
7
    company: {
8
      include: {
9
        contacts: true,
10
      },
11
    },
12
  },
13
})

We can get rid of our console.log statement and move down the page.

Next, we have a page header:

Below our bread crumbs, let’s start with our JSX and then we can come back and style it.

50
<header>
51
  <div>
52
    <h1>{application?.jobTitle}</h1>
53
    <Badge
54
      variant={
55
        application?.status?.status.toLowerCase() as VariantProps<
56
          typeof badgeVariants
57
        >["variant"]
58
      }
59
    >
60
      {application?.status?.status}
61
    </Badge>
62
    <p>at {application?.company?.name}</p>
63
  </div>
64
  <div>
65
    <Button asChild>
66
      <a href={application?.postingUrl as string} target="_blank">
67
        View Application <Icon id="external-link" size={16} />
68
      </a>
69
    </Button>
70
  </div>
71
</header>

We're using a semantic header HTML tag.
Inside, we have 2 divs to separate the content that will appear on the left and right side.
On the left side
- We have an h1 for our job title.
- A Badge that contains our application status. Similar to what we did on the ApplicationTable, we're using the shadcn/ui Badge component. The "tricky" part is the button variant types. We can use the application status to get the name of the type: application?.status?.status.toLowerCase() but we have to cast it to the correct type: VariantProps<typeof badgeVariants>['variant']. If you'll remember VariantProps is a utility that we're getting from the cva library that shadcn/ui uses under the hood.
- A p tag that contains the company name.
On the right side, we have a Button that contains a link to the application posting URL. Inside, we have a label View Application and an Icon component with an id of external-link and a size of 16px. The icon will help communicate that this is an external link.
On our Button component, we have an asChild prop that allows our Button to render as an a tag.

At the top of our file, we need to add a few imports:

import { Badge, badgeVariants } from "@/app/components/ui/badge"
import { Button } from "@/app/components/ui/button"
import { VariantProps } from "class-variance-authority"
import { Icon } from "@/app/components/Icon";

Now, let’s do another pass, this time adding our styles.

49
<header className="flex justify-between border-b-1 border-border pb-6 mb-12">

We can position the items on the left and right side with flex justify-between.
Then, we can add a 1px border to the bottom with border-b-1 and give it a light gray color with border-border.
We also add some padding (24px on the bottom with pb-6 and 48px of margin on the bottom with mb-12).

I want the heading and the badge to appear next to each other, so I’ll wrap those elements with an additional div.

50
<div>
51
  <div className="flex items-center gap-5 mb-1">
52
    <h1 className="page-title">{application?.jobTitle}</h1>
53
    <Badge
54
      variant={
55
        application?.status?.status.toLowerCase() as VariantProps<
56
          typeof badgeVariants
57
        >["variant"]
58
      }
59
    >
60
      {application?.status?.status}
61
    </Badge>
62
  </div>
63
  <p>
64
    <span className="text-zinc-500">at</span>{" "}
65
    {application?.company?.name}
66
  </p>
67
</div>

On line 51, I'll use flex items-center gap-5 to center the heading and badge vertically and add 20px of space between them. Then, I'll add some 8px of space to the bottom with mb-1.
On line 52 we can apply the page-title class to the h1.
Then, let's wrap "at" with a span and give it a lighter gray color with text-zinc-500.

For the button on the right, we need to add some styles to get the icon and label to align vertically:

69
<Button>
70
  <a
71
    href={application?.postingUrl as string}
72
    target="_blank"
73
    className="flex items-center gap-2"
74
  >
75
    View Application <Icon id="external-link" size={16} />
76
  </a>
77
</Button>

flex and items-center will center the icon and text vertically.
gap-2 will add 8px of space between the icon and text.

I want to add some space to the left and right side. But, this will also need to be applied to the content below our page heading. So, let’s wrap, both, our page header and the placeholder <p>Details</p> with a div and add our px-page-side class.

49
<div className="px-page-side">
50
  <header className="flex justify-between border-b-1 border-border pb-6 mb-12">
10 collapsed lines
51
    <div>
52
      <div className="flex items-center gap-5 mb-1">
53
        <h1 className="page-title">{application?.jobTitle}</h1>
54
        <Badge variant={application?.status?.status.toLowerCase() as VariantProps<typeof badgeVariants>['variant']}>{application?.status?.status}</Badge>
55
      </div>
56
      <p><span className="text-zinc-500">at</span> {application?.company?.name}</p>
57
    </div>
58
    <div>
59
      <Button><a href={application?.postingUrl as string} target="_blank">View Application</a></Button>
60
    </div>
61
  </header>
62

63
  <p>Details</p>
64
</div>

Build the Main Content Area

Our main content area is a two column grid. This spacing should match the two column grid we set up on our new Application page. We can pull up our ApplicationForm component and abstract those styles into a reusable CSS class:

46
return (
47
  <form action={handleSubmit}>
48
    <div className="grid grid-cols-2 gap-[200px] px-page-side mb-[75px]">

I’m going to replace all of our classes, except for px-page-side, with two-column-grid:

46
return (
47
  <form action={handleSubmit}>
48
    <div className="px-page-side two-column-grid">

Now, within our CSS file, inside the @layer components section, let’s add our new two-column-grid class:

240
.two-column-grid {
241
  @apply grid grid-cols-2 gap-[200px] mb-[75px]
242
}

Back in our Details.tsx file, we can use our new class:

81
<div className="two-column-grid">
82
  <p>Details</p>
83
  <aside>
84
    <p>Sidebar</p>
85
  </aside>
86
</div>

Notice, I also added an aside placeholder so that when you preview this within the browser, the two column layout is obvious.

For the content on the left, we can replace the <p>Details</p> with the content from the database:

<div className="two-column-grid">
  <p>Details</p>
  <div>
    {application?.jobDescription}
  </div>
  <aside>
    <p>Sidebar</p>
  </aside>
</div>

Now, we want to put a couple of buttons below our content. I’m going to use a couple more divs, one to wrap our job description and another to wrap our buttons.

81
<div className="two-column-grid">
82
  <div>
83
    <div>{application?.jobDescription}</div>
84
    <div>
85
      <Button variant="secondary">
86
        <Icon id="edit" size={16} /> Edit
87
      </Button>
88
      <Button variant="link">
89
        <Icon id="trash" size={16} /> Delete
90
      </Button>
91
    </div>
92
  </div>
93
  <aside>
94
    <p>Sidebar</p>
95
  </aside>
96
</div>

On line 85 we have our edit button. I'm using the shadcn/ui Button component and applied the secondary variant to give it a beige color. Inside, I'm using our Icon component. I set the id to edit and the size to 16px.
On line 88 we have our delete button. I'm using the shadcn/ui Button component again, bu this time I applied the link variant to remove the background color. There is a destructive variant, but it turns the background color red and you can only apply one variant at a time. We'll account for the difference through styling. Inside, I'm using our Icon component. I set the id to trash and the size to 16px.

Let’s add some polish through CSS.

81
<div className="two-column-grid">
82
  <div>
83
    <div className="mb-12">{application?.jobDescription}</div>
84
    <div className="flex items-center gap-5">
85
      <Button variant="secondary">
86
        <Icon id="edit" size={16} /> Edit
87
      </Button>
88
      <Button variant="link">
89
        <Icon id="trash" size={16} /> Delete
90
      </Button>
91
    </div>
92
  </div>
3 collapsed lines
93
  <aside>
94
    <p>Sidebar</p>
95
  </aside>
96
</div>

On line 83 I added 48px of margin below our content with mb-12
On line 84 I adjusted the alignment for the buttons by adding a class of flex items-center gap-5. This forces this buttons to align vertically and puts 20px of spacing between them.
On line 88 we can make our delete button red by adding a class of text-destructive. Then, to change the color of our svg to match the text color, we can add a class of fill-current.

Excellent! Now, for our sidebar.

We can reuse a lot of the styles that we created for our new application form. Let’s start with the basic JSX:

93
<aside>
94
  <div className="box">
95
    <h3>Compensation</h3>
96
    <div>
97
      <Icon id="salary" size={32} />
98
      <div>
99
        <p>Salary</p>
100
        <p>
101
          {application?.salaryMin} - {application?.salaryMax}
102
        </p>
103
      </div>
104
    </div>
105
  </div>
106
</aside>

On line 94, I used the box class we've already created.
We already have some existing styles for h3s inside of the box class.
On line 97 I added an Icon component with an id of salary and a size of 32px.
On line 99-102, we have a "Salary" label and a p tag that contains the salary range. I placed this content in a wrapping div so that we can eventually align it vertically with the icon.

Let’s go back through and add some more styles:

93
<aside>
94
  <div className="box">
95
    <h3 className="mb-4">Compensation</h3>
96
    <div className="flex items-center gap-6">
97
      <Icon id="salary" size={32} />
98
      <div className="text-sm">
99
        <p className="text-zinc-500">Salary</p>
100
        <p className="font-bold">{application?.salaryMin} - {application?.salaryMax}</p>
101
      </div>
102
    </div>
103
  </div>
104
</aside>

On line 95 I added 16px of margin below the heading with mb-4
On line 96, I aligned the icon and salary information with flex items-center. I also added 24px of padding between with gap-6.
On line 98 I added a class of text-sm to make the salary information 14px.
On line 99 I made the text gray with text-zinc-500.
On line 100 I added a class of font-bold to the salary range to make it bold.

Now, let’s add the contact box. The only difference between this contact box and the one on the new application form is we don’t need the “Add a Contact” button.

In fact, let’s go over to our ApplicationForm component and copy paste.

119
<div className="box">
120
  <h3>Contacts</h3>
121
  <p className="input-description">
122
    Invite your team members to collaborate.
123
  </p>
124
  {contacts && (
125
    <ul>
126
      {contacts.map((contact) => (
127
        <li key={contact.id}>
128
          <ContactCard contact={contact} />
129
        </li>
130
      ))}
131
    </ul>
132
  )}

Notice I stopped right before our Sheet component. We won't need it, but when we paste our code, we need to be sure to close our <div> tag.

Now, let’s paste our code into our Details.tsx file.

108
<div className="box">
109
  <h3>Contacts</h3>
110
  <p className="input-description">Invite your team members to collaborate.</p>
111
  {contacts && (
112
    <ul>
113
      {contacts.map((contact) => (
114
        <li key={contact.id}><ContactCard contact={contact} /></li>
115
      ))}
116
    </ul>
117
  )}
118
</div>

At the top of our file, import the ContactCard component:

import { ContactCard } from "@/app/components/ContactCard"

On our Contact box, we have some linting errors because it cannot find our contacts.

We have this data, but it’s nested inside our application.company object. We can adjust our conditional statement and the object we’re mapping over to get rid of the error:

113
{application?.company?.contacts && (
114
  <ul>
115
    {application?.company?.contacts.map((contact) => (
116
      <li key={contact.id}><ContactCard contact={contact} /></li>
117
    ))}
118
  </ul>
119
)}

Amazing!

The only problem is when you hover over a contact card, the delete button appears.

I don’t want to be able to modify the contact information here.

Let’s change the ContactCard component to take a new prop: isEditable.

9
const ContactCard = ({
10
  contact,
11
  isEditable = true,
12
}: {
13
  contact: Contact;
14
  isEditable?: boolean;
15
}) => {

I made the isEditable prop optional and set it to true by default. This way, it won't effect our existing code.

Now, I’m going to wrap our Delete button with a conditional statement that checks if isEditable is true:

28
{isEditable && (
29
  <div className="pr-5 hidden group-hover/card:block absolute top-2 -left-[37px]">
30
    <button
31
      onClick={(e) => handleDelete(e)}
32
      role="button"
33
      className="hover:bg-black cursor-pointer text-white fill-current rounded-full bg-destructive p-1"
34
    >
35
      <Icon id="close" size={16} />
36
    </button>
37
  </div>
38
)}

Back on our Details page, where we’re looping over the ContactCard component, we can pass in false for the isEditable prop:

113
{application?.company?.contacts && (
114
  <ul>
115
    {application?.company?.contacts.map((contact) => (
116
      <li key={contact.id}>
117
        <ContactCard contact={contact} isEditable={false} />
118
      </li>
119
    ))}
120
  </ul>
121
)}

If you test this out in the browser, you’ll see that the delete button doesn’t appear when you hover over a contact card on the Details page, but it still appears on the New Application page.

Next up, let’s hot wire the delete button.

Deleting a Job Application

The functionality for the delete button will be similar to how we set up the delete contacts button, but this time let’s use a confirmation dialog or modal window to confirm the user really wants to delete the application.

For this, let’s reach for another shadcn/ui component: the dialog box.

Styling the Dialog Component

Looking at the documentation, the code for this component resembles the Sheet component code:

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

There’s a trigger and a content section, with a nested title and description. If you look at some of the additional examples within the shadcn/ui documentation, you’ll notice we also have access to a <DialogFooter> component, perfect for buttons.

The Dialog component requires button clicks and maintaining state, so we’ll need to be sure we’re using a client component. Since the Details.tsx page is a server component, let’s create a new component specifically for this feature. As an added benefit, we can reuse this component throughout our application.

Inside our src/app/components, let’s create a new file and name it DeleteApplicationButton.tsx

Directorysrc/
- Directoryapp/
  - Directorycomponents/
    DeleteApplicationButton.tsx

Let’s start with a bare bones component:

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

7
export { DeleteApplicationButton }

Then, we can replace the placeholder <div>DeleteApplicationButton</div> with the Dialog code from shadcn/ui:

1
"use client";
2

3
import {
4
  Dialog,
5
  DialogContent,
6
  DialogDescription,
7
  DialogFooter,
8
  DialogHeader,
9
  DialogTitle,
10
  DialogTrigger,
11
} from "@/app/components/ui/dialog"
12

13
const DeleteApplicationButton = () => {
14
  return (
15
    <Dialog>
16
      <DialogTrigger>Open</DialogTrigger>
17
      <DialogContent>
18
        <DialogHeader>
19
          <DialogTitle>Are you absolutely sure?</DialogTitle>
20
          <DialogDescription>
21
            This action cannot be undone. This will permanently delete your account
22
            and remove your data from our servers.
23
          </DialogDescription>
24
        </DialogHeader>
25
      </DialogContent>
26
    </Dialog>
27
  )
28
}
29

30
export { DeleteApplicationButton }

You'll notice I included the use client directive at the top of our file, as well as our imports. If you copied the import statement directly from shadcn/ui, the path will vary slightly.

Before, I forget, we also need to go into our app/components/ui/dialog.tsx component and add a use client directive to the top of our shadcn/ui component as well:

1
"use client";

Back inside our DeleteApplicationButton component, let’s start customizing it, to meet our needs.

Let’s replace Open inside the DialogTrigger component with the Delete button we’ve already styled:

<DialogTrigger>
  Open
  <Button variant="link" className="text-destructive fill-current">
    <Icon id="trash" size={16} /> Delete
  </Button>
</DialogTrigger>

You’lll also need to import the Button and Icon components at the top of your file:

import { Button } from "./ui/button";
import { Icon } from "./Icon";

Before we finish the DeleteApplicationButton functionality. It’s get onto the Details page. Let’s replace the placeholder button with our component:

89
<Button variant="link">
90
  <Icon id="trash" size={16} /> Delete
91
</Button>
92
<DeleteApplicationButton />

Of course, we’ll also need to import the DeleteApplicationButton component at the top of our file:

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

If you look at the DOM that’s rendered in the browser, DialogTrigger renders as a button. Then, we have another button nested inside (from the Button component).

To prevent this from happening, we can use the asChild prop on the DialogTrigger.

18
<DialogTrigger asChild>
19
  <Button variant="link" className="text-destructive fill-current">
20
    <Icon id="trash" size={16} /> Delete
21
  </Button>
22
</DialogTrigger>

Inside the DialogTitle we can use the text: “Are you absolutely sure?”

25
<DialogTitle>Are you absolutely sure?</DialogTitle>

For the DialogDescription, we can use the text: “This will permanently delete the application and any related companies and contacts. This action cannot be undone.”

25
<DialogDescription>
26
  This will permanently delete the application and any related companies and contacts. This action cannot be undone.
27
</DialogDescription>

Below the DialogHeader, let’s add a DialogFooter with two buttons: Nevermind and Yes, Delete It.

31
<DialogFooter>
32
  <Button variant="secondary">Nevermind</Button>
33
  <Button variant="destructive">
34
    <Icon id="check" />
35
    Yes, Delete It
36
  </Button>
37
</DialogFooter>

For the "Nevermind" button, I'm using the secondary variant, applying a beige background color.
For the "Yes, Delete It" button, I set the variant to destructive. Inside, I added an Icon component with an id of check.

Let’s go back through and add a little more styling:

23
<DialogContent className="py-12 px-14">
24
  <DialogHeader className="mb-4">
25
    <DialogTitle className="text-destructive text-3xl font-bold mb-2">Are you absolutely sure?</DialogTitle>
26
    <DialogDescription>
27
      This will permanently delete the application and any related companies and contacts. This action cannot be undone.
28
    </DialogDescription>
29
  </DialogHeader>
30
  <DialogFooter>
31
    <Button variant="secondary">Nevermind</Button>
32
    <Button variant="destructive" className="fill-current">
33
      <Icon id="check" />
34
      Yes, Delete It
35
    </Button>
36
  </DialogFooter>
37
</DialogContent>

On line 23, I added 48px of padding to the top and bottom, with py-12 and 56px to the left and right with px-14.
On line 24, I added 16px of margin below the header with mb-4.
On line 25, I made the heading red with text-destructive, 30px big with text-3xl, and added 8px of margin below with mb-2.
On line 32, I added a class of fill-current so that the check icon would match the text color of the button.

Now, let’s connect the delete application functionality.

Delete Application Functionality

On our “Yes, Delete It” button, we can add an onClick handler that will call our deleteApplication function.

35
<Button variant="destructive" className="fill-current" onClick={(e) => handleDelete(e)}>
36
  <Icon id="check" />
37
  Yes, Delete It
38
</Button>

We're passing in the e event object to the handleDelete function. This will allow us to prevent the default action of the button.

Now, let’s create the handleDelete function, right above the return statement:

16
const handleDelete = async (e: React.MouseEvent<HTMLButtonElement>) => {
17
  e.preventDefault();
18
  const result = await deleteApplication();
19
  if (result.success) {
20
    toast.success("Application deleted successfully");
21
    window.location.href = "/applications";
22
  } else {
23
    console.error(result.error)
24
    toast.error("Failed to delete application");
25
  }
26
}

On line 17, we're using the event (e) object to prevent the default action of the button.
On line 18, we're calling the deleteApplication function (we still need to write this function). This is a server function, we can use async / await. We'll save the result in a variable called result.
On line 19, we're checking to see if the result was successful. If it was, we'll display a successful toast message and redirect the user to the applications list page.
On line 22, otherwise, if we ran into an error, we'll console.error the result and display a toast error message.

At the top of our file, we need to import toast and deleteApplication function:

import { toast } from "sonner";
import { deleteApplication } from "@/app/pages/applications/functions";

We also need a way of knowing what application we need to delete. We can pass the applicationId into the DeleteApplicationButton component and then on to the deleteApplication function.

const DeleteApplicationButton = ({ applicationId }: { applicationId: string }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleDelete = async (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    const result = await deleteApplication(applicationId);

Within our functions.ts file, we need to create the deleteApplication function.

97
export const deleteApplication = async (applicationId: string) => {
98
  try {
99
    await db.application.delete({
100
      where: {
101
        id: applicationId,
102
      },
103
    });
104
    return { success: true, error: null }
105
  } catch (error) {
106
    console.error(error)
107
    return { success: false, error: error as Error }
108
  }
109
}

On line 97, we're exporting the deleteApplication function so that we can use it in our DeleteApplicationButton component. This is an async function, so we can use await to wait for the database call to complete.
We using a try / catch block to run the Prisma API call.
On line 99, we're running the calling the delete method, where the id matches the applicationId that we passed in.
If we're successful, we'll return success as true and error as null.
If there are any errors, they'll be caught on line 106, console.error out. Then, we'll return success as false and include the error in the response.

Real quick, let’s go back to the Details page and ensure we’re passing the applicationId into the DeleteApplicationButton component:

90
<DeleteApplicationButton applicationId={application?.id || ""} />

Let’s test this out in the browser.

🙌 Looks like everything is working.

Before we can move on, we need to set up the “Nevermind” button for closing the dialog box.

Closing the Dialog Box

This is a similar problem to the one we ran into with our Sheet component. If you’ll remember, the Sheet component is built on top of the Radix UI Dialog component and this is the Dialog component.

Within our DeleteApplicationButton component, we need to create a piece of state to keep track of whether the dialog box is open or not.

22
const [isOpen, setIsOpen] = useState(false);

You’ll also need to import useState at the top of your file:

import { useState } from "react";

Then, we can use the Dialog’s props, open and onOpenChange, to control the dialog box, referencing our state variable. (For more information, check out the official Radix UI documentation for the Dialog component.)

33
<Dialog open={isOpen} onOpenChange={setIsOpen}>

Now, we can update the “Nevermind” button to close the dialog box, by updating the isOpen state:

34
<Button variant="secondary" onClick={ () => setIsOpen(false) }>Nevermind</Button>

If you test this in the browser, the “Nevermind” button should close the dialog box, without deleting the application. 😎

Implementing Edit Functionality

Our application is looking great, but we’re missing one thing: the ability to edit the application.

Setting up the Edit Page and Components

Let’s take the smarter, not harder approach and start with our New application form page and modify it. Let’s duplicate the New.tsx file and name the new file Edit.tsx.

Directorysrc/
- Directoryapp/
  - Directorypages/
    Directoryapplications/
    actions.ts
    Details.tsx
    Edit.tsx
    List.tsx
    New.tsx

Inside, we need to rename our component to Edit

 const New = async ({ ctx }: RequestInfo) => {
 const Edit = async ({ ctx }: RequestInfo) => {
...
 export { New }
 export { Edit }

Within our worker.tsx, let’s add the new route:

66
prefix("/applications", [
67
  route("/", [isAuthenticated, List]),
68
  route("/new", [isAuthenticated, New]),
69
  route("/:id", [isAuthenticated, Details]),
70
  route("/:id/edit", [isAuthenticated, Edit]),
71
]),

Be sure to import the Edit component at the top of our worker.tsx file:

import { Edit } from "@/app/pages/applications/Edit";

Then, let’s add our new edit page to the list of routes inside our src/app/shared/links.ts file:

10
export const link = defineLinks([
9 collapsed lines
11
  "/",
12
  "/user/login",
13
  "/user/signup",
14
  "/user/logout",
15
  "/legal/privacy",
16
  "/legal/terms",
17
  "/applications",
18
  "/applications/new",
19
  "/applications/:id",
20
  "/applications/:id/edit",
21
]);

Now, let’s update the Edit button on the Details page so that we can easily navigate to our new page:

87
<Button variant="secondary" asChild>
88
  <a
89
    href={link("/applications/:id/edit", {
90
      id: application?.id || "",
91
    })}
92
  >
93
    <Icon id="edit" size={16} /> Edit
94
  </a>
95
</Button>

I changed the Button component to include the asChild prop. This allows us to maintain the button styles, but render a link instead.
Inside the Button component, I added a link, that uses the link function to reference the Edit page. The first parameter is the route and the second parameter contains an object with the parameters we're passing in. Here, the application?.id

You’ll also need to import the links function at the top of our file:

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

If you look at this in the browser and click on the Edit button, it should take you to a page that looks like the new application form. But, the URL is different.

Loading the Application from the Database

Let’s get our job application content from the database and pass it into the form:

14
const Edit = async ({ params, ctx }: RequestInfo) => {
15
  const application = await db.application.findUnique({
16
    where: {
17
      id: params.id,
18
    },
19
    include: {
20
      status: true,
21
      company: {
22
        include: {
23
          contacts: true,
24
        },
25
      },
26
    },
27
  })

This code is similar to what we're already doing on the Details.tsx page. By default, our page gets a RequestInfo object, which contains the params and ctx.
We can access the id in the URL through the params object with params.id.
On lines 15-27 we're using the Prisma API to find the unique application, where the id is equal to param.id.
We're also including the applicationStatus, company, and contacts in the response, with include.

Be sure to import RequestInfo at the top of our file:

import { RequestInfo } from "rwsdk/worker"

If we work our way down the file, we still need to grab all the application statuses to populate the dropdown menu:

29
const statuses = await db.applicationStatus.findMany()

But, we can delete the block of code where we get all the contacts that aren’t related to a company:

31
const contacts = await db.contact.findMany({
32
  where: {
33
    companyId: null,
34
    userId: ctx.user?.id || ""
35
  }
36
})

We already have all the contact information we need through the application database call.

Let’s keep moving down the file. We can change our BreadcrumbPage to display the Job Title:

35
<BreadcrumbList>
4 collapsed lines
36
  <BreadcrumbItem>
37
    <BreadcrumbLink href="/applications">Applications</BreadcrumbLink>
38
  </BreadcrumbItem>
39
  <BreadcrumbItem>
40
    <BreadcrumbLink href={link('/applications/:id', { id: application?.id ?? '' })}>
41
      {application?.jobTitle} at {application?.company?.name}
42
    </BreadcrumbLink>
43
  </BreadcrumbItem>
44
  <BreadcrumbSeparator />
45
  <BreadcrumbItem>
46
    <BreadcrumbPage>Edit Application</BreadcrumbPage>
47
  </BreadcrumbItem>
48
</BreadcrumbList>

I injected a BreadcrumbItem and a BreadcrumbSeparator after the Applications link to include the job details page.
On the BreadcrumbLink, I used our link function to reference the job details page.
I used the content from our database to dynamically display the job title and company name.
Then, I changed the BreadcrumbPage to Edit Application.

Looking at the next section:

46
<div className="mx-page-side pb-6 mb-8 border-b-1 border-border">
47
  <h1 className="page-title">New Application</h1>
48
  <p className="page-description">Create a new application</p>
49
</div>

We can change the contents of our page title and description:

47
<h1 className="page-title">Edit {application?.jobTitle}</h1>
48
<p className="page-description">Edit the details of this job application.</p>

For the form, I’m going to duplicate the src/app/components/ApplicationsForm.tsx file and name the new file EditApplicationForm.tsx.

Inside, we need to change the name of the component to match the name of the file:

 const ApplicationsForm = ({ statuses, contacts }:
 const EditApplicationForm = ({ statuses, contacts }:
...
 export {ApplicationsForm}
 export {EditApplicationForm}

Then, on the Edit page, let’s swap out the ApplicationsForm component with our EditApplicationForm component:

 import { ApplicationsForm } from "@/app/components/ApplicationsForm"
 import { EditApplicationForm } from "@/app/components/EditApplicationForm"
...
 <ApplicationsForm statuses={statuses} contacts={contacts} />
 <EditApplicationForm statuses={statuses} contacts={contacts} />

While we’re here, let’s modify the props that we’re passing into our component. We no longer need the contacts prop, but we do need to pass in the application:

<EditApplicationForm statuses={statuses} contacts={contacts} />
<EditApplicationForm statuses={statuses} application={application} />

Now, let’s move over to our EditApplicationForm.tsx file and update the props, there, to match:

 import { ApplicationStatus, Contact } from "@prisma/client"
 import { ApplicationStatus, Application } from "@prisma/client"
 import { ApplicationWithRelations } from "../pages/applications/List";
...
 const EditApplicationForm = ({ statuses, contacts }:
   { statuses: ApplicationStatus[], contacts: Contact[] }) => {
 const EditApplicationForm = ({
   statuses,
   application,
 }: {
   statuses: ApplicationStatus[];
   application: ApplicationWithRelations;
 }) => {

We updated the types that we’re importing from Prisma to remove Contact and include Application. Then, we made similar changes to the props that we’re passing into our component.

You’ll notice that we imported ApplicationWithRelations from our List page. This is a type that we created to include the company and contacts details.

Now, et’s work our way through the form, for each input field, we want to set a defaultValue, referencing the application details.

.
<input type="text" id="company" name="company" defaultValue={application?.company?.name ?? ''} />

<input type="text" id="jobTitle" name="jobTitle" defaultValue={application?.jobTitle ?? ''} />

<textarea id="jobDescription" name="jobDescription" defaultValue={application?.jobDescription ?? ''} />

<input type="text" id="salaryMin" name="salaryMin" defaultValue={application?.salaryMin ?? ''} />

<input type="text" id="salaryMax" name="salaryMax" defaultValue={application?.salaryMax ?? ''} />

<input type="text" id="postingUrl" name="postingUrl" defaultValue={application?.postingUrl ?? ''} />

Then, for the submit button, change the label from “Create” to “Update”:

77
<Button role="submit">
78
  Update
79
</Button>

Let’s add a second button, to cancel:

120
<div className="field flex items-center gap-4">
121
  <Button role="submit">
122
    Update
123
  </Button>
124
  <Button variant="secondary" asChild>
125
    <a href={link('/applications/:id', { id: application?.id ?? '' })}>Cancel</a>
126
  </Button>
127
</div>

On the wrapping field div, I added a few classes to align the buttons vertically and add 16px of space between them with flex items-center gap-4.
On line 124, I gave the Cancel button a variant of secondary to give it a beige color. The asChild prop allows us to use the a tag inside.
On line 125, I used our link function to reference the job details page and pass in the application?.id as the id parameter.

You’ll also need to import the link function at the top of our file:

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

For the Date Picker, we need to adjust the component slightly. If you try to pass in a defaultValue:

<DatePicker name="dateApplied" defaultValue={application?.dateApplied?.toISOString() ?? ''} />

It will show a linting error because it’s not prepared to accept that prop:

Within the DatePicker component, let’s update the list of props we’re passing in, to include the defaultValue prop:

16
export function DatePicker({ name, defaultValue = '' }: { name: string, defaultValue?: string }) {

The defaultValue isn't required, so we used a ? to make it optional.
If the defaultValue isn't passed in, defaultValue will be an empty string.

We’re already saving the selected date in a piece of state, let’s set the default value of our state to defaultValue we passed in:

const [date, setDate] = React.useState<Date>()
const [date, setDate] = React.useState<Date>(defaultValue ? new Date(defaultValue) : new Date())

Excellent! Now, let’s go back to our EditApplicationForm.tsx file and update the Application Status. Just like our standard inputs, we can pass in a defaultValue prop:

147
<Select
148
  name="statusId"
149
  defaultValue={application?.status?.id.toString() ?? ""}
150
>

For the Contacts section, we just need to adjust the contact array its referencing:

 {contacts && (
 {application?.company?.contacts && (
  <ul>
      {contacts.map((contact) => (
      {application?.company?.contacts.map((contact) => (
      <li key={contact.id}><ContactCard contact={contact} /></li>
    ))}
  </ul>
)}

If you check out the page within the browser, you should see all our application details loaded in:

Updating the Application

Now, we just need to handle the form updates.

Let’s start with the contact form. If you’ll remember, we set the contact form up so that when a new contact is created, it’s not assigned to a company. Here, though, we have a company.

Instead of duplicating the ContactForm component, let’s make it “smart” enough to handle both use cases.

Inside our EditApplicationForm component, where we’re using our ContactForm component, let’s pass in the companyId:

193
<ContactForm
194
  callback={() => setIsContactSheetOpen(false)}
195
  companyId={application?.company?.id ?? ""}
196
/>

Right away, you will see an error because our ContactForm isn’t expecting a companyId prop. Let’s fix that:

8
const ContactForm = ({
9
  callback,
10
  companyId = "",
11
}: {
12
  callback: () => void;
13
  companyId?: string;
14
}) => {

I set the default value to an empty string: companyId = ''
I also made the companyId prop optional with a question mark ?
The beauty in this approach is that it won't break or change our existing implementation on the New job application page.

Inside the handleSubmit function, let’s append the companyId to our formData:

13
const handleSubmit = async (formData: FormData) => {
14
  formData.append("companyId", companyId);
15
  const result = await createContact(formData);
16
}

Now, let’s jump over to our createContact function, inside our src/app/pages/applications/functions.tsx file and get the companyId from the form data:

55
export const createContact = async (formData: FormData) => {
7 collapsed lines
56
  try {
57
    const { ctx } = requestInfo;
58

59
    if (!ctx.user) {
60
      throw new Error("User not found");
61
    }
62

63
    const companyId = formData.get("companyId") as string;

On our database call, we can conditionally connect the company, if the companyId exists:

65
await db.contact.create({
10 collapsed lines
66
  data: {
67
    firstName: formData.get("firstName") as string,
68
    lastName: formData.get("lastName") as string,
69
    email: formData.get("email") as string,
70
    role: formData.get("role") as string,
71
    user: {
72
      connect: {
73
        id: ctx.user?.id || "",
74
      },
75
    },
76
    ...(companyId ? {
77
      company: {
78
        connect: {
79
          id: companyId,
80
        },
81
      }
82
    } : {})
83
  },
84
})

On line 74, we're using a spread operator to say if the companyId exists, then connect the company to the contact. Otherwise, we'll use an empty object.

You can test this out in the browser, ensuring it works on both the New and Edit pages.

The only remaining task is to update the handleSubmit function on the EditApplicationForm. This is what we currently have.

38
const handleSubmit = async (formData: FormData) => {
39
  formData.append("contacts", JSON.stringify(contacts));
40
  const result = await createApplication(formData);
41
  if (result.success) {
42
    window.location.href = `/applications`;
43
  } else {
44
    console.error(result.error);
45
  }
46
}

We can remove line 26, where we’re appending the contacts to the formData.

Instead of calling createApplication, let’s call updateApplication instead (we still need to write this function):

126
const handleSubmit = async (formData: FormData) => {
127
  const result = await updateApplication(formData);
5 collapsed lines
128
  if (result.success) {
129
    window.location.href = `/applications`;
130
  } else {
131
    console.error(result.error);
132
  }
133
}

Be sure to update the import statement at the top of your file:

import { createApplication } from "@/app/pages/applications/functions"
import { updateApplication } from "@/app/pages/applications/functions"

Inside our src/app/pages/applications/functions.ts file, let’s write the updateApplication function:

122
export const updateApplication = async (formData: FormData) => {
123
  try {
124
    await db.application.update({
125
      where: {
126
        id: formData.get("id") as string,
127
      },
128
      data: {
129
        salaryMin: formData.get("salaryMin") as string,
130
        salaryMax: formData.get("salaryMax") as string,
131
        jobTitle: formData.get("jobTitle") as string,
132
        jobDescription: formData.get("jobDescription") as string,
133
        postingUrl: formData.get("url") as string,
134
        dateApplied: formData.get("dateApplied") as string,
135
        company: {
136
          update: {
137
            name: formData.get("company") as string,
138
          },
139
        },
140
        status: {
141
          connect: {
142
            id: parseInt(formData.get("statusId") as string),
143
          },
144
        },
145
      }
146
    })
147

148
    return { success: true, error: null }
149
  } catch (error) {
150
    console.error(error)
151
    return { success: false, error: error as Error }
152
  }
153
}

This is basic try / catch block. We try and run our database method an if it encounters an error, then we'll catch it and return an error object.
On line 122 - Our database call is similar to the createApplication function, but instead of create, we're using update.
On lines 125-127 - We're using a where clause to specify which application we want to update.
On lines 135-139 - We're using an update method to update the company name (instead of connect)
On lines 140-144 - We're using the update method to update the application status (instead of connect).
On line 142 - the Application Status ID is a number, but the statusId on the formData is a number, so we're casting it from a string into a number with parseInt.

This is great, the only problem is that the application id does not exist in our form data.

Let’s go back to our EditApplicationForm and add a hidden input field to our form:

120
<input
121
  type="hidden"
122
  id="id"
123
  name="id"
124
  defaultValue={application?.id ?? ""}
125
/>

Perfect! Now test the update form within the browser. You should be able to edit and save changes to our application.

💥 We did it! Now, we just need to get our application online where people can use it!