Merge branch 'fixesAfterMerge' of https://progit.zikor.pl/hamx/ArtisanConnectFrontend into fixesAfterMerge

ArtisanConnect/app/(tabs)/dashboard/notice/edit/[id].jsx

@@ -0,0 +1,391 @@
+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,
+  SelectTrigger,
+  SelectInput,
+  SelectIcon,
+  SelectPortal,
+  SelectBackdrop,
+  SelectContent,
+  SelectItem,
+  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 { attributes } from "@/data/attributesData"; // Assuming you have a separate file for attributes data}
+import { useLocalSearchParams } from "expo-router";
+
+export default function EditNotice() {
+  const { id } = useLocalSearchParams();
+  const router = useRouter();
+  const { editNotice, fetchNotices, notices } = useNoticesStore();
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [price, setPrice] = useState("");
+  const [category, setCategory] = useState("");
+  const [image, setImage] = useState([]);
+  const [images, setImages] = useState([]);
+  const [isImageLoading, setIsImageLoading] = useState(true);
+  const [selectItems, setSelectItems] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedAttributes, setSelectedAttributes] = useState({});
+  const { getNoticeById, getAllImagesByNoticeId } = useNoticesStore();
+
+  useEffect(() => {
+    let isMounted = true;
+    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;
+    };
+  }, []);
+
+  useEffect(() => {
+    const notice = notices.find((notice) => notice.noticeId == id);
+    if (notice) {
+      setTitle(notice.title || "");
+      setDescription(notice.description || "");
+      setPrice(notice.price?.toString() || "");
+      setCategory(notice.category || "");
+
+      if (notice.attributes && Array.isArray(notice.attributes)) {
+        const attributesObj = {};
+        notice.attributes.forEach((attr) => {
+          attributesObj[attr.name] = attr.value;
+        });
+        setSelectedAttributes(attributesObj);
+        // console.log("Attributes loaded:", attributesObj);
+      }
+    }
+
+    const fetchImage = async () => {
+      setIsImageLoading(true);
+      try {
+        const fetchedImages = await getAllImagesByNoticeId(notice.noticeId);
+        console.log("Fetched images:", fetchedImages);
+
+        if (fetchedImages && fetchedImages.length > 0) {
+          const imageUris = fetchedImages.map((img) => img.uri);
+          setImages(fetchedImages);
+          setImage(imageUris);
+          console.log("Image URIs set:", imageUris);
+        } else {
+          setImages([]);
+          setImage([]);
+        }
+      } catch (err) {
+        console.error("Error while loading images:", err);
+        setImages([]);
+        setImage([]);
+      } finally {
+        setIsImageLoading(false);
+      }
+    };
+
+    if (notice) {
+      fetchImage();
+    }
+  }, [notices]);
+
+  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 handleEditNotice = async () => {
+    setError({
+      title: !title,
+      description: !description,
+      price: !price,
+      category: !category,
+    });
+
+    if (!title || !description || !price || !category) {
+      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 editNotice({
+        title: title,
+        description: description,
+        price: price,
+        category: category,
+        status: "INACTIVE",
+        image: image,
+        attributes: formattedAttributes,
+      });
+
+      if (result) {
+        console.log("Notice created successfully with ID: ", result.noticeId);
+        await fetchNotices();
+        clearForm();
+
+        router.push("/(tabs)/dashboard/userNotices");
+      }
+    } catch (error) {
+      console.error("Error creating notice. Error message: ", error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const takePicture = async () => {
+    const { status } = await ImagePicker.requestCameraPermissionsAsync();
+    if (status !== "granted") {
+      return;
+    }
+    const result = await ImagePicker.launchCameraAsync({
+      allowsEditing: false,
+    });
+
+    if (!result.canceled && result.assets) {
+      setImage(result.assets.map((asset) => asset.uri));
+    }
+  };
+
+  const pickImage = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: "images",
+      selectionLimit: 8,
+      allowsEditing: false,
+      allowsMultipleSelection: true,
+      aspect: [4, 3],
+      quality: 0.5,
+    });
+
+    if (!result.canceled) {
+      setImage(result.assets.map((asset) => asset.uri));
+    }
+  };
+
+  const clearForm = () => {
+    setTitle("");
+    setDescription("");
+    setPrice("");
+    setCategory("");
+    setImage([]);
+    setSelectedAttributes({});
+    setError({
+      title: false,
+      description: false,
+      price: false,
+      category: false,
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <Box className="items-center justify-center flex-1">
+        <ActivityIndicator size="large" color="#787878" />
+        <Text size="md" bold="true" className="mt-5">
+          Dodajemy ogłoszenie...
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <KeyboardAvoidingView
+      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">
+          <VStack space="xl">
+            <VStack space="md">
+              <Text className="text-typography-500">Zdjęcia</Text>
+              <Button onPress={pickImage}>
+                <ButtonText>Wybierz zdjęcia</ButtonText>
+              </Button>
+              <Button onPress={takePicture}>
+                <ButtonText>Zrób zdjęcie</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>
+
+            <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}
+                selectedValue={category || ""}
+              >
+                <SelectTrigger variant="outline" size="md">
+                  <SelectInput
+                    placeholder="Wybierz kategorię"
+                    value={
+                      selectItems.find((item) => item.value === category)
+                        ?.label || ""
+                    }
+                  />
+                  <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>
+
+            {Object.entries(attributes).map(([label, options]) => (
+              <VStack key={label} space="xs">
+                <Text className="text-typography-500">{label}</Text>
+                <Select
+                  selectedValue={selectedAttributes[label] || ""}
+                  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={handleEditNotice}
+              disabled={isLoading}
+            >
+              <ButtonText className="text-typography-0">Dodaj</ButtonText>
+            </Button>
+          </VStack>
+        </FormControl>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}

ArtisanConnect/app/(tabs)/dashboard/userNotices.jsx

@@ -11,7 +11,7 @@ import { createOrder, createPayment, getOrder } from "@/api/order";
 import { Ionicons } from "@expo/vector-icons";
 import { useToast, Toast, ToastTitle } from "@/components/ui/toast";
 import { useAuthStore } from "@/store/authStore";
-import * as WebBrowser from 'expo-web-browser';
+import * as WebBrowser from "expo-web-browser";
 import { useRouter } from "expo-router";
 
 export default function UserNotices() {
@@ -71,17 +71,16 @@ export default function UserNotices() {
           if (paymentResult) {
             setIsRedirecting(true);
 
-
             await WebBrowser.openAuthSessionAsync(paymentResult);
 
-
             setTimeout(async () => {
               setIsRedirecting(false);
 
               try {
                 const lastOrder = await getOrder(result);
                 const lastPayments = lastOrder.payments;
-                const paymentStatus = lastPayments.length > 0
+                const paymentStatus =
+                  lastPayments.length > 0
                     ? lastPayments[lastPayments.length - 1].status
                     : null;
 
@@ -97,7 +96,6 @@ export default function UserNotices() {
                 showNewToast("Nie udało się sprawdzić statusu płatności.");
               }
             }, 300);
-
           } else {
             console.log(`Nie udało się aktywować ogłoszenia ${noticeId}.`);
           }
@@ -149,6 +147,7 @@ export default function UserNotices() {
             <Box className="flex-1 mb-4 pb-2 bg-white rounded-lg">
               <NoticeCard notice={item} />
               <Box className="flex-row justify-between mt-2">
+                <Box className="flex-row items-center">
                   <Button
                     className="ml-2"
                     onPress={() => handleDeleteNotice(item.noticeId)}
@@ -159,7 +158,24 @@ export default function UserNotices() {
                     <ButtonText>Usuń</ButtonText>
                     <Ionicons name="trash-outline" size={14} />
                   </Button>
-
+                  {item.status === "INACTIVE" && (
+                    <Button
+                      className="ml-2"
+                      onPress={() => {
+                        console.log("Edytuj notice");
+                        router.replace(
+                          `dashboard/notice/edit/${item.noticeId}`
+                        );
+                      }}
+                      size="md"
+                      variant="outline"
+                      action="primary"
+                    >
+                      <ButtonText>Edytuj</ButtonText>
+                      <Ionicons name="pencil" size={14} />
+                    </Button>
+                  )}
+                </Box>
                 {item.status === "ACTIVE" ? (
                   <Button
                     className="mr-2"

ArtisanConnect/app/notice/[id].jsx

@@ -3,7 +3,7 @@ import { KeyboardAvoidingView, Platform } from "react-native";
 import { Box } from "@/components/ui/box";
 import { Card } from "@/components/ui/card";
 import { Heading } from "@/components/ui/heading";
-import {useRouter} from 'expo-router';
+import { useRouter } from "expo-router";
 import { Image } from "@/components/ui/image";
 import { Text } from "@/components/ui/text";
 import { VStack } from "@/components/ui/vstack";
@@ -31,7 +31,7 @@ import { useAuthStore } from "@/store/authStore";
 import { sendEmail } from "@/api/email";
 // import { Button } from "@gluestack-ui/themed";
 import { Button, ButtonText } from "@/components/ui/button";
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function NoticeDetails() {
   const { id } = useLocalSearchParams();
@@ -274,7 +274,7 @@ export default function NoticeDetails() {
   }
 
   return (
-      <SafeAreaView className="flex-1" edges={['right', 'bottom', 'left']}>
+    <SafeAreaView className="flex-1" edges={["right", "bottom", "left"]}>
       <Card className="p-0 rounded-lg m-3 flex-1">
         <Stack.Screen
           options={{
@@ -315,10 +315,7 @@ export default function NoticeDetails() {
               viewabilityConfig={viewabilityConfig}
               style={isLandscape ? { flex: 1 } : {}}
               renderItem={({ item, index }) => (
-              <View
-                style={{ width: width }}
-                className="p-1"
-              >
+                <View style={{ width: width }} className="p-1">
                   <Image
                     source={item}
                     // className="h-auto w-auto rounded-md aspect-[1/1]"
@@ -389,21 +386,27 @@ export default function NoticeDetails() {
             <Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
               <Text className="text-sm text-typography-500">
                 Kategoria:{" "}
-              <Text className="font-bold text-gray-950">{notice.category}</Text>
+                <Text className="font-bold text-gray-950">
+                  {notice.category}
+                </Text>
               </Text>
             </Box>
             {notice.attributes && notice.attributes.length > 0 && (
               <Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
                 {notice.attributes.map((attribute, index) => (
-                    <Text key={index} className="text-sm text-typography-500 mb-1">
+                  <Text
+                    key={index}
+                    className="text-sm text-typography-500 mb-1"
+                  >
                     {attribute.name}:{" "}
-                      <Text className="font-bold text-gray-950">{attribute.value}</Text>
+                    <Text className="font-bold text-gray-950">
+                      {attribute.value}
+                    </Text>
                   </Text>
                 ))}
               </Box>
             )}
             <Box className="mt-4 bg-gray-50 p-3 rounded-lg shadow-sm">
-
               <Text className="text-2xl text-gray-950">Opis ogloszenia</Text>
               <Text className="text-sm text-typography-700">
                 {notice.description}
@@ -449,7 +452,11 @@ export default function NoticeDetails() {
                       </Text>
                     </Pressable>
 
-                  <Button variant="outline" className="mt-2" onPress={() => router.replace(`/user/${notice.clientId}`)}>
+                    <Button
+                      variant="outline"
+                      className="mt-2"
+                      onPress={() => router.replace(`/user/${notice.clientId}`)}
+                    >
                       <ButtonText>
                         Zobacz więcej ogłoszeń od {user.firstName}
                       </ButtonText>
@@ -479,7 +486,8 @@ export default function NoticeDetails() {
                 </Text>
                 <Text className="text-sm font-medium mb-1">Temat:</Text>
                 <Text className="bg-gray-100 p-3 rounded text-gray-500">
-                Zapytanie o ogłoszenie '{notice.title || "Brak nazwy ogłoszenia"}'
+                  Zapytanie o ogłoszenie '
+                  {notice.title || "Brak nazwy ogłoszenia"}'
                 </Text>
 
                 <TextInput
@@ -517,6 +525,5 @@ export default function NoticeDetails() {
         )}
       </Card>
     </SafeAreaView>
-
   );
 }