add attributes

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

@@ -1,5 +1,11 @@
 import { useState, useEffect } from "react";
-import {Image, StyleSheet, KeyboardAvoidingView, Platform, ActivityIndicator} from "react-native";
+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";
@@ -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) {
@@ -150,6 +193,7 @@ export default function CreateNotice() {
     setPrice("");
     setCategory("");
     setImage([]);
+    setSelectedAttributes({});
     setError({
       title: false,
       description: false,
@@ -162,7 +206,7 @@ export default function CreateNotice() {
     return (
       <Box className="items-center justify-center flex-1">
         <ActivityIndicator size="large" color="#787878" />
-                <Text size="md" bold="true" className='mt-5'>
+        <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'}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={{ flex: 1 }}
-            keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
+      keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}
     >
       <ScrollView h="$80" w="$80">
         <FormControl className="p-4 border rounded-lg border-outline-300">
@@ -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}