Open 'create' page dialog on target pages using useLocation()

bluewave-labs · Dec 25, 2024 · 732b403 · 732b403
1 parent 83b4ec5
commit 732b403
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 12 deletions.
diff --git a/frontend/src/scenes/banner/BannerDefaultPage.jsx b/frontend/src/scenes/banner/BannerDefaultPage.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import {useLocation} from "react-router-dom"
 import DefaultPageTemplate from '../../templates/DefaultPageTemplate/DefaultPageTemplate';
 import { getBanners, deleteBanner } from '../../services/bannerServices';
 import { ACTIVITY_TYPES_INFO } from '../../data/guideMainPageData';
@@ -8,6 +9,7 @@ const BannerDefaultPage = () => {
     const [itemsUpdated, setItemsUpdated] = useState(false);
     const [isEdit, setIsEdit] = useState(false);
     const [itemId, setItemId] = useState(null);
+    const locationData = useLocation()
 
     const getBannerDetails = (banner) => ({
         title: `Banner ${banner.id}`,
@@ -27,6 +29,7 @@ const BannerDefaultPage = () => {
                 itemsUpdated={itemsUpdated}
             />
             <BannerPage
+                autoOpen= {locationData.state?.autoOpen}
                 isEdit={isEdit}
                 itemId={itemId}
                 setItemsUpdated={setItemsUpdated}

diff --git a/frontend/src/scenes/banner/CreateBannerPage.jsx b/frontend/src/scenes/banner/CreateBannerPage.jsx
@@ -12,7 +12,7 @@ import BannerLeftContent from "./BannerPageComponents/BannerLeftContent/BannerLe
 import BannerPreview from "./BannerPageComponents/BannerPreview/BannerPreview";
 import { useDialog } from "../../templates/GuideTemplate/GuideTemplateContext";
 
-const BannerPage = ({isEdit,  itemId,  setItemsUpdated}) => {
+const BannerPage = ({ autoOpen = false, isEdit, itemId, setItemsUpdated }) => {
   const [backgroundColor, setBackgroundColor] = useState("#F9F5FF");
   const [fontColor, setFontColor] = useState("#344054");
   const [activeButton, setActiveButton] = useState(0);
@@ -21,12 +21,17 @@ const BannerPage = ({isEdit,  itemId,  setItemsUpdated}) => {
   const [url, setUrl] = useState("");
   const [actionUrl, setActionUrl] = useState("");
   const [buttonAction, setButtonAction] = useState("No action");
-  const { closeDialog } = useDialog();
+  const { openDialog, closeDialog } = useDialog();
 
   const handleButtonClick = (index) => {
     setActiveButton(index);
   };
 
+
+  useEffect(() => {
+    if (autoOpen) openDialog();
+  }, [autoOpen, openDialog]);
+
   useEffect(() => {
     if (isEdit) {
       const fetchBannerData = async () => {

diff --git a/frontend/src/scenes/dashboard/Dashboard.jsx b/frontend/src/scenes/dashboard/Dashboard.jsx
@@ -55,17 +55,17 @@ const Dashboard = ({ name }) => {
     {
       skeletonType: <BaseSkeleton guideType="popup" />,
       placeholder: "Create a popup",
-      onClick: () => navigate("/popup"),
+      onClick: () => navigate("/popup", { state: { autoOpen: true } }),
     },
     {
       skeletonType: <BannerSkeleton />,
       placeholder: "Create a new banner",
-      onClick: () => navigate("/banner"),
+      onClick: () => navigate("/banner", { state: { autoOpen: true } }),
     },
     {
       skeletonType: <BaseSkeleton guideType="helperLink" />,
       placeholder: "Create a new helper link",
-      onClick: () => navigate("/hint"),
+      onClick: () => navigate("/hint", { state: { autoOpen: true } }),
     },
   ];
 

diff --git a/frontend/src/scenes/hints/CreateHintPage.jsx b/frontend/src/scenes/hints/CreateHintPage.jsx
@@ -10,9 +10,8 @@ import toastEmitter, { TOAST_EMITTER_KEY } from "../../utils/toastEmitter";
 import { emitToastError } from "../../utils/guideHelper";
 import { useDialog } from "../../templates/GuideTemplate/GuideTemplateContext";
 
-const HintPage = ({ isEdit, itemId, setItemsUpdated }) => {
-  const { closeDialog } = useDialog();
-
+const HintPage = ({ autoOpen = false, isEdit, itemId, setItemsUpdated }) => {
+  const { openDialog, closeDialog } = useDialog();
 
   const [activeButton, setActiveButton] = useState(0);
 
@@ -60,6 +59,10 @@ const HintPage = ({ isEdit, itemId, setItemsUpdated }) => {
     },
   ];
 
+  useEffect(() => {
+    if (autoOpen) openDialog();
+  }, [autoOpen, openDialog]);
+
   useEffect(() => {
     if (isEdit) {
       const fetchHintData = async () => {

diff --git a/frontend/src/scenes/hints/HintDefaultPage.jsx b/frontend/src/scenes/hints/HintDefaultPage.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import {useLocation} from "react-router-dom"
 import DefaultPageTemplate from "../../templates/DefaultPageTemplate/DefaultPageTemplate";
 import CreateHintPage from "./CreateHintPage";
 import { ACTIVITY_TYPES_INFO } from "../../data/guideMainPageData";
@@ -8,6 +9,7 @@ const HintDefaultPage = () => {
   const [itemsUpdated, setItemsUpdated] = useState(false);
   const [isEdit, setIsEdit] = useState(false);
   const [itemId, setItemId] = useState(null);
+  const locationData = useLocation()
 
   const getHintDetails = (hint) => ({
     title: `Hint ${hint.id}`,
@@ -27,6 +29,7 @@ const HintDefaultPage = () => {
         itemsUpdated={itemsUpdated}
       />
       <CreateHintPage
+        autoOpen={locationData.state?.autoOpen}
         isEdit={isEdit}
         itemId={itemId}
         setItemsUpdated={setItemsUpdated}

diff --git a/frontend/src/scenes/popup/PopupDefaultPage.jsx b/frontend/src/scenes/popup/PopupDefaultPage.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import {useLocation} from "react-router-dom"
 import DefaultPageTemplate from '../../templates/DefaultPageTemplate/DefaultPageTemplate';
 import CreatePopupPage from './CreatePopupPage';
 import { getPopups, deletePopup } from '../../services/popupServices';
@@ -8,6 +9,7 @@ const PopupDefaultPage = () => {
     const [itemsUpdated, setItemsUpdated] = useState(false);
     const [isEdit, setIsEdit] = useState(false);
     const [itemId, setItemId] = useState(null);
+    const locationData = useLocation()
 
     const getPopupDetails = (popup) => ({
         title: `Popup ${popup.id}`,
@@ -28,6 +30,7 @@ const PopupDefaultPage = () => {
           itemsUpdated={itemsUpdated}
         />
         <CreatePopupPage
+          autoOpen= {locationData.state?.autoOpen}
           isEdit={isEdit}
           itemId={itemId}
           setItemsUpdated={setItemsUpdated}

diff --git a/frontend/src/templates/GuideTemplate/GuideTemplate.jsx b/frontend/src/templates/GuideTemplate/GuideTemplate.jsx
@@ -6,6 +6,7 @@ import { React } from "react";
 import Button from "../../components/Button/Button";
 import styles from "./GuideTemplate.module.scss";
 import { useDialog } from "./GuideTemplateContext";
+import { useLocation, useNavigate } from "react-router";
 
 const GuideTemplate = ({
   title = "",
@@ -17,8 +18,16 @@ const GuideTemplate = ({
   onSave = () => null,
 }) => {
   const { isOpen, closeDialog } = useDialog();
+  const location = useLocation();
+  const navigate = useNavigate();
   const buttons = ["Content", "Appearance"];
 
+  const onCloseHandler = () => {
+    if (location.state?.autoOpen) navigate("/", { state: {} });
+
+    closeDialog();
+  };
+
   return (
     <Dialog
       closeAfterTransition={isOpen}
@@ -37,7 +46,7 @@ const GuideTemplate = ({
                 fontSize: "20px",
                 cursor: "pointer",
               }}
-              onClick={closeDialog}
+              onClick={onCloseHandler}
             />
           </div>
           <div className={styles.content}>
@@ -63,9 +72,7 @@ const GuideTemplate = ({
               <Button
                 text="Cancel"
                 buttonType="secondary-grey"
-                onClick={() => {
-                  closeDialog();
-                }}
+                onClick={onCloseHandler}
               />
               <Button text="Save" onClick={onSave} />
             </div>