uplodowanie wszystkich zdjęć które są wybrane przy dodawaniu produktu

ArtisanConnect/api/notices.jsx

@@ -2,6 +2,7 @@ import axios from "axios";
 import FormData from 'form-data'
 
 const API_URL = "https://testowe.zikor.pl/api/v1";
+
 // const API_URL = "http://172.20.10.2:8080/api/v1";
 
 export async function listNotices() {
@@ -35,7 +36,10 @@ export async function createNotice(notice) {
         // console.log("Image url: ", notice.image)
 
         if (response.data.noticeId !== null) {
-            uploadImage(response.data.noticeId, notice.image);
+            notice.image.forEach(imageUri => {
+                uploadImage(response.data.noticeId, imageUri);
+            });
+            // uploadImage(response.data.noticeId, notice.image);
         }
 
     } catch (error) {
@@ -63,18 +67,15 @@ export async function getImageByNoticeId(noticeId) {
 
 export const uploadImage = async (noticeId, imageUri) => {
     console.log("Started upload image");
+    console.log(imageUri);
 
-    // Utwórz obiekt FormData
     const formData = new FormData();
 
-    // Zdobądź nazwę pliku z URI
     const filename = imageUri.split('/').pop();
 
-    // Określ typ MIME (możesz dostosować lub wykrywać dynamicznie)
     const match = /\.(\w+)$/.exec(filename);
     const type = match ? `image/${match[1]}` : 'image/jpeg';
 
-    // Dodaj plik do FormData w formacie akceptowanym przez serwer
     formData.append('file', {
         uri: imageUri,
         name: filename,

ArtisanConnect/app/(tabs)/notice/create.jsx

@@ -1,207 +1,220 @@
-import { useState, useEffect  } from "react";
-import { Image, StyleSheet } from "react-native";
-import { Button, ButtonText } from "@/components/ui/button";
-import { FormControl } from "@/components/ui/form-control";
-import { Input, InputField } from "@/components/ui/input";
-import { Text } from "@/components/ui/text";
-import { VStack } from "@/components/ui/vstack";
-import { Textarea, TextareaInput } from "@/components/ui/textarea";
+import {useState, useEffect} from "react";
+import {Image, StyleSheet} from "react-native";
+import {Button, ButtonText} from "@/components/ui/button";
+import {FormControl} from "@/components/ui/form-control";
+import {Input, InputField} from "@/components/ui/input";
+import {Text} from "@/components/ui/text";
+import {VStack} from "@/components/ui/vstack";
+import {Textarea, TextareaInput} from "@/components/ui/textarea";
+import {ScrollView} from '@gluestack-ui/themed';
 import * as ImagePicker from 'expo-image-picker';
 import {
-  Select,
-  SelectTrigger,
-  SelectInput,
-  SelectIcon,
-  SelectPortal,
-  SelectBackdrop,
-  SelectContent,
-  SelectItem,
-  SelectScrollView,
+    Select,
+    SelectTrigger,
+    SelectInput,
+    SelectIcon,
+    SelectPortal,
+    SelectBackdrop,
+    SelectContent,
+    SelectItem,
+    SelectScrollView,
 } from "@/components/ui/select";
 
-import { ChevronDownIcon } from "@/components/ui/icon";
-import { useMutation } from "@tanstack/react-query";
+import {ChevronDownIcon} from "@/components/ui/icon";
+import {useMutation} from "@tanstack/react-query";
 import {createNotice} from "@/api/notices";
 import {listCategories} from "@/api/categories";
 
 export default function CreateNotice() {
-  const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [price, setPrice] = useState("");
-  const [category, setCategory] = useState("");
-  const [image, setImage] = useState(null);
-  const [selectItems, setSelectItems] = useState([]);
+    const [title, setTitle] = useState("");
+    const [description, setDescription] = useState("");
+    const [price, setPrice] = useState("");
+    const [category, setCategory] = useState("");
+    const [image, setImage] = useState([]);
+    const [selectItems, setSelectItems] = useState([]);
 
-  useEffect(() => {
-    let isMounted = true;
+    useEffect(() => {
+        let isMounted = true;
 
-    const fetchSelectItems = async () => {
-      try {
-        let data = await listCategories();
-        if (isMounted && Array.isArray(data)) {
-          setSelectItems(data);
+        const fetchSelectItems = async () => {
+            try {
+                let data = await listCategories();
+                if (isMounted && Array.isArray(data)) {
+                    setSelectItems(data);
+                }
+            } catch (error) {
+                console.error('Error fetching select items:', error);
+            }
+        };
+
+        fetchSelectItems();
+
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+
+    const [error, setError] = useState({
+        title: false,
+        description: false,
+        price: false,
+        category: false,
+    });
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        image: {
+            width: 100,
+            height: 100,
+        },
+    });
+
+    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 = () => {
+        setError({
+            title: !title,
+            description: !description,
+            price: !price,
+            category: !category,
+        });
+
+        if (!title || !description || !price || !category) {
+            console.log("Error in form");
+            return;
         }
-      } catch (error) {
-        console.error('Error fetching select items:', error);
-      }
+        noticeMutation.mutate();
     };
 
-    fetchSelectItems();
+    const pickImage = async () => {
+        // No permissions request is necessary for launching the image library
+        let result = await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: ['images'],
+            selectionLimit: 8,
+            allowsEditing: false,
+            allowsMultipleSelection: true,
+            aspect: [4, 3],
+            quality: 0.5,
+        });
 
-    return () => {
-      isMounted = false;
+        if (!result.canceled) {
+            // await uploadImage(1, result.assets[0].uri);
+            setImage(result.assets.map(asset => asset.uri));
+        }
     };
-  }, []);
 
-  const [error, setError] = useState({
-    title: false,
-    description: false,
-    price: false,
-    category: false,
-  });
+    return (
+        <ScrollView h="$80" w="$80">
+            <FormControl className="p-4 border rounded-lg border-outline-300">
+                <VStack space="xl">
+                    <VStack space="md">
+                        <Text className="text-typography-500">Zdjęcia</Text>
+                        <Button onPress={pickImage}>
+                            <ButtonText>
+                                Wybierz zdjęcia
+                            </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) => (
+                                    <Image key={index} source={{uri: img}} style={styles.image} className="m-1"/>
+                                ))}
+                            </VStack>
+                        )}
+                    </VStack>
 
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    image: {
-      width: 100,
-      height: 100,
-    },
-  });
+                    <VStack space="xs">
+                        <Text className="text-typography-500">Tytuł</Text>
+                        <Input className="min-w-[250px]" isInvalid={error.title}>
+                            <InputField
+                                type="text"
+                                value={title}
+                                onChangeText={(value) => setTitle(value)}
+                            />
+                        </Input>
+                    </VStack>
 
-  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);
-    },
-  });
+                    <VStack space="xs">
+                        <Text className="text-typography-500">Opis</Text>
+                        <Textarea
+                            size="md"
+                            className="min-w-[250px] "
+                            isInvalid={error.description}
+                        >
+                            <TextareaInput
+                                placeholder="Opisz produkt"
+                                value={description}
+                                onChangeText={(value) => setDescription(value)}
+                            />
+                        </Textarea>
+                    </VStack>
 
-  const addNotice = () => {
-    setError({
-      title: !title,
-      description: !description,
-      price: !price,
-      category: !category,
-    });
-
-    if (!title || !description || !price || !category) {
-      console.log("Error in form");
-      return;
-    }
-    noticeMutation.mutate();
-  };
-
-  const pickImage = async () => {
-    // No permissions request is necessary for launching the image library
-    let result = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ['images'],
-      selectionLimit: 8,
-      allowsEditing: false,
-      allowsMultipleSelection: true,
-      aspect: [4, 3],
-      quality: 0.5,
-    });
-
-    if (!result.canceled) {
-      // await uploadImage(1, result.assets[0].uri);
-      setImage(result.assets[0].uri);
-    }
-  };
-
-  return (
-    <FormControl className="p-4 border rounded-lg border-outline-300">
-      <VStack space="xl">
-        <VStack space="xs">
-            <Text className="text-typography-500">Zdjęcie</Text>
-          <Button onPress={pickImage}>
-            <ButtonText>
-              Upload image
-            </ButtonText>
-          </Button>
-          {image && <Image source={{ uri: image }} style={styles.image}/>}
-        </VStack>
-
-        <VStack space="xs">
-          <Text className="text-typography-500">Tytuł</Text>
-          <Input className="min-w-[250px]" isInvalid={error.title}>
-            <InputField
-              type="text"
-              value={title}
-              onChangeText={(value) => setTitle(value)}
-            />
-          </Input>
-        </VStack>
-
-        <VStack space="xs">
-          <Text className="text-typography-500">Opis</Text>
-          <Textarea
-            size="md"
-            className="min-w-[250px] "
-            isInvalid={error.description}
-          >
-            <TextareaInput
-              placeholder="Opisz produkt"
-              value={description}
-              onChangeText={(value) => setDescription(value)}
-            />
-          </Textarea>
-        </VStack>
-
-        <VStack space="xs">
-          <Text className="text-typography-500">Cena</Text>
-          <Input className="min-w-[250px]" isInvalid={error.price}>
-            <InputField
-              type="text"
-              value={price}
-              onChangeText={(value) => setPrice(value)}
-            />
-          </Input>
-        </VStack>
-        <VStack space="xs">
-          <Text className="text-typography-500">Kategoria</Text>
-          <Select
-            onValueChange={(value) => setCategory(value)}
-            isInvalid={error.category}
-          >
-            <SelectTrigger variant="outline" size="md">
-              <SelectInput placeholder="Wybierz kategorię" />
-              <SelectIcon className="mr-3" as={ChevronDownIcon} />
-            </SelectTrigger>
-            <SelectPortal>
-              <SelectBackdrop />
-              <SelectContent style={{ maxHeight: 400 }}>
-                <SelectScrollView>
-                  {selectItems.map((item) => (
-                      <SelectItem key={item.value} label={item.label} value={item.value} />
-                  ))}
-                </SelectScrollView>
-              </SelectContent>
-            </SelectPortal>
-          </Select>
-        </VStack>
-        <Button
-          className="ml-auto"
-          onPress={() => addNotice()}
-          disabled={noticeMutation.isLoading}
-        >
-          <ButtonText className="text-typography-0">Save</ButtonText>
-        </Button>
-      </VStack>
-    </FormControl>
-  );
+                    <VStack space="xs">
+                        <Text className="text-typography-500">Cena</Text>
+                        <Input className="min-w-[250px]" isInvalid={error.price}>
+                            <InputField
+                                type="text"
+                                value={price}
+                                onChangeText={(value) => setPrice(value)}
+                            />
+                        </Input>
+                    </VStack>
+                    <VStack space="xs">
+                        <Text className="text-typography-500">Kategoria</Text>
+                        <Select
+                            onValueChange={(value) => setCategory(value)}
+                            isInvalid={error.category}
+                        >
+                            <SelectTrigger variant="outline" size="md">
+                                <SelectInput placeholder="Wybierz kategorię"/>
+                                <SelectIcon className="mr-3" as={ChevronDownIcon}/>
+                            </SelectTrigger>
+                            <SelectPortal>
+                                <SelectBackdrop/>
+                                <SelectContent style={{maxHeight: 400}}>
+                                    <SelectScrollView>
+                                        {selectItems.map((item) => (
+                                            <SelectItem key={item.value} label={item.label} value={item.value}/>
+                                        ))}
+                                    </SelectScrollView>
+                                </SelectContent>
+                            </SelectPortal>
+                        </Select>
+                    </VStack>
+                    <Button
+                        className="mt-5 w-full"
+                        onPress={() => addNotice()}
+                        disabled={noticeMutation.isLoading}
+                    >
+                        <ButtonText className="text-typography-0">Dodaj</ButtonText>
+                    </Button>
+                </VStack>
+            </FormControl>
+        </ScrollView>
+    );
 }

ArtisanConnect/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@expo/html-elements": "^0.4.2",
     "@expo/vector-icons": "^14.1.0",
+    "@gluestack-style/react": "^1.0.57",
     "@gluestack-ui/actionsheet": "^0.2.53",
     "@gluestack-ui/button": "^1.0.14",
     "@gluestack-ui/form-control": "^0.1.19",
@@ -21,6 +22,7 @@
     "@gluestack-ui/overlay": "^0.1.22",
     "@gluestack-ui/select": "^0.1.31",
     "@gluestack-ui/textarea": "^0.1.25",
+    "@gluestack-ui/themed": "^1.1.73",
     "@gluestack-ui/toast": "^1.0.9",
     "@legendapp/motion": "^2.4.0",
     "@tanstack/react-query": "^5.74.4",