From a9e530698cc694200c38ff1052735d6b9fd53616 Mon Sep 17 00:00:00 2001
From: EloToJa <elotoja@protonmail.com>
Date: Tue, 9 Jan 2024 11:40:22 +0100
Subject: [PATCH] Update date & quiz link

---
 src/api/types/quiz.ts                         | 36 ++++++++++---------
 .../layout/Sections/TileGrid/QuizTile.tsx     |  8 ++---
 src/utils/date.ts                             |  9 +++++
 3 files changed, 32 insertions(+), 21 deletions(-)
 create mode 100644 src/utils/date.ts

diff --git a/src/api/types/quiz.ts b/src/api/types/quiz.ts
index 6f13ad1..e9bb283 100644
--- a/src/api/types/quiz.ts
+++ b/src/api/types/quiz.ts
@@ -1,22 +1,24 @@
 export type QuizResponse = {
-    id: string;
-    userId: string;
-    userName: string;
-    name: string;
-    slug: string;
-    description: string;
-    averageRating: number;
-    numberOfRatings: number;
-    questions: QuestionResponse[];
-}
+  id: string;
+  userId: string;
+  userName: string;
+  name: string;
+  slug: string;
+  link: string;
+  description: string;
+  averageRating: number;
+  numberOfRatings: number;
+  questions: QuestionResponse[];
+  createdAt: Date;
+};
 
 export type QuestionResponse = {
-    id: string;
-    question: string;
-    answers: Answer[];
-}
+  id: string;
+  question: string;
+  answers: Answer[];
+};
 
 export type Answer = {
-    text: string;
-    isCorrect: boolean;
-}
\ No newline at end of file
+  text: string;
+  isCorrect: boolean;
+};
diff --git a/src/components/layout/Sections/TileGrid/QuizTile.tsx b/src/components/layout/Sections/TileGrid/QuizTile.tsx
index eb7d2cd..dd34222 100644
--- a/src/components/layout/Sections/TileGrid/QuizTile.tsx
+++ b/src/components/layout/Sections/TileGrid/QuizTile.tsx
@@ -1,4 +1,5 @@
 import { QuizResponse } from "@/api/types/quiz";
+import { formatDate } from "@/utils/date";
 import { Link } from "react-router-dom";
 import img from "../../../../assets/images/office.jpg";
 
@@ -7,17 +8,16 @@ type QuizTileProps = {
 };
 
 export default function QuizTile({ quiz }: QuizTileProps) {
-  const url = `/${quiz.userName}/${quiz.slug}`;
   return (
     <div className="bg-secondary rounded-md w-full">
-      <Link to={url} className="relative">
+      <Link to={quiz.link} 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>
       </Link>
       <div className="p-6">
-        <Link to={url} className="relative">
+        <Link to={quiz.link} className="relative">
           <h3 className="text-white text-2xl font-bold mb-3">{quiz.name}</h3>
           <p className="text-textPrimary font-medium">{quiz.description}</p>
         </Link>
@@ -32,7 +32,7 @@ export default function QuizTile({ quiz }: QuizTileProps) {
           </div>
           <div>
             <h4 className="text-white font-semibold text-sm">Date</h4>
-            <p className="text-textPrimary text-xs font-medium">2023</p>
+            <p className="text-textPrimary text-xs font-medium">{formatDate(quiz.createdAt)}</p>
           </div>
         </div>
       </div>
diff --git a/src/utils/date.ts b/src/utils/date.ts
new file mode 100644
index 0000000..6f1bc25
--- /dev/null
+++ b/src/utils/date.ts
@@ -0,0 +1,9 @@
+export const formatDate = (date: Date): string => {
+  const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+  const dateStringInUserTimeZone = date.toLocaleString("en-US", {
+    timeZone: userTimeZone,
+  });
+
+  return dateStringInUserTimeZone;
+};