Add quiz description

quizer-app · Jan 9, 2024 · f9873fc · f9873fc
1 parent c8cd8a0
commit f9873fc
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 44 deletions.
diff --git a/src/api/response.ts → src/api/types/auth.ts b/src/api/response.ts → src/api/types/auth.ts
@@ -1,14 +1,14 @@
-export interface AuthResponse {
+export type AuthResponse = {
   message: string;
   errors?: ValidationErrors;
   accessToken?: string;
 }
 
-interface ValidationErrors {
+type ValidationErrors = {
   [key: string]: ValidationError;
 }
 
-interface ValidationError {
+type ValidationError = {
   tag: string;
   value: string;
 }
diff --git a/src/api/types/quiz.ts b/src/api/types/quiz.ts
@@ -0,0 +1,10 @@
+export type QuizResponse = {
+    id: string;
+    userId: string;
+    userName: string;
+    name: string;
+    slug: string;
+    description: string;
+    averageRating: number;
+    numberOfRatings: number;
+}
diff --git a/src/components/layout/Sections/TileGrid/QuizTile.tsx b/src/components/layout/Sections/TileGrid/QuizTile.tsx
@@ -1,30 +1,30 @@
+import { QuizResponse } from "@/api/types/quiz";
 import img from "../../../../assets/images/office.jpg";
 
 type QuizTileProps = {
-  name: string;
-  userName: string;
-  desc: string;
+  quiz: QuizResponse;
 };
-export default function QuizTile({ name, userName }: QuizTileProps) {
+
+export default function QuizTile({ quiz }: QuizTileProps) {
+  const url = `/${quiz.userName}/${quiz.name}`;
   return (
     <div className="bg-secondary rounded-md w-full">
-      <a href="#" className="relative">
+      <a href={url} className="relative">
         <img src={img} className="w-full rounded-t-md" />
         <div className="text-white text-sm font-bold absolute top-4 right-4 px-4 py-2 bg-lightBlue rounded-3xl">
           Category/QS
         </div>
       </a>
       <div className="p-6">
-        <h3 className="text-white text-2xl font-bold mb-3">{name}</h3>
-        <p className="text-textPrimary font-medium">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet
-          dictum neque, laoreet dolor
-        </p>
+        <a href={url} className="relative">
+          <h3 className="text-white text-2xl font-bold mb-3">{quiz.name}</h3>
+          <p className="text-textPrimary font-medium">{quiz.description}</p>
+        </a>
         <span className="h-[1px] bg-white bg-opacity-10 block my-6"></span>
         <div className="flex items-center gap-4">
           <img src={img} className="w-10 h-10 rounded-3xl" />
           <div className="border-r-[1px] border-white border-opacity-10 pr-4">
-            <h4 className="text-white font-semibold text-sm">By {userName}</h4>
+            <h4 className="text-white font-semibold text-sm">By {quiz.userName}</h4>
             <p className="text-textPrimary text-xs font-medium">
               Graphic Designer
             </p>

diff --git a/src/components/layout/Sections/TileGrid/TileGrid.tsx b/src/components/layout/Sections/TileGrid/TileGrid.tsx
@@ -1,34 +1,25 @@
 import { api } from "@/api/axios";
+import { QuizResponse } from "@/api/types/quiz";
 import { useQuery } from "@tanstack/react-query";
 import QuizTile from "./QuizTile";
 
-interface QuizesQueryProps {
-  userName: string;
-  name: string;
-  description: string;
-}
 
 export default function TileGrid() {
-
-
-  const { isLoading, isError, error, data } = useQuery({
+  const { isLoading, data } = useQuery({
     queryKey: ["quizes"],
-    queryFn: () => api.get<QuizesQueryProps[]>("/api/v1/Quiz"),
+    queryFn: () => api.get<QuizResponse[]>("/api/v1/Quiz"),
   });
 
   return (
     <section className="bg-primary w-full flex items-center justify-center py-14 md:py-16 lg:py-20">
-      <div className="mainContainer grid grid-cols-1 gap-4 lg:gap-6 md:grid-cols-2 xl:grid-cols-3">
-        <div className="text-red-600">
+      <div className="text-red-600">
           {isLoading && "Loading..."}
-          {isError && JSON.stringify(error)}
         </div>
+      <div className="mainContainer grid grid-cols-1 gap-4 lg:gap-6 md:grid-cols-2 xl:grid-cols-3">
         {data?.data.map((el, id) => {
           return (
             <QuizTile
-              name={el.name}
-              userName={el.userName}
-              desc={el.description}
+              quiz={el}
               key={id}
             />
           );

diff --git a/src/components/page/SignIn.tsx b/src/components/page/SignIn.tsx
@@ -1,10 +1,12 @@
+import { AuthResponse } from "@/api/types/auth";
 import { api } from "@/api/axios";
-import { AuthResponse } from "@/api/response";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
+import { AxiosError } from "axios";
 import { useAtomValue, useSetAtom } from "jotai";
 import { useEffect, useRef } from "react";
 import { useForm } from "react-hook-form";
+import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import { z } from "zod";
 import {
@@ -13,15 +15,13 @@ import {
   persistAtom,
 } from "../../atoms/auth";
 import { Button } from "../layout/ContentBox/Button";
-import { FormInput } from "../layout/ContentBox/FormInput";
-import { AxiosError } from "axios";
-import toast from "react-hot-toast";
 import ContentBox from "../layout/ContentBox/ContentBox";
-import Title from "../layout/ContentBox/Title";
+import { FormInput } from "../layout/ContentBox/FormInput";
 import GoogleButton from "../layout/ContentBox/GoogleButton";
 import Text from "../layout/ContentBox/Text";
-import TextWithLink from "../layout/ContentBox/TextWithLink";
 import TextWithLines from "../layout/ContentBox/TextWithLines";
+import TextWithLink from "../layout/ContentBox/TextWithLink";
+import Title from "../layout/ContentBox/Title";
 
 const schema = z.object({
   usernameOrEmail: z.string().min(1),

diff --git a/src/components/page/SignUp.tsx b/src/components/page/SignUp.tsx
@@ -1,23 +1,23 @@
+import { AuthResponse } from "@/api/types/auth";
 import { api } from "@/api/axios";
-import { AuthResponse } from "@/api/response";
+import { isAuthenticatedAtom } from "@/atoms/auth";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
 import { AxiosError } from "axios";
+import { useAtomValue } from "jotai";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "react-hot-toast/headless";
+import { useNavigate } from "react-router-dom";
 import { z } from "zod";
-import { FormInput } from "../layout/ContentBox/FormInput";
 import { Button } from "../layout/ContentBox/Button";
-import { useEffect } from "react";
-import { useAtomValue } from "jotai";
-import { isAuthenticatedAtom } from "@/atoms/auth";
-import { useNavigate } from "react-router-dom";
-import { toast } from "react-hot-toast/headless";
 import ContentBox from "../layout/ContentBox/ContentBox";
-import Title from "../layout/ContentBox/Title";
+import { FormInput } from "../layout/ContentBox/FormInput";
 import GoogleButton from "../layout/ContentBox/GoogleButton";
 import Text from "../layout/ContentBox/Text";
-import TextWithLink from "../layout/ContentBox/TextWithLink";
 import TextWithLines from "../layout/ContentBox/TextWithLines";
+import TextWithLink from "../layout/ContentBox/TextWithLink";
+import Title from "../layout/ContentBox/Title";
 
 const schema = z.object({
   username: z.string().min(3).max(32),