updated cache

src/components/Directory/NoteCardDirectory.jsx

@@ -4,43 +4,109 @@ import moment from "moment";
 import Avatar from "../common/Avatar";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import showToast from "../../services/toastService";
-import {getCachedData} from "../../slices/apiDataManager";
-import "../common/TextEditor/Editor.css"
+import { cacheData, getCachedData } from "../../slices/apiDataManager";
+import "../common/TextEditor/Editor.css";
 
-const NoteCardDirectory = ({ noteItem, contactId,setProfileContact }) => {
+const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
   const [editing, setEditing] = useState(false);
-  const [ editorValue, setEditorValue ] = useState( noteItem.note );
-  const [isLoading,setIsLoading] = useState(false)
-  const handleUpdateNote= async () => {
-    try
-    {
-      console.log(editorValue)
-      setIsLoading(true)
-   const payload ={id:noteItem.id,note:editorValue,contactId:contactId}
-      
-      const response = await DirectoryRepository.UpdateNote(noteItem.id, payload);
-    setProfileContact((prev) => ({
-      ...prev,
-      notes: prev.notes.map((note) =>
-        note.id === noteItem.id ? response?.data : note
-      ),
+  const [editorValue, setEditorValue] = useState(noteItem.note);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const handleUpdateNote = async () => {
+    try {
+      setIsLoading(true);
+      const payload = {
+        id: noteItem.id,
+        note: editorValue,
+        contactId: contactId,
+      };
 
-    }));
-      setEditing( false );
-      setIsLoading(false)
-      showToast("Note Updated successfully", "success")
-    } catch ( error )
-    {
-      setIsLoading(false)
-      const msg = error.reponse.data.message || error.message || "Error occured during API calling."
-           showToast("Failed to update note", "error");
+      const response = await DirectoryRepository.UpdateNote(
+        noteItem.id,
+        payload
+      );
+      setProfileContact((prev) => ({
+        ...prev,
+        notes: prev.notes.map((note) =>
+          note.id === noteItem.id ? response?.data : note
+        ),
+      }));
+
+      const cached_contactProfile = getCachedData("Contact Profile");
+
+      if (
+        cached_contactProfile &&
+        cached_contactProfile.contactId === contactId
+      ) {
+        const updatedProfile = {
+          ...cached_contactProfile,
+          data: {
+            ...cached_contactProfile?.data,
+            notes: cached_contactProfile?.data?.notes.map((note) =>
+              note.id === noteItem.id ? response?.data : note
+            ),
+          },
+        };
+        cacheData("Contact Profile", updatedProfile);
+      }
+      setEditing(false);
+      setIsLoading(false);
+      showToast("Note Updated successfully", "success");
+    } catch (error) {
+      setIsLoading(false);
+      const msg =
+        error.reponse.data.message ||
+        error.message ||
+        "Error occured during API calling.";
+      showToast("Failed to update note", "error");
     }
   };
 
+  const handleDeleteNote = async () => {
+    try {
+      setIsDeleting(true);
+      const resp = await DirectoryRepository.DeleteNote(noteItem.id);
+      setProfileContact((prev) => ({
+        ...prev,
+        notes: prev.notes.filter((note) => note.id !== noteItem.id),
+      }));
 
+      const cachedContactProfile = getCachedData("Contact Profile");
+
+      if (
+        cachedContactProfile &&
+        cachedContactProfile.contactId === contactId
+      ) {
+        const updatedCache = {
+          ...cachedContactProfile,
+          data: {
+            ...cachedContactProfile?.data,
+            notes: (cachedContactProfile?.data?.notes || []).filter(
+              (note) => note.id !== noteItem.id
+            ),
+          },
+        };
+
+        cacheData("Contact Profile", updatedCache);
+      }
+      setIsDeleting(false);
+      showToast("Note Deleted Successfully", "success");
+    } catch (error) {
+      setIsDeleting(false);
+      const msg =
+        error.response?.data?.message ||
+        error.message ||
+        "Error occured during API calling";
+      showToast(msg, "error");
+    }
+  };
 
   return (
-    <div className="card p-1 shadow-sm border-1 mb-2" style={{ width: "fit-content", minWidth: "300px", borderRadius:"0px" }} key={noteItem.id} >
+    <div
+      className="card p-1 shadow-sm border-1 mb-2 conntactNote"
+      style={{ width: "100%", minWidth: "300px", borderRadius: "0px" }}
+      key={noteItem.id}
+    >
       <div className="d-flex justify-content-between align-items-center mb-1">
         <div className="d-flex align-items-center">
           <Avatar
@@ -58,38 +124,25 @@ const NoteCardDirectory = ({ noteItem, contactId,setProfileContact }) => {
             </span>
           </div>
         </div>
-
-        <div className="dropdown">
+        <div>
           <i
-            className="bx bx-dots-vertical bx-xs cursor-pointer"
-            role="button"
-            id={`dropdownMenuIcon-${noteItem.id}`}
-            data-bs-toggle="dropdown"
-            aria-expanded="false"
+            className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer"
+            onClick={() => setEditing(true)}
           ></i>
-
-          <ul
-            className="dropdown-menu dropdown-menu-end p-1"
-            aria-labelledby={`dropdownMenuIcon-${noteItem.id}`}
-            style={{ minWidth: "120px", fontSize: "0.85rem" }}
-          >
-            <li>
-              <button
-                className="dropdown-item py-1 px-2 small text-primary"
-                onClick={() => setEditing(true)}
-              >
-                <i className="bx bxs-edit bx-sm me-1"></i> Edit
-              </button>
-            </li>
-            <li>
-              <button
-                className="dropdown-item py-1 px-2 text-danger small"
-                onClick={()=>{}}
-              >
-                <i className="bx bx-trash bx-sm me-1"></i> Delete
-              </button>
-            </li>
-          </ul>
+          {!isDeleting && (
+            <i
+              className="bx bx-trash bx-sm me-1 text-secondary cursor-pointer"
+              onClick={handleDeleteNote}
+            ></i>
+          )}
+          {isDeleting && (
+            <div
+              class="spinner-border spinner-border-sm text-secondary"
+              role="status"
+            >
+              <span class="visually-hidden">Loading...</span>
+            </div>
+          )}
         </div>
       </div>
 
@@ -102,14 +155,21 @@ const NoteCardDirectory = ({ noteItem, contactId,setProfileContact }) => {
             onChange={setEditorValue}
             theme="snow"
             className="compact-editor"
-       
           />
           <div className="d-flex justify-content-end gap-2">
-            <span className="text-secondary cursor-pointer" aria-disabled={isLoading}  onClick={() => setEditing(false)}>
+            <span
+              className="text-secondary cursor-pointer"
+              aria-disabled={isLoading}
+              onClick={() => setEditing(false)}
+            >
               Cancel
             </span>
-            <span className="text-primary cursor-pointer" aria-disabled={isLoading}  onClick={handleUpdateNote}>
-             {isLoading ? "Please Wait...":"Submit"}
+            <span
+              className="text-primary cursor-pointer"
+              aria-disabled={isLoading}
+              onClick={handleUpdateNote}
+            >
+              {isLoading ? "Please Wait..." : "Submit"}
             </span>
           </div>
         </>

src/components/Directory/NotesDirectory.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import Editor from "../common/TextEditor/Editor";
 import Avatar from "../common/Avatar";
 import { useForm } from "react-hook-form";
@@ -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 [ NotesData, setNotesData ] = useState()
-  const[IsSubmitting,setIsSubmitting] = useState(false)
+const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
+  const [NotesData, setNotesData] = useState();
+  const [IsSubmitting, setIsSubmitting] = useState(false);
+  const [addNote, setAddNote] = useState(false);
   const {
     register,
     handleSubmit,
@@ -40,27 +40,35 @@ const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) =>
 
   const onSubmit = async (data) => {
     const newNote = { ...data, contactId: contactProfile?.id };
-    try
-    {
-      setIsSubmitting(true)
-        const response = await DirectoryRepository.CreateNote( newNote );
+    try {
+      setIsSubmitting(true);
+      const response = await DirectoryRepository.CreateNote(newNote);
 
-         const createdNote = response.data; 
+      const createdNote = response.data;
 
       setProfileContact((prev) => ({
         ...prev,
         notes: [...(prev.notes || []), createdNote],
       }));
 
+      const cached_contactProfile = getCachedData("Contact Profile");
+      if (
+        cached_contactProfile &&
+        cached_contactProfile.contactId === contactProfile?.id
+      ) {
+        const updatedProfile = {
+          ...cached_contactProfile.data,
+          notes: [...(cached_contactProfile.notes || []), createdNote],
+        };
+        cacheData("Contact Profile", updatedProfile);
+      }
+
       setValue("note", "");
-        const result = response.data
-        const cache_notes = getCachedData( "Contact Note" )
-      
-  setIsSubmitting(false)
-            showToast("Note added successfully!", "success")
-    } catch ( error )
-    {
-      setIsSubmitting(false)
+      setIsSubmitting(false);
+      showToast("Note added successfully!", "success");
+      setAddNote(false);
+    } catch (error) {
+      setIsSubmitting(false);
       const msg =
         error.response.data.message ||
         error.message ||
@@ -75,26 +83,63 @@ const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) =>
 
   return (
     <div className="text-start">
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Editor
-          value={noteValue}
-          loading={IsSubmitting}
-          onChange={handleEditorChange}
-          onCancel={onCancel}
-          onSubmit={handleSubmit(onSubmit)}
-        />
-        {errors.notes && (
-          <p className="text-danger small mt-1">{errors.note.message}</p>
+      <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>
         )}
-      </form>
+        <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}
+            loading={IsSubmitting}
+            onChange={handleEditorChange}
+            onCancel={onCancel}
+            onSubmit={handleSubmit(onSubmit)}
+          />
+          {errors.notes && (
+            <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 && contactProfile?.notes?.map((noteItem) => (
-          <NoteCardDirectory noteItem={noteItem} contactId={contactProfile?.id} setProfileContact={setProfileContact} key={noteItem.id}  />
-        ))}
+        {isLoading && (
+          <div className="text-center">
+            {" "}
+            <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

@@ -5,7 +5,7 @@ import moment from "moment";
 import NotesDirectory from "./NotesDirectory";
 
 const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
-  const { conatProfile ,loading} = useContactProfile(contact?.id);
+  const { conatProfile, loading } = useContactProfile(contact?.id);
   const [activeTab, setActiveTab] = useState("profile");
   const [profileContact, setProfileContact] = useState();
 
@@ -14,7 +14,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
   }, [conatProfile]);
   return (
     <div className="p-1">
-      <div className="text-center m-0 p-0">     
+      <div className="text-center m-0 p-0">
         <p className="fw-semibold fs-6 m-0">Contact Profile</p>
       </div>
       <div>
@@ -36,106 +36,65 @@ 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}
-            />
+        <div className="d-flex flex-column text-start">
+          {conatProfile?.contactEmails?.length > 0 && (
+            <div className="d-flex mb-2">
+              <div style={{ width: "100px", minWidth: "100px" }}>
+                <p className="m-0">Email</p>
+              </div>
+              <div>
+                <ul className="list-inline mb-0">
+                  {conatProfile.contactEmails.map((email, idx) => (
+                    <li className="list-inline-item me-3" key={idx}>
+                      <i className="bx bx-envelope bx-xs me-1"></i>
+                      {email.emailAddress}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          )}
+          {conatProfile?.contactPhones?.length > 0 && (
+            <div className="d-flex mb-2">
+              <div style={{ width: "100px", minWidth: "100px" }}>
+                <p className="m-0">Phone</p>
+              </div>
+              <div>
+                <ul className="list-inline mb-0">
+                  {conatProfile.contactPhones.map((phone, idx) => (
+                    <li className="list-inline-item me-3" key={idx}>
+                      <i className="bx bx-phone bx-xs me-1"></i>
+                      {phone.phoneNumber}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
           )}
-          {activeTab === "profile" && (
-            <div>
-              <div className="d-flex flex-column text-start">
-                {conatProfile?.contactEmails?.length > 0 && (
-                  <div className="d-flex mb-2">
-                    <div style={{ width: "100px", minWidth: "100px" }}>
-                      <p className="m-0">Email</p>
-                    </div>
-                    <div>
-                      <ul className="list-inline mb-0">
-                        {conatProfile.contactEmails.map((email, idx) => (
-                          <li className="list-inline-item me-3" key={idx}>
-                            <i className="bx bx-envelope bx-xs me-1"></i>
-                            {email.emailAddress}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                )}
-                {conatProfile?.contactPhones?.length > 0 && (
-                  <div className="d-flex mb-2">
-                    <div style={{ width: "100px", minWidth: "100px" }}>
-                      <p className="m-0">Phone</p>
-                    </div>
-                    <div>
-                      <ul className="list-inline mb-0">
-                        {conatProfile.contactPhones.map((phone, idx) => (
-                          <li className="list-inline-item me-3" key={idx}>
-                            <i className="bx bx-phone bx-xs me-1"></i>
-                            {phone.phoneNumber}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                )}
 
-                {conatProfile?.createdAt && (
-                  <div className="d-flex mb-2">
-                    <div style={{ width: "100px", minWidth: "100px" }}>
-                      <p className="m-0">Created</p>
-                    </div>
-                    <div>
-                      <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(
-                            "MMMM, DD YYYY"
-                          )}
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                )}
+          {conatProfile?.createdAt && (
+            <div className="d-flex mb-2">
+              <div style={{ width: "100px", minWidth: "100px" }}>
+                <p className="m-0">Created</p>
+              </div>
+              <div>
+                <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("MMMM, DD YYYY")}
+                  </li>
+                </ul>
               </div>
             </div>
           )}
         </div>
+
+        <hr className="my-1" />
+        <NotesDirectory
+          isLoading={loading}
+          contactProfile={profileContact}
+          setProfileContact={setProfileContact}
+        />
       </div>
     </div>
   );

src/components/common/TextEditor/Editor.css

@@ -1,6 +1,6 @@
 .editor-wrapper {
   max-width: 800px;
-  margin: 20px auto;
+  margin: 1px auto;
   background: #fff;
   
   overflow: hidden;
@@ -69,40 +69,64 @@
     cursor: pointer;
     display: inline-block;
     float: left;
-    height: 24px;
+   font-size: 15px;
     padding: 2px 2px;
     width: 28px;
 }
+.ql-toolbar.ql-snow{
+  padding: 4px;
+}
+
+ 
 
 @media (max-width: 768px) {
 .ql-toolbar.ql-snow .ql-formats {
     margin-right: 1px;
+    align-items: center;
 }
 }
 
 
-/* for small editor */
 
-/* Editor height and text */
-.compact-editor .ql-editor {
-  min-height: 80px;       /* Reduce editor height */
-  font-size: 0.85rem;      /* Smaller font */
-  padding: 6px 10px;
+.ql-snow.ql-toolbar button,
+.ql-snow .ql-toolbar button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  height: 18px;
+  padding: 2px 2px;
+  width: 22px;
+  font-size: 14px;
+  /* REMOVE THIS to fix side-alignment */
+  /* float: left; */
+  vertical-align: middle;
 }
 
-/* Toolbar size */
-.compact-editor .ql-toolbar {
-  padding: 5px 8px;
-  font-size: 0.85rem;
+.ql-snow .ql-picker-label {
+  font-size: 10px;          /* Smaller text */
+  padding: 0 6px;           /* Horizontal padding */
+  height: 20px;             /* Height of the label */
+  line-height: 20px;        /* Match height to vertically center single-line text */
+  background-color: #eee;
+  border-radius: 0px;
+  cursor: pointer;
+  color: #333;
+  text-align: center;
+  width: 100%;
+
+  display: flex;            /* Enable flexbox */
+  align-items: center;      /* Vertical centering */
+  justify-content: center;  /* Horizontal centering */
 }
 
-/* Optional: smaller buttons & spacing */
-.compact-editor .ql-toolbar button {
-  height: 24px;
-  width: 24px;
-  padding: 2px;
-}
 
-.compact-editor .ql-toolbar .ql-formats {
-  margin-right: 6px;
+/* Remove custom upward-opening styles */
+.ql-toolbar .ql-picker.ql-header .ql-picker-options {
+  top: 100%;        /* Position it below the label */
+  bottom: auto;     /* Cancel the upward positioning */
+  margin-top: 5px;  /* Optional spacing */
 }
+.ql-editor {
+      padding: 4px 15px;
+}

src/components/common/TextEditor/Editor.jsx

@@ -34,16 +34,7 @@ const Editor = ({
 
   return (
     <div className="editor-wrapper">
-      <ReactQuill
-        value={value}
-        onChange={onChange}
-        modules={modules}
-        formats={formats}
-        theme="snow"
-        placeholder={placeholder}
-      />
-
-      <div id="custom-toolbar" className="ql-toolbar ql-snow custom-toolbar">
+       <div id="custom-toolbar" className="ql-toolbar ql-snow custom-toolbar">
         <div className="d-flex justify-content-between align-items-center w-100">
           {/* Left: Quill Format Buttons */}
           <span className="d-flex">
@@ -70,8 +61,19 @@ const Editor = ({
             </span>
           </span>
 
-          {/* Right: Submit + Cancel Buttons */}
-          <div className="d-flex gap-2">
+     
+        </div>
+      </div>
+      <ReactQuill
+        value={value}
+        onChange={onChange}
+        modules={modules}
+        formats={formats}
+        theme="snow"
+        placeholder={placeholder}
+      />
+       {/* Right: Submit + Cancel Buttons */}
+          <div className="d-flex justify-content-end  gap-2 p-1">
             <span className="btn btn-xs btn-secondary" aria-disabled={loading} onClick={onCancel}>
               Cancel
             </span>
@@ -84,8 +86,7 @@ const Editor = ({
             {loading ? "Please Wait..." : "Submit"}
             </span>
           </div>
-        </div>
-      </div>
+     
     </div>
   );
 };

src/repositories/DirectoryRepository.jsx

@@ -11,5 +11,6 @@ export const DirectoryRepository = {
     
     CreateNote: ( data ) => api.post( '/api/directory/note', data ),
     GetNote: ( id ) => api.get( `/api/directory/note/${ id }` ),
-    UpdateNote:(id,data)=>api.put(`/api/directory/note/${id }`,data )
+    UpdateNote: ( id, data ) => api.put( `/api/directory/note/${ id }`, data ),
+    DeleteNote:(id)=> api.delete(`/api/directory/note/${ id }`)
 }