feat: quest card done (#175)

* feat: quest card done

* Making the code more efficient using useMemo

* Fixing questProvider depencies

components/UI/iconsComponents/icons/checkIcon.tsx

@@ -0,0 +1,20 @@
+import React, { FunctionComponent } from "react";
+
+const CheckIcon: FunctionComponent<IconProps> = ({ width, color }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default CheckIcon;

components/pages/home/trending.tsx

@@ -30,6 +30,7 @@ const TrendingQuests: FunctionComponent<TrendingQuestsProps> = ({
                   logoFavicon: quest.logo,
                 }}
                 reward={quest.rewards_title}
+                id={quest.id}
               />
             );
           })

components/quests/quest.tsx

@@ -1,12 +1,16 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, useMemo } from "react";
 import styles from "../../styles/quests.module.css";
+import { useContext } from "react";
+import { QuestsContext } from "../../context/QuestsProvider";
+import CheckIcon from "../UI/iconsComponents/icons/checkIcon";
 
 type QuestProps = {
   onClick: () => void;
   imgSrc: string;
   title: string;
   issuer: Issuer;
   reward: string;
+  id: number;
 };
 
 const Quest: FunctionComponent<QuestProps> = ({
@@ -15,7 +19,14 @@ const Quest: FunctionComponent<QuestProps> = ({
   title,
   issuer,
   reward,
+  id,
 }) => {
+  const { completedQuestIds } = useContext(QuestsContext);
+  const isCompleted = useMemo(
+    () => completedQuestIds.includes(id),
+    [id, completedQuestIds]
+  );
+
   return (
     <>
       <div className={styles.questCard} onClick={onClick}>
@@ -26,8 +37,17 @@ const Quest: FunctionComponent<QuestProps> = ({
             <p className="text-gray-400">{issuer.name}</p>
           </div>
           <div className="flex mt-2 mb-1 items-center">
-            <img width={20} src={issuer.logoFavicon} />
-            <p className="text-white ml-2">{reward}</p>
+            {isCompleted ? (
+              <>
+                <p className="text-white mr-2">Done</p>
+                <CheckIcon width="24" color="#6AFFAF" />
+              </>
+            ) : (
+              <>
+                <img width={20} src={issuer.logoFavicon} />
+                <p className="text-white ml-2">{reward}</p>
+              </>
+            )}
           </div>
         </div>
       </div>

context/QuestsProvider.tsx

@@ -1,11 +1,14 @@
 import { ReactNode, createContext, useMemo, useState } from "react";
 import { QueryError, QuestDocument } from "../types/backTypes";
+import { useAccount } from "@starknet-react/core";
+import { hexToDecimal } from "../utils/feltService";
 
 interface QuestsConfig {
   quests: QuestDocument[];
   featuredQuest?: QuestDocument;
   categories: QuestCategory[];
   trendingQuests: QuestDocument[];
+  completedQuestIds: number[];
 }
 
 type GetQuestsRes =
@@ -19,6 +22,7 @@ export const QuestsContext = createContext<QuestsConfig>({
   featuredQuest: undefined,
   categories: [],
   trendingQuests: [],
+  completedQuestIds: [],
 });
 
 export const QuestsContextProvider = ({
@@ -32,6 +36,8 @@ export const QuestsContextProvider = ({
   >();
   const [categories, setCategories] = useState<QuestCategory[]>([]);
   const [trendingQuests, setTrendingQuests] = useState<QuestDocument[]>([]);
+  const [completedQuestIds, setCompletedQuestIds] = useState<number[]>([]);
+  const { address } = useAccount();
 
   useMemo(() => {
     fetch(`${process.env.NEXT_PUBLIC_API_LINK}/get_quests`)
@@ -61,14 +67,29 @@ export const QuestsContextProvider = ({
       });
   }, []);
 
+  useMemo(() => {
+    if (!address) return;
+    fetch(
+      `${
+        process.env.NEXT_PUBLIC_API_LINK
+      }/get_completed_quests?addr=${hexToDecimal(address)}`
+    )
+      .then((response) => response.json())
+      .then((data: number[] | QueryError) => {
+        if ((data as QueryError).error) return;
+        setCompletedQuestIds(data as number[]);
+      });
+  }, [address]);
+
   const contextValues = useMemo(() => {
     return {
       quests,
       featuredQuest,
       categories,
-      trendingQuests: trendingQuests,
+      trendingQuests,
+      completedQuestIds,
     };
-  }, [quests, featuredQuest, categories, trendingQuests]);
+  }, [quests, featuredQuest, categories, trendingQuests, completedQuestIds]);
 
   return (
     <QuestsContext.Provider value={contextValues}>

pages/categories/[category].tsx

@@ -38,6 +38,7 @@ const CategoriesPage: NextPage = () => {
                 logoFavicon: quest.logo,
               }}
               reward={quest.rewards_title}
+              id={quest.id}
             />
           ))}
       </div>