src/components/Directory/CardViewDirectory.jsx

@@ -1,23 +1,13 @@
 import React from "react";
 import Avatar from "../common/Avatar";
-import { getBucketNameById } from "./DirectoryUtils";
+import {getBucketNameById} from "./DirectoryUtils";
-import { useBuckets } from "../../hooks/useDirectory";
+import {useBuckets} from "../../hooks/useDirectory";
 import { getPhoneIcon } from "./DirectoryUtils";
-const CardViewDirectory = ({
+const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpen_contact, setIsOpenModalNote, IsDeleted} ) =>
-  IsActive,
+{
-  contact,
+  const {buckets} = useBuckets()
-  setSelectedContact,
-  setIsOpenModal,
-  setOpen_contact,
-  setIsOpenModalNote,
-  IsDeleted,
-}) => {
-  const { buckets } = useBuckets();
   return (
-    <div
+    <div className="card text-start border-1">
-      className="card text-start border-1"
-      style={{ background: `${!IsActive ? "#f8f6f6" : ""}` }}
-    >
       <div className="card-body  px-1 py-2 pb-0">
         <div className="d-flex justify-content-between">
           <div className="d-flex align-items-center">
@@ -33,7 +23,7 @@ const CardViewDirectory = ({
             <p className="m-0">{contact.name}</p>
           </div>
           <div>
-            <div className={`dropdown z-2 ${!IsActive && "d-none"}`}>
+            <div className="dropdown z-2 ">
               <button
                 type="button"
                 className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
@@ -55,7 +45,6 @@ const CardViewDirectory = ({
                     setSelectedContact(contact);
                     setIsOpenModal(true);
                   }}
-                 
                 >
                   <a className="dropdown-item px-2 py-0">
                     <i className="bx bx-pencil bx-xs me-2"></i>
@@ -63,10 +52,7 @@ const CardViewDirectory = ({
                   </a>
                 </li>
                 <li>
-                  <a
+                  <a className="dropdown-item  px-2 py-0" onClick={()=> IsDeleted(contact.id)}>
-                    className="dropdown-item  px-2 py-0"
-                    onClick={() => IsDeleted(contact.id)}
-                  >
                     <i className="bx bx-trash bx-xs me-2"></i>
                     <span className="align-left small-text">Delete</span>
                   </a>
@@ -77,23 +63,19 @@ const CardViewDirectory = ({
         </div>
 
         <ul className="list-inline m-0 ps-4">
-          <li className="list-inline-item me-1" style={{ fontSize: "10px" }}>
+          <li className="list-inline-item me-1" style={{fontSize:"10px"}}>
             <i className="bx bx-building bx-xs"></i>
           </li>
-          <li className="list-inline-item" style={{ fontSize: "10px" }}>
+          <li className="list-inline-item" style={{fontSize:"10px"}}>
             {contact.organization}
           </li>
         </ul>
       </div>
-      <div
+      <div className="card-footer text-start px-1 py-1" onClick={() =>
-        className="card-footer text-start px-1 py-1"
+      {
-        onClick={() => {
+        setIsOpenModalNote(true)
-          if (IsActive) {
+        setOpen_contact(contact)
-            setIsOpenModalNote(true);
+      }}>
-            setOpen_contact(contact);
-          }
-        }}
-      >
         <hr className="my-0" />
         {contact.contactEmails[0] && (
           <ul className="list-inline my-1 ">
@@ -109,11 +91,7 @@ const CardViewDirectory = ({
         {contact.contactPhones[0] && (
           <ul className="list-inline m-0">
             <li className="list-inline-item me-2">
-              <i
+              <i className={` ${getPhoneIcon(contact.contactPhones[0].label)} bx-xs`} ></i>
-                className={` ${getPhoneIcon(
-                  contact.contactPhones[0].label
-                )} bx-xs`}
-              ></i>
             </li>
             <li className="list-inline-item small-text">
               {contact.contactPhones[0]?.phoneNumber}
@@ -131,16 +109,17 @@ const CardViewDirectory = ({
         </ul>
 
         <ul className="list-inline m-0">
-          {contact.bucketIds.map((bucketId) => (
+          {contact.bucketIds.map( ( bucketId ) => (
-            <React.Fragment key={bucketId}>
+            <>
+            
                   <li className="list-inline-item me-1">
             <i className="bx bx-pin bx-xs"></i>
           </li>
           <li className="list-inline-item small-text">
-                {getBucketNameById(buckets, bucketId)}
+            {getBucketNameById(buckets,bucketId)}
-              </li>
+          </li></>
-            </React.Fragment>
           ))}
+      
         </ul>
       </div>
     </div>

src/components/Directory/ListViewDirectory.jsx

@@ -3,16 +3,13 @@ import Avatar from '../common/Avatar';
 import { getEmailIcon,getPhoneIcon } from './DirectoryUtils';
 
 
-const ListViewDirectory = ({IsActive, contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
+const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
   return (
-    <tr style={{background:`${!IsActive ? "#f8f6f6":""}`}} >
+    <tr  >
       <td className="text-start cursor-pointer" style={{width: '18%'}} colSpan={2} onClick={() =>
-      {
-        if ( IsActive )
       {
          setIsOpenModalNote(true)
         setOpen_contact(contact)
-       }
       }}>
      <div className="d-flex align-items-center">
   <Avatar
@@ -61,16 +58,14 @@ const ListViewDirectory = ({IsActive, contact,setSelectedContact,setIsOpenModal,
       </td>
 
       {/* Actions */}
-      {IsActive &&
       <td className="align-middle text-center ">
         <i className='bx bx-edit bx-sm text-primary cursor-pointer' onClick={() =>
         {
           setSelectedContact( contact )
-            setIsOpenModal( true )
+          setIsOpenModal(true)
         }}></i>
-          <i className='bx bx-trash bx-sm text-danger cursor-pointer' onClick={() => IsDeleted( contact.id )}></i>
+         <i className='bx bx-trash bx-sm text-danger cursor-pointer' onClick={()=> IsDeleted(contact.id)}></i>
       </td>
-      }
     </tr>
   );
 };

src/components/Directory/NoteCardDirectory.jsx

@@ -7,7 +7,7 @@ import showToast from "../../services/toastService";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import "../common/TextEditor/Editor.css";
 
-const NoteCardDirectory = ({ IsActive,noteItem, contactId, setProfileContact }) => {
+const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
   const [editing, setEditing] = useState(false);
   const [editorValue, setEditorValue] = useState(noteItem.note);
   const [isLoading, setIsLoading] = useState(false);
@@ -50,8 +50,7 @@ const NoteCardDirectory = ({ IsActive,noteItem, contactId, setProfileContact })
         cacheData("Contact Profile", updatedProfile);
       }
       setEditing(false);
-      setIsLoading( false );
+      setIsLoading(false);
-      
       showToast("Note Updated successfully", "success");
     } catch (error) {
       setIsLoading(false);
@@ -105,7 +104,7 @@ const NoteCardDirectory = ({ IsActive,noteItem, contactId, setProfileContact })
   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" }}
       key={noteItem.id}
     >
       <div className="d-flex justify-content-between align-items-center mb-1">
@@ -129,7 +128,7 @@ const NoteCardDirectory = ({ IsActive,noteItem, contactId, setProfileContact })
             </span>
           </div>
         </div>
-        <div className={`${IsActive ? " ":"d-none"}`}>
+        <div>
           <i
             className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer"
             onClick={() => setEditing(true)}

src/components/Directory/NotesDirectory.jsx

@@ -10,18 +10,12 @@ import moment from "moment";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import NoteCardDirectory from "./NoteCardDirectory";
 import showToast from "../../services/toastService";
-import {useContactNotes} from "../../hooks/useDirectory";
 
 const schema = z.object({
   note: z.string().min(1, { message: "Note is required" }),
 });
 
-const NotesDirectory = ( {isLoading, contactProfile, setProfileContact} ) =>
+const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
-{
-  const [ IsActive, setIsActive ] = useState( true )
-  const {contactNotes} = useContactNotes(contactProfile?.id,!IsActive)
-
-  
   const [NotesData, setNotesData] = useState();
   const [IsSubmitting, setIsSubmitting] = useState(false);
   const [addNote, setAddNote] = useState(false);
@@ -72,8 +66,7 @@ const NotesDirectory = ( {isLoading, contactProfile, setProfileContact} ) =>
       setValue("note", "");
       setIsSubmitting(false);
       showToast("Note added successfully!", "success");
-      setAddNote( false );
+      setAddNote(false);
-      setIsActive(true)
     } catch (error) {
       setIsSubmitting(false);
       const msg =
@@ -92,20 +85,6 @@ const NotesDirectory = ( {isLoading, contactProfile, setProfileContact} ) =>
     <div className="text-start">
       <div className="d-flex align-items-center justify-content-between">
         <p className="fw-semibold m-0">Notes :</p>
-        <div className="m-0 d-flex aligin-items-center">
-
-          <label className="switch switch-primary">
-              <input type="checkbox" className="switch-input" onChange={() => setIsActive( !IsActive )} value={IsActive}  />
-              <span className="switch-toggle-slider">
-                <span className="switch-on">
-                  {/* <i class="icon-base bx bx-check"></i> */}
-                </span>
-                <span className="switch-off">
-                  {/* <i class="icon-base bx bx-x"></i> */}
-                </span>
-              </span>
-              <span className="switch-label small-text">Show Inactive Notes</span>
-            </label>
         <span
           className={`btn btn-xs   ${addNote ? "btn-danger" : "btn-primary"}`}
           onClick={() => setAddNote( !addNote )}
@@ -118,7 +97,6 @@ const NotesDirectory = ( {isLoading, contactProfile, setProfileContact} ) =>
           {addNote ? "close" : "Add Note"}
         </span>
       </div>
-      </div>
       {addNote && (
         <form onSubmit={handleSubmit(onSubmit)}>
           <Editor
@@ -141,22 +119,17 @@ const NotesDirectory = ( {isLoading, contactProfile, setProfileContact} ) =>
           </div>
         )}
         {!isLoading &&
-          [...(IsActive ?   contactProfile?.notes || [] : contactNotes || [])]
+          [...(contactProfile?.notes || [])]
             .reverse()
             .map((noteItem) => (
               <NoteCardDirectory
-                IsActive={IsActive}
                 noteItem={noteItem}
                 contactId={contactProfile?.id}
                 setProfileContact={setProfileContact}
                 key={noteItem.id}
               />
             ) )}
-        {IsActive && ( <p>{!isLoading && contactProfile?.notes.length == 0 && !addNote && ( <p className="text-center">No Notes Found</p> )}</p> )}
+        <p>{!isLoading && contactProfile?.notes.length == 0 && !addNote && (<p className="text-center">No Notes Found</p>) }</p>
-        {!IsActive && (
-        <p>{!isLoading && contactNotes.length == 0 && !addNote && (<p className="text-center">No Notes Found</p>) }</p>
-
-        )}
       </div>
     </div>
   );

src/hooks/useDirectory.js

@@ -2,43 +2,35 @@ import { useEffect, useState } from "react";
 import { DirectoryRepository } from "../repositories/DirectoryRepository";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
 
-export const useDirectory = (isActive) => {
+export const useDirectory = () => {
   const [contacts, setContacts] = useState([]);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
+  const [error, setError] = useState();
 
-  const fetch = async (activeParam = isActive) => {
+  const fetch = async () => {
+    const cache_contacts = getCachedData("contacts");
+    if (!cache_contacts) {
       setLoading(true);
       try {
-      const response = await DirectoryRepository.GetContacts(activeParam);
+        const response = await DirectoryRepository.GetContacts();
         setContacts(response.data);
-      cacheData("contacts", { data: response.data, isActive: activeParam });
+        cacheData("contacts", response.data);
+        setLoading(false);
       } catch (error) {
         setError(error);
-    } finally {
         setLoading(false);
       }
-  };
-
-  useEffect(() => {
-    const cachedContacts = getCachedData("contacts");
-    if (!cachedContacts?.data || cachedContacts.isActive !== isActive) {
-      fetch(isActive);
     } else {
-      setContacts(cachedContacts.data);
+      setContacts(cache_contacts);
     }
-  }, [isActive]);
-
-  return {
-    contacts,
-    loading,
-    error,
-    refetch: fetch,
   };
+
+  useState(() => {
+    fetch();
+  }, []);
+  return { contacts, loading, error };
 };
 
-
-
 export const useBuckets = () => {
   const [buckets, setBuckets] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -109,9 +101,9 @@ const fetchContactProfile = async () => {
 }
 
 
-export const useContactNotes = (id,IsActive) =>
+export const useContactNotes = (id) =>
 {
-  const [ contactNotes, setContactNotes ] = useState( [] );
+  const [ conatNotes, setContactNotes ] = useState( [] );
   const [ loading, setLoading ] = useState( false );
   const [ Error, setError ] = useState( "" );
 
@@ -122,7 +114,7 @@ const fetchContactNotes = async () => {
     if (!cached || cached.contactId !== id) {
       setLoading(true);
       try {
-        const resp = await DirectoryRepository.GetNote(id,IsActive);
+        const resp = await DirectoryRepository.GetNote(id);
         setContactNotes(resp.data);
         cacheData("Contact Notes", { data: resp.data, contactId: id });
       } catch (err) {
@@ -144,5 +136,5 @@ const fetchContactNotes = async () => {
     }
   }, [id]);
 
-  return { contactNotes, loading, Error };
+  return { conatProfile, loading, Error };
 }

src/pages/Directory/Directory.jsx

@@ -16,9 +16,7 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
 import ProfileContactDirectory from "../../components/Directory/ProfileContactDirectory";
 import ConfirmModal from "../../components/common/ConfirmModal";
 
-const Directory = () =>
+const Directory = () => {
-{
-  const[IsActive,setIsActive] = useState(true)
   const [isOpenModal, setIsOpenModal] = useState(false);
   const [isOpenModalNote, setIsOpenModalNote] = useState(false);
   const [selectedContact, setSelectedContact] = useState(null);
@@ -34,7 +32,7 @@ const Directory = () =>
   const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
   const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
 
-  const { contacts, loading } = useDirectory(IsActive);
+  const { contacts, loading } = useDirectory();
   const { contactCategory, loading: contactCategoryLoading } =
     useContactCategory();
   const { buckets } = useBuckets();
@@ -42,7 +40,7 @@ const Directory = () =>
     try {
       let response;
       let updatedContacts;
-      const contacts_cache = getCachedData("contacts")?.data || [];
+      const contacts_cache = getCachedData("contacts") || [];
 
       if (selectedContact) {
         response = await DirectoryRepository.UpdateContact(data.id, data);
@@ -58,7 +56,7 @@ const Directory = () =>
         showToast("Contact created successfully", "success");
         setIsOpenModal(false);
       }
-       cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
+
       setContactList(updatedContacts);
     } catch (error) {
       const msg =
@@ -72,12 +70,12 @@ const Directory = () =>
   const handleDeleteContact = async () => {
     try {
       setIsDeletng(true);
-      const contacts_cache = getCachedData("contacts")?.data || [];
+      const contacts_cache = getCachedData("contacts") || [];
 
       const response = await DirectoryRepository.DeleteContact(deleteContact);
       const updatedContacts = ContactList.filter((c) => c.id !== deleteContact);
       setContactList(updatedContacts);
-      cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
+      cacheData("Contacts", updatedContacts);
       showToast("Contact deleted successfully", "success");
       setDeleteContact(null);
 
@@ -104,6 +102,7 @@ const Directory = () =>
   useEffect(() => {
     setContactList(contacts);
 
+    // Set temp filter list only (UI checkboxes, not actual filtering yet)
     setTempSelectedCategoryIds([]);
     setTempSelectedBucketIds([]);
   }, [contacts]);
@@ -248,7 +247,7 @@ const Directory = () =>
         </div>
       )}
 
-      <div className="card p-2"    >
+      <div className="card p-2">
         <div className="row mx-0 px-0 align-items-center">
           <div className="col-12 col-md-4 mb-2 px-1 d-flex align-items-center ">
             <input
@@ -300,7 +299,7 @@ const Directory = () =>
 
                 <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
                   <div>
-                    <p className="small-text fw-semibold text-muted m-0">Filter by</p>
+                    <p className="small-text text-muted m-0">Filter by</p>
 
                     {/* Bucket Filter */}
                     <div className="mt-1">
@@ -378,17 +377,17 @@ const Directory = () =>
             </div>
           </div>
           <div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
-            <label className="switch switch-primary">
+            <label class="switch switch-primary">
-              <input type="checkbox" className="switch-input" onChange={() => setIsActive( !IsActive )} value={IsActive} disabled={ loading} />
+              <input type="checkbox" class="switch-input" />
-              <span className="switch-toggle-slider">
+              <span class="switch-toggle-slider">
-                <span className="switch-on">
+                <span class="switch-on">
                   {/* <i class="icon-base bx bx-check"></i> */}
                 </span>
-                <span className="switch-off">
+                <span class="switch-off">
                   {/* <i class="icon-base bx bx-x"></i> */}
                 </span>
               </span>
-              <span className="switch-label small-text">Show Inactive Contacts</span>
+              <span class="switch-label">Show Inactive Contacts</span>
             </label>
             <button
               type="button"
@@ -453,11 +452,11 @@ const Directory = () =>
                     </div>
                   </th>
                   <th className="mx-2">Category</th>
-                  {IsActive && <th>Action</th>}
+                  <th>Action</th>
                 </tr>
               </thead>
               <tbody className="table-border-bottom-0 overflow-auto ">
-                {loading &&  (
+                {loading && ContatList.length === 0 && (
                   <tr>
                     <td colSpan={10}>Loading...</td>
                   </tr>
@@ -472,7 +471,6 @@ const Directory = () =>
                   currentItems.map((contact) => (
                     <ListViewDirectory
                       key={contact.id}
-                      IsActive={IsActive}
                       contact={contact}
                       setSelectedContact={setSelectedContact}
                       setIsOpenModal={setIsOpenModal}
@@ -486,13 +484,12 @@ const Directory = () =>
           </div>
         ) : (
           <div className="row">
-            {!loading && currentItems.map((contact, index) => (
+            {currentItems.map((contact, index) => (
               <div
                 key={contact.id}
                 className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
               >
                 <CardViewDirectory
-                  IsActive={IsActive}
                   contact={contact}
                   setSelectedContact={setSelectedContact}
                   setIsOpenModal={setIsOpenModal}

src/repositories/DirectoryRepository.jsx

@@ -1,7 +1,7 @@
 import {api} from "../utils/axiosClient";
 
 export const DirectoryRepository = {
-    GetContacts: (isActive) => api.get( `/api/directory?active=${isActive}` ),
+    GetContacts: () => api.get( '/api/directory' ),
     CreateContact: ( data ) => api.post( '/api/directory', data ),
     UpdateContact: ( id, data ) => api.put( `/api/directory/${ id }`, data ),
     DeleteContact:(id)=>api.delete(`/api/directory/${id}`),
@@ -11,7 +11,7 @@ export const DirectoryRepository = {
     GetContactProfile: ( id ) => api.get( `/api/directory/profile/${ id }` ),
     
     CreateNote: ( data ) => api.post( '/api/directory/note', data ),
-    GetNote: ( id,isActive ) => api.get( `/api/directory/note/${ id }?active=${isActive}` ),
+    GetNote: ( id ) => api.get( `/api/directory/note/${ id }` ),
     UpdateNote: ( id, data ) => api.put( `/api/directory/note/${ id }`, data ),
     DeleteNote:(id)=> api.delete(`/api/directory/note/${ id }`)
 }