feat: add startups filters (#1048)

package.json

@@ -12,7 +12,7 @@
     "prebuild": "only-include-used-icons"
   },
   "dependencies": {
-    "@codegouvfr/react-dsfr": "0.73.2",
+    "@codegouvfr/react-dsfr": "0.75.3",
     "@next/mdx": "13.4.13",
     "@types/node": "20.4.6",
     "@types/react": "18.2.18",

src/app/(la-fabrique)/a-propos/page.tsx

@@ -2,8 +2,7 @@ import { fr } from "@codegouvfr/react-dsfr"
 import Image from "next/image"
 
 export default function AboutPage() {
-  const theme = fr.getColors(false)
-  const blueCumulus = theme.decisions.background.alt.blueCumulus.default
+  const blueCumulus = fr.colors.decisions.background.alt.blueCumulus.default
 
   return (
     <section>

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

@@ -2,12 +2,11 @@ import Image from "next/image"
 
 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 getStartups from "@/utils/get-startups"
 import CallForIdeas from "@/components/call-for-ideas"
+import RandomStartups from "@/components/random-startups"
 
 export async function generateStaticParams() {
   const startups = getStartups()
@@ -22,9 +21,8 @@ export default async function StartupPage({
 }: {
   params: { id: string }
 }) {
-  const startup = getStartup(id)
-  const theme = fr.getColors(false)
-  const blueCumulus = theme.decisions.background.alt.blueCumulus.default
+  const [startup, ...rest] = getStartups({ id })
+  const blueCumulus = fr.colors.decisions.background.alt.blueCumulus.default
 
   const {
     attributes: {

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/components/breadcrumbs.tsx

@@ -1,12 +1,13 @@
 "use client"
+
 import { usePathname } from "next/navigation"
 import { Breadcrumb } from "@codegouvfr/react-dsfr/Breadcrumb"
 
+import getStartups from "@/utils/get-startups"
+
 import type { ReactNode } from "react"
 import type { RegisteredLinkProps } from "@codegouvfr/react-dsfr/link"
 
-import getStartup from "@/app/startups/[id]/get-startup"
-
 function capitalizeFirstLetter(s: string) {
   return s.charAt(0).toUpperCase() + s.slice(1)
 }
@@ -27,7 +28,8 @@ export default function Breadcrumbs() {
   if (crumbs.length === 1) {
     currentPageLabel = capitalizeFirstLetter(crumbs[0])
   } else {
-    currentPageLabel = getStartup(crumbs[1]).attributes.name
+    const [startup, ...rest] = getStartups({ id: crumbs[1] })
+    currentPageLabel = startup.attributes.name
     segments = [
       {
         label: capitalizeFirstLetter(crumbs[0]),

src/components/header.tsx

@@ -23,7 +23,7 @@ export default function Header() {
         </>
       }
       navigation={<NavigationSuspense />}
-      quickAccessItems={quickAccessItems}
+      // quickAccessItems={quickAccessItems}
       serviceTitle="La Fabrique Numérique"
       serviceTagline="L'incubateur des ministères sociaux"
       homeLinkProps={{ href: "/", title: "Accueil - La Fabrique Numérique" }}

src/components/random-startups.tsx

@@ -1,5 +1,5 @@
 import Item from "@/components/startups-list/item"
-import getStartups from "@/app/startups/get-startups"
+import getStartups from "@/utils/get-startups"
 import getRandomEntries from "@/utils/get-random-entries"
 
 export default function RandomStartups() {

src/components/startups-list/filters.tsx

@@ -0,0 +1,25 @@
+export default function Filters({
+  selectedPhase,
+  onClick,
+}: {
+  selectedPhase?: string
+  onClick: (phase: string) => void
+}) {
+  const phases = ["investigation", "construction", "acceleration", "success"]
+
+  return (
+    <div className="filters flex">
+      {phases.map((phase, i) => (
+        <div className="filter flex" key={`phase-filter-${phase}`}>
+          <div
+            onClick={() => onClick(phase)}
+            className={selectedPhase === phase ? "selected text-red-700" : ""}
+          >
+            {phase}
+          </div>
+          {i < phases.length - 1 && <>&nbsp;|&nbsp;</>}
+        </div>
+      ))}
+    </div>
+  )
+}

src/components/startups-list/index.tsx

@@ -1,14 +1,34 @@
+"use client"
+
+import { useState } from "react"
+
 import Item from "./item"
-import getStartups from "../../app/startups/get-startups"
+import Filters from "./filters"
+import getStartups from "@/utils/get-startups"
 
 export default function StartupsList() {
   const startups = getStartups()
+  const [selectedPhase, setSelectedPhase] = useState<string>()
+
+  function handleClick(phase: string) {
+    setSelectedPhase(phase)
+  }
+
+  const filteredStartups = selectedPhase
+    ? startups.filter(
+        (startup) =>
+          startup.attributes.phases.slice(-1).pop()?.name === selectedPhase
+      )
+    : startups
 
   return (
-    <div className="startups-list grid grid-cols-4 gap-6 fr-mt-6w">
-      {startups.map((startup) => (
-        <Item key={startup.id} startup={startup} />
-      ))}
+    <div className="startups">
+      <Filters onClick={handleClick} selectedPhase={selectedPhase} />
+      <div className="startups-list grid grid-cols-4 gap-6 fr-mt-6w">
+        {filteredStartups.map((startup) => (
+          <Item key={startup.id} startup={startup} />
+        ))}
+      </div>
     </div>
   )
 }

src/components/startups-list/item.tsx

@@ -1,23 +1,23 @@
 import { Card } from "@codegouvfr/react-dsfr/Card"
 import { Badge } from "@codegouvfr/react-dsfr/Badge"
 
-import { type Startup } from "../../app/startups/[id]/get-startup"
+import type { Startup } from "@/utils/get-startups"
 
 export default function StartupsListItem({ startup }: { startup: Startup }) {
   const {
     id,
     attributes: { name, pitch, phases, organisation },
   } = startup
-  const phase = phases.pop()?.name
+  const phase = phases.slice(-1).pop()?.name
   const severity = phase === "success" ? "success" : "info"
 
   return (
     <Card
       key={id}
       enlargeLink
-      title={`${name} (${organisation?.acronym})`}
       desc={pitch}
       linkProps={{ href: `/startups/${id}` }}
+      title={`${name} (${organisation?.acronym})`}
       imageAlt="image d'illustration de la startup"
       imageUrl={`https://beta.gouv.fr/img/startups/${id}.png`}
       start={

src/app/startups/[id]/get-organisation.ts → src/utils/get-organisation.ts

@@ -1,4 +1,4 @@
-import organisations from "../organisations.json"
+import organisations from "@/data/organisations.json"
 
 export type Organisation = (typeof organisations)[number]
 

src/app/startups/get-startups.ts → src/utils/get-startups.ts

@@ -1,8 +1,20 @@
-import json from "./startups.json"
-import { Startup } from "./[id]/get-startup"
-import getOrganisation from "./[id]/get-organisation"
+import json from "@/data/startups.json"
+import getOrganisation, { type Organisation } from "./get-organisation"
 
-export default function getStartups(): Startup[] {
+export type Startup = Extract<
+  (typeof json)["data"][number],
+  { attributes: any }
+> & {
+  attributes: { organisation: Organisation }
+}
+
+export default function getStartups({
+  id,
+  phase,
+}: {
+  id?: string
+  phase?: string
+} = {}): Startup[] {
   const data = json.data as Startup[]
   const excludedPhases = ["transfer", "alumni"]
 
@@ -14,17 +26,23 @@ export default function getStartups(): Startup[] {
       },
     } = startup
 
+    const currentPhase = phases[phases.length - 1]
+
     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) &&
+      (!id || startup.id === id)
     ) {
       const organisation = getOrganisation(
         sponsor.replace("/organisations/", "")
       )
+
       if (organisation) {
         startup.attributes.organisation = organisation
       }
+
       startups.push(startup)
     }
 

yarn.lock

@@ -19,10 +19,10 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@codegouvfr/react-dsfr@0.73.2":
-  version "0.73.2"
-  resolved "https://registry.yarnpkg.com/@codegouvfr/react-dsfr/-/react-dsfr-0.73.2.tgz#765f6306936c9b3eb9d766151a78d54aff6705ea"
-  integrity sha512-hBdlD27/LR8IZ6ZE99vM70UdoJX83LsBpude+Lu2qxxoFNhFQ00aOmHdfYqnUYXH/M7bwWX8xBHV87V9T1zLUg==
+"@codegouvfr/react-dsfr@0.75.3":
+  version "0.75.3"
+  resolved "https://registry.yarnpkg.com/@codegouvfr/react-dsfr/-/react-dsfr-0.75.3.tgz#8f9218d134693d6b296a1ee23ee28c961664a786"
+  integrity sha512-ltOlkdh35oCJG0P1iIRx0DNLYVbBBTrhNdFoxRczC1Q9WVQIVN5NnyniMMIEWszysg9zRQBWHfOqkcbact7Ngw==
   dependencies:
     tsafe "^1.6.3"