feat: Question page

next.config.mjs

@@ -3,6 +3,8 @@ const nextConfig = {
   reactStrictMode: true,
   env: {
     NEXT_PUBLIC_GA_MEASUREMENT_ID: process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID,
+    NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
+    NEXT_PUBLIC_VERCEL_URL: process.env.NEXT_PUBLIC_VERCEL_URL,
   },
 };
 

src/api-client/answers.ts

@@ -38,16 +38,38 @@ export async function submitAnswers(formData: IFormDataProps[]) {
   }
 }
 
-// GET ANSWERS BY SLUG
-export async function getAnswersBySlug(slug: string) {
+// GET ANSWERS BY PERSON SLUG
+export async function getAnswersByPersonSlug(personSlug: string) {
   try {
-    const answersResponse = await fetch(`${BASE_URL}/api/answers/${slug}`);
+    const response = await fetch(
+      `${BASE_URL}/api/answers/person/${personSlug}`,
+    );
+
+    if (!response.ok) {
+      throw new Error("🔴 Data fetch failed");
+    }
+
+    const answers: IAnswer[] = await response.json();
+
+    return answers;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return null;
+  }
+}
+
+// GET ANSWERS BY QUESTION SLUG
+export async function getAnswersByQuestionSlug(questionSlug: string) {
+  try {
+    const response = await fetch(
+      `${BASE_URL}/api/answers/question/${questionSlug}`,
+    );
 
-    if (!answersResponse.ok) {
+    if (!response.ok) {
       throw new Error("🔴 Data fetch failed");
     }
 
-    const answers: IAnswer[] = await answersResponse.json();
+    const answers: IAnswer[] = await response.json();
 
     return answers;
   } catch (error) {

src/api-client/questions.ts

@@ -1,18 +1,23 @@
-import axios from "axios";
-
 import { IQuestion } from "~/models/Question";
+import { BASE_URL } from "~/utils/constants";
 
 // GET ALL QUESTIONS
 export async function getQuestions() {
   try {
-    const response = await axios.get<IQuestion[]>(`/api/questions`);
+    const response = await fetch(`${BASE_URL}/api/questions`);
+
+    if (!response.ok) {
+      throw new Error("🔴 Data fetch failed (questions)");
+    }
 
-    const data = response.data;
+    const people: IQuestion[] = await response.json();
 
-    return data;
+    return people;
   } catch (err) {
     if (err instanceof Error) {
-      console.log(err);
+      console.log("🔴 Error:", err.message);
     }
+
+    return null;
   }
 }

src/app/api/answers/[slug]/route.ts → src/app/api/answers/person/[personSlug]/route.ts

@@ -6,17 +6,17 @@ import { Answer, IAnswer } from "~/models/Answer";
 import { IPerson, Person } from "~/models/Person";
 
 interface ReqParams {
-  params: { slug: string };
+  params: { personSlug: string };
 }
 
-// GET ANSWERS BY SLUG
+// GET ANSWERS BY PERSON SLUG
 export async function GET(req: Request, { params }: ReqParams) {
-  const { slug } = params;
+  const { personSlug } = params;
 
   try {
     await connectDB();
 
-    const person: IPerson | null = await Person.findOne({ slug });
+    const person: IPerson | null = await Person.findOne({ slug: personSlug });
 
     if (!person) {
       return NextResponse.json("🔴 Failed to fetch a person by slug.", {
@@ -33,7 +33,7 @@ export async function GET(req: Request, { params }: ReqParams) {
 
     const activeAnswers = answers.filter((answer) => {
       const question = answer.questionId as IQuestion;
-      return question.active === true;
+      return question.isActive === true;
     });
 
     const result = activeAnswers.sort((a, b) => {

src/app/api/answers/question/[questionSlug]/route.ts

@@ -0,0 +1,54 @@
+import { NextResponse } from "next/server";
+
+import { connectDB } from "~/app/lib/connectDB";
+import { IQuestion, Question } from "~/models/Question";
+import { IPerson, Person } from "~/models/Person";
+import { Answer, IAnswer } from "~/models/Answer";
+
+interface ReqParams {
+  params: { questionSlug: string };
+}
+
+// GET ANSWERS BY QUESTION SLUG
+export async function GET(req: Request, { params }: ReqParams) {
+  const { questionSlug } = params;
+
+  try {
+    await connectDB();
+
+    const question: IQuestion | null = await Question.findOne({
+      slug: questionSlug,
+    });
+
+    if (!question) {
+      return NextResponse.json("🔴 Failed to fetch a question by slug.", {
+        status: 400,
+      });
+    }
+
+    // Remove later (make sure Questions are available before populate)
+    const people: IPerson[] = await Person.find({}).exec();
+
+    const answers: IAnswer[] = await Answer.find({
+      questionId: question._id,
+    })
+      .populate("personId")
+      .exec();
+
+    const activeAnswers = answers.filter((answer) => {
+      const person = answer.personId as IPerson;
+      return person.isActive === true;
+    });
+
+    return NextResponse.json(activeAnswers, { status: 200 });
+  } catch (err) {
+    console.log(err);
+
+    return NextResponse.json(
+      { message: "🔴 Error fetching answers by personId." },
+      {
+        status: 500,
+      },
+    );
+  }
+}

src/app/api/questions/route.ts

@@ -8,7 +8,7 @@ export async function GET() {
   try {
     await connectDB();
 
-    const questions: IQuestion[] = await Question.find()
+    const questions: IQuestion[] = await Question.find({ isActive: true })
       .sort({ order: 1 })
       .exec();
 

src/app/not-found.tsx

@@ -1,11 +1,11 @@
 import Link from "next/link";
 
-import { PageLayout } from "~/components/layouts/PageLayout";
+import { PageContainer } from "~/components/layouts/PageContainer";
 import { PAGE } from "~/utils/constants";
 
 export default function NotFound() {
   return (
-    <PageLayout className="grow">
+    <PageContainer className="grow">
       <section className="flex h-full items-center justify-center">
         <div className="space-y-6 text-center">
           <h2 className="text-2xl">
@@ -20,6 +20,6 @@ export default function NotFound() {
           </Link>
         </div>
       </section>
-    </PageLayout>
+    </PageContainer>
   );
 }

src/app/people/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { QAPage } from "~/components/layouts/QAPage";
+import { PersonQAPage } from "~/components/layouts/PersonQAPage";
 
 import { connectDB } from "~/app/lib/connectDB";
 import { Person, IPerson } from "~/models/Person";
@@ -17,7 +17,7 @@ export async function generateMetadata({ params }: PersonPageProps) {
 
   const person: IPerson = await Person.findOne({ slug: params.slug }).exec();
 
-  if (person) {
+  if (person && OG.BASE_URL) {
     const title = `${person.name}, ${person.jobTitle} at ${person.company.name}`;
 
     return {
@@ -65,6 +65,6 @@ export async function generateStaticParams() {
   );
 }
 
-export default async function PersonPage({ params }: PersonPageProps) {
-  return <QAPage slug={params.slug} />;
+export default async function PersonQA({ params }: PersonPageProps) {
+  return <PersonQAPage slug={params.slug} />;
 }

src/app/questions/[questionSlug]/loading.tsx

@@ -0,0 +1,5 @@
+import { Loader } from "~/components/Loader";
+
+export default function Loading() {
+  return <Loader />;
+}

src/app/questions/[questionSlug]/page.tsx

@@ -0,0 +1,23 @@
+import { QuestionPage } from "~/components/layouts/QuestionPage";
+
+import { getQuestions } from "~/api-client/questions";
+
+interface QuestionPageProps {
+  params: {
+    questionSlug: string;
+  };
+}
+
+export async function generateStaticParams() {
+  const questions = await getQuestions();
+
+  return (
+    questions?.map((question) => ({
+      questionSlug: question.slug,
+    })) || []
+  );
+}
+
+export default async function Question({ params }: QuestionPageProps) {
+  return <QuestionPage questionSlug={params.questionSlug} />;
+}