fixes to app

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

@@ -1,16 +1,46 @@
 import { useNoticesStore } from "@/store/noticesStore";
 import { NoticeCard } from "@/components/NoticeCard";
-import { Button } from "react-native";
+import { Button, ButtonIcon, ButtonText } from "@/components/ui/button";
+
 import { Box } from "@/components/ui/box";
 import { Text } from "@/components/ui/text";
 import { VStack } from "@/components/ui/vstack";
 import { ActivityIndicator, FlatList } from "react-native";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
+import { createOrder, createPayment } from "@/api/order";
+import { Linking } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useToast, Toast, ToastTitle } from "@/components/ui/toast";
+import { AppState } from "react-native";
 
 export default function UserNotices() {
-  const { notices, fetchNotices } = useNoticesStore();
+  const { notices, fetchNotices, deleteNotice } = useNoticesStore();
   const [isLoading, setIsLoading] = useState(true);
-  const currentUserId = 1; // Tymczasowo, do czasu zaimplementowania logowania bo nie moge pobrac usera
+  const [isRedirecting, setIsRedirecting] = useState(false);
+  const currentUserId = 1;
+  const toast = useToast();
+  const appState = useRef(AppState.currentState);
+  const [toastId, setToastId] = useState(0);
+
+  useEffect(() => {
+    if (!isRedirecting) return;
+    const subscription = AppState.addEventListener("change", (state) => {
+      if (state === "active") {
+        setIsRedirecting(false);
+        const paymentStatus = "CORRECT";
+        if (paymentStatus == "INCORRECT") {
+          showNewToast("Płatność została anulowana.");
+        } else if (paymentStatus == "CORRECT") {
+          showNewToast("Płatność została zrealizowana.");
+        } else {
+          showNewToast("Płatność jeszcze nie wpłynęła.");
+        }
+      }
+
+      appState.current = state;
+    });
+    return () => subscription.remove();
+  }, [isRedirecting, toast]);
 
   useEffect(() => {
     const loadNotices = async () => {
@@ -26,6 +56,58 @@ export default function UserNotices() {
     loadNotices();
   }, []);
 
+  const showNewToast = (title) => {
+    const newId = Math.random();
+    setToastId(newId);
+    toast.show({
+      id: newId,
+      placement: "top",
+      duration: 3000,
+      render: ({ id }) => {
+        const uniqueToastId = "toast-" + id;
+        return (
+          <Toast nativeID={uniqueToastId} action="muted" variant="solid">
+            <ToastTitle>{title}</ToastTitle>
+          </Toast>
+        );
+      },
+    });
+  };
+
+  const handleOrder = async (noticeId, type) => {
+    {
+      try {
+        const result = await createOrder(noticeId, type);
+        if (result) {
+          try {
+            const paymentResult = await createPayment(); //trzeba dodać orderId
+            if (paymentResult) {
+              setIsRedirecting(true);
+              Linking.openURL(paymentResult);
+              setWaitingForPayment(true);
+            } else {
+              console.log(`Nie udało się aktywować ogłoszenia ${noticeId}.`);
+            }
+          } catch (err) {
+            console.log("Błąd podczas aktywacji ogłoszenia:", err);
+          }
+        } else {
+          console.log(`Nie udało się aktywować ogłoszenia ${noticeId}.`);
+        }
+      } catch (err) {
+        console.log("Błąd podczas aktywacji ogłoszenia:", err);
+      }
+    }
+  };
+
+  const handleDeleteNotice = async (noticeId) => {
+    try {
+      await deleteNotice(noticeId);
+    } catch (err) {
+      console.error("Błąd podczas usuwania ogłoszenia:", err);
+    }
+  };
+
   const userNotices = notices
     .filter((notice) => notice.clientId === currentUserId)
     .sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate));
@@ -36,45 +118,61 @@ export default function UserNotices() {
 
   return (
     <VStack className="p-2">
+      {isRedirecting && (
+        <Box className="absolute inset-0 bg-white bg-opacity-30 justify-center items-center z-50">
+          <Ionicons name="card-outline" size="30" className="pt-4" />
+          <Text className="text-lg font-bold pt-2">
+            Przekierowanie do płatności...
+          </Text>
+        </Box>
+      )}
       {/* <Text className="text-2xl font-bold mb-4">Moje ogłoszenia</Text> */}
       {userNotices.length > 0 ? (
         <FlatList
           data={userNotices}
-          // numColumns={1}
-          // columnWrapperStyle={{
-          //   marginBottom: 10,
-          //   justifyContent: "space-between",
-          // }}
           renderItem={({ item }) => (
             <Box className="flex-1 mb-4 pb-2 bg-white rounded-lg">
               <NoticeCard notice={item} />
               <Box className="flex-row justify-between mt-2">
                 {item.status === "ACTIVE" ? (
                   <Button
-                    title="Usuń"
-                    onPress={() => {
-                      console.log(`Promuj ogłoszenie ${item.noticeId}`);
-                    }}
-                    className="bg-primary-500 py-2 px-4 rounded-md"
-                  ></Button>
+                    className="ml-2"
+                    onPress={() => handleDeleteNotice(item.noticeId)}
+                    size="md"
+                    variant="outline"
+                    action="primary"
+                  >
+                    <ButtonText>Usuń</ButtonText>
+                    <Ionicons name="trash-outline" size={14} />
+                  </Button>
                 ) : (
                   <Button
-                    title="Aktywj"
-                    onPress={() => {
-                      console.log(`Promuj ogłoszenie ${item.noticeId}`);
-                    }}
-                    className="bg-primary-500 py-2 px-4 rounded-md"
-                  ></Button>
+                    className="ml-2"
+                    size="md"
+                    variant="solid"
+                    action="primary"
+                    onPress={() => handleOrder(item.noticeId, "ACTIVATE")}
+                  >
+                    <ButtonText>Aktywuj</ButtonText>
+                    <Ionicons
+                      name="arrow-redo-outline"
+                      size={14}
+                      color="#fff"
+                    />
+                  </Button>
+                )}
+                {item.status === "ACTIVE" && (
+                  <Button
+                    className="mr-2"
+                    size="md"
+                    variant="solid"
+                    action="primary"
+                    onPress={() => handleOrder(item.noticeId, "BOOST")}
+                  >
+                    <ButtonText>Podbij</ButtonText>
+                    <Ionicons name="arrow-up" size={14} color="#fff" />
+                  </Button>
                 )}
-
-                <Button
-                  title="Podbij"
-                  onPress={() => {
-                    // TODO: Implementacja podbicia ogłoszenia
-                    console.log(`Podbij ogłoszenie ${item.noticeId}`);
-                  }}
-                  className="bg-primary-500 py-2 px-4 rounded-md"
-                ></Button>
               </Box>
             </Box>
           )}