filter by searchParams

src/app/layout.tsx

@@ -7,7 +7,7 @@ import { getHtmlAttributes } from "@codegouvfr/react-dsfr/next-appdir/getHtmlAtt
 // import { defaultColorScheme } from "@/styles/defaultColorScheme"
 import Header from "@/components/header"
 import Footer from "@/components/footer"
-import { StartDsfr } from "@/utils/start-dsfr"
+import { StartDsfr } from "@/components/start-dsfr"
 
 import "@/styles/globals.css"
 

src/app/startups/[id]/local-content.tsx

@@ -1,4 +1,4 @@
-import MDXComponent from "@/utils/mdx-component"
+import MDXComponent from "@/components/mdx-component"
 import getLocalContent from "./get-local-content"
 
 export default function LocalContent({ id }: { id: string }) {

src/app/startups/[id]/page.tsx

@@ -4,10 +4,10 @@ import { fr } from "@codegouvfr/react-dsfr"
 
 import getStartup from "./get-startup"
 import getStartups from "../get-startups"
-import RemoteContent from "./remote-content"
 import LocalContent from "./local-content"
-import RandomStartups from "@/components/random-startups"
+import RemoteContent from "./remote-content"
 import CallForIdeas from "@/components/call-for-ideas"
+import RandomStartups from "@/components/random-startups"
 
 export async function generateStaticParams() {
   const startups = getStartups()

src/app/startups/[id]/remote-content.tsx

@@ -1,6 +1,6 @@
 import { remark } from "remark"
 
-import MDXComponent from "@/utils/mdx-component"
+import MDXComponent from "@/components/mdx-component"
 
 export default async function RemoteContent({
   content_url_encoded_markdown,

src/app/startups/get-startups.ts

@@ -2,7 +2,7 @@ import json from "./startups.json"
 import type { Startup } from "./[id]/get-startup"
 import getOrganisation from "./[id]/get-organisation"
 
-export default function getStartups(): Startup[] {
+export default function getStartups(phase?: string): Startup[] {
   const data = json.data as Startup[]
   const excludedPhases = ["transfer", "alumni"]
 
@@ -14,17 +14,24 @@ export default function getStartups(): Startup[] {
       },
     } = startup
 
+    const currentPhase = phases[phases.length - 1]
+    // console.log("CURRENT PHASE", phase, startup.id, currentPhase)
+
     if (
       startup.type === "startup" &&
       startup.relationships.incubator.data.id === "sgmas" &&
-      !phases.some((phase) => excludedPhases.includes(phase.name))
+      !phases.some((phase) => excludedPhases.includes(phase.name)) &&
+      (!phase || currentPhase?.name === phase)
     ) {
       const organisation = getOrganisation(
         sponsor.replace("/organisations/", "")
       )
+
       if (organisation) {
         startup.attributes.organisation = organisation
       }
+      // console.log("PUSH", phase, startup.id, phases, currentPhase)
+
       startups.push(startup)
     }
 

src/app/startups/page.tsx

@@ -2,12 +2,16 @@ import { fr } from "@codegouvfr/react-dsfr"
 import StartupsList from "@/components/startups-list"
 import Filters from "@/components/startups-list/filters"
 
-export default function StartupsPage() {
+export default function StartupsPage({
+  searchParams: { phase },
+}: {
+  searchParams: { phase: string }
+}) {
   return (
     <section className={fr.cx("fr-container", "fr-pb-6w")}>
       <h1 className={fr.cx("fr-h1")}>Nos startups</h1>
       <Filters />
-      <StartupsList />
+      <StartupsList phase={phase} />
     </section>
   )
 }

src/components/startups-list/filters.tsx

@@ -1,16 +1,16 @@
 import Link from "next/link"
 
 export default function Filters() {
-  const statuses = ["investigation", "construction", "accélération", "succès"]
+  const phases = ["investigation", "construction", "acceleration", "success"]
 
   return (
     <div className="filters">
-      {statuses.map((status, i) => (
+      {phases.map((phase, i) => (
         <>
-          <Link key={i} href={{ query: { statut: status } }}>
-            {status}
+          <Link key={i} href={{ query: { phase } }}>
+            {phase}
           </Link>
-          &nbsp;|&nbsp;
+          {i < phases.length - 1 && <>&nbsp;|&nbsp;</>}
         </>
       ))}
     </div>

src/components/startups-list/index.tsx

@@ -1,8 +1,8 @@
 import Item from "./item"
 import getStartups from "../../app/startups/get-startups"
 
-export default function StartupsList() {
-  const startups = getStartups()
+export default function StartupsList({ phase }: { phase: string }) {
+  const startups = getStartups(phase)
 
   return (
     <div className="startups-list grid grid-cols-4 gap-6 fr-mt-6w">

src/components/startups-list/item.tsx

@@ -10,6 +10,7 @@ export default function StartupsListItem({ startup }: { startup: Startup }) {
   } = startup
   const phase = phases.pop()?.name
   const severity = phase === "success" ? "success" : "info"
+  // console.log("PHASE", id, phase)
 
   return (
     <Card