updated cache

src/components/Directory/NotesDirectory.jsx

@@ -7,7 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { showText } from "pdf-lib";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import moment from "moment";
-import {getCachedData} from "../../slices/apiDataManager";
+import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import NoteCardDirectory from "./NoteCardDirectory";
 import showToast from "../../services/toastService";
 
@@ -15,10 +15,10 @@ const schema = z.object({
   note: z.string().min(1, { message: "Note is required" }),
 });
 
-const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) =>
+const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
-{
+  const [NotesData, setNotesData] = useState();
-  const [ NotesData, setNotesData ] = useState()
+  const [IsSubmitting, setIsSubmitting] = useState(false);
-  const[IsSubmitting,setIsSubmitting] = useState(false)
+  const [addNote, setAddNote] = useState(false);
   const {
     register,
     handleSubmit,
@@ -40,9 +40,8 @@ const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) =>
 
   const onSubmit = async (data) => {
     const newNote = { ...data, contactId: contactProfile?.id };
-    try
+    try {
-    {
+      setIsSubmitting(true);
-      setIsSubmitting(true)
       const response = await DirectoryRepository.CreateNote(newNote);
 
       const createdNote = response.data;
@@ -52,15 +51,24 @@ const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) =>
         notes: [...(prev.notes || []), createdNote],
       }));
 
-      setValue("note", "");
+      const cached_contactProfile = getCachedData("Contact Profile");
-        const result = response.data
+      if (
-        const cache_notes = getCachedData( "Contact Note" )
+        cached_contactProfile &&
+        cached_contactProfile.contactId === contactProfile?.id
+      ) {
+        const updatedProfile = {
+          ...cached_contactProfile.data,
+          notes: [...(cached_contactProfile.notes || []), createdNote],
+        };
+        cacheData("Contact Profile", updatedProfile);
+      }
 
-  setIsSubmitting(false)
+      setValue("note", "");
-            showToast("Note added successfully!", "success")
+      setIsSubmitting(false);
-    } catch ( error )
+      showToast("Note added successfully!", "success");
-    {
+      setAddNote(false);
-      setIsSubmitting(false)
+    } catch (error) {
+      setIsSubmitting(false);
       const msg =
         error.response.data.message ||
         error.message ||
@@ -75,6 +83,29 @@ const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) =>
 
   return (
     <div className="text-start">
+      <div
+        className={`${
+          contactProfile?.notes?.length > 0
+            ? "d-flex justify-content-between"
+            : "d-flex justify-content-end"
+        }`}
+      >
+        {contactProfile?.notes.length > 0 && (
+          <p className="fw-semibold m-0">Notes :</p>
+        )}
+        <a
+          className="small-text m-0 cursor-pointer"
+          onClick={() => setAddNote(!addNote)}
+        >
+          <u>
+            {addNote ? "" : "Add Note"}
+            <i
+              className={`bx  ${addNote ? "bx-x" : "bx-pencil"} bx-xs`}
+            ></i>{" "}
+          </u>{" "}
+        </a>
+      </div>
+      {addNote && (
         <form onSubmit={handleSubmit(onSubmit)}>
           <Editor
             value={noteValue}
@@ -87,13 +118,27 @@ const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) =>
             <p className="text-danger small mt-1">{errors.note.message}</p>
           )}
         </form>
+      )}
       <div
         className=" justify-content-start overflow-auto px-1"
-        style={{ maxHeight: "300px", minHeight: "100px" }}
+        style={{ maxHeight: "300px" }}
       >
-        {isLoading && <div className="text-center"> <p>Loading...</p> </div>}
+        {isLoading && (
-        {!isLoading && contactProfile?.notes?.map((noteItem) => (
+          <div className="text-center">
-          <NoteCardDirectory noteItem={noteItem} contactId={contactProfile?.id} setProfileContact={setProfileContact} key={noteItem.id}  />
+            {" "}
+            <p>Loading...</p>{" "}
+          </div>
+        )}
+        {!isLoading &&
+          [...(contactProfile?.notes || [])]
+            .reverse()
+            .map((noteItem) => (
+              <NoteCardDirectory
+                noteItem={noteItem}
+                contactId={contactProfile?.id}
+                setProfileContact={setProfileContact}
+                key={noteItem.id}
+              />
             ))}
       </div>
     </div>

src/components/Directory/ProfileContactDirectory.jsx

@@ -36,49 +36,6 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
             </span>
           </div>
         </div>
-
-        <hr className="my-1" />
-
-        {/* Tabs */}
-
-        {loading && <div className="text-center"> <p>Loading...</p> </div>}
-        {!loading && (
-          <ul className="nav nav-tabs mb-1 p0">
-          <li className="nav-item">
-            <button
-              className={`nav-link p-1 me-2 ${
-                activeTab === "profile" ? "active" : ""
-              }`}
-              onClick={() => setActiveTab("profile")}
-            >
-              Profile
-            </button>
-          </li>
-          <li className="nav-item ">
-            <button
-              className={`nav-link text-start p-1 ${
-                activeTab === "notes" ? "active" : ""
-              }`}
-              onClick={() => setActiveTab("notes")}
-            >
-            Notes<i className="bx  bx-pencil bx-xs"></i>
-            </button>
-          </li>
-          
-        </ul>
-        )}
-
-        {/* Tab Content */}
-        <div>
-          {activeTab === "notes" && (
-            <NotesDirectory
-              isLoading={loading}
-              contactProfile={profileContact}
-              setProfileContact={setProfileContact}
-            />
-          )}
-          {activeTab === "profile" && (
-            <div>
         <div className="d-flex flex-column text-start">
           {conatProfile?.contactEmails?.length > 0 && (
             <div className="d-flex mb-2">
@@ -124,18 +81,20 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
                 <ul className="list-inline mb-0">
                   <li className="list-inline-item">
                     <i className="bx bx-calendar-week bx-xs me-1"></i>
-                          {moment(conatProfile.createdAt).format(
+                    {moment(conatProfile.createdAt).format("MMMM, DD YYYY")}
-                            "MMMM, DD YYYY"
-                          )}
                   </li>
                 </ul>
               </div>
             </div>
           )}
         </div>
-            </div>
+
-          )}
+        <hr className="my-1" />
-        </div>
+        <NotesDirectory
+          isLoading={loading}
+          contactProfile={profileContact}
+          setProfileContact={setProfileContact}
+        />
       </div>
     </div>
   );