405-linkid-potential-bug

frontend/src/components/Links/Popup/Popup.jsx

@@ -20,12 +20,9 @@ const Popup = () => {
 
   const handleClosePopup = async () => {
     setIsPopupOpen(false);
-    setLinks(
-      links.filter(
-        (it) => it.title !== itemToDelete.title && it.id !== itemToDelete.id
-      )
-    );
-    setDeletedLinks((prev) => [...prev, itemToDelete]);
+    setLinks(links.filter((it) => it.id !== itemToDelete.id));
+    typeof itemToDelete.id === "number" &&
+      setDeletedLinks((prev) => [...prev, itemToDelete]);
     setItemToDelete(null);
   };
 

frontend/src/components/Links/Settings/Settings.jsx

@@ -2,7 +2,7 @@ import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
 import { useContext, useEffect, useRef, useState } from "react";
 import { HelperLinkContext } from "../../../services/linksProvider";
 import Switch from "../../Switch/Switch";
-import s from "./Settings.module.scss";
+import style from "./Settings.module.scss";
 
 const defaultState = {
   title: "",
@@ -38,7 +38,10 @@ const Settings = () => {
       };
       setState(newState);
     } else {
-      setState({ ...defaultState, id: Math.floor(Date.now() * Math.random()) });
+      setState({
+        ...defaultState,
+        id: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+      });
     }
     window.addEventListener("mousedown", handleMouseDown);
 
@@ -78,84 +81,84 @@ const Settings = () => {
       setLinkToEdit(null);
       toggleSettings(e);
     } else {
-      setLinks((prev) => [...prev, { ...info, id: +info.id }]);
+      setLinks((prev) => [...prev, { ...info, id: info.id }]);
       toggleSettings(e);
     }
   };
 
   return (
     <form
-      className={s.settings}
+      className={style.settings}
       ref={settingsRef}
       onSubmit={handleClose}
-      role="form"
-      data-testid="settings-form"
+      role='form'
+      data-testid='settings-form'
     >
-      <div className={s.settings__header}>
-        <span className={s["settings__header--title"]}>Add new link</span>
-        <div className={s["settings__header--right"]}>
-          <span className={s["settings__header--info"]}>Auto-saved</span>
+      <div className={style.settings__header}>
+        <span className={style["settings__header--title"]}>Add new link</span>
+        <div className={style["settings__header--right"]}>
+          <span className={style["settings__header--info"]}>Auto-saved</span>
           <CloseOutlinedIcon
             onClick={handleClose}
             style={{ color: "#98A2B3", fontSize: "20px", cursor: "pointer" }}
-            data-testid="close"
+            data-testid='close'
           />
         </div>
       </div>
-      <div className={s.settings__content}>
+      <div className={style.settings__content}>
         <input
-          type="hidden"
-          name="id"
+          type='hidden'
+          name='id'
           value={state.id}
           onChange={handleChange}
         />
-        <label htmlFor="title" className={s["settings__content--label"]}>
-          <span className={s["settings__content--text"]}>Title</span>
+        <label htmlFor='title' className={style["settings__content--label"]}>
+          <span className={style["settings__content--text"]}>Title</span>
           <input
-            className={s["settings__content--input"]}
-            id="title"
-            type="text"
-            name="title"
+            className={style["settings__content--input"]}
+            id='title'
+            type='text'
+            name='title'
             onChange={handleChange}
             value={state.title}
           />
         </label>
-        <label htmlFor="url" className={s["settings__content--label"]}>
-          <span className={s["settings__content--text"]}>
+        <label htmlFor='url' className={style["settings__content--label"]}>
+          <span className={style["settings__content--text"]}>
             URL to open (can be a relative URL)
           </span>
           <input
-            className={s["settings__content--input"]}
-            id="url"
-            type="text"
-            name="url"
+            className={style["settings__content--input"]}
+            id='url'
+            type='text'
+            name='url'
             onChange={handleChange}
             value={state.url}
           />
-          <small className={s["settings__content--obs"]}>
+          <small className={style["settings__content--obs"]}>
             You can use a URL that starts with https:// or an internal address
             that starts with / (slash) character.
           </small>
         </label>
 
         <label
-          htmlFor="switch"
-          className={`${s["settings__content--label"]} ${s.last}`}
+          htmlFor='switch'
+          className={`${style["settings__content--label"]} ${style.last}`}
         >
           <Switch
-            id="switch"
-            name="target"
+            id='switch'
+            name='target'
             onChange={handleChange}
             value={state.target}
           />
           <span>Open in a new tab</span>
         </label>
       </div>
-      <button type="submit" style={{ display: "none" }}>
+      <button type='submit' style={{ display: "none" }}>
         Submit
       </button>
     </form>
   );
 };
 
-export default Settings;
+export default Settings;

frontend/src/scenes/links/LinksDefaultPage.jsx

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import { ACTIVITY_TYPES_INFO } from "../../data/guideMainPageData";
-import { deleteHelper, getHelpers} from "../../services/helperLinkService";
+import { deleteHelper, getHelpers } from "../../services/helperLinkService";
 import HelperLinkProvider from "../../services/linksProvider";
 import DefaultPageTemplate from "../../templates/DefaultPageTemplate/DefaultPageTemplate";
-import NewLinksPopup from "./NewLinksPopup";
 import styles from "./LinkPage.module.scss";
+import NewLinksPopup from "./NewLinksPopup";
 
 const LinksDefaultPage = () => {
   const [itemsUpdated, setItemsUpdated] = useState(false);
@@ -16,31 +16,29 @@ const LinksDefaultPage = () => {
     headerBackgroundColor: helper.headerBackgroundColor,
     linkFontColor: helper.linkFontColor,
     iconColor: helper.iconColor,
-  })
+  });
 
   return (
-    <>
-      <HelperLinkProvider>
-        <div className={styles.container}>
-          <NewLinksPopup
-            isEdit={isEdit}
-            itemId={itemId}
-            setItemsUpdated={setItemsUpdated}
-          />
-          <DefaultPageTemplate
-            getItems={getHelpers}
-            deleteItem={deleteHelper}
-            itemsUpdated={itemsUpdated}
-            setIsEdit={setIsEdit}
-            setItemId={setItemId}
-            itemType={ACTIVITY_TYPES_INFO.HELPERLINKS}
-            itemTypeInfo={ACTIVITY_TYPES_INFO.HELPERLINKS}
-            getItemDetails={getItemDetails}
-          />
-        </div>
-      </HelperLinkProvider>
-    </>
+    <HelperLinkProvider>
+      <div className={styles.container}>
+        <NewLinksPopup
+          isEdit={isEdit}
+          itemId={itemId}
+          setItemsUpdated={setItemsUpdated}
+        />
+        <DefaultPageTemplate
+          getItems={getHelpers}
+          deleteItem={deleteHelper}
+          itemsUpdated={itemsUpdated}
+          setIsEdit={setIsEdit}
+          setItemId={setItemId}
+          itemType={ACTIVITY_TYPES_INFO.HELPERLINKS}
+          itemTypeInfo={ACTIVITY_TYPES_INFO.HELPERLINKS}
+          getItemDetails={getItemDetails}
+        />
+      </div>
+    </HelperLinkProvider>
   );
 };
 
-export default LinksDefaultPage;
+export default LinksDefaultPage;

frontend/src/scenes/links/NewLinksPopup.jsx

@@ -7,7 +7,7 @@ import {
   getHelperById,
   updateHelper,
 } from "../../services/helperLinkService";
-import { deleteLink, getLinkById } from "../../services/linkService";
+import { deleteLink } from "../../services/linkService";
 import { HelperLinkContext } from "../../services/linksProvider";
 import GuideTemplate from "../../templates/GuideTemplate/GuideTemplate";
 import { useDialog } from "../../templates/GuideTemplate/GuideTemplateContext";
@@ -17,6 +17,13 @@ import styles from "./LinkPage.module.scss";
 import LinkAppearance from "./LinkPageComponents/LinkAppearance";
 import LinkContent from "./LinkPageComponents/LinkContent";
 
+const DEFAULT_VALUES = {
+  title: "",
+  headerBackgroundColor: "#F8F9F8",
+  linkFontColor: "#344054",
+  iconColor: "#7F56D9",
+};
+
 const NewLinksPopup = ({
   autoOpen = false,
   isEdit,
@@ -31,35 +38,37 @@ const NewLinksPopup = ({
     links,
     deletedLinks,
     setLinks,
-    helperToEdit,
     setHelperToEdit,
+    setDeletedLinks,
   } = useContext(HelperLinkContext);
 
-  const DEFAULT_VALUES = {
-    title: "",
-    headerBackgroundColor: "#F8F9F8",
-    linkFontColor: "#344054",
-    iconColor: "#7F56D9",
-  }
   const { openDialog, closeDialog, isOpen } = useDialog();
+
+  const resetHelper = (close = true) => {
+    close && closeDialog();
+    setHelper({});
+    setLinks([]);
+    setHelperToEdit(null);
+    setDeletedLinks([]);
+  };
+
   const fetchHelperData = async () => {
     try {
       const { links, ...data } = await getHelperById(itemId);
       setHelper(data);
       setLinks(links.sort((a, b) => a.order - b.order));
       setHelperToEdit(itemId);
-    }
-    catch (error) {
+    } catch (error) {
       emitToastError(buildToastError(error));
-      closeDialog();
+      resetHelper();
     }
-  }
+  };
 
   useEffect(() => {
     if (autoOpen) {
       openDialog();
     }
-  }, [autoOpen, openDialog]);
+  }, [autoOpen]);
 
   useEffect(() => {
     if (isEdit) {
@@ -69,18 +78,16 @@ const NewLinksPopup = ({
       setLinks([]);
     }
     if (!isOpen) {
-      setLinks([]);
-      setHelper({});
-      setHelperToEdit(null);
+      resetHelper(false);
     }
-  }, [openDialog, isOpen]);
+  }, [isOpen]);
 
   const buildToastError = (msg) =>
     msg.response
       ? msg
       : {
-        response: { data: { errors: [{ msg }] } },
-      };
+          response: { data: { errors: [{ msg }] } },
+        };
 
   const handleLinks = async (item) => {
     const { id, ...link } = item;
@@ -89,8 +96,7 @@ const NewLinksPopup = ({
       return null;
     }
     try {
-      const exists = await getLinkById(id);
-      if (exists?.id) return { ...link, id };
+      if (typeof id === "number") return item;
       return { ...link };
     } catch (err) {
       emitToastError(err);
@@ -105,21 +111,20 @@ const NewLinksPopup = ({
       if (formattedLinks.some((it) => !it)) {
         return null;
       }
-      newHelper = await (helperToEdit
+      newHelper = await (isEdit
         ? updateHelper(helper, formattedLinks)
         : createHelper(helper, formattedLinks));
       setHelper(newHelper);
       setItemsUpdated((prevState) => !prevState);
-      closeDialog();
     } catch (err) {
       emitToastError(buildToastError(err));
       return null;
     }
-    if (helperToEdit && deletedLinks.length) {
+    if (isEdit && deletedLinks.length) {
       await Promise.all(
         deletedLinks.map(async (it) => {
           try {
-            return await deleteLink({ ...it, helperId: helperToEdit });
+            return await deleteLink(it.id);
           } catch (err) {
             emitToastError(err);
             return null;
@@ -128,13 +133,11 @@ const NewLinksPopup = ({
       );
     }
     if (newHelper) {
-      const toastMessage = helper.id
+      const toastMessage = isEdit
         ? "You edited this Helper Link"
         : "New Helper Link saved";
       toastEmitter.emit(TOAST_EMITTER_KEY, toastMessage);
-      setHelper({});
-      setLinks([]);
-      setHelperToEdit(null);
+      resetHelper();
     }
   };
 

frontend/src/utils/constants.js

@@ -1,9 +1,9 @@
 // API constants
 //local environment
-export const API_BASE_URL = 'http://localhost:3000/api/';
+// export const API_BASE_URL = 'http://localhost:3000/api/';
 
 //staging environment
-// export const API_BASE_URL = 'https://onboarding-demo.bluewavelabs.ca/api/';
+export const API_BASE_URL = 'https://onboarding-demo.bluewavelabs.ca/api/';
 // Other constants
 export const APP_TITLE = 'Bluewave Onboarding';
 export const SUPPORT_EMAIL = 'support@bluewave.com';