Understanding and Using Relations in Strapi

    {
      "kind": "collectionType",
      "collectionName": "students",
      "info": {
        "singularName": "student",
        "pluralName": "students",
        "displayName": "Student",
        "description": ""
      },
      "options": {
        "draftAndPublish": true
      },
      "pluginOptions": {},
    
      // The fields are configured here
      "attributes": {
        "name": {
          "type": "string"
        },
    
        "student_info": { //field name
          "type": "relation", // field type
          "relation": "oneToOne", // relation type
          "target": "api::student-info.student-info", // the target of the relation
          "inversedBy": "student" // more info here - https://docs.strapi.io/developer-docs/latest/development/backend-customization/models.html#relations
        }
      }
    }

    {
      "kind": "collectionType",
      "collectionName": "student_infos",
      "info": {
        "singularName": "student-info",
        "pluralName": "student-infos",
        "displayName": "studentInfo"
      },
      "options": {
        "draftAndPublish": true
      },
      "pluginOptions": {},
      "attributes": {
        "bio": {
          "type": "text"
        },
        "student": {
          "type": "relation",
          "relation": "oneToOne",
          "target": "api::student.student",
          "inversedBy": "student_info"
        }
      }
    }

    {
    ...  
    "attributes": {
        "name": {
          "type": "string"
        },
        "employees": {
          "type": "relation",
          "relation": "oneToMany",
          "target": "api::employee.employee",
          "mappedBy": "company"
        }
      }
    }

    {
    ...  
      "attributes": {
        "name": {
          "type": "string"
        },
        "company": {
          "type": "relation",
          "relation": "manyToOne",
          "target": "api::company.company",
          "inversedBy": "employees"
        }
      }
    }

    {
      ...
      "attributes": {
        "name": {
          "type": "string"
        },
        "hospitals": {
          "type": "relation",
          "relation": "manyToMany",
          "target": "api::hospital.hospital",
          "inversedBy": "doctors"
        }
      }
    }

    {
      ...
      "attributes": {
        "name": {
          "type": "string"
        },
        "doctors": {
          "type": "relation",
          "relation": "manyToMany",
          "target": "api::doctor.doctor",
          "inversedBy": "hospitals"
        }
      }
    }

    {
      ...  
      "attributes": {
        "name": {
          "type": "string"
        },
        "details": {
          "type": "relation",
          "relation": "oneToOne", 
          "target": "api::detail.detail"
        }
      }
    }

    {
      ...  
      "attributes": {
        "name": {
          "type": "string"
        },
        "cars": {
          "type": "relation",
          "relation": "oneToMany",
          "target": "api::car.car"
        }
      }
    }

mkdir relations

mkdir understanding-and-using-relations-in-strapi

cd relations

cd understanding-and-using-relations-in-strapi

npx create-strapi@latest

npx create-strapi@latest

 Strapi   v5.0.1 🚀 Let's create your new project

? What is the name of your project? qa-app
 
We can't find any auth credentials in your Strapi config.

Create a free account on Strapi Cloud and benefit from:

- ✦ Blazing-fast ✦ deployment for your projects
- ✦ Exclusive ✦ access to resources to make your project successful
- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem

Start your 14-day free trial now!


? Please log in or sign up. Skip
? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? No
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? Yes

 Strapi   Creating a new application at /Users/theodore/dev/qa-app

   deps   Installing dependencies with npm

npm run develop

Question {
    qText
    user
}

Answer {
    aText
    question
    user
}

Comment {
    cText
    answer
    user
}

npx create-next-app@latest

npx create-next-app@latest qa-front
Need to install the following packages:
create-next-app@14.2.8
Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/miracleio/Documents/writing/strapi/understanding-and-using-relations-in-strapi/qa-front.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

added 368 packages, and audited 369 packages in 56s

139 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success!

cd qa-front

yarn add axios

npm install quill axios react-quill

npx shadcn@latest init

Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes

npx shadcn@latest add drawer button input label avatar textarea sonner

npx shadcn@latest add drawer button input label avatar textarea
✔ You need to create a component.json file to add components. Proceed? … yes
✔ Which style would you like to use? › New York
? Which color would you like to use as the base color? › - Use arrow-keys. Return to submit.
? Which color would you like to use as the base color? › - Use arrow-keys. Return to submit.
? Which color would you like to use as the base color? › - Use arrow-keys. Return to submit.
? Which color would you like to use as the base color? › - Use arrow-keys. Return to submit.
? Which color would you like to use as the base color? › - Use arrow-keys. Return to submit.
✔ Which color would you like to use as the base color? › Slate
✔ Would you like to use CSS variables for theming? … no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Installing dependencies.
✔ Created 7 files:
  - components/ui/drawer.tsx
  - components/ui/button.tsx
  - components/ui/input.tsx
  - components/ui/label.tsx
  - components/ui/avatar.tsx
  - components/ui/textarea.tsx
  - components/ui/sonner.tsx

{
  "data": [
    {
      "id": 2,
      "documentId": "m2sdmnhihlkxolcvicrz4d4t",
      "qText": "How does Vibranium compare to Stark tech in terms of strength and versatility?",
      "user": "Happy Hogan",
      "createdAt": "2024-09-09T16:46:40.624Z",
      "updatedAt": "2024-09-09T16:46:40.624Z",
      "publishedAt": "2024-09-09T16:46:41.040Z",
      "locale": null
    },
    {
      "id": 4,
      "documentId": "a971959k5jbf7yqmxwgnrn02",
      "qText": "Could Tony Stark’s AI, JARVIS, have evolved into something beyond just an assistant?",
      "user": "Happy Hogan",
      "createdAt": "2024-09-09T18:39:34.602Z",
      "updatedAt": "2024-09-09T18:39:34.602Z",
      "publishedAt": "2024-09-09T18:39:34.980Z",
      "locale": null
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "pageSize": 25,
      "pageCount": 1,
      "total": 2
    }
  }
}

mkdir types
touch types/index.ts

type Comment = {
  id: number;
  documentId: string;
  cText: string;
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
  locale: null;
  user: string;
  answer: Answer;
};

type CommentInput = {
  cText: string;
  user: string;
  answer: string;
};

type Answer = {
  id: number;
  documentId: string;
  aText: string;
  user: string;
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
  locale: null;
  question?: Question | null;
};

type Question = {
  id: number;
  documentId: string;
  qText: string;
  user: string;
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
  locale: null;
  answers?: Answer[] | null;
};

type Meta = {
  pagination: {
    page: number;
    pageSize: number;
    pageCount: number;
    total: number;
  };
};

type AnswersResponse = {
  data?: Answer[];
  meta?: Meta;
};

type QuestionsResponse = {
  data?: Question[];
  meta?: Meta;
};

type CommentsResponse = {
  data?: Comment[];
  meta?: Meta;
};

type QuestionResponse = {
  data?: Question;
};

type AnswerResponse = {
  data?: Answer;
};

type CommentResponse = {
  data?: Comment;
};

type ErrorResponse = {
  error?: {
    message: string;
  };
};

export type {
  Answer,
  Question,
  Comment,
  CommentInput,
  Meta,
  QuestionsResponse,
  QuestionResponse,
  AnswersResponse,
  AnswerResponse,
  CommentsResponse,
  CommentResponse,
  ErrorResponse,
};

mkdir utils
touch utils/index.ts

// ./utils/index.ts

import {
  AnswerResponse,
  AnswersResponse,
  CommentInput,
  CommentResponse,
  CommentsResponse,
  ErrorResponse,
  QuestionResponse,
  QuestionsResponse,
} from "@/types";

const API_TOKEN = process.env.NEXT_PUBLIC_API_TOKEN;
const API_URL = process.env.NEXT_PUBLIC_API_URL;

/**
 * Fetches a list of questions from the API, sorted by their last update time in ascending order.
 *
 * @returns {Promise<QuestionsResponse & ErrorResponse>} - A promise that resolves with the list of questions and any errors encountered.
 */
const getQuestions: () => Promise<
  QuestionsResponse & ErrorResponse
> = async (): Promise<QuestionsResponse & ErrorResponse> => {
  try {
    const res = await fetch(`${API_URL}/questions?sort[0]=updatedAt:asc`, {
      headers: {
        Authorization: `Bearer ${API_TOKEN}`,
      },
      cache: "no-store",
    });
    const data = await res.json();
    console.log("🚀 ~ getQuestions ~ data", data);

    return data;
  } catch (error) {
    console.log("🚨 ~ getQuestions", error);
    return {
      error: { message: "Unable to fetch questions" },
    };
  }
};

/**
 * Creates a new question in the API.
 *
 * @param {Object} question - The question data.
 * @param {string} question.qText - The text of the question.
 * @param {string} question.user - The user ID of the person asking the question.
 * @returns {Promise<QuestionResponse & ErrorResponse>} - A promise that resolves with the created question and any errors encountered.
 */
const createQuestion = async (question: {
  qText: string;
  user: string;
}): Promise<QuestionResponse & ErrorResponse> => {
  console.log("🚀 ~ createQuestion ~ question", question);

  try {
    const res = await fetch(`${API_URL}/questions`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${API_TOKEN}`,
      },
      body: JSON.stringify({
        data: {
          qText: question.qText,
          user: question.user,
        },
      }),
    });
    const data = await res.json();
    return data;
  } catch (error) {
    console.log("🚨 ~ createQuestion", error);
    return {
      error: { message: "Unable to create question" },
    };
  }
};

/**
 * Fetches comments related to a specific answer from the API, sorted by their last update time in ascending order.
 *
 * @param {string} answer - The ID of the answer to fetch comments for.
 * @returns {Promise<CommentsResponse & ErrorResponse>} - A promise that resolves with the list of comments and any errors encountered.
 */
const getComments = async (
  answer: string,
): Promise<CommentsResponse & ErrorResponse> => {
  try {
    const res = await fetch(
      `${API_URL}/comments?populate=*&filters[answer][documentId]=${answer}&sort[0]=updatedAt:asc`,
      {
        headers: {
          Authorization: `Bearer ${API_TOKEN}`,
        },
        cache: "no-store",
      },
    );
    const data = await res.json();
    if (data.error) {
      throw new Error(data.error.message);
    }
    return data;
  } catch (error) {
    console.log("🚨 ~ getComments", error);
    return {
      error: { message: "Unable to fetch comments" },
    };
  }
};

/**
 * Creates a new comment in the API.
 *
 * @param {CommentInput} comment - The comment data.
 * @returns {Promise<CommentResponse & ErrorResponse>} - A promise that resolves with the created comment and any errors encountered.
 */
const createComment: (
  comment: CommentInput,
) => Promise<CommentResponse & ErrorResponse> = async ({
  cText,
  user,
  answer,
}: CommentInput): Promise<CommentResponse & ErrorResponse> => {
  try {
    const res = await fetch(`${API_URL}/comments`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${API_TOKEN}`,
      },
      body: JSON.stringify({ data: { cText, user, answer } }),
    });
    const data = await res.json();
    if (data.error) {
      throw new Error(data.error.message);
    }
    return data;
  } catch (error) {
    console.log("🚨 ~ createComment", error);
    return {
      error: { message: "Unable to create comment" },
    };
  }
};

/**
 * Creates a new answer in the API.
 *
 * @param {Object} answer - The answer data.
 * @param {string} answer.aText - The text of the answer.
 * @param {string} answer.user - The user ID of the person providing the answer.
 * @param {string} answer.questionId - The ID of the question that the answer is related to.
 * @returns {Promise<AnswerResponse & ErrorResponse>} - A promise that resolves with the created answer and any errors encountered.
 */
const createAnswer = async (answer: {
  aText: string;
  user: string;
  questionId: string;
}): Promise<AnswerResponse & ErrorResponse> => {
  console.log("🚀 ~ createAnswer ~ answer", answer);

  try {
    const res = await fetch(`${API_URL}/answers`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${API_TOKEN}`,
      },
      body: JSON.stringify({
        data: {
          aText: answer.aText,
          user: answer.user,
          question: answer.questionId,
        },
      }),
    });
    const data = await res.json();
    return data;
  } catch (error) {
    console.log("🚨 ~ createAnswer", error);
    return {
      error: { message: "Unable to create answer" },
    };
  }
};

/**
 * Fetches a specific question from the API by its ID.
 *
 * @param {string} id - The ID of the question to fetch.
 * @returns {Promise<QuestionResponse & ErrorResponse>} - A promise that resolves with the question data and any errors encountered.
 */
const getQuestion: (
  id: string,
) => Promise<QuestionResponse & ErrorResponse> = async (id: string) => {
  try {
    const res = await fetch(`${API_URL}/questions/${id}?populate=*`, {
      headers: {
        Authorization: `Bearer ${API_TOKEN}`,
      },
      cache: "no-store",
    });
    const data = await res.json();
    if (data.error) {
      throw new Error(data.error.message);
    }
    return data;
  } catch (error) {
    console.log("🚨 ~ getQuestion", error);
    return {
      error: { message: "Unable to fetch question" },
    };
  }
};

/**
 * Fetches a list of answers related to a specific question from the API, sorted by their creation time in ascending order.
 *
 * @param {string} question - The ID of the question to fetch answers for.
 * @returns {Promise<AnswersResponse & ErrorResponse>} - A promise that resolves with the list of answers and any errors encountered.
 */
const getAnswers: (
  question: string,
) => Promise<AnswersResponse & ErrorResponse> = async (
  question: string,
): Promise<AnswersResponse & ErrorResponse> => {
  try {
    const res = await fetch(
      `${API_URL}/answers?populate=*&filters[question][documentId]=${question}&sort[0]=createdAt:asc`,
      {
        headers: {
          Authorization: `Bearer ${API_TOKEN}`,
        },
        cache: "no-store",
      },
    );
    const data = await res.json();
    if (data.error) {
      throw new Error(data.error.message);
    }
    return data;
  } catch (error) {
    console.log("🚨 ~ getAnswers", error);
    return {
      error: { message: "Unable to fetch answers" },
    };
  }
};

export {
  getQuestion,
  getQuestions,
  createQuestion,
  getAnswers,
  createAnswer,
  getComments,
  createComment,
};

// ./components/Question/Card.tsx

import { Button } from "@/components/ui/button";
import { Question } from "@/types";
import Link from "next/link";

const QuestionCard: React.FC<{
  question: Question;
}> = ({ question }) => {
  return (
    <article
      key={question.id}
      className="rounded-none border border-stone-100 bg-stone-50 p-4 dark:border-stone-700 dark:bg-stone-800"
    >
      <h3 className="text-3xl font-semibold">{question.qText}</h3>
      <p className="text-stone-600 dark:text-stone-400">
        Asked by {question.user} on{" "}
        {new Date(question.createdAt).toDateString()}
      </p>
      <Button variant="outline" className="mt-3" asChild>
        <Link href={`/questions/${question.documentId}`}>View Question</Link>
      </Button>
    </article>
  );
};

export default QuestionCard;

// ./components/Question/Form.tsx

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { toast } from "sonner";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { createQuestion } from "@/utils";

const QuestionForm: React.FC<{
  className?: string;
}> = ({ className }) => {
  const [question, setQuestion] = useState("");
  const [name, setName] = useState("");
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!question.trim() || !name.trim()) {
      toast.error("Please fill in all fields");
      return;
    }
    toast.promise(createQuestion({ qText: question, user: name }), {
      loading: (() => {
        setLoading(true);
        return "Submitting question...";
      })(),
      success: (data) => {
        console.log("🚀 ~ handleSubmit ~ data", data);

        if (data.error) {
          throw new Error(data.error.message);
        }
        setLoading(false);
        setQuestion("");
        setName("");
        router.push(`/questions/${data.data?.documentId}`);

        return "Question submitted successfully!";
      },
      error: (error) => {
        setLoading(false);
        console.log("🚨 ~ handleSubmit ~ error", error);

        return "Failed to submit question";
      },
    });
  };
  return (
    <form
      onSubmit={handleSubmit}
      className={cn("grid items-start gap-4", className)}
    >
      <div className="grid gap-2">
        <Label htmlFor="name">Name</Label>
        <Input
          type="name"
          id="name"
          defaultValue="Happy Hogan"
          onChange={(e) => setName(e.target.value)}
          value={name}
        />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="question">Your Question</Label>
        <Textarea
          id="question"
          value={question}
          onChange={(e) => setQuestion(e.target.value)}
        />
      </div>
      <Button type="submit">
        {loading ? "Submitting question..." : "Submit Question"}
      </Button>
    </form>
  );
};

export default QuestionForm;

// ./components/Question/Drawer.tsx

"use client";

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import QuestionForm from "@/components/Question/Form";

const QuestionDrawer: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <Drawer open={isOpen} onOpenChange={setIsOpen}>
      <DrawerTrigger asChild>
        <Button variant="outline">Ask Question</Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="wrapper mx-auto w-full max-w-3xl">
          <DrawerHeader className="text-left">
            <DrawerTitle>Ask Question</DrawerTitle>
            <DrawerDescription>What would you like to ask?</DrawerDescription>
          </DrawerHeader>
          {/* Question Form */}
          <QuestionForm className="px-4" />
          <DrawerFooter className="pt-2">
            <DrawerClose asChild>
              <Button variant="outline">Cancel</Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  );
};

export default QuestionDrawer;

// ./components/Answer/Card.tsx

"use client";

import { Answer, Comment } from "@/types";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import CommentForm from "@/components/Comment/Form";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";
import CommentCard from "@/components/Comment/Card";
import { getComments } from "@/utils";

const AnswerCard: React.FC<{
  answer: Answer;
}> = ({ answer }) => {
  const [showPostComment, setShowPostComment] = useState(false);
  const [showComments, setShowComments] = useState(false);
  const [comments, setComments] = useState<Comment[] | null>(null);
  const [loading, setLoading] = useState(false);

  const handleGetComments = async () => {
    if (showComments) {
      setShowComments(false);
      return;
    }
    setLoading(true);
    toast.promise(getComments(answer?.documentId), {
      loading: (() => {
        setLoading(true);
        return "Fetching comments...";
      })(),
      success: (data) => {
        if (data?.error) {
          return data.error.message;
        }
        if (!data?.data?.length) {
          return "No comments yet. Be the first!";
        }
        setComments(data?.data);
        setLoading(false);
        return "Comments fetched successfully";
      },
      error: (error) => {
        setLoading(false);
        console.log("🚨 ~ handleGetComments ~ error", error);
        return "Unable to fetch comments";
      },
      finally: () => {
        setLoading(false);
        setShowComments(true);
      },
    });
  };

  return (
    <article className="flex flex-col rounded-none border border-stone-100 bg-stone-50 dark:border-stone-900 dark:bg-stone-900">
      <div className="user flex w-full items-center gap-2 border-b border-stone-200 p-4 dark:border-stone-800">
        <Avatar>
          <AvatarImage
            src={`https://avatar.iran.liara.run/public/${Math.floor(
              Math.random() * 10 + 1,
            )}`}
            alt={answer?.user}
          />
          <AvatarFallback>
            {answer?.user
              ?.split(" ")
              .map((name) => name[0])
              .join("")}
          </AvatarFallback>
        </Avatar>
        <p className=" ">{answer?.user}</p> on{" "}
        <p>{new Date(answer?.updatedAt).toDateString()}</p>
      </div>
      <div
        className="p-4"
        {...{
          dangerouslySetInnerHTML: {
            __html: answer?.aText,
          },
        }}
      ></div>
      <div className="flex flex-wrap gap-2 border-t border-stone-200 p-4 dark:border-stone-800">
        {!showPostComment ? (
          <Button
            onClick={() => setShowPostComment(!showPostComment)}
            variant={"outline"}
          >
            Post a comment
          </Button>
        ) : (
          <div className="w-full">
            <Button
              onClick={() => setShowPostComment(!showPostComment)}
              variant={"outline"}
              className="mb-4"
            >
              Hide comment form
            </Button>
            <CommentForm answer={answer?.documentId} />
          </div>
        )}
        <Button onClick={handleGetComments} variant={"outline"}>
          {loading
            ? "Fetching comments..."
            : showComments
              ? "Hide comments"
              : "Show comments"}
        </Button>
      </div>
      {showComments && (
        <div className="border-t border-stone-200 dark:border-stone-800">
          {comments?.length ? (
            <ul className="flex flex-col gap-4">
              {comments.map((comment, i) => (
                <li
                  key={comment?.documentId}
                  className="border-t border-stone-200 first-of-type:border-t-0 dark:border-stone-800"
                >
                  <CommentCard comment={comment} i={i} />
                </li>
              ))}
            </ul>
          ) : (
            <p className="p-4">No comments yet. Be the first!</p>
          )}
        </div>
      )}
    </article>
  );
};

export default AnswerCard;

// ./components/Answer/Form.tsx

"use client";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";
import { useRouter } from "next/navigation";
import { createAnswer } from "@/utils";

const AnswerForm: React.FC<{ id?: string }> = ({ id }) => {
  const router = useRouter();
  const [value, setValue] = useState("");
  const [name, setName] = useState("");
  const [loading, setLoading] = useState(false);
  console.log("🚀 ~ file: Form.tsx ~ line 6 ~ AnswerForm ~ value", value, id);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!id) return toast.error("Invalid question ID");
    if (!value.trim() || !name.trim())
      return toast.error("Please fill in all fields before submitting");
    toast.promise(createAnswer({ aText: value, user: name, questionId: id }), {
      loading: (() => {
        setLoading(true);
        return "Submitting answer...";
      })(),
      success: (data) => {
        console.log("🚀 ~ handleSubmit ~ data", data);

        if (data.error) {
          throw new Error(data.error.message);
        }
        setLoading(false);
        setName("");
        setValue("");
        router.refresh();
        return "Answer submitted successfully!";
      },
      error: (error) => {
        console.log("🚨 ~ handleSubmit ~ error", error);
        setLoading(false);
        return error.message;
      },
    });
  };

  return (
    <>
      <form onSubmit={handleSubmit} className="flex flex-col gap-2">
        <ReactQuill
          theme="snow"
          value={value}
          onChange={(content, delta, source, editor) =>
            setValue(editor.getHTML())
          }
          placeholder="What's your answer?"
        />
        <Input
          type="text"
          placeholder="Your name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <Button type="submit" variant="default" className="w-fit">
          {loading ? "Submitting..." : "Submit Answer"}
        </Button>
      </form>
    </>
  );
};

export default AnswerForm;

// ./components/Comment/Card.tsx

"use client";

import { Comment } from "@/types";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

const CommentCard: React.FC<{
  comment: Comment;
  i: number;
}> = ({ comment, i }) => {
  return (
    <article className="flex flex-col gap-4 p-4">
      <div className="flex items-center gap-2">
        <Avatar>
          <AvatarImage
            src={`https://avatar.iran.liara.run/public/${i + 1}`}
            alt={comment?.user}
          />
          <AvatarFallback>
            {comment?.user
              ?.split(" ")
              .map((name) => name[0])
              .join("")}
          </AvatarFallback>
        </Avatar>
        <p className=" ">{comment?.user}</p>
      </div>
      <p className="text-sm">{comment?.cText}</p>
    </article>
  );
};

export default CommentCard;

// ./components/Comment/Form.tsx

"use client";

import { Textarea } from "@/components/ui/textarea";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { createComment } from "@/utils";

const CommentForm: React.FC<{
  answer: string;
}> = ({ answer }) => {
  const router = useRouter();
  const [comment, setComment] = useState("");
  const [user, setUser] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!comment.trim() || !user.trim()) {
      toast.error("Please fill in all fields");
      return;
    }
    toast.promise(createComment({ cText: comment, user, answer }), {
      loading: (() => {
        setLoading(true);
        return "Posting comment...";
      })(),
      success: (data) => {
        console.log("🚀 ~ data", data);
        if (data.error) {
          throw new Error(data.error.message);
        }

        setLoading(false);
        setComment("");
        setUser("");
        router.refresh();
        return "Comment posted!";
      },
      error: (error) => {
        setLoading(false);
        return error.message;
      },
    });
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-2">
      <Textarea
        className="bg-white dark:bg-stone-800"
        name="comment"
        placeholder="Type your comment here..."
        value={comment}
        onChange={(e) => setComment(e.target.value)}
      />
      <Input
        className="bg-white dark:bg-stone-800"
        type="text"
        name="name"
        placeholder="Your name"
        value={user}
        onChange={(e) => setUser(e.target.value)}
      />
      <Button type="submit" variant={"default"}>
        {loading ? "Posting comment..." : "Post comment"}
      </Button>
    </form>
  );
};

export default CommentForm;

mkdir components/Site
touch components/Site/Header.tsx

// ./components/Site/Header.tsx

import Link from "next/link";

const SiteHeader = () => {
  return (
    <header className="sticky top-0 z-10 w-full bg-red-700 p-4 text-red-50">
      <div className="wrapper mx-auto max-w-3xl">
        <Link href="/">
          <figure className="site-logo font-heading text-2xl font-black uppercase">
            The Q&A Times
          </figure>
        </Link>
      </div>
    </header>
  );
};

export default SiteHeader;

// ./app/layout.tsx

import type { Metadata, Viewport } from "next";
import "./globals.css";
import SiteHeader from "@/components/Site/Header";
import { Toaster } from "@/components/ui/sonner";

const APP_NAME = "Q&A Times";
const APP_DEFAULT_TITLE = "The Q&A Times";
const APP_TITLE_TEMPLATE = "%s - Q&A Times";
const APP_DESCRIPTION =
  "Feel free to ask any question and get answers from the community";
const APP_URL = process.env.APP_URL || "https://qa-times.netlify.app";

export const metadata: Metadata = {
  applicationName: APP_NAME,
  title: {
    default: APP_DEFAULT_TITLE,
    template: APP_TITLE_TEMPLATE,
  },
  description: APP_DESCRIPTION,
  manifest: "/manifest.json",
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: APP_DEFAULT_TITLE,
    // startUpImage: [],
  },
  formatDetection: {
    telephone: false,
  },
  openGraph: {
    type: "website",
    siteName: APP_NAME,
    title: {
      default: APP_DEFAULT_TITLE,
      template: APP_TITLE_TEMPLATE,
    },
    description: APP_DESCRIPTION,
    images: [
      {
        url: `${APP_URL}/images/qa-cover.png`,
        width: 1200,
        height: 630,
        alt: APP_DEFAULT_TITLE,
      },
    ],
  },
  twitter: {
    card: "summary",
    title: {
      default: APP_DEFAULT_TITLE,
      template: APP_TITLE_TEMPLATE,
    },
    description: APP_DESCRIPTION,
    images: [
      {
        url: `${APP_URL}/images/qa-cover.png`,
        width: 1200,
        height: 630,
        alt: APP_DEFAULT_TITLE,
      },
    ],
  },
};

export const viewport: Viewport = {
  themeColor: "#ffffff",
};
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <SiteHeader />
        {children}
        <Toaster richColors position="top-center" theme="system" />
      </body>
    </html>
  );
}

 // ./app/page.tsx

import QuestionCard from "@/components/Question/Card";
import QuestionDrawer from "@/components/Question/Drawer";
import { getQuestions } from "@/utils";

export default async function Home() {
  const questions = await getQuestions();
  return (
    <main>
      <header className="bg-stone-50 px-4 py-12 dark:bg-stone-900 lg:px-6">
        <div className="wrapper mx-auto max-w-3xl">
          <h1 className="mb-2 text-6xl font-black leading-tight">
            Start asking questions
          </h1>
          <QuestionDrawer />
        </div>
      </header>
      <section className="site-section p-4 lg:px-6">
        <div className="wrapper mx-auto max-w-3xl">
          <header className="section-header mb-4">
            <h2 className="section-title text-xl font-semibold">Questions</h2>
          </header>
          {questions?.data?.length ? (
            <ul className="grid gap-4">
              {questions.data.map((question) => (
                <li key={question?.documentId}>
                  <QuestionCard question={question} />
                </li>
              ))}
            </ul>
          ) : (
            <p>No questions found yet. Be the first to ask!</p>
          )}
        </div>
      </section>
    </main>
  );
}

// ./questions/[id]/page.tsx

import AnswerCard from "@/components/Answer/Card";
import AnswerForm from "@/components/Answer/Form";
import { getAnswers, getQuestion } from "@/utils";
import Link from "next/link";

const QuestionPage = async ({
  params,
}: {
  params: {
    id: string;
  };
}) => {
  // get the question id from the path
  const id = params.id;
  // fetch the question and answers
  const question = await getQuestion(id as string);
  const answers = await getAnswers(id as string);
  return (
    <main>
      {id && question.data ? (
        <>
          <header className="bg-stone-50 px-4 py-12 dark:bg-stone-900 lg:px-6">
            <div className="wrapper mx-auto max-w-3xl">
              <h1 className="mb-2 text-4xl font-black leading-tight">
                {question.data.qText}
              </h1>
              <p>
                Asked by {question.data.user} on{" "}
                {new Date(question.data.createdAt).toDateString()}
              </p>
            </div>
          </header>
          <section className="site-section bg-sla px-4 py-12 lg:px-6">
            <div className="wrapper mx-auto max-w-3xl">
              <AnswerForm id={id} />
            </div>
          </section>
          <section className="site-section px-4 py-12 lg:px-6">
            <div className="wrapper mx-auto max-w-3xl">
              <header className="section-header mb-8">
                <h2 className="text-2xl">Answers</h2>
              </header>
              <ul className="flex flex-col gap-4">
                {answers?.data?.length ? (
                  answers?.data?.map((answer) => (
                    <li className="" key={answer?.documentId}>
                      <AnswerCard answer={answer} />
                    </li>
                  ))
                ) : (
                  <p>No answers yet. Be the first!</p>
                )}
              </ul>
            </div>
          </section>
        </>
      ) : (
        <header className="bg-stone-50 px-4 py-12 dark:bg-stone-900 lg:px-6">
          <div className="wrapper mx-auto max-w-3xl">
            <h1 className="mb-2 text-4xl font-black leading-tight">
              Oops! Question not found
            </h1>
            <Link className="underline" href="/">
              Maybe you&apos;d like to ask a question?
            </Link>
          </div>
        </header>
      )}
    </main>
  );
};

export default QuestionPage;