change and sync wishlist with api

ArtisanConnect/api/wishlist.jsx

@@ -0,0 +1,29 @@
+import axios from "axios";
+// import FormData from 'form-data'
+
+const API_URL = "https://testowe.zikor.pl/api/v1/wishlist";
+
+export async function toggleNoticeStatus(noticeId) {
+    try {
+        const response = await axios.post(`${API_URL}/toggle/${noticeId}`, null, {
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+        return response.data;
+    } catch (error) {
+        console.error("Error toggling wishlist item:", error);
+        throw error;
+    }
+}
+
+export async function getWishlist() {
+    try {
+        const response = await axios.get(`${API_URL}/`);
+        console.log("Wishlist response:", response.data);
+        return response.data;
+    } catch (error) {
+        console.error("Error fetching wishlist:", error);
+        throw error;
+    }
+}

ArtisanConnect/app/(tabs)/wishlist.jsx

@@ -4,9 +4,15 @@ import { NoticeCard } from "@/components/NoticeCard";
 import { Ionicons } from "@expo/vector-icons";
 import { Box } from "@/components/ui/box";
 import { Text } from "@/components/ui/text";
+import { useEffect } from "react";
 
 export default function Wishlist() {
-  const wishlistNotices = useWishlist((state) => state.wishlistNotices);
+   const wishlistNotices = useWishlist((state) => state.wishlistNotices);
+  const fetchWishlist = useWishlist((state) => state.fetchWishlist);
+
+  useEffect(() => {
+    fetchWishlist();
+  }, []);
   if (wishlistNotices.length === 0) {
     return (
       <Box className="flex-row flex-1 justify-center">

ArtisanConnect/components/NoticeCard.jsx

@@ -14,8 +14,7 @@ import {useEffect, useState} from "react";
 export function NoticeCard({notice}) {
     const noticeId = notice?.noticeId;
 
-    const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
-    const removeNoticeFromWishlist = useWishlist((state) => state.removeNoticeFromWishlist);
+    const toggleNoticeInWishlist = useWishlist((state) => state.toggleNoticeInWishlist);
     const isInWishlist = useWishlist((state) =>
         noticeId ? state.wishlistNotices.some((item) => item.noticeId === noticeId) : false
     );
@@ -94,11 +93,7 @@ export function NoticeCard({notice}) {
                             </Heading>
                             <Pressable
                                 onPress={() => {
-                                    if (isInWishlist) {
-                                        removeNoticeFromWishlist(noticeId);
-                                    } else {
-                                        addNoticeToWishlist(notice);
-                                    }
+                                 toggleNoticeInWishlist(noticeId);
                                 }}
                             >
                                 <Ionicons

ArtisanConnect/store/wishlistStore.jsx

@@ -1,15 +1,38 @@
 import { create } from "zustand";
+import * as api from "@/api/wishlist";
 
 export const useWishlist = create((set) => ({
   wishlistNotices: [],
-  addNoticeToWishlist: (wishlistNotice) =>
-    set((state) => ({
-      wishlistNotices: [...state.wishlistNotices, wishlistNotice],
-    })),
-  removeNoticeFromWishlist: (noticeId) =>
-    set((state) => ({
-      wishlistNotices: state.wishlistNotices.filter(
-        (item) => item.noticeId !== noticeId
-      ),
-    })),
+  toggleNoticeInWishlist: async (noticeId) => {
+    try {
+      await api.toggleNoticeStatus(noticeId);
+      set((state) => {
+        const exists = state.wishlistNotices.some(
+          (item) => item.noticeId == noticeId
+        );
+        return exists
+          ? {
+              wishlistNotices: state.wishlistNotices.filter(
+                (item) => item.noticeId != noticeId
+              ),
+            }
+          : {
+              wishlistNotices: [
+                ...state.wishlistNotices,
+                { noticeId },
+              ],
+            };
+      });
+    } catch (error) {
+      console.error("Error toggling wishlist notice:", error);
+    }
+  },
+  fetchWishlist: async () => {
+  try {
+    const data = await api.getWishlist();
+    set({ wishlistNotices: data });
+  } catch (error) {
+    console.error("Error fetching wishlist:", error);
+  }
+},
 }));