Create an admin page

The news app is almost complete. We can write articles, view, edit, and delete them.

Our final job is to add an admin page that allows admin level users to publish articles when they are ready, and make them appear to visitors on the site.

Set up the admin page

For the time being, we will make this page available to everyone. We can grant access to admin only users in the next guide.

Create the /admin-review route
Section titled “Create the /admin-review route”

The first thing we need is a new parent route to display a list of all articles.

This is straightforward. Firstly, create a new file inside app/routes called admin-review.tsx:

Add a `loader` function

In app/routes/admin-review.tsx, set up a loader function that returns the id, title and isPublished values for each article:

import { data } from 'react-router'
import { prisma } from '~/utils/db.server.ts'

export async function loader() {
  const allArticles = await prisma.article.findMany({
    select: { id: true, title: true, isPublished: true },
  })

  return data({ allArticles })
}

Parent user interface

We can use the same layout as the /users/$username/articles page to display the list of articles.

The only thing we need to add (on line 43) is an indication of whether the article is published or not.

This will be a small ‘pill’ user interface element. It will show a green ‘P’ for ‘Published’ or a red ‘D’ for ‘Draft’.

Still inside app/routes/admin-review.tsx, add the following code:

1
import { data, NavLink, Outlet, useLoaderData } from 'react-router'
2
import { prisma } from '~/utils/db.server.ts'
3
import { cn } from '~/utils/misc.tsx'
4

5
export async function loader() {
6
  const allArticles = await prisma.article.findMany({
7
    select: { id: true, title: true, isPublished: true },
8
  })
9

10
  return data({ allArticles })
11
}
12

13
interface StatusPillProps {
14
  isPublished: boolean
15
}
16
export function StatusPill({ isPublished }: StatusPillProps) {
17
  return (
18
    <div
19
      className={`rounded-full px-2 py-1 text-xs font-semibold ${isPublished ? 'bg-green-700 text-white' : 'bg-red-700 text-white'}`}
20
    >
21
      {isPublished ? 'P' : 'D'}
22
    </div>
23
  )
24
}
25

26
export default function ArticlesRoute() {
27
  const { allArticles } = useLoaderData<typeof loader>()
28

29
  const navLinkDefaultClassName =
30
    'line-clamp-2 block rounded-l-full py-2 pl-8 pr-6 text-base lg:text-xl'
31
  return (
32
    <main className="container flex h-full min-h-[750px] px-0 py-12 md:px-8">
33
      <div className="grid w-full grid-cols-4 bg-muted pl-2 md:container md:rounded-3xl md:pr-0">
34
        <div className="relative col-span-1">
35
          <div className="absolute inset-0 flex flex-col">
36
            <ul className="overflow-y-auto overflow-x-hidden py-12">
37
              {allArticles.map(article => (
38
                <li
39
                  key={article.id}
40
                  className="flex items-center gap-2 p-1 pr-0"
41
                >
42
                  <StatusPill isPublished={article.isPublished} />
43
                  <NavLink
44
                    to={article.id}
45
                    preventScrollReset
46
                    prefetch="intent"
47
                    className={({ isActive }) =>
48
                      cn(
49
                        navLinkDefaultClassName,
50
                        isActive && 'w-full bg-accent',
51
                      )
52
                    }
53
                  >
54
                    {article.title}
55
                  </NavLink>
56
                </li>
57
              ))}
58
            </ul>
59
          </div>
60
        </div>
61
        <div className="relative col-span-3 bg-accent md:rounded-r-3xl">
62
          <Outlet />
63
        </div>
64
      </div>
65
    </main>
66
  )
67
}

Save your changes and head to http://localhost:3000/admin-review in the browser.

At first, of course, all the articles will show a red ‘D’ to signify ‘Draft’:

Initial admin review

As we update the articles, the status will change to a green ‘P’ for those that we mark as ‘Published’.

Create a child index route
Section titled “Create a child index route”

I’ll also create a new child index route file at app/routes/admin-review._index.tsx:

This will simply display a message asking the user to select an article to review.

Add the code below to the new file:
app/routes/admin-review._index.tsx
```
  export default function ArticlesIndexRoute() {
    return (
      <div className="container pt-12">
        <p className="text-body-md">Select an article to review...</p>
      </div>
    )
  }
```
Refresh your page in the browser.

Your /admin-review route should look something like this:

This looks good, but of course if I click on any of the articles titles, I’ll get a 404 error because I haven’t created the child route yet.

Let fix that now.

Server-side code

If I add a .server suffix to a route file name, this will make it a server route.

Create a new file at app/routes/__admin-review.$articleId.server.tsx:

Create admin review server file

Once set up, add the code below to it:

1
import { parseWithZod } from '@conform-to/zod'
2
import { invariantResponse } from '@epic-web/invariant'
3
import { formatDistanceToNow } from 'date-fns'
4
import {
5
  data,
6
  type LoaderFunctionArgs,
7
  type ActionFunctionArgs,
8
} from 'react-router'
9
import { z } from 'zod'
10
import { prisma } from '~/utils/db.server.js'
11
import { redirectWithToast } from '~/utils/toast.server.js'
12

13
export async function loader({ params }: LoaderFunctionArgs) {
14
  invariantResponse(params.articleId, 'No article ID provided', { status: 404 })
15

16
  const article = await prisma.article.findUnique({
22 collapsed lines
17
    where: { id: params.articleId },
18
    select: {
19
      id: true,
20
      title: true,
21
      content: true,
22
      ownerId: true,
23
      updatedAt: true,
24
      publishedAt: true,
25
      isPublished: true,
26
      category: {
27
        select: {
28
          id: true,
29
          name: true,
30
        },
31
      },
32
      images: {
33
        select: {
34
          objectKey: true,
35
          altText: true,
36
        },
37
      },
38
    },
39
  })
40

10 collapsed lines
41
  invariantResponse(article, 'Not found', { status: 404 })
42

43
  const updatedAtDate = new Date(article.updatedAt)
44
  const publishedAtDate = article.publishedAt
45
    ? new Date(article.publishedAt)
46
    : null
47
  const timeAgoUpdated = formatDistanceToNow(updatedAtDate)
48
  const timeAgoPublished = publishedAtDate
49
    ? formatDistanceToNow(publishedAtDate)
50
    : null
51

52
  return data({
53
    article,
54
    timeAgoUpdated,
55
    timeAgoPublished,
56
  })
57
}
58

59
export const PublishArticleSchema = z.object({
60
  publish: z.optional(z.string()),
61
  unpublish: z.optional(z.string()),
62
})
63

64
export async function action({ request }: ActionFunctionArgs) {
65
  const formData = await request.formData()
66

67
  const submission = await parseWithZod(formData, {
22 collapsed lines
68
    schema: PublishArticleSchema.superRefine(async (data, ctx) => {
69
      if (!data.publish && !data.unpublish) return
70

71
      const article = await prisma.article.findUnique({
72
        select: { id: true },
73
        where: { id: data.publish ?? data.unpublish },
74
      })
75

76
      if (!article) {
77
        ctx.addIssue({
78
          code: z.ZodIssueCode.custom,
79
          message: 'Article not found',
80
        })
81
      }
82
    }).transform(async (data) => {
83
      return {
84
        ...data,
85
        publishedAt: new Date(),
86
        isPublished: data.publish ? true : false,
87
      }
88
    }),
89
    async: true,
90
  })
91

92
  if (submission.status !== 'success') {
93
    return data(
94
      { result: submission.reply() },
95
      { status: submission.status === 'error' ? 400 : 200 },
96
    )
97
  }
98

99
  const { publish, unpublish } = submission.value
100

101
  const updatedArticle = await prisma.article.update({
102
    where: { id: publish ?? unpublish },
103
    data: {
104
      isPublished: publish ? true : false,
105
      publishedAt: publish ? new Date() : null,
106
    },
107
  })
108

109
  return redirectWithToast(`/admin-review/${updatedArticle.id}`, {
110
    type: 'success',
111
    title: 'Success',
112
    description: `The article has been ${publish ? 'published' : 'unpublished'}`,
113
  })
114
}

What does this code do?

The loader function loads the article data for the given articleId.

16
const article = await prisma.article.findUnique({
22 collapsed lines
17
  where: { id: params.articleId },
18
  select: {
19
    id: true,
20
    title: true,
21
    content: true,
22
    ownerId: true,
23
    updatedAt: true,
24
    publishedAt: true,
25
    isPublished: true,
26
    category: {
27
      select: {
28
        id: true,
29
        name: true,
30
      },
31
    },
32
    images: {
33
      select: {
34
        objectKey: true,
35
        altText: true,
36
      },
37
    },
38
  },
39
})

It calculates the time since the article was last updated and published.

43
const updatedAtDate = new Date(article.updatedAt)
44
const publishedAtDate = article.publishedAt
45
  ? new Date(article.publishedAt)
46
  : null
47
const timeAgoUpdated = formatDistanceToNow(updatedAtDate)
48
const timeAgoPublished = publishedAtDate
49
  ? formatDistanceToNow(publishedAtDate)
50
  : null

The action function handles the publish/unpublish actions.


24 collapsed lines
67
    const submission = await parseWithZod(formData, {
68
  schema: PublishArticleSchema.superRefine(async (data, ctx) => {
69
    if (!data.publish && !data.unpublish) return
70

71
    const article = await prisma.article.findUnique({
72
      select: { id: true },
73
      where: { id: data.publish ?? data.unpublish },
74
    })
75

76
    if (!article) {
77
      ctx.addIssue({
78
        code: z.ZodIssueCode.custom,
79
        message: 'Article not found',
80
      })
81
    }
82
  }).transform(async data => {
83
    return {
84
      ...data,
85
      publishedAt: new Date(),
86
      isPublished: data.publish ? true : false,
87
    }
88
  }),
89
  async: true,
90
})
91

92
const { publish, unpublish } = submission.value
93

94
const updatedArticle = await prisma.article.update({
95
  where: { id: publish ?? unpublish },
96
  data: {
97
    isPublished: publish ? true : false,
98
    publishedAt: publish ? new Date() : null,
99
  },
100
})

Finally, it redirects the user back to the article page with a success message.

109
return redirectWithToast(`/admin-review/${updatedArticle.id}`, {
110
  type: 'success',
111
  title: 'Success',
112
  description: `The article has been ${publish ? 'published' : 'unpublished'}`,
113
})

Create the `/admin-review/$articleId` route

I’ll now create a new child route that will display the full article, together with a button that will toggle between saying ‘Publish’ or ‘Unpublish’, depending on the article’s status.

Again, I’ll start by creating a new file at app/routes/admin-review.$articleId.tsx:

Create admin-review-article-id

Next, I’ll add the code.

This is a long snippet, so take the time to read through the explanation beneath it carefully and understand what it is doing.

If you need extra help understanding the code, just ask and we can go through it in class together.

Here is the full code for the app/routes/admin-review.$articleId.tsx route file:


11 collapsed lines
1
import { getFormProps, useForm } from '@conform-to/react'
2
import { Form, useActionData, useLoaderData } from 'react-router'
3
import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
4
import { type loader } from './admin-review.$articleId.server.tsx'
5
import { floatingToolbarClassName } from '~/components/floating-toolbar.tsx'
6
import { ErrorList } from '~/components/forms.tsx'
7
import { Icon } from '~/components/ui/icon.tsx'
8
import { StatusButton } from '~/components/ui/status-button.tsx'
9
import { getArticleImgSrc, useIsPending } from '~/utils/misc.tsx'
10

11
export { loader, action } from './admin-review.$articleId.server.tsx'
12

13
export default function AdminReviewRoute() {
14
  const data = useLoaderData<typeof loader | null>()
15

16
  return (
17
    <div className="absolute inset-0 flex flex-col px-10">
55 collapsed lines
18
      <h2 className="text-h2 mb-2 pt-12 lg:mb-6">{data?.article.title}</h2>
19
      <div className="mb-4 flex justify-between gap-4">
20
        <p className="bg-card text-card-foreground w-fit rounded-lg px-4 py-2 text-sm">
21
          {data?.article.category?.name ?? 'General News'}
22
        </p>
23
        <p
24
          className={`w-fit rounded-lg ${data?.article.isPublished ? 'bg-green-800' : 'bg-destructive'} text-card-foreground px-4 py-2 text-xs font-bold`}
25
        >
26
          {data?.article.isPublished ? 'Published' : 'Awaiting review'}
27
        </p>
28
      </div>
29
      <div className="overflow-y-auto pb-24">
30
        <ul className="flex flex-wrap gap-5 py-5">
31
          {data?.article.images.map((image) => (
32
            <li key={image.objectKey}>
33
              <a href={getArticleImgSrc(image.objectKey)}>
34
                <img
35
                  src={getArticleImgSrc(image.objectKey)}
36
                  alt={image.altText ?? ''}
37
                  className="h-32 w-32 rounded-lg object-cover"
38
                />
39
              </a>
40
            </li>
41
          ))}
42
        </ul>
43
        <p className="text-sm whitespace-break-spaces md:text-lg">
44
          {data?.article.content}
45
        </p>
46
      </div>
47

48
      <div className={floatingToolbarClassName}>
49
        <span className="text-foreground/90 text-sm max-[524px]:hidden">
50
          <Icon name="clock" className="scale-125">
51
            {data?.timeAgoUpdated} ago
52
          </Icon>
53
        </span>
54
        <span
55
          className={`text-sm ${data?.timeAgoPublished ? 'text-foreground/90' : 'text-red/90'} max-[524px]:hidden`}
56
        >
57
          <Icon
58
            name={data?.timeAgoPublished ? 'check' : 'update'}
59
            className="scale-125"
60
          >
61
            {data?.timeAgoPublished
62
              ? `Published ${data?.timeAgoPublished} ago`
63
              : 'Not published yet'}
64
          </Icon>
65
        </span>
66
        <div className="grid flex-1 grid-cols-2 justify-end gap-2 min-[525px]:flex md:gap-4">
67
          <ArticleStatusForm
68
            id={data?.article.id ?? ''}
69
            isPublished={data?.article.isPublished ?? false}
70
          />
71
        </div>
72
      </div>
73
    </div>
74
  )
75
}
76

77
interface PublishArticleProps {
78
  id: string
79
  isPublished: boolean
80
}
81
export function ArticleStatusForm({ id, isPublished }: PublishArticleProps) {
82
  const actionData = useActionData<typeof action>()
83
  const isPending = useIsPending()
84
  const [form] = useForm({
85
    id: 'set-article-status',
86
    lastResult: actionData?.result,
87
  })
88

89
  return (
90
    <Form method="POST" {...getFormProps(form)}>
23 collapsed lines
91
      <input
92
        type="hidden"
93
        name={isPublished ? 'unpublish' : 'publish'}
94
        value={id}
95
      />
96
      <StatusButton
97
        type="submit"
98
        name="intent"
99
        value="set-article-status"
100
        status={isPending ? 'pending' : (form.status ?? 'idle')}
101
        disabled={isPending}
102
        className="w-full max-md:aspect-square max-md:px-0"
103
      >
104
        <Icon
105
          name={isPublished ? 'cross-1' : 'check'}
106
          className="scale-125 max-md:scale-150"
107
        >
108
          <span className="max-md:hidden">
109
            {isPublished ? 'Unpublish' : 'Publish'}
110
          </span>
111
        </Icon>
112
      </StatusButton>
113
      <ErrorList errors={form.errors} id={form.errorId} />
114
    </Form>
115
  )
116
}
117

118
export function ErrorBoundary() {
119
  return (
120
    <GeneralErrorBoundary
121
      statusHandlers={{
122
        403: () => <p>You are not allowed to do that</p>,
123
        404: () => <p>No article with the id exists</p>,
124
      }}
125
    />
126
  )
127
}

What does this code do?

The AdminReviewRoute component displays the full article, including the title, category, status, images, content, and time since the article was last updated and published.

It displays a button that toggles between ‘Publish’ and ‘Unpublish’, depending on the article’s status.

48
<div className={floatingToolbarClassName}>
49
  <span className="text-sm text-foreground/90 max-[524px]:hidden">
50
<Icon name="clock" className="scale-125">
51
{data.timeAgoUpdated} ago
52
</Icon>
53
  </span>
54
  <span
55
    className={`text-sm ${data.timeAgoPublished ? 'text-foreground/90' : 'text-red/90'} max-[524px]:hidden`}
56
  >
57
    <Icon
58
      name={data.timeAgoPublished ? 'check' : 'update'}
59
      className="scale-125"
60
    >
61
      {data.timeAgoPublished
62
        ? `Published ${data.timeAgoPublished} ago`
63
        : 'Not published yet'}
64
    </Icon>
65
  </span>
66
  <div className="grid flex-1 grid-cols-2 justify-end gap-2 min-[525px]:flex md:gap-4">
67
    <ArticleStatusForm
68
      id={data?.article.id ?? ''}
69
      isPublished={data?.article.isPublished ?? false}
70
    />
71
  </div>
72
</div>

The ArticleStatusForm component displays the form that contains a hidden input field with the article’s ID and a submit button that toggles the article’s status.

90
<Form method="POST" {...getFormProps(form)}>
91
  <input
92
    type="hidden"
93
    name={isPublished ? 'unpublish' : 'publish'}
94
    value={id}
95
  />
96
  <StatusButton
97
    type="submit"
98
    name="intent"
99
    value="set-article-status"
100
    status={isPending ? 'pending' : form.status ?? 'idle'}
101
    disabled={isPending}
102
    className="w-full max-md:aspect-square max-md:px-0"
103
  >
104
    <Icon
105
      name={isPublished ? 'cross-1' : 'check'}
106
      className="scale-125 max-md:scale-150"
107
    >
108
      <span className="max-md:hidden">
109
        {isPublished ? 'Unpublish' : 'Publish'}
110
      </span>
111
    </Icon>
112
  </StatusButton>
113
  <ErrorList errors={form.errors} id={form.errorId} />
114
</Form>

The ErrorBoundary component displays an error message if the user is not allowed to perform the action or if the article does not exist.

118
export function ErrorBoundary() {
119
  return (
120
    <GeneralErrorBoundary
121
      statusHandlers={{
122
        403: () => <p>You are not allowed to do that</p>,
123
        404: ({ params }) => <p>No article with the id exists</p>,
124
      }}
125
    />
126
  )
127
}

Final functionality
Section titled “Final functionality”

Refresh the page in your browser.

If all is working well, you should now have a fully functioning admin review page that allows you to publish or unpublish articles:

Summary

In this step, you have:

Created a new /admin-review route that displays a list of articles that are still in draft status.
Writte the server-side code to load articles and handle the publish/unpublish actions.
Created a new child route /admin-review/$articleId that displays the full article and allows you to publish or unpublish it.

Create an admin page

Set up the admin page

Create the /admin-review route

Add a loader function

Parent user interface

Create a child index route

Server-side code

Create the /admin-review/$articleId route

Final functionality

Summary

Create the `/admin-review` route

Add a `loader` function

Create the `/admin-review/$articleId` route