laconic-deploy/qwrk-docs/project-docs/frontend/CURRENT_ROUTING.md

Current Routing Structure

This document provides an overview of the current routing implementation in the frontend package. The routing is currently spread across multiple files, making it difficult to follow and maintain.

Main Router Configuration

The main router is defined in src/App.tsx using createBrowserRouter from React Router v6:

// src/App.tsx
const router = createBrowserRouter([
  {
    path: ':orgSlug',
    element: <DashboardLayout />,
    children: [
      {
        element: <ProjectSearchLayout />,
        children: [
          {
            path: '',
            element: <ProjectsScreen />,
          },
          {
            path: 'projects',
            children: projectsRoutesWithSearch,
          },
        ],
      },
      {
        path: 'settings',
        element: <Settings />,
      },
      {
        path: 'projects',
        children: projectsRoutesWithoutSearch,
      },
    ],
  },
  {
    path: '/',
    element: <Index />,
  },
  {
    path: '/login',
    element: <AuthPage />,
  },
  {
    path: '/buy-prepaid-service',
    element: <BuyPrepaidService />,
    errorElement: <div>Something went wrong!</div>,
  },
]);

The router is then provided to the application using RouterProvider:

// src/App.tsx
return (
  <ThemeProvider attribute='class' defaultTheme='system' enableSystem>
    <RouterProvider router={router} fallbackElement={<div>Loading...</div>} />
  </ThemeProvider>
);

Route Definitions in Other Files

The main router imports route definitions from other files:

Project Routes

Project routes are split into two arrays defined in src/pages/org-slug/projects/project-routes.tsx:

// src/pages/org-slug/projects/project-routes.tsx
export const projectsRoutesWithoutSearch = [
  {
    path: 'create',
    element: <CreateProjectLayout />,
    children: createProjectRoutes,
  },
  {
    path: ':id/settings/domains/add',
    element: <AddDomain />,
    children: addDomainRoutes,
  },
];

export const projectsRoutesWithSearch = [
  {
    path: ':id',
    element: <Id />,
    children: projectTabRoutes,
  },
];

Create Project Routes

Create project routes are defined in src/pages/org-slug/projects/create/create-project-routes.tsx:

// src/pages/org-slug/projects/create/create-project-routes.tsx
export const createProjectRoutes = [
  {
    index: true,
    element: <NewProject />,
  },
  {
    path: 'template',
    element: <CreateWithTemplate />,
    children: templateRoutes,
  },
  {
    path: 'success/:id',
    element: <Id />,
  },
  {
    path: 'configure',
    element: <Configure />,
  },
  {
    path: 'deploy',
    element: <Deploy />,
  },
];

Project Tab Routes

Project tab routes are defined in src/pages/org-slug/projects/id/routes.tsx:

// src/pages/org-slug/projects/id/routes.tsx
export const projectTabRoutes = [
  {
    index: true,
    element: <OverviewTabPanel />,
  },
  {
    path: 'deployments',
    element: <DeploymentsTabPanel />,
  },
  {
    path: 'integrations',
    element: <Integrations />,
  },
  {
    path: 'settings',
    element: <SettingsTabPanel />,
    children: settingsTabRoutes,
  },
];

Settings Tab Routes

Settings tab routes are defined in the same file:

// src/pages/org-slug/projects/id/routes.tsx
export const settingsTabRoutes = [
  {
    index: true,
    element: <GeneralTabPanel />,
  },
  {
    path: 'domains',
    element: <Domains />,
  },
  {
    path: 'git',
    element: <GitTabPanel />,
  },
  {
    path: 'environment-variables',
    element: <EnvironmentVariablesTabPanel />,
  },
  {
    path: 'collaborators',
    element: <CollaboratorsTabPanel />,
  },
];

Layout Components

The application uses several layout components that render the Outlet component from React Router to display nested routes:

DashboardLayout

// src/layouts/DashboardLayout.tsx
export const DashboardLayout = ({ className, ...props }: DashboardLayoutProps) => {
  return (
    <ThemeProvider attribute='class' defaultTheme='system' enableSystem>
      <section {...props} className={cn('h-full', className)}>
        <WalletContextProvider>
          <OctokitProviderWithRouter>
            <NavigationWrapper>
              <Outlet />
            </NavigationWrapper>
          </OctokitProviderWithRouter>
        </WalletContextProvider>
      </section>
    </ThemeProvider>
  );
};

Current Issues

1. Scattered Route Definitions: Routes are defined across multiple files, making it difficult to understand the overall routing structure.
2. Inconsistent Error Handling: Only some routes have error elements defined.
3. No Centralized Loading State: Loading states are handled inconsistently or not at all.
4. No Lazy Loading: Components are imported directly, without using code splitting.
5. No Standardized 404 Handling: There's no catch-all route for handling 404 errors.
6. Limited Type Safety: Route definitions lack comprehensive TypeScript typing.
7. No Reusable Error Boundaries: Error handling is ad-hoc rather than using reusable components.

These issues will be addressed in the new routing strategy.