Merge remote-tracking branch 'origin/fixesAfterMerge' into fixesAfterMerge

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

@@ -1,13 +1,19 @@
-import {useState, useEffect} from "react";
-import {Image, StyleSheet, KeyboardAvoidingView, Platform, ActivityIndicator} 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 {Box} from "@/components/ui/box";
+import { useState, useEffect } from "react";
+import {
+  Image,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  ActivityIndicator,
+} 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 { Box } from "@/components/ui/box";
 import * as ImagePicker from "expo-image-picker";
 import {
   Select,
@@ -21,14 +27,14 @@ import {
   SelectScrollView,
 } from "@/components/ui/select";
 
-import {ChevronDownIcon} from "@/components/ui/icon";
-import {useNoticesStore} from "@/store/noticesStore";
-import {listCategories} from "@/api/categories";
-import {useRouter} from "expo-router";
+import { ChevronDownIcon } from "@/components/ui/icon";
+import { useNoticesStore } from "@/store/noticesStore";
+import { listCategories } from "@/api/categories";
+import { useRouter } from "expo-router";
 
 export default function CreateNotice() {
   const router = useRouter();
-    const {addNotice, fetchNotices} = useNoticesStore();
+  const { addNotice, fetchNotices } = useNoticesStore();
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [price, setPrice] = useState("");
@@ -36,6 +42,7 @@ export default function CreateNotice() {
   const [image, setImage] = useState([]);
   const [selectItems, setSelectItems] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [selectedAttributes, setSelectedAttributes] = useState({});
 
   useEffect(() => {
     let isMounted = true;
@@ -77,6 +84,35 @@ export default function CreateNotice() {
     },
   });
 
+  const attributes = {
+    Kolor: [
+      "Zielony",
+      "Czerwony",
+      "Niebieski",
+      "Żółty",
+      "Biały",
+      "Czarny",
+      "Różowy",
+      "Szary",
+      "Fioletowy",
+      "Pomarańczowy",
+      "Inny",
+    ],
+    Materiał: [
+      "Bawełna",
+      "Wełna",
+      "Syntetyk",
+      "Skóra",
+      "Len",
+      "Jedwab",
+      "Poliester",
+      "Akryl",
+      "Wiskoza",
+      "Nylon",
+      "Inny",
+    ],
+  };
+
   const handleAddNotice = async () => {
     setError({
       title: !title,
@@ -89,7 +125,13 @@ export default function CreateNotice() {
       console.log("Error in form");
       return;
     }
-
+    const formattedAttributes = Object.entries(selectedAttributes).map(
+      ([name, value]) => ({
+        name: name,
+        value: value,
+      })
+    );
+    // console.log("Selected attributes:", formattedAttributes);
     setIsLoading(true);
     try {
       const result = await addNotice({
@@ -99,6 +141,7 @@ export default function CreateNotice() {
         category: category,
         status: "INACTIVE",
         image: image,
+        attributes: formattedAttributes,
       });
 
       if (result) {
@@ -116,7 +159,7 @@ export default function CreateNotice() {
   };
 
   const takePicture = async () => {
-        const {status} = await ImagePicker.requestCameraPermissionsAsync();
+    const { status } = await ImagePicker.requestCameraPermissionsAsync();
     if (status !== "granted") {
       return;
     }
@@ -150,6 +193,7 @@ export default function CreateNotice() {
     setPrice("");
     setCategory("");
     setImage([]);
+    setSelectedAttributes({});
     setError({
       title: false,
       description: false,
@@ -161,8 +205,8 @@ export default function CreateNotice() {
   if (isLoading) {
     return (
       <Box className="items-center justify-center flex-1">
-                <ActivityIndicator size="large" color="#787878"/>
-                <Text size="md" bold="true" className='mt-5'>
+        <ActivityIndicator size="large" color="#787878" />
+        <Text size="md" bold="true" className="mt-5">
           Dodajemy ogłoszenie...
         </Text>
       </Box>
@@ -171,9 +215,9 @@ export default function CreateNotice() {
 
   return (
     <KeyboardAvoidingView
-            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-            style={{flex: 1}}
-            keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      style={{ flex: 1 }}
+      keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}
     >
       <ScrollView h="$80" w="$80">
         <FormControl className="p-4 border rounded-lg border-outline-300">
@@ -194,7 +238,7 @@ export default function CreateNotice() {
                   {image.map((img, index) => (
                     <Image
                       key={index}
-                                            source={{uri: img}}
+                      source={{ uri: img }}
                       style={styles.image}
                       className="m-1"
                     />
@@ -204,7 +248,7 @@ export default function CreateNotice() {
             </VStack>
 
             <VStack space="xs">
-                            <Text className="text-typography-500">Tytuł</Text>
+              <Text className="text-typography-500">Tytuł*</Text>
               <Input className="min-w-[250px]" isInvalid={error.title}>
                 <InputField
                   type="text"
@@ -215,7 +259,7 @@ export default function CreateNotice() {
             </VStack>
 
             <VStack space="xs">
-                            <Text className="text-typography-500">Opis</Text>
+              <Text className="text-typography-500">Opis*</Text>
               <Textarea
                 size="md"
                 className="min-w-[250px] "
@@ -230,7 +274,7 @@ export default function CreateNotice() {
             </VStack>
 
             <VStack space="xs">
-                            <Text className="text-typography-500">Cena</Text>
+              <Text className="text-typography-500">Cena*</Text>
               <Input className="min-w-[250px]" isInvalid={error.price}>
                 <InputField
                   type="text"
@@ -240,18 +284,18 @@ export default function CreateNotice() {
               </Input>
             </VStack>
             <VStack space="xs">
-                            <Text className="text-typography-500">Kategoria</Text>
+              <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}/>
+                  <SelectInput placeholder="Wybierz kategorię" />
+                  <SelectIcon className="mr-3" as={ChevronDownIcon} />
                 </SelectTrigger>
                 <SelectPortal>
-                                    <SelectBackdrop/>
-                                    <SelectContent style={{maxHeight: 400}}>
+                  <SelectBackdrop />
+                  <SelectContent style={{ maxHeight: 400 }}>
                     <SelectScrollView>
                       {selectItems.map((item) => (
                         <SelectItem
@@ -265,6 +309,42 @@ export default function CreateNotice() {
                 </SelectPortal>
               </Select>
             </VStack>
+
+            {Object.entries(attributes).map(([label, options]) => (
+              <VStack key={label} space="xs">
+                <Text className="text-typography-500">{label}</Text>
+                <Select
+                  onValueChange={(value) =>
+                    setSelectedAttributes((prev) => ({
+                      ...prev,
+                      [label]: value,
+                    }))
+                  }
+                >
+                  <SelectTrigger variant="outline" size="md">
+                    <SelectInput
+                      placeholder={`Wybierz ${label.toLowerCase()}`}
+                    />
+                    <SelectIcon className="mr-3" as={ChevronDownIcon} />
+                  </SelectTrigger>
+                  <SelectPortal>
+                    <SelectBackdrop />
+                    <SelectContent style={{ maxHeight: 400 }}>
+                      <SelectScrollView>
+                        {options.map((option) => (
+                          <SelectItem
+                            key={option}
+                            label={option}
+                            value={option}
+                          />
+                        ))}
+                      </SelectScrollView>
+                    </SelectContent>
+                  </SelectPortal>
+                </Select>
+              </VStack>
+            ))}
+
             <Button
               className="mt-5 w-full"
               onPress={handleAddNotice}