Add sample code for routing to individual question page

Author: bensohh

apps/question-service/src/app/page.tsx

@@ -34,7 +34,8 @@ import {
   CategoriesOption,
   DifficultyOption,
   OrderOption,
-} from "./utils/SelectOptions";
+} from "../utils/SelectOptions";
+import Link from "next/link";
 
 /**
  * defines the State of the page whe a user is deleing an object. Has 3 general states:
@@ -167,7 +168,16 @@ export default function Home() {
       title: "Title",
       dataIndex: "title",
       key: "title",
-      render: (text: string) => <Button type="link">{text}</Button>, // TODO (Sean): Onclick links to the individual question page
+      render: (text: string, question: Question) => (
+        <Link
+          href={{
+            pathname: `/question/${question.id}`,
+            query: { data: question.docRefId }, // the data
+          }}
+        >
+          <Button type="link">{text}</Button>
+        </Link>
+      ), // TODO (Sean): Onclick links to the individual question page
     },
     {
       title: "Categories",

apps/question-service/src/app/question/[id]/page.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+
+const QuestionPage = (): JSX.Element => {
+  const searchParams = useSearchParams();
+  const docRefId = searchParams.get("data");
+
+  // TODO: use docRefId to fetch the data via the service function and display the data below
+  return <div>Hello World! {docRefId}</div>;
+};
+
+export default QuestionPage;