From 924cee2c18d612f7348f49b3511e1977e3e4a642 Mon Sep 17 00:00:00 2001 From: alonkeyval Date: Wed, 2 Aug 2023 15:27:34 +0300 Subject: [PATCH] fixed pr comments --- .../destinations/create/[id]/page.tsx | 28 ++++++----- .../app/overview/destinations/create/page.tsx | 8 +--- .../app/overview/destinations/manage/page.tsx | 3 +- .../webapp/components/side.menu/menu/menu.tsx | 3 +- frontend/webapp/containers/overview/index.tsx | 1 + .../notification/notification.tsx | 22 ++++----- .../notification/portal.notification.tsx | 46 ------------------- 7 files changed, 32 insertions(+), 79 deletions(-) delete mode 100644 frontend/webapp/design.system/notification/portal.notification.tsx diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx index 9a0269686..f4082de12 100644 --- a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx +++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx @@ -20,7 +20,11 @@ const NewDestinationContainer = styled.div` export default function NewDestinationFlow() { const { sectionData, setSectionData } = useSectionData(null); + const { show, Notification } = useNotification(); + const { mutate } = useMutation((body) => setDestination(body)); const searchParams = useSearchParams(); + const router = useRouter(); + const { data: destinationType } = useQuery( [QUERIES.API_DESTINATION_TYPE, sectionData?.type], () => getDestination(sectionData?.type), @@ -29,25 +33,29 @@ export default function NewDestinationFlow() { } ); - const { isLoading, data } = useQuery( + const { data: destinationsList } = useQuery( [QUERIES.API_DESTINATION_TYPES], getDestinationsTypes ); - const { show, Notification } = useNotification(); - const { mutate } = useMutation((body) => setDestination(body)); - const router = useRouter(); - useEffect(onPageLoad, [data]); + useEffect(onPageLoad, [destinationsList]); function onPageLoad() { const search = searchParams.get(DEST); + if (!destinationsList || !search) return; + let currentData = null; - data?.categories.forEach((item) => { - const filterItem = item.items.filter((dest) => dest?.type === search); + + for (const category of destinationsList.categories) { + if (currentData) { + break; + } + const filterItem = category.items.filter(({ type }) => type === search); if (filterItem.length) { currentData = filterItem[0]; } - }); + } + setSectionData(currentData); } @@ -82,10 +90,6 @@ export default function NewDestinationFlow() { router.back(); } - if (isLoading) { - return; - } - return ( <> - - - ); + return ; } diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx index 2b20da8cd..cd92c828f 100644 --- a/frontend/webapp/app/overview/destinations/manage/page.tsx +++ b/frontend/webapp/app/overview/destinations/manage/page.tsx @@ -6,6 +6,7 @@ import { useSearchParams } from "next/navigation"; import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow"; import { getDestinations } from "@/services"; import { useQuery } from "react-query"; +import { KeyvalLoader } from "@/design.system"; const DEST = "dest"; @@ -50,7 +51,7 @@ export default function ManageDestinationPage() { } if (destinationLoading || !selectedDestination) { - return; + return ; } return ( diff --git a/frontend/webapp/components/side.menu/menu/menu.tsx b/frontend/webapp/components/side.menu/menu/menu.tsx index bbef40e4b..814885343 100644 --- a/frontend/webapp/components/side.menu/menu/menu.tsx +++ b/frontend/webapp/components/side.menu/menu/menu.tsx @@ -36,9 +36,8 @@ export function Menu() { } function handleMenuItemClick(item) { - if (!item) return; setCurrentMenuItem(item); - router?.push(item?.navigate); + router.push(item?.navigate); } function renderMenuItemsList() { diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx index 2a26e3504..e7895d4e4 100644 --- a/frontend/webapp/containers/overview/index.tsx +++ b/frontend/webapp/containers/overview/index.tsx @@ -1,3 +1,4 @@ export { OverviewContainer } from "./overview/overview"; export { DestinationContainer } from "./destination/destination"; export { SourcesContainer } from "./sources/sources"; +export { NewDestinationFlow } from "./destination/new.destination.flow"; diff --git a/frontend/webapp/design.system/notification/notification.tsx b/frontend/webapp/design.system/notification/notification.tsx index bd8af8ad0..c0352b40e 100644 --- a/frontend/webapp/design.system/notification/notification.tsx +++ b/frontend/webapp/design.system/notification/notification.tsx @@ -7,7 +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; @@ -48,16 +48,14 @@ export function KeyvalNotification({ } return ( - - - - {getIcon()} - - {message} - - - - - + + + {getIcon()} + + {message} + + + + ); } diff --git a/frontend/webapp/design.system/notification/portal.notification.tsx b/frontend/webapp/design.system/notification/portal.notification.tsx deleted file mode 100644 index d220c0fa8..000000000 --- a/frontend/webapp/design.system/notification/portal.notification.tsx +++ /dev/null @@ -1,46 +0,0 @@ -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(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;