feat: create wireframed quest details

bleu · Oct 1, 2024 · 65c9187 · 65c9187
1 parent 386385d
commit 65c9187
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 3 deletions.
diff --git a/apps/govquests-frontend/package.json b/apps/govquests-frontend/package.json
@@ -10,6 +10,7 @@
     "check-types": "tsc --noEmit"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
     "next": "14.2.13",
     "react": "^18",
     "react-dom": "^18"

diff --git a/apps/govquests-frontend/src/app/[id]/page.tsx b/apps/govquests-frontend/src/app/[id]/page.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import type { Quest } from "@/types/quest";
+import { getQuestById } from "@/utils/api";
+import { ExternalLinkIcon } from "@radix-ui/react-icons";
+import Link from "next/link";
+import type React from "react";
+import { useEffect, useState } from "react";
+
+const QuestDetails: React.FC = () => {
+  const [quest, setQuest] = useState<Quest | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchQuest = async () => {
+      try {
+        const data = await getQuestById(1);
+        setQuest(data);
+        setLoading(false);
+        console.log(data);
+      } catch (err) {
+        setError("Failed to fetch quest");
+        setLoading(false);
+      }
+    };
+
+    fetchQuest();
+  }, []);
+
+  return (
+    <main className="flex flex-1 items-center justify-center bg-zinc-100">
+      <div className="flex flex-col flex-1">
+        <div className="flex flex-1 items-center mx-32 p-8 bg-red-300 rounded-lg mb-3">
+          <div className="w-16 h-16 bg-red-200" />
+          <h1 className="text-3xl flex-1 ml-5">{quest?.title}</h1>
+          <div className="flex items-center">
+            <div className="w-4 h-4 bg-red-200" />
+            <span>+ 1234</span>
+          </div>
+        </div>
+        <div className="flex flex-col flex-1 mx-32 justify-center bg-white p-8">
+          <div className="flex items-center">
+            <div className="w-16 h-16 bg-green-100" />
+            <div className="ml-7">
+              <h2 className="text-2xl font-medium mb-2">About this quest</h2>
+              <p className="text-lg">{quest?.intro}</p>
+            </div>
+          </div>
+          <div className="flex items-center my-6">
+            <div className="w-4 h-4 bg-zinc-300" />
+            <h2 className="ml-4 text-xl font-medium">Steps to earn</h2>
+          </div>
+          {quest?.steps.map((step) => {
+            return (
+              <div
+                className="flex flex-1 justify-between items-center mt-3"
+                key={step.content}
+              >
+                <span className="flex items-center gap-1">
+                  {step.content}
+                  <Link href="https://www.google.com.br">
+                    <ExternalLinkIcon />
+                  </Link>
+                </span>
+                <div className="flex items-center">
+                  <span>{step.duration} minute read</span>
+                  <div className="w-4 h-4 bg-white border border-black ml-3" />
+                </div>
+              </div>
+            );
+          })}
+          <button
+            type="button"
+            className="bg-red-400 hover:bg-red-300 text-white font-bold p-4 rounded-lg self-end mt-8"
+          >
+            Complete quest
+          </button>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default QuestDetails;
diff --git a/apps/govquests-frontend/src/app/layout.tsx b/apps/govquests-frontend/src/app/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className="min-h-scree">
+      <body>
         {/* MOCKED HEADER AND SIDE BAR */}
         <header className="h-16 bg-red-500 flex-1">
           <div />

diff --git a/apps/govquests-frontend/src/app/page.tsx b/apps/govquests-frontend/src/app/page.tsx
@@ -3,12 +3,15 @@
 import Quest from "@/components/Quest";
 import type { Quest as QuestType } from "@/types/quest";
 import { getQuests } from "@/utils/api";
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
 export default function Home() {
   const [quests, setQuests] = useState<QuestType[]>([]);
   const [loading, setLoading] = useState(true);
 
+  const router = useRouter();
+
   useEffect(() => {
     const fetchQuests = async () => {
       try {
@@ -25,7 +28,6 @@ export default function Home() {
   }, []);
 
   if (loading) return <div>Loading...</div>;
-  console.log(quests);
   return (
     <main className="p-6 flex-1">
       <h2 className="text-2xl">Here's some quests for you!</h2>
@@ -41,7 +43,7 @@ export default function Home() {
             imageSrc={quest.img_url}
             rewards={quest.rewards}
             status={quest.status}
-            onStart={() => console.log("Starting quest")}
+            onClick={() => router.push("1")}
           />
         ))}
       </div>

diff --git a/apps/govquests-frontend/src/utils/api.tsx b/apps/govquests-frontend/src/utils/api.tsx
@@ -15,3 +15,19 @@ export async function getQuests(): Promise<Quest[]> {
     throw error;
   }
 }
+
+export async function getQuestById(id: number): Promise<Quest> {
+  try {
+    const response = await fetch(`${API_BASE_URL}/quests/${id}`);
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
+    }
+    return await response.json();
+  } catch (error) {
+    console.error(
+      `There was a problem fetching the quest with id ${id}:`,
+      error,
+    );
+    throw error;
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml