Add restore feature for deleted notes

src/components/Directory/NoteCardDirectory.jsx

@@ -7,11 +7,12 @@ import showToast from "../../services/toastService";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import "../common/TextEditor/Editor.css";
 
-const NoteCardDirectory = ({ IsActive,noteItem, contactId, setProfileContact }) => {
+const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, setProfileContact, }) => {
   const [editing, setEditing] = useState(false);
   const [editorValue, setEditorValue] = useState(noteItem.note);
   const [isLoading, setIsLoading] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
+  const [ isDeleting, setIsDeleting ] = useState( false );
+  const [isActivProcess,setActiveProcessing]= useState(false)
   const handleUpdateNote = async () => {
     try {
       setIsLoading(true);
@@ -63,10 +64,10 @@ const NoteCardDirectory = ({ IsActive,noteItem, contactId, setProfileContact })
     }
   };
 
-  const handleDeleteNote = async () => {
+  const handleDeleteNote = async (activeStatue) => {
     try {
-      setIsDeleting(true);
-      const resp = await DirectoryRepository.DeleteNote(noteItem.id);
+     activeStatue ?   setActiveProcessing(true) : setIsDeleting(true) 
+      const resp = await DirectoryRepository.DeleteNote(noteItem.id,activeStatue);
       setProfileContact((prev) => ({
         ...prev,
         notes: prev.notes.filter((note) => note.id !== noteItem.id),
@@ -90,8 +91,11 @@ const NoteCardDirectory = ({ IsActive,noteItem, contactId, setProfileContact })
 
         cacheData("Contact Profile", updatedCache);
       }
-      setIsDeleting(false);
-      showToast("Note Deleted Successfully", "success");
+      setIsDeleting( false );
+      setActiveProcessing( false )
+      refetchNotes( contactId, false )
+      refetchProfile(contactId)
+      showToast(`Note ${activeStatue ? "Restored":"Deleted"} Successfully`, "success");
     } catch (error) {
       setIsDeleting(false);
       const msg =
@@ -101,13 +105,13 @@ const NoteCardDirectory = ({ IsActive,noteItem, contactId, setProfileContact })
       showToast(msg, "error");
     }
   };
-
   return (
     <div
       className="card p-1 shadow-sm border-1 mb-2 conntactNote"
-      style={{ width: "100%", minWidth: "300px", borderRadius: "0px", background: `${!IsActive ? "#f8f6f6" : ""}`  }}
+      style={{ width: "100%", minWidth: "300px", borderRadius: "0px", background: `${noteItem.isActive ?   "": "#f8f6f6"}`  }}
       key={noteItem.id}
     >
+
       <div className="d-flex justify-content-between align-items-center mb-1">
         <div className="d-flex align-items-center">
           <Avatar
@@ -129,26 +133,39 @@ const NoteCardDirectory = ({ IsActive,noteItem, contactId, setProfileContact })
             </span>
           </div>
         </div>
-        <div className={`${IsActive ? " ":"d-none"}`}>
-          <i
-            className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer"
-            onClick={() => setEditing(true)}
-          ></i>
-          {!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>
+  {noteItem.isActive ? (
+    <>
+      <i
+        className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer"
+        onClick={() => setEditing(true)}
+      ></i>
+
+      {!isDeleting ? (
+        <i
+          className="bx bx-trash bx-sm me-1 text-secondary cursor-pointer"
+          onClick={() => handleDeleteNote(!noteItem.isActive)}
+        ></i>
+      ) : (
+        <div
+          className="spinner-border spinner-border-sm text-secondary"
+          role="status"
+        >
+          <span className="visually-hidden">Loading...</span>
         </div>
+      )}
+    </>
+  ) : isActivProcess ? (
+    < i className='bx  bx-refresh text-primary bx-spin'  ></i> 
+  ) : (
+    <i
+      className="bx bx-history  me-1 text-primary cursor-pointer"
+      onClick={() => handleDeleteNote(!noteItem.isActive)}
+      title="Restore"
+    ></i>
+  )}
+</div>
+
       </div>
 
       <hr className="mt-0" />

src/components/Directory/NotesDirectory.jsx

@@ -16,9 +16,9 @@ const schema = z.object({
   note: z.string().min(1, { message: "Note is required" }),
 });
 
-const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
+const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileContact }) => {
   const [IsActive, setIsActive] = useState(true);
-  const { contactNotes } = useContactNotes(contactProfile?.id, !IsActive);
+  const {contactNotes,refetch} = useContactNotes( contactProfile?.id, true );
 
   const [NotesData, setNotesData] = useState();
   const [IsSubmitting, setIsSubmitting] = useState(false);
@@ -85,6 +85,14 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
   const onCancel = () => {
     setValue("note", "");
   };
+  const handleSwitch = () =>
+  {
+    setIsActive( !IsActive )
+    if ( IsActive )
+    {
+      refetch(contactProfile?.id, false)
+    }
+  }
 
   return (
     <div className="text-start">
@@ -95,7 +103,7 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
             <input
               type="checkbox"
               className="switch-input"
-              onChange={() => setIsActive(!IsActive)}
+              onChange={()=>handleSwitch(!IsActive)}
               value={IsActive}
             />
             <span className="switch-toggle-slider">
@@ -106,9 +114,13 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
                 {/* <i class="icon-base bx bx-x"></i> */}
               </span>
             </span>
-            <span className="switch-label small-text">Show Inactive Notes</span>
+            <span className="switch-label small-text">Show Including Inactive Notes</span>
           </label>
-          <span
+          
+        </div>
+      </div>
+      <div className="d-flex justify-content-end px-2">
+        <span
             className={`btn btn-xs   ${addNote ? "btn-danger" : "btn-primary"}`}
             onClick={() => setAddNote(!addNote)}
           >
@@ -119,7 +131,6 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
           ></i> */}
             {addNote ? "close" : "Add Note"}
           </span>
-        </div>
       </div>
       {addNote && (
         <form onSubmit={handleSubmit(onSubmit)}>
@@ -143,30 +154,34 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
           </div>
         )}
         {!isLoading &&
-          [...(IsActive ? contactProfile?.notes || [] : contactNotes || [])]
-            .reverse()
-            .map((noteItem) => (
-              <NoteCardDirectory
-                IsActive={IsActive}
-                noteItem={noteItem}
-                contactId={contactProfile?.id}
-                setProfileContact={setProfileContact}
-                key={noteItem.id}
-              />
-            ))}
+  [...(IsActive ? contactProfile?.notes || [] : contactNotes || [])]
+    .reverse()
+    .map((noteItem) => (
+      <NoteCardDirectory
+        refetchProfile={refetchProfile}
+        refetchNotes={refetch}
+        refetchContact ={refetch}
+        noteItem={noteItem}
+        contactId={contactProfile?.id}
+        setProfileContact={setProfileContact}
+        key={noteItem.id}
+
+      />
+    ))}
+
         {IsActive && (
-          <p>
+          <div>
             {!isLoading && contactProfile?.notes.length == 0 && !addNote && (
-              <p className="text-center">No Notes Found</p>
+             <div className="text-center">No Notes Found</div>
             )}
-          </p>
+          </div>
         )}
         {!IsActive && (
-          <p>
+          <div>
             {!isLoading && contactNotes.length == 0 && !addNote && (
-              <p className="text-center">No Notes Found</p>
+               <div className="text-center">No Notes Found</div>
             )}
-          </p>
+          </div>
         )}
       </div>
     </div>