Add, list, getbyid

working via zustand now
2025-05-20 15:19:29 +02:00
parent 0295386dac
commit a7cf31900b
10 changed files with 1199 additions and 865 deletions
--- a/ArtisanConnect/api/notices.jsx
+++ b/ArtisanConnect/api/notices.jsx
@@ -31,19 +31,17 @@ export async function createNotice(notice) {
                "Content-Type": "application/json",
            },
        });
-        // console.log("Response", response.data, "status code: ", response.status);
-        // console.log("New notice id: ", response.data.noticeId);
-        // console.log("Image url: ", notice.image)

        if (response.data.noticeId !== null) {
            notice.image.forEach(imageUri => {
                uploadImage(response.data.noticeId, imageUri);
            });
-            // uploadImage(response.data.noticeId, notice.image);
        }

+        return response.data;
    } catch (error) {
        console.log("Error", error.response.data, error.response.status);
+        return null;
    }
 }

@@ -87,7 +85,6 @@ export async function getAllImagesByNoticeId(noticeId) {
 }

 export const uploadImage = async (noticeId, imageUri) => {
-    console.log("Started upload image");
    console.log(imageUri);

    const formData = new FormData();
--- a/ArtisanConnect/app.json
+++ b/ArtisanConnect/app.json
@@ -32,7 +32,13 @@
        {
          "photosPermission": "The app accesses your photos to let you share them with your friends."
        }
+      ],
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Please allow $(PRODUCT_NAME) to access your camera"
+        }
      ]
    ]
  }
-}
+}
--- a/ArtisanConnect/app/(tabs)/notice/create.jsx
+++ b/ArtisanConnect/app/(tabs)/notice/create.jsx
@@ -21,17 +21,20 @@ import {
 } from "@/components/ui/select";

 import {ChevronDownIcon} from "@/components/ui/icon";
-import {useMutation} from "@tanstack/react-query";
-import {createNotice} from "@/api/notices";
+import {useNoticesStore} from "@/store/noticesStore";
 import {listCategories} from "@/api/categories";
+import {useRouter} from "expo-router";

 export default function CreateNotice() {
+    const router = useRouter();
+    const {addNotice} = useNoticesStore();
    const [title, setTitle] = useState("");
    const [description, setDescription] = useState("");
    const [price, setPrice] = useState("");
    const [category, setCategory] = useState("");
    const [image, setImage] = useState([]);
    const [selectItems, setSelectItems] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);

    useEffect(() => {
        let isMounted = true;
@@ -73,26 +76,7 @@ export default function CreateNotice() {
        },
    });

-    const noticeMutation = useMutation({
-        mutationFn: () =>
-            createNotice({
-                title: title,
-                clientId: 1,
-                description: description,
-                price: parseFloat(price),
-                category: category,
-                status: "ACTIVE",
-                image: image,
-            }),
-        onSuccess: () => {
-            console.log("Notice created successfully");
-        },
-        onError: (error) => {
-            console.error("Error creating notice. Erroe message: ", error.message);
-        },
-    });
-
-    const addNotice = () => {
+    const handleAddNotice = async () => {
        setError({
            title: !title,
            description: !description,
@@ -104,13 +88,47 @@ export default function CreateNotice() {
            console.log("Error in form");
            return;
        }
-        noticeMutation.mutate();
+
+        setIsLoading(true);
+        try {
+            const result = await addNotice({
+                title: title,
+                clientId: 1,
+                description: description,
+                price: price,
+                category: category,
+                status: "ACTIVE",
+                image: image
+            });
+
+            if (result) {
+                console.log("Notice created successfully with ID: ", result.noticeId);
+                router.push("/(tabs)/notices");
+            }
+        } catch (error) {
+            console.error("Error creating notice. Error message: ", error.message);
+        } finally {
+            setIsLoading(false);
+        }
    };

+    const takePicture = async () => {
+        const {status} = await ImagePicker.requestCameraPermissionsAsync();
+        if (status !== 'granted') {
+            return;
+        }
+        const result = await ImagePicker.launchCameraAsync({
+            allowsEditing: false,
+        });
+
+        if (!result.canceled && result.assets) {
+            setImage(result.assets.map(asset => asset.uri));
+        }
+    }
+
    const pickImage = async () => {
-        // No permissions request is necessary for launching the image library
        let result = await ImagePicker.launchImageLibraryAsync({
-            mediaTypes: ['images'],
+            mediaTypes: 'images',
            selectionLimit: 8,
            allowsEditing: false,
            allowsMultipleSelection: true,
@@ -119,7 +137,6 @@ export default function CreateNotice() {
        });

        if (!result.canceled) {
-            // await uploadImage(1, result.assets[0].uri);
            setImage(result.assets.map(asset => asset.uri));
        }
    };
@@ -135,10 +152,13 @@ export default function CreateNotice() {
                                Wybierz zdjęcia
                            </ButtonText>
                        </Button>
-                      <Text size="sm"
-                            bold="true"
-                      >
-                          Pierwsze zdjęcie będzie zdjęciem głównym</Text>
+                        <Button onPress={takePicture}>
+                            <ButtonText>Zrób zdjęcie</ButtonText>
+                        </Button>
+                        <Text size="sm"
+                              bold="true"
+                        >
+                            Pierwsze zdjęcie będzie zdjęciem głównym</Text>
                        {image && image.length > 0 && (
                            <VStack space="xs" className="flex-row flex-wrap">
                                {image.map((img, index) => (
@@ -208,8 +228,8 @@ export default function CreateNotice() {
                    </VStack>
                    <Button
                        className="mt-5 w-full"
-                        onPress={() => addNotice()}
-                        disabled={noticeMutation.isLoading}
+                        onPress={handleAddNotice}
+                        disabled={isLoading}
                    >
                        <ButtonText className="text-typography-0">Dodaj</ButtonText>
                    </Button>
@@ -217,4 +237,4 @@ export default function CreateNotice() {
            </FormControl>
        </ScrollView>
    );
-}
+}
--- a/ArtisanConnect/app/(tabs)/notices.jsx
+++ b/ArtisanConnect/app/(tabs)/notices.jsx
@@ -1,47 +1,65 @@
-import { FlatList, Text, ActivityIndicator, RefreshControl } from "react-native";
-import { useState } from "react";
-import { listNotices } from "@/api/notices";
-import { useQuery } from "@tanstack/react-query";
-import { NoticeCard } from "@/components/NoticeCard";
+import {FlatList, Text, ActivityIndicator, RefreshControl} from "react-native";
+import {useState, useEffect} from "react";
+import {useNoticesStore} from "@/store/noticesStore";
+import {NoticeCard} from "@/components/NoticeCard";

 export default function Notices() {
-  const [refreshing, setRefreshing] = useState(false);
-  const { data, isLoading, error, refetch } = useQuery({
-    queryKey: ["notices"],
-    queryFn: listNotices,
-  });
+    const {notices, fetchNotices} = useNoticesStore();
+    const [refreshing, setRefreshing] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);

-  if (isLoading) {
-    return <ActivityIndicator />;
-  }
+    useEffect(() => {
+        loadData();
+    }, []);

-  if (error) {
-    console.log(error.message);
-    return <Text>Nie udało sie pobrać listy. {error.message}</Text>;
-  }
+    const loadData = async () => {
+        setIsLoading(true);
+        try {
+            await fetchNotices();
+            setError(null);
+        } catch (err) {
+            setError(err);
+        } finally {
+            setIsLoading(false);
+        }
+    };

-  const onRefresh = async () => {
-    setRefreshing(true);
-    await refetch();
-    setRefreshing(false);
-  };
+    const onRefresh = async () => {
+        setRefreshing(true);
+        try {
+            await fetchNotices();
+        } catch (err) {
+            setError(err);
+        } finally {
+            setRefreshing(false);
+        }
+    };

-  return (
-    <FlatList
-      key={2}
-      data={data}
-      numColumns={2}
-      columnContainerClassName="m-2"
-      columnWrapperClassName="gap-2 m-2"
-      renderItem={({ item }) => <NoticeCard notice={item} />}
-      refreshControl={
-        <RefreshControl
-            refreshing={refreshing || isLoading}
-            onRefresh={onRefresh}
-            colors={["#3b82f6"]}
-            tintColor="#3b82f6"
+    if (isLoading && !refreshing) {
+        return <ActivityIndicator/>;
+    }
+
+    if (error) {
+        return <Text>Nie udało sie pobrać listy. {error.message}</Text>;
+    }
+
+    return (
+        <FlatList
+            key={2}
+            data={notices}
+            numColumns={2}
+            columnContainerClassName="m-2"
+            columnWrapperClassName="gap-2 m-2"
+            renderItem={({item}) => <NoticeCard notice={item}/>}
+            refreshControl={
+                <RefreshControl
+                    refreshing={refreshing}
+                    onRefresh={onRefresh}
+                    colors={["#3b82f6"]}
+                    tintColor="#3b82f6"
+                />
+            }
        />
-      }
-    />
-  );
-}
+    );
+}
--- a/ArtisanConnect/app/notice/[id].jsx
+++ b/ArtisanConnect/app/notice/[id].jsx
@@ -1,47 +1,72 @@
 import {Stack, useLocalSearchParams} from "expo-router";
 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 {useQuery} from "@tanstack/react-query";
-import {getImageByNoticeId, getNoticeById} from "@/api/notices";
+import {Ionicons} from "@expo/vector-icons";
 import {ActivityIndicator} from "react-native";
 import {useEffect, useState} from "react";
+import {useNoticesStore} from "@/store/noticesStore";
+import {useWishlist} from "@/store/wishlistStore";
+import {Pressable} from "react-native";

 export default function NoticeDetails() {
    const {id} = useLocalSearchParams();
    const [image, setImage] = useState(null);
    const [isImageLoading, setIsImageLoading] = useState(true);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [notice, setNotice] = useState(null);

-    const {
-        data: notice,
-        isLoading,
-        error,
-    } = useQuery({
-        queryKey: ["notices", id],
-        queryFn: () => getNoticeById(Number(id)),
-    });
+    const {getNoticeById, getAllImagesByNoticeId} = useNoticesStore();
+    const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
+    const removeNoticeFromWishlist = useWishlist((state) => state.removeNoticeFromWishlist);
+    const isInWishlist = useWishlist((state) =>
+        notice ? state.wishlistNotices.some((item) => item.noticeId === notice.noticeId) : false
+    );
+
+    useEffect(() => {
+        const fetchNotice = async () => {
+            setIsLoading(true);
+            try {
+                const noticeData = getNoticeById(Number(id));
+                if (noticeData) {
+                    setNotice(noticeData);
+                    setError(null);
+                } else {
+                    setError(new Error(`Notice with ID ${id} not found.`));
+                }
+            } catch (err) {
+                setError(err);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchNotice();
+    }, [id]);

    useEffect(() => {
        const fetchImage = async () => {
            setIsImageLoading(true);
            if (notice) {
                try {
-                    const imageData = await getImageByNoticeId(notice.noticeId);
-                    setImage(imageData);
+                    const images = await getAllImagesByNoticeId(notice.noticeId);
+                    setImage(images && images.length > 0 ? images[0] : "https://http.cat/404.jpg");
                } catch (err) {
-                    console.error("Błąd przy pobieraniu obrazu:", err);
+                    console.error("Error while loading images:", err);
+                    setImage("https://http.cat/404.jpg");
                } finally {
                    setIsImageLoading(false);
                }
            }
        };

-        fetchImage();
+        if (notice) {
+            fetchImage();
+        }
    }, [notice]);

    if (isLoading) {
@@ -49,11 +74,15 @@ export default function NoticeDetails() {
    }

    if (error) {
-        return <Text>Błąd, spróbuj ponownie póżniej</Text>;
+        return <Text>Błąd, spróbuj ponownie póżniej: {error.message}</Text>;
+    }
+
+    if (!notice) {
+        return <Text>Nie znaleziono ogłoszenia</Text>;
    }

    return (
-        <Card className="p-0 rounded-lg  m-3 flex-1">
+        <Card className="p-0 rounded-lg m-3 flex-1">
            <Stack.Screen
                options={{
                    title: notice.title,
@@ -66,7 +95,7 @@ export default function NoticeDetails() {
            ) : (
                <Image
                    source={{
-                        uri: image || "https://http.cat/404.jpg",
+                        uri: image,
                    }}
                    className="h-auto w-full rounded-md aspect-[1/1]"
                    alt="image"
@@ -82,11 +111,21 @@ export default function NoticeDetails() {
                    <Heading size="md" className="flex-1">
                        {notice.price}zł
                    </Heading>
-                    <Icon
-                        as={FavouriteIcon}
-                        size="sm"
-                        className="text-primary-500 w-6 h-6"
-                    />
+                    <Pressable
+                        onPress={() => {
+                            if (isInWishlist) {
+                                removeNoticeFromWishlist(notice.noticeId);
+                            } else {
+                                addNoticeToWishlist(notice);
+                            }
+                        }}
+                    >
+                        <Ionicons
+                            name={isInWishlist ? "heart" : "heart-outline"}
+                            size={24}
+                            color={"primary-heading-500"}
+                        />
+                    </Pressable>
                </Box>
            </VStack>
        </Card>
--- a/ArtisanConnect/components/NoticeCard.jsx
+++ b/ArtisanConnect/components/NoticeCard.jsx
@@ -5,43 +5,71 @@ import {Image} from "@/components/ui/image";
 import {Text} from "@/components/ui/text";
 import {VStack} from "@/components/ui/vstack";
 import {Link} from "expo-router";
-import {Pressable, ActivityIndicator} from "react-native";
+import {Pressable, ActivityIndicator, View} from "react-native";
 import {useWishlist} from "@/store/wishlistStore";
+import {useNoticesStore} from "@/store/noticesStore";
 import {Ionicons} from "@expo/vector-icons";
 import {useEffect, useState} from "react";
-import {getImageByNoticeId} from "@/api/notices";

 export function NoticeCard({notice}) {
+    const noticeId = notice?.noticeId;
+
    const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
-    const removeNoticeFromWishlist = useWishlist(
-        (state) => state.removeNoticeFromWishlist
-    );
+    const removeNoticeFromWishlist = useWishlist((state) => state.removeNoticeFromWishlist);
    const isInWishlist = useWishlist((state) =>
-        state.wishlistNotices.some((item) => item.noticeId === notice.noticeId)
+        noticeId ? state.wishlistNotices.some((item) => item.noticeId === noticeId) : false
    );
+
    const [image, setImage] = useState(null);
    const [isLoading, setIsLoading] = useState(true);

+    const {getAllImagesByNoticeId} = useNoticesStore();
+
    useEffect(() => {
+        let isMounted = true;
+
        const fetchImage = async () => {
+            if (!noticeId) {
+                if (isMounted) {
+                    setImage("https://http.cat/404.jpg");
+                    setIsLoading(false);
+                }
+                return;
+            }
+
            setIsLoading(true);
            try {
-                let imageUrl = await getImageByNoticeId(notice.noticeId);
-                setImage(imageUrl);
+                const images = await getAllImagesByNoticeId(noticeId);
+                if (isMounted) {
+                    setImage(images && images.length > 0 ? images[0] : "https://http.cat/404.jpg");
+                }
            } catch (error) {
-                console.error("Błąd podczas pobierania obrazu:", error);
+                console.error(`Error while loading image: ${error}`);
+                if (isMounted) {
+                    setImage("https://http.cat/404.jpg");
+                }
            } finally {
-                setIsLoading(false);
+                if (isMounted) {
+                    setIsLoading(false);
+                }
            }
        };

        fetchImage();
-    }, [notice.noticeId]);
+
+        return () => {
+            isMounted = false;
+        };
+    }, [noticeId]);
+
+    if (!notice) {
+        return <View style={{flex: 1}} />;
+    }

    return (
-        <Link href={`/notice/${notice.noticeId}`} asChild>
+        <Link href={`/notice/${noticeId}`} asChild>
            <Pressable className="flex-1">
-                <Card className="p-0 rounded-lg max-w-[460px]  flex-1">
+                <Card className="p-0 rounded-lg max-w-[460px] flex-1">
                    {isLoading ? (
                        <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
                            <ActivityIndicator size="large" color="#3b82f6" />
@@ -49,7 +77,7 @@ export function NoticeCard({notice}) {
                    ) : (
                        <Image
                            source={{
-                                uri: image || "https://http.cat/404.jpg",
+                                uri: image,
                            }}
                            className="h-auto w-full rounded-md aspect-[1/1]"
                            alt="image"
@@ -67,16 +95,16 @@ export function NoticeCard({notice}) {
                            <Pressable
                                onPress={() => {
                                    if (isInWishlist) {
-                                        removeNoticeFromWishlist(notice.noticeId); // Usuń z ulubionych
+                                        removeNoticeFromWishlist(noticeId);
                                    } else {
-                                        addNoticeToWishlist(notice); // Dodaj do ulubionych
+                                        addNoticeToWishlist(notice);
                                    }
                                }}
                            >
                                <Ionicons
-                                    name={isInWishlist ? "heart" : "heart-outline"} // Dynamiczna ikona
-                                    size={24} // Rozmiar ikony
-                                    color={"primary-heading-500"} // Kolor ikony
+                                    name={isInWishlist ? "heart" : "heart-outline"}
+                                    size={24}
+                                    color={"primary-heading-500"}
                                />
                            </Pressable>
                        </Box>
--- a/ArtisanConnect/package-lock.json
+++ b/ArtisanConnect/package-lock.json
--- a/ArtisanConnect/package.json
+++ b/ArtisanConnect/package.json
@@ -50,7 +50,8 @@
    "react-native-svg": "15.11.2",
    "react-native-web": "~0.20.0",
    "tailwindcss": "^3.4.17",
-    "zustand": "^5.0.3"
+    "zustand": "^5.0.3",
+    "expo-camera": "~16.1.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
--- a/ArtisanConnect/store/noticesStore.jsx
+++ b/ArtisanConnect/store/noticesStore.jsx
@@ -0,0 +1,41 @@
+import {create} from "zustand";
+import * as api from "@/api/notices";
+
+export const useNoticesStore = create((set, get) => ({
+    notices: [],
+    fetchNotices: async () => {
+        set({error: null});
+        try {
+            const data = await api.listNotices();
+            set({notices: data});
+        } catch (error) {
+            set(error);
+        }
+    },
+
+    addNotice: async (notice) => {
+        try {
+            const newNotice = await api.createNotice(notice);
+            set((state) => ({
+                notices: [...state.notices, newNotice],
+            }));
+            return newNotice;
+        } catch (error) {
+            set({ error });
+            return null;
+        }
+    },
+
+    getNoticeById: (noticeId) => {
+        return get().notices.find((notice) => String(notice.noticeId) === String(noticeId));
+    },
+
+    getAllImagesByNoticeId: async (noticeId) => {
+        try {
+            return await api.getAllImagesByNoticeId(noticeId);
+        } catch (error) {
+            console.error("Error while getting images:", error);
+            return ["https://http.cat/404.jpg"];
+        }
+    }
+}));
--- a/ArtisanConnect/store/wishlistStore.jsx
+++ b/ArtisanConnect/store/wishlistStore.jsx
@@ -9,7 +9,7 @@ export const useWishlist = create((set) => ({
  removeNoticeFromWishlist: (noticeId) =>
    set((state) => ({
      wishlistNotices: state.wishlistNotices.filter(
-        (item) => item.noticeId != noticeId
+        (item) => item.noticeId !== noticeId
      ),
    })),
 }));