feat: add unique viewers (#530)

* feat: add unique viewers

* feat: replace api call in analytics page

app/analytics/[questId]/page.tsx

@@ -16,7 +16,6 @@ import {
 } from "recharts";
 import {
   getQuestActivityData,
-  getQuestById,
   getQuestParticipants,
   getQuestsParticipation,
   getUniqueVisitorCount,
@@ -28,6 +27,7 @@ import { CDNImg } from "@components/cdn/image";
 import { useMediaQuery } from "@mui/material";
 import AnalyticsSkeleton from "@components/skeletons/analyticsSkeleton";
 import { QuestDefault } from "@constants/common";
+import { fetchQuestData } from "@services/questService";
 
 type BoostQuestPageProps = {
   params: {
@@ -67,9 +67,9 @@ export default function Page({ params }: BoostQuestPageProps) {
     }
   }, []);
 
-  const fetchQuestData = useCallback(async () => {
+  const fetchQuestById = useCallback(async () => {
     try {
-      const res = await getQuestById(parseInt(questId));
+      const res = await fetchQuestData(questId);
       setQuestData(res);
     } catch (error) {
       console.log("Error while fetching quest data", error);
@@ -121,7 +121,7 @@ export default function Page({ params }: BoostQuestPageProps) {
 
   const fetchPageData = useCallback(async () => {
     setLoading(true);
-    await fetchQuestData();
+    await fetchQuestById();
     await fetchGraphData();
     await fetchQuestParticipation();
     await fetchQuestParticipants();

app/quest/[questPage]/quest.tsx

@@ -1,7 +1,12 @@
 "use client";
 
 import QuestDetails from "@components/quests/questDetails";
-import React, { FunctionComponent, useEffect, useState } from "react";
+import React, {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import homeStyles from "@styles/Home.module.css";
 import styles from "@styles/quests.module.css";
 import { useRouter } from "next/navigation";
@@ -16,6 +21,7 @@ import BannerPopup from "@components/UI/menus/bannerPopup";
 import { useDomainFromAddress } from "@hooks/naming";
 import NftIssuerTag from "@components/quests/nftIssuerTag";
 import { QuestDefault } from "@constants/common";
+import { updateUniqueVisitors } from "@services/apiService";
 
 type QuestPageProps = {
   questId: string;
@@ -39,6 +45,15 @@ const Quest: FunctionComponent<QuestPageProps> = ({
   const [hasNftReward, setHasNftReward] = useState<boolean>(false);
   const { domain } = useDomainFromAddress(address);
 
+  const updatePageViews = useCallback(async (quest_id: string) => {
+    try {
+      const pageName = `quest_${quest_id}`;
+      await updateUniqueVisitors(pageName);
+    } catch (err) {
+      console.log("Error while updating page views", err);
+    }
+  }, []);
+
   // this fetches quest data
   useEffect(() => {
     fetch(`${process.env.NEXT_PUBLIC_API_LINK}/get_quest?id=${questId}`)
@@ -62,6 +77,19 @@ const Quest: FunctionComponent<QuestPageProps> = ({
       });
   }, [questId]);
 
+  useEffect(() => {
+    // dont log if questId is not present
+    if (!questId) return;
+
+    /*
+    we only want to update page views if the quest is not expired.
+    Expired quests don't need to be updated.
+    */
+    if (quest.expired) return;
+
+    updatePageViews(questId);
+  }, [questId, updatePageViews, quest]);
+
   return errorPageDisplay ? (
     <ErrorScreen
       errorMessage="This quest doesn't exist !"

services/apiService.ts

@@ -192,3 +192,12 @@ export const getUniqueVisitorCount = async (id: number) => {
     console.log("Error while fetching unique visitor count", err);
   }
 };
+
+export const updateUniqueVisitors = async (id: string) => {
+  try {
+    const response = await fetch(`${baseurl}/unique_page_visit?page_id=${id}`);
+    return await response.json();
+  } catch (err) {
+    console.log("Error while fetching unique visitor count", err);
+  }
+};