Merge pull request #134 from enBloc-org/133/favourtie-button-state

133/favourtie button state

Author: camelPhonso

src/components/popup-components/ManageFavouritesButton/ManageFavouritesButton.tsx

@@ -1,13 +1,44 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 import { sendToBackground } from "@plasmohq/messaging"
 
+import { UserFavourites, UserSession } from "~types/userTypes"
+import newStorage from "~utils/newStorage"
+
 const ManageFavouritesButton = ({ popupId }) => {
+  const storage = newStorage()
   const [status, setStatus] = useState<
     "idle" | "loading" | "rejected"
   >("idle")
   const [isFavourite, setIsFavourite] = useState<boolean>(false)
 
+  useEffect(() => {
+    const fetchFavourites = async () => {
+      const userSession: UserSession = await storage.get(
+        "arebyte-audience-session"
+      )
+      const {
+        data,
+        error
+      }: { data: UserFavourites; error: string | null } =
+        await sendToBackground({
+          name: "fetchUserFavourites",
+          body: {
+            id: userSession.id,
+            jwt: userSession.jwt
+          }
+        })
+
+      if (error) {
+        console.error(error)
+        return setStatus("rejected")
+      }
+      setIsFavourite(data.favourites.some(fav => fav.id === popupId))
+    }
+
+    fetchFavourites()
+  }, [])
+
   const clickHandler = async () => {
     setStatus("loading")
     const { error } = await sendToBackground({
@@ -21,7 +52,7 @@ const ManageFavouritesButton = ({ popupId }) => {
 
     if (error) {
       console.error(error)
-      setStatus("rejected")
+      return setStatus("rejected")
     }
 
     setIsFavourite(!isFavourite)

src/utils/popup-utils/displayPopup.ts

@@ -32,6 +32,7 @@ export default async function displayPopup(popup: Popup) {
       type: "text",
       index: 0,
       popupInfo: {
+        id: popup.id,
         artist_name: popup.artist_name,
         medium: popup.medium,
         work_title: popup.work_title,
@@ -99,6 +100,7 @@ export default async function displayPopup(popup: Popup) {
           type: "video",
           index: 0,
           popupInfo: {
+            id: popup.id,
             artist_name: popup.artist_name,
             medium: popup.medium,
             work_title: popup.work_title,