feat: add boosted check fix and click fix

app/quest-boost/page.tsx

@@ -39,6 +39,9 @@ export default function Page() {
 
   useEffect(() => {
     fetchBoosts();
+  }, []);
+
+  useEffect(() => {
     fetchCompletedQuests();
   }, [address]);
 

components/quest-boost/boostCard.tsx

@@ -52,8 +52,8 @@ const BoostCard: FunctionComponent<BoostCardProps> = ({
   }, [userParticipationStatus]);
 
   const isClickable = useMemo(
-    () => userParticipationStatus && !userBoostCheckStatus,
-    [boost, userParticipationStatus, userBoostCheckStatus]
+    () => !userBoostCheckStatus,
+    [userBoostCheckStatus]
   );
 
   return (

components/quests/quest.tsx

@@ -12,7 +12,7 @@ import UnavailableIcon from "@components/UI/iconsComponents/icons/unavailableIco
 import styles from "@styles/quests.module.css";
 import { CDNImg } from "@components/cdn/image";
 import QuestCard from "./questCard";
-import { getBoostedQuests } from "@services/apiService";
+import { getBoosts } from "@services/apiService";
 
 type QuestProps = {
   onClick: () => void;
@@ -33,20 +33,41 @@ const Quest: FunctionComponent<QuestProps> = ({
   id,
   expired,
 }) => {
-  const { completedQuestIds } = useContext(QuestsContext);
+  const { completedQuestIds, boostedQuests } = useContext(QuestsContext);
   const isCompleted = useMemo(
     () => completedQuestIds.includes(id),
     [id, completedQuestIds]
   );
-  const [boostedQuests, setBoostedQuests] = useState<number[]>([]);
+  const [boost, setBoost] = useState<Boost>();
+  const [isQuestBoosted, setIsQuestBoosted] = useState<boolean>(false);
 
-  const fetchBoostedQuests = useCallback(async () => {
-    const response = await getBoostedQuests();
-    setBoostedQuests(response);
+  const checkIfBoostedQuest = useCallback(async () => {
+    if (!boostedQuests) return;
+    if (boostedQuests.length > 0 && boostedQuests.includes(id))
+      setIsQuestBoosted(true);
   }, []);
 
+  const fetchBoosts = useCallback(async (id: string) => {
+    try {
+      const response = await getBoosts();
+      if (!response) return;
+      const boost = response.find((b: Boost) =>
+        b.quests.includes(parseInt(id))
+      );
+      if (!boost) return;
+      setBoost(boost);
+    } catch (err) {
+      console.log("Error while fetching boost by id", err);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isQuestBoosted) return;
+    fetchBoosts(id.toString());
+  }, [isQuestBoosted, id]);
+
   useEffect(() => {
-    fetchBoostedQuests();
+    checkIfBoostedQuest();
   }, []);
 
   return (
@@ -82,7 +103,7 @@ const Quest: FunctionComponent<QuestProps> = ({
             </>
           )}
         </div>
-        {boostedQuests?.length > 0 && boostedQuests?.includes(id) ? (
+        {boost && isQuestBoosted ? (
           <div
             className={styles.issuer}
             style={{ gap: 0, padding: "8px 16px" }}
@@ -93,7 +114,7 @@ const Quest: FunctionComponent<QuestProps> = ({
               height={20}
               alt="usdc icon"
             />
-            <p className="text-white ml-2">{1500}</p>
+            <p className="text-white ml-2">{boost?.amount}</p>
           </div>
         ) : null}
       </div>

context/QuestsProvider.tsx

@@ -6,6 +6,7 @@ import { useAccount } from "@starknet-react/core";
 import { hexToDecimal } from "@utils/feltService";
 import { fetchQuestCategoryData } from "@services/questService";
 import {
+  getBoostedQuests,
   getCompletedBoosts,
   getCompletedQuests,
   getQuests,
@@ -19,6 +20,7 @@ interface QuestsConfig {
   trendingQuests: QuestDocument[];
   completedQuestIds: number[];
   completedBoostIds: number[];
+  boostedQuests: number[];
 }
 
 type GetQuestsRes =
@@ -34,6 +36,7 @@ export const QuestsContext = createContext<QuestsConfig>({
   trendingQuests: [],
   completedQuestIds: [],
   completedBoostIds: [],
+  boostedQuests: [],
 });
 
 export const QuestsContextProvider = ({
@@ -49,6 +52,7 @@ export const QuestsContextProvider = ({
   const [trendingQuests, setTrendingQuests] = useState<QuestDocument[]>([]);
   const [completedQuestIds, setCompletedQuestIds] = useState<number[]>([]);
   const [completedBoostIds, setCompletedBoostIds] = useState<number[]>([]);
+  const [boostedQuests, setBoostedQuests] = useState<number[]>([]);
   const { address } = useAccount();
 
   useMemo(() => {
@@ -120,6 +124,13 @@ export const QuestsContextProvider = ({
     );
   }, [address]);
 
+  useMemo(() => {
+    getBoostedQuests().then((data: number[] | QueryError) => {
+      if ((data as QueryError).error) return;
+      setBoostedQuests(data as number[]);
+    });
+  }, []);
+
   const contextValues = useMemo(() => {
     return {
       quests,
@@ -128,6 +139,7 @@ export const QuestsContextProvider = ({
       trendingQuests,
       completedQuestIds,
       completedBoostIds,
+      boostedQuests,
     };
   }, [
     quests,
@@ -136,6 +148,7 @@ export const QuestsContextProvider = ({
     trendingQuests,
     completedQuestIds,
     completedBoostIds,
+    boostedQuests,
   ]);
 
   return (

services/apiService.ts

@@ -148,3 +148,12 @@ export const getBoostedQuests = async () => {
     console.log("Error while getting boosted quests", err);
   }
 };
+
+export const getQuestById = async (id: number) => {
+  try {
+    const response = await fetch(`${baseurl}/get_quest?id=${id}`);
+    return await response.json();
+  } catch (err) {
+    console.log("Error while fetching quest data", err);
+  }
+};