Add Prinzipien page and query

digitalservicebund · Oct 18, 2024 · 2c909b8 · 2c909b8
1 parent 981ad98
commit 2c909b8
Show file tree

Hide file tree

Showing 3 changed files with 229 additions and 144 deletions.
diff --git a/packages/dito/app/routes/digitaltauglichkeit.prinzipien.$prinzip.tsx b/packages/dito/app/routes/digitaltauglichkeit.prinzipien.$prinzip.tsx
diff --git a/packages/dito/app/routes/digitaltauglichkeit.prinzipien/route.tsx b/packages/dito/app/routes/digitaltauglichkeit.prinzipien/route.tsx
@@ -1,21 +1,14 @@
 import Background from "@digitalcheck/shared/components/Background.tsx";
 import Container from "@digitalcheck/shared/components/Container.tsx";
-import DetailInfo from "@digitalcheck/shared/components/DetailInfo.tsx";
-import { json, redirect } from "@remix-run/node";
-import {
- MetaFunction,
- Outlet,
- useLoaderData,
- useNavigate,
-} from "@remix-run/react";
-import { useState } from "react";
+import { redirect } from "@remix-run/node";
+import { json, Link, MetaFunction, useLoaderData } from "@remix-run/react";
 import {
  ROUTE_LANDING,
  ROUTE_PRINZIPLES,
 } from "../../resources/staticRoutes.ts";
 import unleash from "../../utils/featureFlags.server.ts";
 import prependMetaTitle from "../../utils/metaTitle.ts";
-import { getPrinzips, PrinzipRecord } from "../../utils/strapiData.server.ts";
+import { getPrinzips, Prinzip } from "../../utils/strapiData.server.ts";
 
 export const meta: MetaFunction = ({ matches }) => {
  return prependMetaTitle(ROUTE_PRINZIPLES.title, matches);
@@ -33,52 +26,37 @@ export async function loader() {
 
  const prinzipData = await getPrinzips();
 
- return json({
- prinzips: prinzipData ? prinzipData.data : [],
+ const test = json({
+ prinzips: prinzipData?.data.prinzips,
  });
+ return test;
 }
 
-export default function Prinzip() {
- const { prinzips } = useLoaderData<{ prinzips: PrinzipRecord[] }>();
-
- const navigate = useNavigate();
-
- const [selectedPrinciple, setSelectedPrinciple] = useState("Alle Prinzipien");
-
- const handleSelectChange = (selectedValue: string) => {
- const selectedOption = prinzips.find(
- (principle: PrinzipRecord) => principle.Name === selectedValue,
- );
-
- if (selectedOption) {
- setSelectedPrinciple(selectedOption.Name);
- navigate(selectedOption.slug, { state: { prinzip: selectedOption } });
- } else {
- setSelectedPrinciple("Alle Prinzipien");
- }
- };
+export default function Prinzipien() {
+ const { prinzips } = useLoaderData<{ prinzips: Prinzip[] }>();
 
  return (
  <>
  <Background backgroundColor="blue">
  <Container>
+ {/*
  <h1>{selectedPrinciple}</h1>
+*/}
  </Container>
  </Background>
- <Container>
+ {/* <Container>
  <DetailInfo
  isSelectable={true}
- selectOptions={prinzips.map((prinzip: PrinzipRecord) => prinzip.Name)}
+ selectOptions={prinzips.map((prinzip: Prinzip) => prinzip.Name)}
  onChange={(e) => handleSelectChange(e.target.value)}
  />
- </Container>
- <Outlet />
- {/* <div>
+ </Container>*/}
+ <div>
  <h1>Prinzipien</h1>
  <nav>
  {prinzips.length ? (
  <ul>
- {prinzips.map((prinzip: PrinzipRecord) => (
+ {prinzips.map((prinzip) => (
  <li key={prinzip.documentId}>
  <Link to={`${prinzip.slug}`} state={{ prinzip }}>
  {prinzip.Name ? <>{prinzip.Name}</> : <i>No Name</i>}{" "}
@@ -92,7 +70,8 @@ export default function Prinzip() {
  </p>
  )}
  </nav>
- </div>*/}
+ </div>
+ {/*<Outlet />*/}
  </>
  );
 }