refactor: wip

src/api-client/answers.ts

@@ -1,20 +1,14 @@
 import axios from "axios";
 
 import { IAnswer } from "~/models/Answer";
-import { IPerson } from "~/models/Person";
 
 export interface IFormDataProps {
   questionId: string;
   question: string;
   answer: string;
 }
 
-export interface IAnswerResult {
-  answers: IAnswer[];
-  person: IPerson;
-}
-
-// SUBMIT
+// SUBMIT ANSWERS
 export async function submitAnswers(formData: IFormDataProps[]) {
   if (!formData.length) {
     throw new Error("Input data length is 0.");
@@ -43,10 +37,10 @@ export async function submitAnswers(formData: IFormDataProps[]) {
   }
 }
 
-// GET BY SLUG
+// GET ANSWERS BY SLUG
 export async function getAnswersBySlug(slug: string) {
   try {
-    const response = await axios.get<IAnswerResult>(`/api/answers/${slug}`);
+    const response = await axios.get<IAnswer[]>(`/api/answers/${slug}`);
 
     const data = response.data;
 
@@ -60,14 +54,14 @@ export async function getAnswersBySlug(slug: string) {
   }
 }
 
-// GET BY SLUG ARRAY
+// GET ANSWERS BY SLUG ARRAY
 export async function getAnswersBySlugArray(slugs: string[]) {
   if (!slugs.length) {
     return [];
   }
 
   try {
-    const response = await axios.get<IAnswerResult[]>(`/api/answers`, {
+    const response = await axios.get<IAnswer[]>(`/api/answers`, {
       params: {
         slugs: slugs.toString(),
       },

src/api-client/names.ts

@@ -7,7 +7,7 @@ interface INameProps {
   link: string;
 }
 
-// CREATE NAME
+// CREATE NAME (SHARE FORM)
 export async function createName({ name, link }: INameProps) {
   if (!name || !link) {
     throw new Error("Name and link are required.");

src/api-client/people.ts

@@ -2,7 +2,7 @@ import axios from "axios";
 
 import { IPerson } from "~/models/Person";
 
-// GET BY SLUG
+// GET PERSON BY SLUG
 export async function getPerson(slug: string) {
   try {
     const response = await axios.get<IPerson>(`/api/people/${slug}`);
@@ -19,7 +19,7 @@ export async function getPerson(slug: string) {
   }
 }
 
-// GET ALL
+// GET ALL PEOPLE
 export async function getPeople() {
   try {
     const response = await axios.get<IPerson[]>(`/api/people`);

src/api-client/questions.ts

@@ -2,7 +2,7 @@ import axios from "axios";
 
 import { IQuestion } from "~/models/Question";
 
-// GET ALL
+// GET ALL QUESTIONS
 export async function getQuestions() {
   try {
     const response = await axios.get<IQuestion[]>(`/api/questions`);

src/api-client/subscriptions.ts

@@ -6,7 +6,7 @@ interface SubscriptionProps {
   email: string;
 }
 
-// CREATE SUBSCRIPTION
+// CREATE SUBSCRIPTION (ADD EMAIL)
 export async function createSubscription({ email }: SubscriptionProps) {
   if (!email) {
     throw new Error("Email is required.");

src/app/api/answers/[slug]/route.ts

@@ -9,7 +9,7 @@ interface ReqParams {
   params: { slug: string };
 }
 
-// Get answers by slug
+// GET ANSWERS BY SLUG
 export async function GET(req: Request, { params }: ReqParams) {
   const { slug } = params;
 
@@ -33,17 +33,12 @@ export async function GET(req: Request, { params }: ReqParams) {
       return question.active === true;
     });
 
-    const sortedAnswers = activeAnswers.sort((a, b) => {
+    const result = activeAnswers.sort((a, b) => {
       const questionA = a.questionId as IQuestion;
       const questionB = b.questionId as IQuestion;
       return questionA.order - questionB.order;
     });
 
-    const result = {
-      answers: sortedAnswers,
-      person,
-    };
-
     return NextResponse.json(result, { status: 200 });
   } catch (err) {
     console.log(err);

src/app/api/people/[slug]/route.ts

@@ -2,7 +2,6 @@ import { NextResponse } from "next/server";
 
 import { connectDB } from "~/app/lib/connectDB";
 import { Person, IPerson } from "~/models/Person";
-// import { IPerson } from "~/utils/types";
 
 interface ReqParams {
   params: { slug: string };

src/app/api/people/route.ts

@@ -2,9 +2,8 @@ import { NextResponse } from "next/server";
 
 import { connectDB } from "~/app/lib/connectDB";
 import { Person, IPerson } from "~/models/Person";
-// import { IPerson } from "~/utils/types";
 
-// GET ALL
+// GET ALL PEOPLE
 export async function GET() {
   try {
     await connectDB();

src/app/api/questions/route.ts

@@ -3,7 +3,7 @@ import { NextResponse } from "next/server";
 import { connectDB } from "~/app/lib/connectDB";
 import { IQuestion, Question } from "~/models/Question";
 
-// Get all questions
+// GET ALL QUESTIONS
 export async function GET() {
   try {
     await connectDB();

src/app/api/subscriptions/route.ts

@@ -3,7 +3,7 @@ import { NextResponse } from "next/server";
 import { connectDB } from "~/app/lib/connectDB";
 import { ISubscription, Subscription } from "~/models/Subscription";
 
-// Create new Subscription
+// CREATE NEW SUBSCRIPTION (ADD EMAIL)
 export async function POST(req: Request) {
   const { email } = await req.json();
 

src/components/Content.tsx

@@ -1,17 +1,17 @@
+import { IAnswer } from "~/models/Answer";
 import { ParsedParagraph } from "./ParsedParagraph";
 
-import { IAnswerResult } from "~/api-client/answers";
 import { IQuestion } from "~/models/Question";
 
 interface ContentProps {
-  data: IAnswerResult;
+  data: IAnswer[];
 }
 
 export function Content({ data }: ContentProps) {
   return (
     <div className="space-y-12 rounded-4xl bg-stone-200/50 p-4 text-xl sm:p-10 md:rounded-6xl">
       <div className="flex flex-col gap-2">
-        {data?.answers?.map((item, index) => {
+        {data?.map((item, index) => {
           const question = item.questionId;
 
           return (

src/components/Loader.tsx

@@ -1,3 +1,7 @@
 export function Loader() {
-  return <div className="text-center">Loading...</div>;
+  return (
+    <div className="flex size-full items-center justify-center py-16 text-center">
+      <span>Loading...</span>
+    </div>
+  );
 }

src/components/layouts/QAPage.tsx

@@ -7,55 +7,62 @@ import { PersonPreview } from "../PersonPreview";
 import { PageContainer } from "./PageContainer";
 import { Content } from "../Content";
 
-import { useAnswers } from "~/hooks";
+import { useAnswers, usePerson } from "~/hooks";
 
 interface QAPageProps {
   slug: string;
 }
 
 export function QAPage({ slug }: QAPageProps) {
-  const { data, isLoading } = useAnswers(slug);
+  const { data: answers, isLoading: isAnswersLoading } = useAnswers(slug);
+  const { data: person, isLoading: isPersonLoading } = usePerson(slug);
+
+  const isLoading = isAnswersLoading && isPersonLoading;
+
+  if (isLoading) {
+    return <Loader />;
+  }
 
   return (
     <PageContainer className="min-h-screen max-w-full gap-10 pb-16 pt-4 sm:pt-8 lg:grid lg:grid-cols-[auto_80px]">
-      {isLoading && <Loader />}
+      {answers && person && (
+        <>
+          <div className="space-y-16">
+            <section className="max-w-7xl">
+              <div className="grid gap-6 md:grid-cols-[300px_auto]">
+                <PersonPreview person={person} />
 
-      {!isLoading && data && (
-        <div className="space-y-16">
-          <section className="max-w-7xl">
-            <div className="grid gap-6 md:grid-cols-[300px_auto]">
-              <PersonPreview person={data.person} />
-
-              <div className="space-y-16">
-                <Content data={data} />
+                <div className="space-y-16">
+                  <Content data={answers} />
+                </div>
               </div>
-            </div>
-          </section>
+            </section>
 
-          {/* Side Panel — Mobile */}
-          <div className="flex flex-col items-center justify-center gap-6 lg:hidden">
-            <p className="text-gradient w-fit text-center font-medium leading-tight">
-              More awesome people:
-            </p>
+            {/* Side Panel — Mobile */}
+            <div className="flex flex-col items-center justify-center gap-6 lg:hidden">
+              <p className="text-gradient w-fit text-center font-medium leading-tight">
+                More awesome people:
+              </p>
 
-            <SidePeoplePanel />
+              <SidePeoplePanel />
+            </div>
+
+            {/* Form */}
+            <section className="mb-10 max-w-7xl grid-cols-[300px_auto] gap-6 lg:grid">
+              <div className="md:col-start-2">
+                <ShareForm />
+              </div>
+            </section>
           </div>
 
-          {/* Form */}
-          <section className="mb-10 max-w-7xl grid-cols-[300px_auto] gap-6 lg:grid">
-            <div className="md:col-start-2">
-              <ShareForm />
+          {/* Side Panel — Desktop */}
+          <aside className="relative hidden lg:block">
+            <div className="sticky top-[56px]">
+              <SidePeoplePanel />
             </div>
-          </section>
-        </div>
+          </aside>
+        </>
       )}
-
-      {/* Side Panel — Desktop */}
-      <aside className="relative hidden lg:block">
-        <div className="sticky top-[56px]">
-          <SidePeoplePanel />
-        </div>
-      </aside>
     </PageContainer>
   );
 }