wip: testing next dynamic router with questions data

apps/web/app/[lang]/otazky/[id]/page.tsx

@@ -0,0 +1,41 @@
+import OtazkaComponent from "../../../temp/OtazkaComponent";
+
+export async function generateStaticParams() {
+  const res = await fetch(
+    "https://www.volebnikalkulacka.cz/data/instance/volebnikalkulacka.cz/krajske-2024/10-jihomoravsky/questions.json",
+  );
+  const data = await res.json();
+
+  return data.map((question) => ({
+    id: question.id,
+  }));
+}
+
+async function getQuestion(id) {
+  const res = await fetch(
+    "https://www.volebnikalkulacka.cz/data/instance/volebnikalkulacka.cz/krajske-2024/10-jihomoravsky/questions.json",
+  );
+  const data = await res.json();
+  const question = data.filter((question) => question.id === id);
+  return question;
+}
+
+export default async function Page({ params }) {
+  const questionArray = await getQuestion(params.id);
+  // convert object to array
+  const convertArrayToObject = (array) => {
+    if (array.length === 1) {
+      return array[0];
+    }
+    throw "Array containt more than 1 item!";
+  };
+  const question = await convertArrayToObject(questionArray);
+  console.log(questionArray);
+  return (
+    <OtazkaComponent
+      key={question.id}
+      statement={question.statement}
+      detail={question.detail}
+    />
+  );
+}

apps/web/app/[lang]/otazky/page.tsx

@@ -0,0 +1,35 @@
+import type { Question } from "@repo/schema/dist";
+import OtazkaComponent from "../../temp/OtazkaComponent";
+
+type Props = {
+  params: { otazkaId: string };
+};
+
+async function getData() {
+  const res = await fetch(
+    "https://www.volebnikalkulacka.cz/data/instance/volebnikalkulacka.cz/krajske-2024/10-jihomoravsky/questions.json",
+  );
+  const data = await res.json();
+  return data;
+}
+export default async function Page({ params }: Props) {
+  const questions = await getData();
+  return (
+    <>
+      <h1>Otazky page {params.otazkaId}</h1>
+      <span>ID otázky:</span>
+      {questions.length > 0 &&
+        questions.map((item: any) => {
+          return (
+            // understand type error here
+            <OtazkaComponent
+              key={item.id}
+              statement={item.statement}
+              detail={item.detail}
+              id={item.id}
+            />
+          );
+        })}
+    </>
+  );
+}

apps/web/app/temp/OtazkaButton.tsx

@@ -0,0 +1,14 @@
+"use client";
+import { useRouter } from "next/navigation";
+
+export default function OtazkaButton({ id }: any) {
+  const router = useRouter();
+  function handleClick() {
+    router.push(`/cs/otazky/${id}`);
+  }
+  return (
+    <button className="block bg-blue-600 p-4 text-white" onClick={handleClick}>
+      Go to question
+    </button>
+  );
+}

apps/web/app/temp/OtazkaComponent.tsx

@@ -0,0 +1,11 @@
+import OtazkaButton from "./OtazkaButton";
+
+export default function OtazkaComponent({ id, statement, detail }: any) {
+  return (
+    <div className="mb-2 border-4 border-red-500 bg-slate-800 p-4 text-white">
+      <h1>{statement}</h1>
+      <span>{detail}</span>
+      <OtazkaButton id={id} />
+    </div>
+  );
+}