UI changes in Contact Profile page.

src/components/Directory/NotesDirectory.jsx

@@ -19,16 +19,15 @@ const NotesDirectory = ({
   refetchProfile,
   isLoading,
   contactProfile, // This contactProfile now reliably includes firstName, middleName, lastName, and fullName
+  contactProfile, // This contactProfile now reliably includes firstName, middleName, lastName, and fullName
   setProfileContact,
 }) => {
   const [IsActive, setIsActive] = useState(true);
-  const { contactNotes, refetch } = useContactNotes(
-    contactProfile?.id,
-    IsActive
-  );
+  const { contactNotes, refetch } = useContactNotes(contactProfile?.id, IsActive);
 
   const [IsSubmitting, setIsSubmitting] = useState(false);
   const [showEditor, setShowEditor] = useState(false);
+  const [showEditor, setShowEditor] = useState(false);
   const {
     register,
     handleSubmit,
@@ -69,25 +68,27 @@ const NotesDirectory = ({
         const updatedProfile = {
           ...cached_contactProfile.data,
           notes: [...(cached_contactProfile.data.notes || []), createdNote],
+          notes: [...(cached_contactProfile.data.notes || []), createdNote],
         };
-        cacheData("Contact Profile", {
-          contactId: contactProfile?.id,
-          data: updatedProfile,
-        });
+        cacheData("Contact Profile", { contactId: contactProfile?.id, data: updatedProfile });
       }
 
       setValue("note", "");
       setIsSubmitting(false);
       showToast("Note added successfully!", "success");
       setShowEditor(false);
+      setShowEditor(false);
       setIsActive(true);
       refetch(contactProfile?.id, true);
+      refetch(contactProfile?.id, true);
     } catch (error) {
       setIsSubmitting(false);
       const msg =
+        error.response?.data?.message ||
         error.response?.data?.message ||
         error.message ||
         "Error occurred during API calling";
+        "Error occurred during API calling";
       showToast(msg, "error");
     }
   };
@@ -95,8 +96,11 @@ const NotesDirectory = ({
   const onCancel = () => {
     setValue("note", "");
     setShowEditor(false);
+    setValue("note", "");
+    setShowEditor(false);
   };
 
+
   const handleSwitch = () => {
     setIsActive((prevIsActive) => {
       const newState = !prevIsActive;
@@ -106,82 +110,81 @@ const NotesDirectory = ({
   };
 
   // Use the fullName from contactProfile, which now includes middle and last names if available
-  const contactName =
-    contactProfile?.fullName || contactProfile?.firstName || "Contact";
+  const contactName = contactProfile?.fullName || contactProfile?.firstName || "Contact";
   const noNotesMessage = `Be the first to share your insights! ${contactName} currently has no notes.`;
 
-  const notesToDisplay = IsActive
-    ? contactProfile?.notes || []
-    : contactNotes || [];
+  const notesToDisplay = IsActive ? (contactProfile?.notes || []) : (contactNotes || []);
 
   return (
+    <div className="text-start mt-10">
     <div className="text-start mt-10">
       <div className="d-flex align-items-center justify-content-between">
-        <div className="row w-100 align-items-center">
-          <div className="col col-2">
-            <p className="fw-semibold m-0 ms-3">Notes :</p>
-          </div>
-          <div className="col d-flex justify-content-end gap-2 pe-0">
-            {" "}
-            <div className="d-flex align-items-center justify-content-between">
-              <label
-                className="switch switch-primary"
-                style={{
-                  visibility:
-                    contactProfile?.notes?.length > 0 ||
-                    contactNotes?.length > 0
-                      ? "visible"
-                      : "hidden",
-                }}
-              >
-                <input
-                  type="checkbox"
-                  className="switch-input"
-                  checked={!IsActive} // checked when showing *in*active notes (i.e., when IsActive is false)
-                  onChange={handleSwitch}
-                />
+        <p className="fw-semibold m-0 ms-3">Notes :</p>
+      </div>
+      <div className="d-flex align-items-center justify-content-between mb-5">
+        <div className="m-0 d-flex align-items-center">
+          {(contactProfile?.notes?.length > 0 || contactNotes?.length > 0) && (
+            <label className="switch switch-primary">
+              <input
+                type="checkbox"
+                className="switch-input"
+                onChange={handleSwitch}
+                checked={!IsActive}
+              />
+              <span className="switch-toggle-slider">
+                <span className="switch-on"></span>
+                <span className="switch-off"></span>
+              </span>
+              <span className="switch-label">Include Deleted Notes</span>
+            </label>
+          )}
+          {!(contactProfile?.notes?.length > 0 || contactNotes?.length > 0) && (
+            <div style={{ visibility: "hidden" }}>
+              <label className="switch switch-primary">
+                <input type="checkbox" className="switch-input" />
                 <span className="switch-toggle-slider">
                   <span className="switch-on"></span>
                   <span className="switch-off"></span>
                 </span>
                 <span className="switch-label">Include Deleted Notes</span>
               </label>
-              {!showEditor && (
-                <div className="d-flex justify-content-end">
-                  <button
-                    type="button"
-                    className="btn btn-sm d-flex align-items-center"
-                    onClick={() => setShowEditor(true)}
-                    style={{
-                      color: "#6c757d",
-                      backgroundColor: "transparent",
-                      boxShadow: "none",
-                      border: "none",
-                    }}
-                  >
-                    <i
-                      className="bx bx-plus-circle me-0 text-primary"
-                      style={{ fontSize: "1.5rem", color: "#6c757d" }}
-                    ></i>
-                    Add a Note
-                  </button>
-                </div>
-              )}
             </div>
-          </div>
+          )}
         </div>
+
+        {!showEditor && (
+          <div className="d-flex justify-content-end">
+            <button
+              type="button"
+              className="btn btn-sm d-flex align-items-center"
+              onClick={() => setShowEditor(true)}
+              style={{
+                color: "#6c757d",
+                backgroundColor: "transparent",
+                boxShadow: "none",
+                border: "none",
+              }}
+            >
+              <i
+                className="bx bx-plus-circle me-0"
+                style={{ fontSize: "1.5rem", color: "#6c757d" }}
+              ></i>
+              Add a Note
+            </button>
+          </div>
+        )}
+
       </div>
 
       {showEditor && (
         <div className="card m-2 mb-5 position-relative">
-          <span
+          <button
             type="button"
-            className="position-absolute top-0 end-0  mt-3 bg-secondary rounded-circle"
+            className="btn-close btn-secondary position-absolute top-0 end-0 m-2 mt-3 rounded-circle"
             aria-label="Close"
+            style={{ backgroundColor: "#eee", color: "white" }}
             onClick={() => setShowEditor(false)}
-          >
-            <i className="bx bx-x fs-5  p-1 text-white"></i>
-          </span>
+          ></button>
           <form onSubmit={handleSubmit(onSubmit)}>
             <Editor
               value={noteValue}
@@ -190,6 +193,7 @@ const NotesDirectory = ({
               onCancel={onCancel}
               onSubmit={handleSubmit(onSubmit)}
             />
+            {errors.note && (
             {errors.note && (
               <p className="text-danger small mt-1">{errors.note.message}</p>
             )}
@@ -197,6 +201,7 @@ const NotesDirectory = ({
         </div>
       )}
 
+      <div className=" justify-content-start px-1 mt-1">
       <div className=" justify-content-start px-1 mt-1">
         {isLoading && (
           <div className="text-center">
@@ -204,25 +209,28 @@ const NotesDirectory = ({
             <p>Loading...</p>{" "}
           </div>
         )}
-        {!isLoading && notesToDisplay.length > 0
-          ? notesToDisplay
-              .slice()
-              .reverse()
-              .map((noteItem) => (
-                <NoteCardDirectory
-                  refetchProfile={refetchProfile}
-                  refetchNotes={refetch}
-                  refetchContact={refetch}
-                  noteItem={noteItem}
-                  contactId={contactProfile?.id}
-                  setProfileContact={setProfileContact}
-                  key={noteItem.id}
-                />
-              ))
-          : !isLoading &&
-            !showEditor && (
-              <div className="text-center mt-5">{noNotesMessage}</div>
-            )}
+        {!isLoading && notesToDisplay.length > 0 ? (
+          notesToDisplay
+            .slice()
+            .reverse()
+            .map((noteItem) => (
+              <NoteCardDirectory
+                refetchProfile={refetchProfile}
+                refetchNotes={refetch}
+                refetchContact={refetch}
+                noteItem={noteItem}
+                contactId={contactProfile?.id}
+                setProfileContact={setProfileContact}
+                key={noteItem.id}
+              />
+            ))
+        ) : (
+          !isLoading && !showEditor && (
+            <div className="text-center mt-5">
+              {noNotesMessage}
+            </div>
+          )
+        )}
       </div>
     </div>
   );