cleaning the code

lfglabs-dev · Sep 17, 2023 · 0cc007f · 0cc007f
1 parent dce50cf
commit 0cc007f
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 54 deletions.
diff --git a/components/quests/questCategory.tsx b/components/quests/questCategory.tsx
@@ -20,7 +20,7 @@ const QuestCategory: FunctionComponent<QuestCategoryProps> = ({
         <div className={styles.categoryInfos}>
           <h2 className="text-gray-200">{category.name} Quest</h2>
           <p className="text-gray-200">
-            {category.questNumber} quest{category.questNumber > 1 ? "s" : ""}
+            {category.questNumber} quest{category.questNumber > 1 ? "s" : null}
           </p>
         </div>
         <img src={category.img} />

diff --git a/components/quests/questCategoryDetails.tsx b/components/quests/questCategoryDetails.tsx
@@ -19,7 +19,7 @@ const QuestCategoryDetails: FunctionComponent<QuestCategoryDetailsProps> = ({
   quests,
   setShowMenu,
 }) => {
-  const [menu, setMenu] = useState<ReactNode>(null);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
 
   useEffect(() => {
     const documentBody = document.querySelector("body");
@@ -35,33 +35,29 @@ const QuestCategoryDetails: FunctionComponent<QuestCategoryDetailsProps> = ({
   }, []);
 
   return (
-    <ScreenLayout setShowMenu={setShowMenu}>
-      <>
-        <h1 className={styles.title}>Onboarding quests</h1>
-        <div className={styles.questList}>
-          {quests.map((quest) => (
-            <Quest
-              key={quest.id}
-              title={quest.title_card}
-              onClick={() =>
-                setMenu(
-                  <QuestDetails
-                    quest={quest}
-                    setShowMenu={() => setMenu(null)}
-                  />
-                )
-              }
-              imgSrc={quest.img_card}
-              issuer={{
-                name: quest.issuer,
-                logoFavicon: quest.logo,
-              }}
-              reward={quest.rewards_title}
-            />
-          ))}
-        </div>
-        {menu}
-      </>
+    <ScreenLayout close={() => setShowMenu(false)}>
+      <h1 className={styles.title}>Onboarding quests</h1>
+      <div className={styles.questList}>
+        {quests.map((quest, index) => (
+          <Quest
+            key={quest.id}
+            title={quest.title_card}
+            onClick={() => setSelectedIndex(index)}
+            imgSrc={quest.img_card}
+            issuer={{
+              name: quest.issuer,
+              logoFavicon: quest.logo,
+            }}
+            reward={quest.rewards_title}
+          />
+        ))}
+      </div>
+      {selectedIndex !== null && (
+        <QuestDetails
+          quest={quests[selectedIndex]}
+          close={() => setSelectedIndex(null)}
+        />
+      )}
     </ScreenLayout>
   );
 };

diff --git a/components/quests/questDetails.tsx b/components/quests/questDetails.tsx
@@ -5,12 +5,12 @@ import QuestMenu from "./questMenu";
 
 type QuestDetailsProps = {
   quest: QuestDocument;
-  setShowMenu: (showMenu: boolean) => void;
+  close: () => void;
 };
 
 const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
   quest,
-  setShowMenu,
+  close,
 }) => {
   useEffect(() => {
     const documentBody = document.querySelector("body");
@@ -26,10 +26,8 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
   }, []);
 
   return (
-    <ScreenLayout setShowMenu={setShowMenu}>
-      <>
-        <QuestMenu quest={quest} />
-      </>
+    <ScreenLayout close={close}>
+      <QuestMenu quest={quest} />
     </ScreenLayout>
   );
 };

diff --git a/components/quests/questMenu.tsx b/components/quests/questMenu.tsx
@@ -22,22 +22,7 @@ import TasksSkeleton from "../../components/skeletons/tasksSkeleton";
 import { generateCodeChallenge } from "../../utils/codeChallenge";
 import Timer from "../../components/quests/timer";
 import Nfts from "./nfts";
-
-const splitByNftContract = (
-  rewards: EligibleReward[]
-): Record<string, EligibleReward[]> => {
-  return rewards.reduce(
-    (acc: Record<string, EligibleReward[]>, reward: EligibleReward) => {
-      if (!acc[reward.nft_contract]) {
-        acc[reward.nft_contract] = [];
-      }
-
-      acc[reward.nft_contract].push(reward);
-      return acc;
-    },
-    {}
-  );
-};
+import { splitByNftContract } from "../../utils/rewards";
 
 type QuestMenuProps = {
   quest: QuestDocument;

diff --git a/components/quests/screenLayout.tsx b/components/quests/screenLayout.tsx
@@ -6,20 +6,20 @@ import Blur from "../shapes/blur";
 
 type ScreenLayoutProps = {
   children: ReactNode;
-  setShowMenu: (showMenu: boolean) => void;
+  close: () => void;
 };
 
 const ScreenLayout: FunctionComponent<ScreenLayoutProps> = ({
   children,
-  setShowMenu,
+  close,
 }) => {
   return (
     <div className={styles.categoryDetails}>
       <div className={styles.blur}>
         <Blur />
       </div>
       <div className={styles.backButton}>
-        <BackButton onClick={() => setShowMenu(false)} />
+        <BackButton onClick={() => close()} />
       </div>
       <div className={styles.content}>{children}</div>
       <div className={styles.footer}>

diff --git a/utils/rewards.ts b/utils/rewards.ts
@@ -0,0 +1,15 @@
+export const splitByNftContract = (
+  rewards: EligibleReward[]
+): Record<string, EligibleReward[]> => {
+  return rewards.reduce(
+    (acc: Record<string, EligibleReward[]>, reward: EligibleReward) => {
+      if (!acc[reward.nft_contract]) {
+        acc[reward.nft_contract] = [];
+      }
+
+      acc[reward.nft_contract].push(reward);
+      return acc;
+    },
+    {}
+  );
+};