3.3.2. Create Brands List UI Route in Admin

What is a UI Route?#

A UI route is a React Component that adds a new page to your admin dashboard.

The UI Route can be shown in the sidebar or added as a nested page.

Prerequisite: Add Retrieve Brand API Route#

Before adding the UI route, you need an API route that retrieves all brands.

Create the file src/api/admin/brands/route.ts with the following content:

src/api/admin/brands/route.ts
Show more
6import BrandModuleService from "../../../modules/brand/service"7
8export const GET = async (9  req: MedusaRequest,10  res: MedusaResponse11) => {12  const brandModuleService: BrandModuleService = req.scope.resolve(13    BRAND_MODULE14  )15
16  const limit = req.query.limit || 1517  const offset = req.query.offset || 018
19  const [brands, count] = await brandModuleService.listAndCountBrands({}, {20    skip: offset as number,21    take: limit as number,22  })23
24  res.json({25    brands,26    count,27    limit,28    offset,29  })30}

This adds a GET API route at /admin/brands.

In the API route, you resolve the Brand Module's main service and use its listAndCountBrands method to retrieve the list of brands with their total count.

This method accepts as a first parameter filters to apply on the retrieved data, and as a second parameter configurations for pagination.

Add a UI Route to Show Brands#

A UI route is created in a file named page.tsx under subdirectories of the src/admin/routes directory. The file’s default export must be the UI route’s React component.

To create a UI route that shows the list of brands, create the file src/admin/routes/brands/page.tsx with the following content:

src/admin/routes/brands/page.tsx
1import { Table, Container, Heading } from "@medusajs/ui"2import { useEffect, useState } from "react"3import { defineRouteConfig } from "@medusajs/admin-sdk"4import { TagSolid } from "@medusajs/icons"5
6const BrandsPage = () => {7  const [brands, setBrands] = useState<8    Record<string, string>[]9  >([])10  11  useEffect(() => {12    fetch(`/admin/brands`, {13      credentials: "include",14    })15    .then((res) => res.json())16    .then(({ brands: brandsData }) => {17      setBrands(brandsData)18    })19  }, [])20
21
22  return (23    <Container className="divide-y p-0">24      <div className="flex items-center justify-between px-6 py-4">25        <Heading level="h2">Brands</Heading>26      </div>27      <div className="flex h-full flex-col overflow-hidden !border-t-0">28        <Table>29          <Table.Header>30            <Table.Row>31              <Table.HeaderCell>ID</Table.HeaderCell>32              <Table.HeaderCell>Name</Table.HeaderCell>33            </Table.Row>34          </Table.Header>35          <Table.Body>36            {brands.map((brand) => (37              <Table.Row key={brand.id}>38                <Table.Cell>{brand.id}</Table.Cell>39                <Table.Cell>{brand.name}</Table.Cell>40              </Table.Row>41            ))}42          </Table.Body>43        </Table>44      </div>45    </Container>46  )47}48
49export default BrandsPage50
51// TODO export configuration

This adds a new page in the admin at http://localhost:9000/app/brands.

In the UI route's component, you retrieve the brands from the /admin/brands API route. You show the brands in a table.

Add UI Route to the Sidebar#

To add the UI route to the sidebar, replace the TODO at the end of the file with the following:

src/admin/routes/brands/page.tsx
1export const config = defineRouteConfig({2  label: "Brands",3  icon: TagSolid,4})

You export a config variable defined using the defineRouteConfig utility.

This indicates that a new item should be added to the sidebar with the title Brands and an icon from the Medusa Icons package.

Test it Out#

To test it out, start the Medusa application and login into the Medusa Admin.

You'll find a new "Brands" sidebar item. If you click on it, a new page opens showing the list of brands in your store.

Summary#

By following the examples of the previous chapters, you:

• Created a widget that showed the brand of a product in the Medusa Admin.
• Created a UI route that showed the list of brands in the Medusa Admin.

Next Steps#

In the next chapters, you'll learn how to integrate third-party systems into your Medusa application to sync brands.