Ajout d’un back-office admin avec React Router 7

1
import { SidebarProvider, SidebarTrigger } from "~/components/ui/sidebar"
2
import { AdminSidebar } from "./_adminLayout"
3

4
export default function AdminLayout() {
5
  return (
6
    <SidebarProvider>
7
      <AdminSidebar />                 {/* sidebar Shadcn – 100 % responsive */}
8
      <SidebarTrigger className="-ml-1" />
9

10
      {/* contenu injecté par les routes enfants */}
11
      <main className="flex flex-1 flex-col gap-4 p-4">
12
        <Outlet />
13
      </main>
14
    </SidebarProvider>
15
  )
16
}

1
export async function loader() {
2
  return { products: await adminGetProducts() }
3
}
4

5
export default function ProductsPage() {
6
  const { products } = useLoaderData<typeof loader>()
7
  return (
8
    <DataTable
9
      columns={adminProductsColumns}
10
      data={products}
11
      searchPlaceholder="Rechercher..."
12
    />
13
  )
14
}

1
export const adminProductsColumns: ColumnDef<Product>[] = [
2
  { accessorKey: "name", header: "Nom", cell: NameCell },
3
  { accessorKey: "priceCents", header: "Prix", cell: PriceCell },
4
  { accessorKey: "stock", header: "Stock", cell: StockBadge },
5
  {
6
    accessorKey: "isActive",
7
    header: "Statut",
8
    cell: ({ row }) => <ProductStatusToggle product={row.original} />,
9
  },
10
  { id: "actions", header: "Actions", cell: ActionsCell },
11
]

1
const ProductStatusToggle = ({ product }: { product: Product }) => {
2
  const fetcher = useFetcher()
3
  const [form, fields] = useForm({
4
    constraint: getZodConstraint(ToggleStatusSchema),
5
    onValidate: ({ formData }) =>
6
      parseWithZod(formData, { schema: ToggleStatusSchema }),
7
  })
8

9
  return (
10
    <fetcher.Form method="POST" {...getFormProps(form)} style={{ display:"contents" }}>
11
      <input {...getInputProps(fields.intent, { type:"hidden" })} value="toggle-status" />
12
      <input {...getInputProps(fields.productSlug,{ type:"hidden" })} value={product.slug} />
13
      <Switch
14
        checked={product.isActive}
15
        onClick={(e) => fetcher.submit(e.currentTarget.form)}
16
      />
17
    </fetcher.Form>
18
  )
19
}

1
formData.set("intent", "delete-product")

1
export const ActionSchema = z.discriminatedUnion("intent", [
2
  ToggleStatusSchema,
3
  DeleteProductSchema,
4
])
5

6
switch (submission.value.intent) {
7
  case "toggle-status": await toggleProductStatus(slug); break
8
  case "delete-product": await deleteProduct(slug); break
9
}

1
export const ProductSchema = z.object({
2
  name: z.string().min(1),
3
  slug: z.string().min(1),
4
  description: z.string().optional(),
5
  content: z.string().optional(),
6
  priceCents: z.coerce.number().min(0),
7
  currency: z.string().default("EUR"),
8
  stock: z.coerce.number().min(0),
9
  isActive: z.boolean().default(false),
10
})

1
<Field
2
  labelProps={{ children:"Slug" }}
3
  inputProps={{
4
    ...getInputProps(fields.slug,{ type:"text" }),
5
    placeholder:"nouveau-robot-ultra-pro",
6
  }}
7
  errors={fields.slug.errors}
8
/>

1
<Navbar />
2
<main className="flex-1">
3
  <Outlet />
4
</main>
5
<Footer />