Route Names and Folder Structure

For a well-organized application, it's important to follow a consistent routing pattern. Here's an example using the content entity:

• /entities: Main route where we fetch and display all content entities
• /entities/create: Route for creating new entity entries
• /entities/details/[entityId]: Route for viewing details of a specific entity, using the server action getEntityById
• /entities/details/[entityId]/edit: Route for editing a specific entity, example page below

import Loader from '@/components/Loader';
import EditEntityForm from '@/components/entitiesPage/details/EditEntityForm';
import PageHeader from '@/components/ui/page-header';
import { getEntityById } from '@/lib/actions/Entities';
import { getUserId } from '@/lib/actions/User';
import React, { Suspense } from 'react';
import { toast } from 'sonner';

const EditEntityPage = async ({ params }: { params: any }) => {
  const entityId = params.entityId;

  const { data, error, message, status } = await getEntityById(entityId);
  const { id } = await getUserId();

  if (error) {
    console.error('Error getting entity => ', error);
    toast.error(message);
    return <div>Error getting entity = {error}</div>;
  }

  if (data === null || data === undefined) {
    console.error('Error getting entity => ', error);
    toast.error(message);
  }

  return (
    <Suspense fallback={<Loader />}>
      <PageHeader
        title="Edit Entity"
        backUrl={`/entities/details/${data?.id}`}
      />
      {data === null || data === undefined ? (
        <div>No entity found = {message}</div>
      ) : (
        <EditEntityForm entityData={data} userId={id || ''} />
      )}
    </Suspense>
  );
};

export default EditEntityPage;

Edit Entity Page Folder Structure