init wishlist, zustand and tanstack

ArtisanConnect/components/NoticeCard.jsx

@@ -1,43 +1,62 @@
 import { Box } from "@/components/ui/box";
-import { Button, ButtonText } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Heading } from "@/components/ui/heading";
 import { Image } from "@/components/ui/image";
 import { Text } from "@/components/ui/text";
 import { VStack } from "@/components/ui/vstack";
-import { Icon, FavouriteIcon } from "@/components/ui/icon";
+import { Link } from "expo-router";
+import { Pressable } from "react-native";
+import { useWishlist } from "@/store/wishlistStore";
+import { Ionicons } from "@expo/vector-icons";
 
-export default function NoticeCard() {
-  return (        
-        <Card className="p-5 rounded-lg max-w-[360px] m-3">
+export function NoticeCard({ notice }) {
+  const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
+  const removeNoticeFromWishlist = useWishlist(
+    (state) => state.removeNoticeFromWishlist
+  );
+  const isInWishlist = useWishlist((state) =>
+    state.wishlistNotices.some((item) => item.noticeId == notice.noticeId)
+  );
+
+  return (
+    <Link href={`/notice/${notice.noticeId}`} asChild>
+      <Pressable className="flex-1">
+        <Card className="p-0 rounded-lg max-w-[460px]  flex-1">
           <Image
             source={{
-              uri: 'https://gluestack.github.io/public-blog-video-assets/saree.png',
+              uri: "https://gluestack.github.io/public-blog-video-assets/saree.png",
             }}
-            className="mb-6 h-[240px] w-full rounded-md aspect-[4/3]"
+            className=" h-auto w-full rounded-md aspect-[1/1]"
             alt="image"
+            resizeMode="cover"
           />
-          <Text
-            className="text-sm font-normal mb-2 text-typography-700"
-          >
-            Fashion Clothing
-          </Text>
-          <VStack className="mb-6">
-            <Heading size="md" className="mb-2">
-              Cotton Kurta
-            </Heading>
+          <VStack className="p-2">
+            <Text className="text-sm font-normal mb-2 text-typography-700">
+              {notice.title}
+            </Text>
+            <Box className="flex-row items-center">
+              <Heading size="md" className="flex-1">
+                {notice.price}zł
+              </Heading>
+              <Pressable
+                onPress={() => {
+                  if (isInWishlist) {
+                    removeNoticeFromWishlist(notice.noticeId); // Usuń z ulubionych
+                  } else {
+                    addNoticeToWishlist(notice); // Dodaj do ulubionych
+                  }
+                }}
+              >
+                <Ionicons
+                  name={isInWishlist ? "heart" : "heart-outline"} // Dynamiczna ikona
+                  size={24} // Rozmiar ikony
+                  color={"primary-heading-500"} // Kolor ikony
+                />
+              </Pressable>
+            </Box>
           </VStack>
-          <Box
-            className="flex-row"
-          >
-            <Button
-              className="px-4 py-2 mr-3 mb-0 flex-1"
-            >
-              <ButtonText size="sm">See more</ButtonText>
-            </Button>
-               <Icon as={FavouriteIcon} size="xl" className="text-typography-500 m-2 w-7 h-7" />
-          </Box>
         </Card>
-    );
+      </Pressable>
+    </Link>
+  );
 }
-