Add, list, getbyid

working via zustand now + adding image from camera

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>
     );
-}
+}

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"
+                />
+            }
         />
-      }
-    />
-  );
-}
+    );
+}