init add Notice

ArtisanConnect/api/notices.jsx

@@ -1,20 +1,35 @@
 const API_URL = "https://testowe.zikor.pl/api/v1/notices/";
 
 export async function listNotices() {
-    const response = await fetch(`${API_URL}get/all`);
+  const response = await fetch(`${API_URL}get/all`);
-    const data = await response.json();
+  const data = await response.json();
-    if (!response.ok) {
+  if (!response.ok) {
-        throw new Error("Error");
+    throw new Error("Error");
-    }
+  }
-    return data;
+  return data;
 }
 
 export async function getNoticeById(noticeId) {
-    const response = await fetch(`${API_URL}get/${noticeId}`);
+  const response = await fetch(`${API_URL}get/${noticeId}`);
 
-    const data = await response.json();
+  const data = await response.json();
-    if (!response.ok) {
+  if (!response.ok) {
-        throw new Error("Error");
+    throw new Error("Error");
-    }
+  }
-    return data;
+  return data;
+}
+
+export async function createNotice(notice) {
+  console.log("Notice created", notice);
+  // const response = await fetch(`${API_URL}add`, {
+  //   method: "POST",
+  //   headers: {
+  //     "Content-Type": "application/json",
+  //   },
+  //   body: JSON.stringify(notice),
+  // });
+  // console.log("Response", response);
+  // if (!response.ok) {
+  //   throw new Error("Error");
+  // }
 }

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

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Button, ButtonText } from "@/components/ui/button";
 import { FormControl } from "@/components/ui/form-control";
 import { Input, InputField } from "@/components/ui/input";
@@ -16,35 +17,101 @@ import {
   SelectDragIndicatorWrapper,
   SelectItem,
 } from "@/components/ui/select";
+
 import { ChevronDownIcon } from "@/components/ui/icon";
+import { useMutation } from "@tanstack/react-query";
+import { createNotice } from "@/api/notices";
 
 export default function CreateNotice() {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [price, setPrice] = useState("");
+  const [category, setCategory] = useState("");
+  const [error, setError] = useState({
+    title: false,
+    description: false,
+    price: false,
+    category: false,
+  });
+
+  const noticeMutation = useMutation({
+    mutationFn: () =>
+      createNotice({
+        title: title,
+        clientId: 1,
+        description: description,
+        price: parseFloat(price),
+        category: category,
+        status: "ACTIVE",
+      }),
+    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();
+  };
+
   return (
     <FormControl className="p-4 border rounded-lg border-outline-300">
       <VStack space="xl">
         <VStack space="xs">
           <Text className="text-typography-500">Tytuł</Text>
-          <Input className="min-w-[250px]">
+          <Input className="min-w-[250px]" isInvalid={error.title}>
-            <InputField type="text" />
+            <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] ">
+          <Textarea
-            <TextareaInput placeholder="Opisz produkt" />
+            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]">
+          <Input className="min-w-[250px]" isInvalid={error.price}>
-            <InputField type="text" />
+            <InputField
+              type="text"
+              value={price}
+              onChangeText={(value) => setPrice(value)}
+            />
           </Input>
         </VStack>
         <VStack space="xs">
           <Text className="text-typography-500">Kategoria</Text>
-          <Select>
+          <Select
+            onValueChange={(value) => setCategory(value)}
+            isInvalid={error.category}
+          >
             <SelectTrigger variant="outline" size="md">
               <SelectInput placeholder="Wybierz kategorię" />
               <SelectIcon className="mr-3" as={ChevronDownIcon} />
@@ -62,7 +129,11 @@ export default function CreateNotice() {
             </SelectPortal>
           </Select>
         </VStack>
-        <Button className="ml-auto">
+        <Button
+          className="ml-auto"
+          onPress={() => addNotice()}
+          disabled={noticeMutation.isLoading}
+        >
           <ButtonText className="text-typography-0">Save</ButtonText>
         </Button>
       </VStack>