Merge pull request #991 from KeneePatel/fix-986

Fix: Refactor QuestBanner to use banner object instead of questId
lfglabs-dev · Dec 17, 2024 · 1bc8ad0 · 1bc8ad0
2 parents a3e6af6 + edb21c9
commit 1bc8ad0
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 32 deletions.
diff --git a/components/quests/questBanner.tsx b/components/quests/questBanner.tsx
@@ -1,37 +1,34 @@
-import { FunctionComponent, useMemo } from "react";
-import questBanners from "../../public/utils/questbanners.json";
+import { FunctionComponent } from "react";
 import styles from "@styles/quests.module.css";
 import Button from "@components/UI/button";
+import type { Banner } from "types/backTypes";
 
 type QuestBannerProps = {
-  questId: string;
+  banner: Banner;
 };
 
-const QuestBanner: FunctionComponent<QuestBannerProps> = ({ questId }) => {
-  const bannerDetails = useMemo(() => {
-    return questBanners.find((banner) => banner.questId === questId);
-  }, [questId]);
-  return bannerDetails ? (
+const QuestBanner: FunctionComponent<QuestBannerProps> = ({ banner }) => {
+  return banner ? (
     <div className={styles.questBanner}>
       <div
         className={styles.questBannerImage}
-        style={{ backgroundImage: `url(${bannerDetails.image})` }}
+        style={{ backgroundImage: `url(${banner.image})` }}
       />
       <div className={styles.questBannerContent}>
         <h2 className={styles.questBannerTitle}>
-          {bannerDetails.tag ? (
-            <span className={styles.bannerTag}>{bannerDetails.tag} - </span>
+          {banner.tag ? (
+            <span className={styles.bannerTag}>{banner.tag} - </span>
           ) : null}
-          {bannerDetails.title}
+          {banner.title}
         </h2>
-        <p>{bannerDetails.description}</p>
+        <p>{banner.description}</p>
         <div className="w-fit">
           <Button
             onClick={() => {
-              window.open(bannerDetails.href, "_blank");
+              window.open(banner.href, "_blank");
             }}
           >
-            {bannerDetails.cta}
+            {banner.cta}
           </Button>
         </div>
       </div>

diff --git a/components/quests/questDetails.tsx b/components/quests/questDetails.tsx
@@ -430,7 +430,7 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
                 />
               );
             })}
-            <QuestBanner questId={questId} />
+            {quest.banner && <QuestBanner banner={quest.banner} />}
             <Reward
               quest={quest}
               hasNftReward={hasNftReward}

diff --git a/constants/common.ts b/constants/common.ts
@@ -21,6 +21,15 @@ export const QuestDefault = {
   additional_desc: null,
   visible: false,
   boosts: [],
+  banner: {
+    questId: "",
+    tag: "optional",
+    title: "loading",
+    description: "loading",
+    cta: "",
+    href: "",
+    image: "",
+  },
 };
 
 export const basicAlphabet = "abcdefghijklmnopqrstuvwxyz0123456789-";

diff --git a/public/utils/questbanners.json b/public/utils/questbanners.json
diff --git a/types/backTypes.d.ts b/types/backTypes.d.ts
@@ -4,12 +4,14 @@ type QuestDocument = {
   id: number;
   name: string;
   desc: string;
+  additional_desc: string | null;
   issuer: string;
   category: string;
   rewards_endpoint: string;
   logo: string;
   rewards_img: string;
   rewards_title: string;
+  rewards_description: string | null;
   rewards_nfts: NFTItem[];
   img_card: string;
   title_card: string;
@@ -20,8 +22,16 @@ type QuestDocument = {
   mandatory_domain: string | null;
   expired: boolean;
   visible: boolean;
-  rewards_description: string | null;
-  additional_desc: string | null;
+  banner?: Banner;
+};
+
+type Banner = {
+  image: string;
+  tag?: string;
+  title: string;
+  description: string;
+  href: string;
+  cta: string;
 };
 
 type ClaimableQuestDocument = QuestDocument & {
@@ -625,9 +635,9 @@ export type ArgentTokenValue = {
   ccyValue: string;
   ethDayChange: string;
   ccyDayChange: string;
-}
+};
 
 export type ArgentUserToken = {
   tokenAddress: string;
-  tokenBalance: string; 
-}
+  tokenBalance: string;
+};