bug fix on popup in employer page

Author: jsoneaday

webclient/src/domain/repository/JobRepo.ts

@@ -231,7 +231,7 @@ export async function insertJobPost(
     const result: OutputId = await response.json();
     return result;
   }
-  throw new Error("Failed to update job");
+  throw new Error(await response.text());
 }
 
 export async function updateJobPost(

webclient/src/presentation/components/Modal.tsx

@@ -6,6 +6,7 @@ interface ModalProps {
   toggleOpen: () => void;
   children: ReactNode;
   overlayClickClose?: boolean;
+  /// note: do not override display attribute as it causes a white box to always show
   style?: CSSProperties;
 }
 
@@ -23,8 +24,10 @@ export default function Modal({
     if (!dialogElement) return;
 
     if (isOpen) {
+      console.log("showModal");
       dialogElement.showModal();
     } else {
+      console.log("close modal");
       dialogElement.close();
     }
   }, [isOpen]);

webclient/src/presentation/components/controls/Popup.tsx

@@ -9,17 +9,7 @@ interface PopupProps {
 
 export function Popup({ children, toggleOpen, isOpen }: PopupProps) {
   return (
-    <Modal
-      isOpen={isOpen}
-      toggleOpen={toggleOpen}
-      overlayClickClose={true}
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        height: "50px",
-      }}
-    >
+    <Modal isOpen={isOpen} toggleOpen={toggleOpen} overlayClickClose={true}>
       {children}
     </Modal>
   );

webclient/src/presentation/components/jobs/JobFullview.tsx

@@ -236,6 +236,10 @@ export default function JobFullview({ userType }: JobFullviewProps) {
   const [validationMessage, setValidationMessage] = useState("");
   const [successMessage, setSuccessMessage] = useState("");
 
+  useEffect(() => {
+    console.log("popup state", isPopupOpen);
+  }, []);
+
   useEffect(() => {
     let currentJobPost: JobPost | undefined = undefined;
     if (routeJobPost) {
@@ -707,15 +711,24 @@ export default function JobFullview({ userType }: JobFullviewProps) {
       } else {
         await updateJobPost(formValues.current, profile.accessToken);
       }
-    } catch (e) {
-      console.log(e);
-    } finally {
+
       const state = refreshUrlState();
       navigate(".", { state, replace: true });
-      setSubmitDisabled(false);
-      setInTextEditMode(false);
+
       setValidationMessage("");
       setSuccessMessage("Job saved successfully");
+    } catch (e) {
+      console.log(e);
+      if (e instanceof Error) {
+        setValidationMessage(e.message);
+        setSuccessMessage("");
+      } else {
+        setValidationMessage("Failed to save job");
+        setSuccessMessage("");
+      }
+    } finally {
+      setInTextEditMode(false);
+      setSubmitDisabled(false);
       toggleIsPopupOpen();
     }
   };
@@ -772,7 +785,7 @@ export default function JobFullview({ userType }: JobFullviewProps) {
       setSuccessMessage("");
       result = false;
     }
-    console.log("result", result);
+    console.log("validation result", result);
     return result;
   };
 
@@ -794,12 +807,21 @@ export default function JobFullview({ userType }: JobFullviewProps) {
   return (
     <>
       <Popup isOpen={isPopupOpen} toggleOpen={toggleIsPopupOpen}>
-        <div className="popup-container">
-          <ValidationMsgView
-            validationMessage={validationMessage}
-            successMessage={successMessage}
-          />
-        </div>
+        {isPopupOpen ? (
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              height: "50px",
+            }}
+          >
+            <ValidationMsgView
+              validationMessage={validationMessage}
+              successMessage={successMessage}
+            />
+          </div>
+        ) : null}
       </Popup>
       <form
         className="userhome-main"

webclient/src/presentation/theme/modal.css

@@ -29,6 +29,6 @@
   height: 120px;
 }
 
-dialog::backdrop {
-  background: rgb(0 0 0 / 0.2);
+dialog[open] {
+  display: block; /* Show when open */
 }