error handling

frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx

@@ -8,6 +8,7 @@ import { ManageDestinationHeader } from "../manage.destination.header/manage.des
 import { DestinationType } from "@/types/destinations";
 import { ModalPositionX, ModalPositionY } from "@/design.system/modal/types";
 import theme from "@/styles/palette";
+import { useNotification } from "@/hooks";
 
 interface ManageDestinationProps {
   destinationType: DestinationType;

frontend/webapp/containers/overview/destination/destination.tsx

@@ -1,61 +1,76 @@
 "use client";
 import React, { useState } from "react";
 import { KeyvalLoader } from "@/design.system";
-import { OVERVIEW, QUERIES } from "@/utils/constants";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
 import { useQuery } from "react-query";
 import { getDestinations } from "@/services";
 import { OverviewHeader, DestinationsManagedList } from "@/components/overview";
 import { DestinationContainerWrapper } from "./destination.styled";
 import { NewDestinationFlow } from "./new.destination.flow";
 import { UpdateDestinationFlow } from "./update.destination.flow";
+import { useNotification } from "@/hooks";
 
 export function DestinationContainer() {
   const [selectedDestination, setSelectedDestination] = useState<any>(null);
   const [displayNewDestination, setDisplayNewDestination] =
     useState<boolean>(false);
-
+  const { show, Notification } = useNotification();
   const {
     isLoading: destinationLoading,
     data: destinationList,
     refetch,
   } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
 
-  function handleAddNewDestinationClick() {
-    setDisplayNewDestination(true);
+  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
+    refetch();
+    setSelectedDestination(null);
+    setDisplayNewDestination(false);
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message,
+    });
   }
 
-  if (destinationLoading) {
-    return <KeyvalLoader />;
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
   }
 
-  if (displayNewDestination) {
-    return (
-      <NewDestinationFlow
-        onBackClick={() => {
-          refetch();
-          setDisplayNewDestination(false);
-        }}
-      />
-    );
+  if (destinationLoading) {
+    return <KeyvalLoader />;
   }
 
   return (
     <DestinationContainerWrapper>
-      {selectedDestination ? (
+      {displayNewDestination ? (
+        <NewDestinationFlow
+          onSuccess={onSuccess}
+          onError={onError}
+          onBackClick={() => {
+            setDisplayNewDestination(false);
+          }}
+        />
+      ) : selectedDestination ? (
         <UpdateDestinationFlow
           selectedDestination={selectedDestination}
           setSelectedDestination={setSelectedDestination}
+          onSuccess={onSuccess}
+          onError={onError}
         />
       ) : (
         <>
           <OverviewHeader title={OVERVIEW.MENU.DESTINATIONS} />
           <DestinationsManagedList
             data={destinationList}
             onItemClick={setSelectedDestination}
-            onMenuButtonClick={handleAddNewDestinationClick}
+            onMenuButtonClick={() => setDisplayNewDestination(true)}
           />
         </>
       )}
+      <Notification />
     </DestinationContainerWrapper>
   );
 }

frontend/webapp/containers/overview/destination/new.destination.flow.tsx

@@ -18,11 +18,10 @@ const BackButtonWrapper = styled.div`
     cursor: pointer !important;
   }
 `;
-export function NewDestinationFlow({ onBackClick }) {
+export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
   const { sectionData, setSectionData } = useSectionData(null);
   const [managed, setManaged] = useState<any>(null);
   const { show, Notification } = useNotification();
-
   const { data: destinationType } = useQuery(
     [QUERIES.API_DESTINATION_TYPE, sectionData?.type],
     () => getDestination(sectionData?.type),
@@ -35,21 +34,9 @@ export function NewDestinationFlow({ onBackClick }) {
   function onSubmit(newDestination) {
     const destination = {
       ...newDestination,
-      type: sectionData.type,
+      // type: sectionData.type,
     };
 
-    function onSuccess() {
-      onBackClick();
-    }
-
-    function onError({ response }) {
-      const message = response?.data?.message;
-      show({
-        type: NOTIFICATION.ERROR,
-        message,
-      });
-    }
-
     mutate(destination, {
       onSuccess,
       onError,
@@ -85,8 +72,8 @@ export function NewDestinationFlow({ onBackClick }) {
             />
           </>
         )}
-        <Notification />
       </NewDestinationContainer>
+      <Notification />
     </>
   );
 }

frontend/webapp/containers/overview/destination/update.destination.flow.tsx

@@ -1,26 +1,25 @@
 "use client";
 import React, { useMemo } from "react";
 import { KeyvalLoader } from "@/design.system";
-import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { OVERVIEW, QUERIES } from "@/utils/constants";
 import { useMutation, useQuery } from "react-query";
 import { getDestination, updateDestination } from "@/services";
 import { ManageDestination } from "@/components/overview";
-import { useNotification } from "@/hooks";
 import { deleteDestination } from "@/services/destinations";
+import { useNotification } from "@/hooks";
 
 export function UpdateDestinationFlow({
   selectedDestination,
   setSelectedDestination,
+  onSuccess,
+  onError,
 }) {
-  const { show, Notification } = useNotification();
-
   const manageData = useMemo(() => {
     return {
       ...selectedDestination,
       ...selectedDestination?.destination_type,
     };
   }, [selectedDestination]);
-
   const { isLoading: destinationTypeLoading, data: destinationType } = useQuery(
     [QUERIES.API_DESTINATION_TYPE, selectedDestination?.type],
     () => getDestination(selectedDestination?.type),
@@ -41,22 +40,6 @@ export function UpdateDestinationFlow({
     setSelectedDestination(null);
   }
 
-  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
-    setSelectedDestination(null);
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message,
-    });
-  }
-
-  function onError({ response }) {
-    const message = response?.data?.message;
-    show({
-      type: NOTIFICATION.ERROR,
-      message,
-    });
-  }
-
   function onDelete() {
     handleDeleteDestination(selectedDestination.id, {
       onSuccess: () => onSuccess(OVERVIEW.DESTINATION_DELETED_SUCCESS),
@@ -67,7 +50,7 @@ export function UpdateDestinationFlow({
   function onSubmit(updatedDestination) {
     const newDestinations = {
       ...updatedDestination,
-      type: selectedDestination.type,
+      //   type: selectedDestination.type,
     };
 
     handleUpdateDestination(newDestinations, {
@@ -89,7 +72,6 @@ export function UpdateDestinationFlow({
         onSubmit={onSubmit}
         onDelete={onDelete}
       />
-      <Notification />
     </>
   );
 }