addition of notice with image

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

@@ -1,4 +1,184 @@
+import { useState } 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 * as ImagePicker from 'expo-image-picker';
+import {
+  Select,
+  SelectTrigger,
+  SelectInput,
+  SelectIcon,
+  SelectPortal,
+  SelectBackdrop,
+  SelectContent,
+  SelectDragIndicator,
+  SelectDragIndicatorWrapper,
+  SelectItem,
+} from "@/components/ui/select";
+
+import { ChevronDownIcon } from "@/components/ui/icon";
+import { useMutation } from "@tanstack/react-query";
+import {createNotice, uploadImage} from "@/api/notices";
+
 export default function CreateNotice() {
-  return <Text>Tworzenie ogłoszenia</Text>;
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [price, setPrice] = useState("");
+  const [category, setCategory] = useState("");
+  const [image, setImage] = useState(null);
+
+  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");
+    },
+  });
+
+  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', 'videos'],
+      allowsEditing: true,
+      aspect: [4, 3],
+      quality: 1,
+    });
+
+    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>
+                <SelectDragIndicatorWrapper>
+                  <SelectDragIndicator />
+                </SelectDragIndicatorWrapper>
+                <SelectItem label="Meble" value="Furniture" />
+                <SelectItem label="Biżuteria" value="Jewelry" />
+                <SelectItem label="Ceramika" value="Ceramics" />
+              </SelectContent>
+            </SelectPortal>
+          </Select>
+        </VStack>
+        <Button
+          className="ml-auto"
+          onPress={() => addNotice()}
+          disabled={noticeMutation.isLoading}
+        >
+          <ButtonText className="text-typography-0">Save</ButtonText>
+        </Button>
+      </VStack>
+    </FormControl>
+  );
 }