manage dest flow

odigos-io · Aug 2, 2023 · 0a30a23 · 0a30a23
1 parent f0e6d64
commit 0a30a23
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 63 deletions.
diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useEffect } from "react";
 import { NOTIFICATION, OVERVIEW } from "@/utils/constants";
 import { useNotification } from "@/hooks";
 import { NewDestinationFlow } from "@/containers/overview/destination/new.destination.flow";
@@ -8,6 +8,7 @@ import { useRouter } from "next/navigation";
 export default function CreateDestinationPage() {
   const { show, Notification } = useNotification();
   const router = useRouter();
+
   function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
     show({
       type: NOTIFICATION.SUCCESS,

diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx
@@ -1,20 +1,37 @@
 "use client";
-import React, { useState } from "react";
-import { NOTIFICATION, OVERVIEW } from "@/utils/constants";
+import React, { useEffect, useState } from "react";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
 import { useNotification } from "@/hooks";
-import { useRouter } from "next/navigation";
-import { UpdateDestinationFlow } from "@/containers/overview/destination/update.destination.flow";
+import { useRouter, useSearchParams } from "next/navigation";
+import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow";
+import { getDestinations } from "@/services";
+import { useQuery } from "react-query";
 
-export function ManageDestinationPage() {
+export default function ManageDestinationPage() {
   const [selectedDestination, setSelectedDestination] = useState<any>(null);
 
   const { show, Notification } = useNotification();
-
+  const {
+    isLoading: destinationLoading,
+    data: destinationList,
+    refetch,
+  } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
   const router = useRouter();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    const search = searchParams.get("dest");
+    const currentDestination = destinationList?.filter(
+      (item) => item?.id === search
+    );
+    if (currentDestination?.length) {
+      setSelectedDestination(currentDestination[0]);
+    }
+  }, [searchParams, destinationList]);
 
   function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
-    setSelectedDestination(null);
-    router.push("destinations");
+    router.back();
+    refetch();
     show({
       type: NOTIFICATION.SUCCESS,
       message,
@@ -29,15 +46,20 @@ export function ManageDestinationPage() {
     });
   }
 
+  if (destinationLoading) {
+    return;
+  }
+
   return (
-    <>
-      <UpdateDestinationFlow
-        selectedDestination={selectedDestination}
-        setSelectedDestination={setSelectedDestination}
-        onSuccess={onSuccess}
-        onError={onError}
-      />
-      <Notification />
-    </>
+    selectedDestination && (
+      <>
+        <UpdateDestinationFlow
+          selectedDestination={selectedDestination}
+          onSuccess={onSuccess}
+          onError={onError}
+        />
+        <Notification />
+      </>
+    )
   );
 }
diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx
@@ -10,38 +10,22 @@ import { useRouter } from "next/navigation";
 
 export function DestinationContainer() {
   const { show, Notification } = useNotification();
-  const {
-    isLoading: destinationLoading,
-    data: destinationList,
-    refetch,
-  } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
+  const { isLoading: destinationLoading, data: destinationList } = useQuery(
+    [QUERIES.API_DESTINATIONS],
+    getDestinations
+  );
 
   const router = useRouter();
 
-  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
-    refetch();
-    router.push("destinations");
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message,
-    });
-  }
-
-  function onError({ response }) {
-    const message = response?.data?.message;
-    show({
-      type: NOTIFICATION.ERROR,
-      message,
-    });
-  }
-
   function renderDestinationList() {
     return (
       <>
         <OverviewHeader title={OVERVIEW.MENU.DESTINATIONS} />
         <DestinationsManagedList
           data={destinationList}
-          onItemClick={() => {}}
+          onItemClick={({ id }) =>
+            router.push(`destinations/manage?dest=${id}`)
+          }
           onMenuButtonClick={() => router.push("destinations/create")}
         />
       </>

diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
@@ -15,17 +15,17 @@ export function NewDestinationFlow({ onSuccess, onError }) {
   const { mutate } = useMutation((body) => setDestination(body));
   const router = useRouter();
 
-  function onSubmit(newDestination) {
-    const destination = {
-      ...newDestination,
-      type: sectionData.type,
-    };
+  // function onSubmit(newDestination) {
+  //   const destination = {
+  //     ...newDestination,
+  //     type: sectionData.type,
+  //   };
 
-    mutate(destination, {
-      onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS),
-      onError,
-    });
-  }
+  //   mutate(destination, {
+  //     onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS),
+  //     onError,
+  //   });
+  // }
 
   function handleBackPress() {
     router.back();

diff --git a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
@@ -7,13 +7,15 @@ import { getDestination, updateDestination } from "@/services";
 import { ManageDestination } from "@/components/overview";
 import { deleteDestination } from "@/services/destinations";
 import { ManageDestinationWrapper } from "./destination.styled";
+import { useRouter } from "next/navigation";
 
-export function UpdateDestinationFlow({
+export default function UpdateDestinationFlow({
   selectedDestination,
-  setSelectedDestination,
   onSuccess,
   onError,
 }) {
+  const router = useRouter();
+
   const manageData = useMemo(() => {
     return {
       ...selectedDestination,
@@ -60,7 +62,7 @@ export function UpdateDestinationFlow({
   ) : (
     <ManageDestinationWrapper>
       <ManageDestination
-        onBackClick={() => setSelectedDestination(null)}
+        onBackClick={() => router.back()}
         destinationType={destinationType}
         selectedDestination={manageData}
         onSubmit={onSubmit}

diff --git a/frontend/webapp/design.system/notification/notification.tsx b/frontend/webapp/design.system/notification/notification.tsx
@@ -7,6 +7,7 @@ import { KeyvalText } from "../text/text";
 import CloseIcon from "@/assets/icons/X-blue.svg";
 import SuccessIcon from "@/assets/icons/success-notification.svg";
 import ErrorIcon from "@/assets/icons/error-notification.svg";
+import PortalNotification from "./portal.notification";
 interface KeyvalNotificationProps {
   type: "success" | "error" | "warning" | "info";
   message: string;
@@ -47,14 +48,16 @@ export function KeyvalNotification({
   }
 
   return (
-    <NotificationContainer>
-      <StyledNotification style={getNotificationStyle()}>
-        {getIcon()}
-        <KeyvalText weight={500} size={14}>
-          {message}
-        </KeyvalText>
-        <CloseIcon onClick={onClose} />
-      </StyledNotification>
-    </NotificationContainer>
+    <PortalNotification wrapperId="notification-portal">
+      <NotificationContainer>
+        <StyledNotification style={getNotificationStyle()}>
+          {getIcon()}
+          <KeyvalText weight={500} size={14}>
+            {message}
+          </KeyvalText>
+          <CloseIcon onClick={onClose} />
+        </StyledNotification>
+      </NotificationContainer>
+    </PortalNotification>
   );
 }
diff --git a/frontend/webapp/design.system/notification/portal.notification.tsx b/frontend/webapp/design.system/notification/portal.notification.tsx
@@ -0,0 +1,46 @@
+import { useState, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+
+interface Props {
+  children: JSX.Element;
+  wrapperId: string;
+}
+
+const PortalNotification = ({ children, wrapperId }: Props) => {
+  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);
+
+  useLayoutEffect(() => {
+    let element = document.getElementById(wrapperId) as HTMLElement;
+    let portalCreated = false;
+    // if element is not found with wrapperId or wrapperId is not provided,
+    // create and append to body
+    if (!element) {
+      element = createWrapperAndAppendToBody(wrapperId);
+      portalCreated = true;
+    }
+
+    setPortalElement(element);
+
+    // cleaning up the portal element
+    return () => {
+      // delete the programatically created element
+      if (portalCreated && element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    };
+  }, [wrapperId]);
+
+  const createWrapperAndAppendToBody = (elementId: string) => {
+    const element = document.createElement("div");
+    element.setAttribute("id", elementId);
+    document.body.appendChild(element);
+    return element;
+  };
+
+  // portalElement state will be null on the very first render.
+  if (!portalElement) return null;
+
+  return createPortal(children, portalElement);
+};
+
+export default PortalNotification;