From 50f41154ae4ed78cdeee3ce9c4acd3b9f68540eb Mon Sep 17 00:00:00 2001
From: pedroco3lho <pedrocoelho.nascimento@gmail.com>
Date: Thu, 22 Aug 2024 20:20:12 -0300
Subject: [PATCH 1/3] quests onboarding flow

---
 app/[addressOrDomain]/page.tsx           | 37 ++++++++++++------------
 components/dashboard/SuggestedQuests.tsx | 21 ++++++++++++++
 2 files changed, 39 insertions(+), 19 deletions(-)
 create mode 100644 components/dashboard/SuggestedQuests.tsx

diff --git a/app/[addressOrDomain]/page.tsx b/app/[addressOrDomain]/page.tsx
index b4de7083..534a8205 100644
--- a/app/[addressOrDomain]/page.tsx
+++ b/app/[addressOrDomain]/page.tsx
@@ -30,6 +30,7 @@ import Typography from "@components/UI/typography/typography";
 import { TEXT_TYPE } from "@constants/typography";
 import { a11yProps } from "@components/UI/tabs/a11y";
 import { CustomTabPanel } from "@components/UI/tabs/customTab";
+import SuggestedQuests from "@components/dashboard/SuggestedQuests";
 
 type AddressOrDomainProps = {
   params: {
@@ -352,20 +353,20 @@ export default function Page({ params }: AddressOrDomainProps) {
               {...a11yProps(0)}
             />
             {claimableQuests.length > 0 ? (
-            <Tab
-              disableRipple
-              sx={{
-                borderRadius: "10px",
-                padding: "0px 12px 0px 12px",
-                textTransform: "none",
-                fontWeight: "600",
-                fontSize: "12px",
-                fontFamily: "Sora",
-                minHeight: "32px",
-              }}
-              label={`To claim (${claimableQuests})`}
-              {...a11yProps(1)}
-            />
+              <Tab
+                disableRipple
+                sx={{
+                  borderRadius: "10px",
+                  padding: "0px 12px 0px 12px",
+                  textTransform: "none",
+                  fontWeight: "600",
+                  fontSize: "12px",
+                  fontFamily: "Sora",
+                  minHeight: "32px",
+                }}
+                label={`To claim (${claimableQuests})`}
+                {...a11yProps(1)}
+              />
             ) : null}
           </Tabs>
         </div>
@@ -374,11 +375,9 @@ export default function Page({ params }: AddressOrDomainProps) {
             {questsLoading ? (
               <QuestSkeleton />
             ) : completedQuests?.length === 0 ? (
-              <Typography type={TEXT_TYPE.H2} className={styles.noBoosts}>
-                {isOwner
-                  ? "You have not completed any quests at the moment"
-                  : "User has not completed any quests at the moment"}
-              </Typography>
+              isOwner
+                ? <SuggestedQuests />
+                : <Typography type={TEXT_TYPE.H2} className={styles.noBoosts}>User has not completed any quests at the moment</Typography>
             ) : (
               <section className={QuestStyles.section}>
                 <div className={QuestStyles.questContainer}>
diff --git a/components/dashboard/SuggestedQuests.tsx b/components/dashboard/SuggestedQuests.tsx
new file mode 100644
index 00000000..aabe3857
--- /dev/null
+++ b/components/dashboard/SuggestedQuests.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import Typography from "@components/UI/typography/typography";
+import { TEXT_TYPE } from "@constants/typography";
+import QuestStyles from "@styles/Home.module.css";
+import QuestCardCustomised from "./CustomisedQuestCard";
+
+const SuggestedQuests: React.FC = () => {
+    return (
+        <div>
+            <Typography type={TEXT_TYPE.H1} className="title extrabold mb-3.5">New explorer, start your quest!</Typography>
+            <div className="text-center	mb-12">Get started on your Starknet adventure by tackling your first quest and begin collecting rewards!</div>
+            <div className={QuestStyles.questContainer}>
+                <QuestCardCustomised key={27} id={27} />
+                <QuestCardCustomised key={27} id={27} />
+                <QuestCardCustomised key={27} id={27} />
+            </div>
+        </div>
+    );
+};
+
+export default SuggestedQuests;
\ No newline at end of file

From c266e333c6d5bd5ac07f13a7e8c6cc340bf9cd6d Mon Sep 17 00:00:00 2001
From: pedroco3lho <pedrocoelho.nascimento@gmail.com>
Date: Fri, 23 Aug 2024 07:38:49 -0300
Subject: [PATCH 2/3] feat: dynamically fetched quests

---
 components/dashboard/SuggestedQuests.tsx | 25 +++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/components/dashboard/SuggestedQuests.tsx b/components/dashboard/SuggestedQuests.tsx
index aabe3857..feba0f2d 100644
--- a/components/dashboard/SuggestedQuests.tsx
+++ b/components/dashboard/SuggestedQuests.tsx
@@ -1,21 +1,36 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Typography from "@components/UI/typography/typography";
 import { TEXT_TYPE } from "@constants/typography";
 import QuestStyles from "@styles/Home.module.css";
 import QuestCardCustomised from "./CustomisedQuestCard";
+import { getQuests } from "@services/apiService";
+import { QuestDocument } from "../../types/backTypes";
 
 const SuggestedQuests: React.FC = () => {
+    const [quests, setQuests] = useState<QuestDocument[]>([]);
+
+    useEffect(() => {
+        const fetchQuests = async () => {
+            const res = await getQuests();
+            if (res && res.onboarding) {
+                setQuests(res.onboarding.slice(0, 3));
+            }
+        };
+
+        fetchQuests();
+    }, []);
+
     return (
         <div>
             <Typography type={TEXT_TYPE.H1} className="title extrabold mb-3.5">New explorer, start your quest!</Typography>
             <div className="text-center	mb-12">Get started on your Starknet adventure by tackling your first quest and begin collecting rewards!</div>
             <div className={QuestStyles.questContainer}>
-                <QuestCardCustomised key={27} id={27} />
-                <QuestCardCustomised key={27} id={27} />
-                <QuestCardCustomised key={27} id={27} />
+                {quests.map((quest) => (
+                    <QuestCardCustomised key={quest.id} id={quest.id} />
+                ))}
             </div>
         </div>
     );
 };
 
-export default SuggestedQuests;
\ No newline at end of file
+export default SuggestedQuests;

From 08880e9fe2a5ce8e1641be2d96d5535bc9db9da0 Mon Sep 17 00:00:00 2001
From: pedroco3lho <pedrocoelho.nascimento@gmail.com>
Date: Sat, 24 Aug 2024 09:48:45 -0300
Subject: [PATCH 3/3] fix: Use QuestContext to avoid redundant fetch

---
 components/dashboard/SuggestedQuests.tsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/components/dashboard/SuggestedQuests.tsx b/components/dashboard/SuggestedQuests.tsx
index feba0f2d..2f420fcc 100644
--- a/components/dashboard/SuggestedQuests.tsx
+++ b/components/dashboard/SuggestedQuests.tsx
@@ -1,29 +1,24 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import Typography from "@components/UI/typography/typography";
 import { TEXT_TYPE } from "@constants/typography";
 import QuestStyles from "@styles/Home.module.css";
 import QuestCardCustomised from "./CustomisedQuestCard";
-import { getQuests } from "@services/apiService";
 import { QuestDocument } from "../../types/backTypes";
+import { QuestsContext } from "@context/QuestsProvider";
 
 const SuggestedQuests: React.FC = () => {
+    const { quests: contextQuests } = useContext(QuestsContext);
     const [quests, setQuests] = useState<QuestDocument[]>([]);
 
     useEffect(() => {
-        const fetchQuests = async () => {
-            const res = await getQuests();
-            if (res && res.onboarding) {
-                setQuests(res.onboarding.slice(0, 3));
-            }
-        };
-
-        fetchQuests();
-    }, []);
+        const onboardingQuests = contextQuests.filter((quest) => quest.category === "onboarding");
+        setQuests(onboardingQuests);
+    }, [contextQuests]);
 
     return (
-        <div>
+        <div className="text-center">
             <Typography type={TEXT_TYPE.H1} className="title extrabold mb-3.5">New explorer, start your quest!</Typography>
-            <div className="text-center	mb-12">Get started on your Starknet adventure by tackling your first quest and begin collecting rewards!</div>
+            <div className="mb-12">Get started on your Starknet adventure by tackling your first quest and begin collecting rewards!</div>
             <div className={QuestStyles.questContainer}>
                 {quests.map((quest) => (
                     <QuestCardCustomised key={quest.id} id={quest.id} />