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 [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);
+     activeStatue ?   setActiveProcessing(true) : setIsDeleting(true) 
-      const resp = await DirectoryRepository.DeleteNote(noteItem.id);
+      const resp = await DirectoryRepository.DeleteNote(noteItem.id,activeStatue);
       setProfileContact((prev) => ({
         ...prev,
         notes: prev.notes.filter((note) => note.id !== noteItem.id),
@@ -91,7 +92,10 @@ const NoteCardDirectory = ({ IsActive,noteItem, contactId, setProfileContact })
         cacheData("Contact Profile", updatedCache);
       }
       setIsDeleting( false );
-      showToast("Note Deleted Successfully", "success");
+      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"}`}>
+     <div>
+  {noteItem.isActive ? (
+    <>
       <i
         className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer"
         onClick={() => setEditing(true)}
       ></i>
-          {!isDeleting && (
+
+      {!isDeleting ? (
         <i
           className="bx bx-trash bx-sm me-1 text-secondary cursor-pointer"
-              onClick={handleDeleteNote}
+          onClick={() => handleDeleteNote(!noteItem.isActive)}
         ></i>
-          )}
+      ) : (
-          {isDeleting && (
         <div
-              class="spinner-border spinner-border-sm text-secondary"
+          className="spinner-border spinner-border-sm text-secondary"
           role="status"
         >
-              <span class="visually-hidden">Loading...</span>
+          <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,8 +114,12 @@ 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>
+          
+        </div>
+      </div>
+      <div className="d-flex justify-content-end px-2">
         <span
             className={`btn btn-xs   ${addNote ? "btn-danger" : "btn-primary"}`}
             onClick={() => setAddNote(!addNote)}
@@ -120,7 +132,6 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
             {addNote ? "close" : "Add Note"}
           </span>
       </div>
-      </div>
       {addNote && (
         <form onSubmit={handleSubmit(onSubmit)}>
           <Editor
@@ -147,26 +158,30 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
     .reverse()
     .map((noteItem) => (
       <NoteCardDirectory
-                IsActive={IsActive}
+        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>