♻️ improve redirects using URL generator and update project links with type safety

Author: junkisai

frontend/apps/app/app/(app)/app/page.tsx

@@ -1,4 +1,5 @@
 import { createClient } from '@/libs/db/server'
+import { urlgen } from '@/utils/routes'
 import { prisma } from '@liam-hq/db'
 import { redirect } from 'next/navigation'
 
@@ -7,7 +8,7 @@ export default async function Page() {
 
   const { data, error } = await supabase.auth.getUser()
   if (error || !data?.user) {
-    redirect('/app/login')
+    redirect(urlgen('login'))
   }
 
   const projects = await prisma.project.findMany({
@@ -18,8 +19,8 @@ export default async function Page() {
   })
 
   if (projects.length > 0) {
-    redirect('/app/projects')
+    redirect(urlgen('projects'))
   }
 
-  redirect('/app/projects/new')
+  redirect(urlgen('projects/new'))
 }

frontend/apps/app/app/(app)/app/projects/[projectId]/erd/[branchOrCommit]/[...slug]/page.tsx

@@ -1,6 +1,7 @@
 import path from 'node:path'
 import type { PageProps } from '@/app/types'
 import { createClient } from '@/libs/db/server'
+import { branchOrCommitSchema } from '@/utils/routes'
 import {
   type DBStructure,
   applyOverrides,
@@ -64,7 +65,7 @@ const processOverrideFile = async (
 
 const paramsSchema = v.object({
   projectId: v.string(),
-  branchOrCommit: v.string(),
+  branchOrCommit: branchOrCommitSchema,
   slug: v.array(v.string()),
 })
 

frontend/apps/app/components/CommonLayout/CommonLayout.tsx

@@ -1,3 +1,4 @@
+import { urlgen } from '@/utils/routes'
 import Link from 'next/link'
 import type React from 'react'
 import type { ReactNode } from 'react'
@@ -18,7 +19,7 @@ export const CommonLayout: React.FC<CommonLayoutProps> = ({ children }) => {
         <nav className={styles.nav}>
           <ul>
             <li>
-              <Link href="/app/projects" className={styles.link}>
+              <Link href={urlgen('projects')} className={styles.link}>
                 <span className={styles.icon}>📁</span>
                 Projects
               </Link>

frontend/apps/app/features/migrations/pages/MigrationDetailPage/MigrationDetailPage.tsx

@@ -1,3 +1,4 @@
+import { urlgen } from '@/utils/routes'
 import { prisma } from '@liam-hq/db'
 import { getPullRequestDetails, getPullRequestFiles } from '@liam-hq/github'
 import { minimatch } from 'minimatch'
@@ -78,7 +79,11 @@ async function getMigrationContents(migrationId: string) {
     )
 
   const erdLinks = matchedFiles.map((filename) => ({
-    path: `/app/projects/${overallReview.projectId}/erd/${prDetails.head.ref}/${filename}`,
+    path: urlgen('projects/[projectId]/erd/[branchOrCommit]/[...slug]', {
+      projectId: `${overallReview.projectId}`,
+      branchOrCommit: prDetails.head.ref,
+      slug: filename,
+    }),
     filename,
   }))
 
@@ -101,7 +106,10 @@ export const MigrationDetailPage: FC<Props> = async ({ migrationId }) => {
 
   return (
     <main className={styles.wrapper}>
-      <Link href={`/app/projects/${projectId}`} className={styles.backLink}>
+      <Link
+        href={urlgen('projects/[projectId]', { projectId: `${projectId}` })}
+        className={styles.backLink}
+      >
         ← Back to Project Detail
       </Link>
 

frontend/apps/app/features/projects/actions/addProject.ts

@@ -1,5 +1,6 @@
 'use server'
 
+import { urlgen } from '@/utils/routes'
 import { prisma } from '@liam-hq/db'
 import { redirect } from 'next/navigation'
 
@@ -34,5 +35,5 @@ export const addProject = async (formData: FormData) => {
     return project
   })
 
-  redirect(`/app/projects/${result.id}`)
+  redirect(urlgen('projects/[projectId]', { projectId: `${result.id}` }))
 }

frontend/apps/app/features/projects/actions/approveKnowledgeSuggestion.ts

@@ -1,5 +1,6 @@
 'use server'
 
+import { urlgen } from '@/utils/routes'
 import { prisma } from '@liam-hq/db'
 import { updateFileContent } from '@liam-hq/github'
 import { redirect } from 'next/navigation'
@@ -84,7 +85,10 @@ export const approveKnowledgeSuggestion = async (formData: FormData) => {
 
     // Redirect back to the knowledge suggestion detail page
     redirect(
-      `/app/projects/${suggestion.projectId}/knowledge-suggestions/${suggestionId}`,
+      urlgen('projects/[projectId]/knowledge-suggestions/[id]', {
+        projectId: `${suggestion.projectId}`,
+        id: `${suggestionId}`,
+      }),
     )
   } catch (error) {
     console.error('Error approving knowledge suggestion:', error)

frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx

@@ -1,3 +1,4 @@
+import { urlgen } from '@/utils/routes'
 import { prisma } from '@liam-hq/db'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
@@ -61,7 +62,9 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
       <div>
         <div>
           <Link
-            href={`/app/projects/${projectId}/knowledge-suggestions`}
+            href={urlgen('projects/[projectId]/knowledge-suggestions', {
+              projectId,
+            })}
             aria-label="Back to knowledge suggestions list"
           >
             ← Back to Knowledge Suggestions

frontend/apps/app/features/projects/pages/KnowledgeSuggestionsListPage/KnowledgeSuggestionsListPage.tsx

@@ -1,3 +1,4 @@
+import { urlgen } from '@/utils/routes'
 import { prisma } from '@liam-hq/db'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
@@ -47,7 +48,9 @@ export const KnowledgeSuggestionsListPage: FC<Props> = async ({
       <div>
         <div>
           <Link
-            href={`/app/projects/${projectId}`}
+            href={urlgen('projects/[projectId]', {
+              projectId,
+            })}
             aria-label="Back to project details"
           >
             ← Back to Project
@@ -66,7 +69,13 @@ export const KnowledgeSuggestionsListPage: FC<Props> = async ({
             {knowledgeSuggestions.map((suggestion) => (
               <li key={suggestion.id}>
                 <Link
-                  href={`/app/projects/${projectId}/knowledge-suggestions/${suggestion.id}`}
+                  href={urlgen(
+                    'projects/[projectId]/knowledge-suggestions/[id]',
+                    {
+                      projectId,
+                      id: `${suggestion.id}`,
+                    },
+                  )}
                 >
                   <div>{suggestion.title}</div>
                   <div>

frontend/apps/app/features/projects/pages/ProjectDetailPage/ProjectDetailPage.tsx

@@ -1,3 +1,4 @@
+import { urlgen } from '@/utils/routes'
 import { prisma } from '@liam-hq/db'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
@@ -76,7 +77,7 @@ export const ProjectDetailPage: FC<Props> = async ({ projectId }) => {
       <div className={styles.header}>
         <div className={styles.headerLeft}>
           <Link
-            href="/app/projects"
+            href={urlgen('projects')}
             className={styles.backLink}
             aria-label="Back to projects list"
           >
@@ -86,13 +87,17 @@ export const ProjectDetailPage: FC<Props> = async ({ projectId }) => {
         </div>
         <div className={styles.headerActions}>
           <Link
-            href={`/app/projects/${project.id}/migrations`}
+            href={urlgen('projects/[projectId]/migrations', {
+              projectId,
+            })}
             className={styles.actionButton}
           >
             View Migrations
           </Link>
           <Link
-            href={`/app/projects/${project.id}/docs`}
+            href={urlgen('projects/[projectId]/docs', {
+              projectId,
+            })}
             className={styles.actionButton}
           >
             View Docs
@@ -111,7 +116,9 @@ export const ProjectDetailPage: FC<Props> = async ({ projectId }) => {
           {project.migrations.map((migration) => (
             <li key={migration.id}>
               <Link
-                href={`/app/migrations/${migration.id}`}
+                href={urlgen('migrations/[migrationId]', {
+                  migrationId: `${migration.id}`,
+                })}
                 style={{
                   textDecoration: 'underline',
                 }}

frontend/apps/app/features/projects/pages/ProjectsPage/ProjectsPage.tsx

@@ -1,3 +1,4 @@
+import { urlgen } from '@/utils/routes'
 import Link from 'next/link'
 import type { FC } from 'react'
 import styles from './ProjectsPage.module.css'
@@ -10,7 +11,7 @@ export const ProjectsPage: FC = async () => {
     <div className={styles.container}>
       <div className={styles.header}>
         <h1 className={styles.title}>Projects</h1>
-        <Link href="/app/projects/new" className={styles.createButton}>
+        <Link href={urlgen('projects/new')} className={styles.createButton}>
           Create New Project
         </Link>
       </div>
@@ -25,7 +26,9 @@ export const ProjectsPage: FC = async () => {
           {projects.map((project) => (
             <Link
               key={project.id}
-              href={`/app/projects/${project.id}`}
+              href={urlgen('projects/[projectId]', {
+                projectId: `${project.id}`,
+              })}
               className={styles.projectCard}
             >
               <h2>{project.name || 'Untitled Project'}</h2>