Merge pull request #17 from alexfauquette/dossier-root

app/dossiers/dossier/page.tsx

@@ -10,12 +10,6 @@ import { HeroSection } from "@/components/folders/HeroSection";
 import { PreviewTab } from "@/components/folders/PreviewTab";
 import { DebateTab } from "@/components/folders/DebateTab";
 
-interface TabPanelProps {
-  children?: React.ReactNode;
-  index: number;
-  value: number;
-}
-
 export default function Dossier() {
   const [tabNumber, setTabNumber] = React.useState(0);
 

app/dossiers/page.tsx

@@ -1,6 +1,39 @@
-import Link from "next/link";
+"use client";
 
-export default function Dossiers() {
-  // TODO: match old website url ":id/dossiers/:id"
-  return <Link href="dossiers/dossier">Lien vers un dossier</Link>;
+import React from "react";
+import Container from "@mui/material/Container";
+import Stack from "@mui/material/Stack";
+
+import { FilterContainer } from "@/components/FilterContainer";
+
+import { Filter } from "@/components/folderHomePage/Filter";
+import DossierList from "@/components/folderHomePage/DossierList";
+
+export default function Dossiers(props: {
+  searchParams: { theme?: string; search?: string };
+}) {
+  const { searchParams } = props;
+
+  return (
+    <Container
+      sx={{
+        pt: 3,
+        display: "flex",
+        flexDirection: {
+          xs: "column",
+          md: "row",
+        },
+        gap: 5,
+      }}
+    >
+      <Stack spacing={3} useFlexGap flex={2}>
+        <FilterContainer>
+          <Filter theme={searchParams.theme ?? ""} />
+        </FilterContainer>
+      </Stack>
+      <Stack spacing={3} flex={5} sx={{ minWidth: 0 }}>
+        <DossierList theme={searchParams.theme ?? ""} search="" />
+      </Stack>
+    </Container>
+  );
 }

components/FilterContainer.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+
+import TuneIcon from "@mui/icons-material/Tune";
+
+import { MinusIcon } from "@/icons/MinusIcon";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { Paper } from "@mui/material";
+
+export const FilterContainer = ({
+  children,
+  disableCollapse: disableCollapseProps,
+}: React.PropsWithChildren<{ disableCollapse?: boolean }>) => {
+  const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up("md"));
+
+  const disableCollapse =
+    disableCollapseProps === undefined ? isDesktop : disableCollapseProps;
+
+  if (disableCollapse) {
+    return (
+      <Paper sx={{ px: 2, py: 1.5, bgcolor: "grey.50" }} elevation={0}>
+        <Stack direction="row" sx={{ mb: 2 }}>
+          <TuneIcon />
+          <Typography sx={{ ml: 1 }}>Filter</Typography>
+        </Stack>
+        <Stack
+          direction="column"
+          spacing={2}
+          sx={{ [".MuiInputBase-root"]: { bgcolor: "white" } }}
+        >
+          {children}
+        </Stack>
+      </Paper>
+    );
+  }
+  return (
+    <Accordion elevation={0} disableGutters defaultExpanded color="secondary">
+      <AccordionSummary
+        expandIcon={<MinusIcon sx={{ fontSize: "10px" }} />}
+        aria-controls="commission-content"
+        id="commission-header"
+      >
+        <TuneIcon />
+        <Typography sx={{ ml: 1 }}>Filter</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Stack
+          direction="column"
+          spacing={2}
+          sx={{ [".MuiInputBase-root"]: { bgcolor: "white" } }}
+        >
+          {children}
+        </Stack>
+      </AccordionDetails>
+    </Accordion>
+  );
+};

components/ThemeRegistry/theme.tsx

@@ -118,14 +118,8 @@ const theme = createTheme({
       styleOverrides: {
         root: ({ ownerState }) => ({
           borderRadius: "4px",
-          "& .MuiAccordionSummary-root": {
-            backgroundColor:
-              ownerState.color === "secondary" ? "#F8F9FA" : "#FFFFFF",
-          },
-          "& .MuiCollapse-root": {
-            backgroundColor:
-              ownerState.color === "secondary" ? "#F8F9FA" : "#FFFFFF",
-          },
+          backgroundColor:
+            ownerState.color === "secondary" ? "#F8F9FA" : "#FFFFFF",
           "&:before": {
             display: "none",
           },

components/const.ts

@@ -67,3 +67,18 @@ export const partis: Record<PartisKeys, PartisInfo> = {
     fullName: "Députés Non Inscrit",
   },
 };
+
+export type ThemeKeys =
+  | "Environement"
+  | "Transport"
+  | "Défense"
+  | "Agriculture"
+  | "Economie";
+
+export const THEMES: ThemeKeys[] = [
+  "Environement",
+  "Transport",
+  "Défense",
+  "Agriculture",
+  "Economie",
+];