diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx index a18f0f18..a7fe7d32 100644 --- a/src/components/Directory/CardViewDirectory.jsx +++ b/src/components/Directory/CardViewDirectory.jsx @@ -1,13 +1,23 @@ import React from "react"; import Avatar from "../common/Avatar"; -import {getBucketNameById} from "./DirectoryUtils"; -import {useBuckets} from "../../hooks/useDirectory"; +import { getBucketNameById } from "./DirectoryUtils"; +import { useBuckets } from "../../hooks/useDirectory"; import { getPhoneIcon } from "./DirectoryUtils"; -const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpen_contact, setIsOpenModalNote, IsDeleted} ) => -{ - const {buckets} = useBuckets() +const CardViewDirectory = ({ + IsActive, + contact, + setSelectedContact, + setIsOpenModal, + setOpen_contact, + setIsOpenModalNote, + IsDeleted, +}) => { + const { buckets } = useBuckets(); return ( -
+
@@ -23,7 +33,7 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe

{contact.name}

-
+
    -
  • +
    • -
  • +
  • {contact.organization}
-
- { - setIsOpenModalNote(true) - setOpen_contact(contact) - }}> +
{ + if (IsActive) { + setIsOpenModalNote(true); + setOpen_contact(contact); + } + }} + >
{contact.contactEmails[0] && (
    @@ -91,7 +109,11 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe {contact.contactPhones[0] && (
    • - +
    • {contact.contactPhones[0]?.phoneNumber} @@ -109,17 +131,16 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
      - {contact.bucketIds.map( ( bucketId ) => ( - <> - -
    • - -
      • -
    • - {getBucketNameById(buckets,bucketId)} -
      • + {contact.bucketIds.map((bucketId) => ( + +
    • + +
      • +
    • + {getBucketNameById(buckets, bucketId)} +
      • +       ))} -
diff --git a/src/components/Directory/ListViewDirectory.jsx b/src/components/Directory/ListViewDirectory.jsx index b9356f23..ede641fe 100644 --- a/src/components/Directory/ListViewDirectory.jsx +++ b/src/components/Directory/ListViewDirectory.jsx @@ -3,13 +3,16 @@ import Avatar from '../common/Avatar'; import { getEmailIcon,getPhoneIcon } from './DirectoryUtils'; -const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => { +const ListViewDirectory = ({IsActive, contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => { return ( - + { - setIsOpenModalNote(true) + if ( IsActive ) + { + setIsOpenModalNote(true) setOpen_contact(contact) + } }}>
{/* Actions */} - - - { - setSelectedContact( contact ) - setIsOpenModal(true) - }}> - IsDeleted(contact.id)}> - + {IsActive && + + + { + setSelectedContact( contact ) + setIsOpenModal( true ) + }}> + IsDeleted( contact.id )}> + + } ); }; diff --git a/src/components/Directory/NoteCardDirectory.jsx b/src/components/Directory/NoteCardDirectory.jsx index 71ef9843..6fe7b144 100644 --- a/src/components/Directory/NoteCardDirectory.jsx +++ b/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 = ({ noteItem, contactId, setProfileContact }) => { +const NoteCardDirectory = ({ IsActive,noteItem, contactId, setProfileContact }) => { const [editing, setEditing] = useState(false); const [editorValue, setEditorValue] = useState(noteItem.note); const [isLoading, setIsLoading] = useState(false); @@ -50,7 +50,8 @@ const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => { cacheData("Contact Profile", updatedProfile); } setEditing(false); - setIsLoading(false); + setIsLoading( false ); + showToast("Note Updated successfully", "success"); } catch (error) { setIsLoading(false); @@ -104,7 +105,7 @@ const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => { return (
@@ -128,7 +129,7 @@ const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
-
+
setEditing(true)} diff --git a/src/components/Directory/NotesDirectory.jsx b/src/components/Directory/NotesDirectory.jsx index ba4c1b31..5a3c38a4 100644 --- a/src/components/Directory/NotesDirectory.jsx +++ b/src/components/Directory/NotesDirectory.jsx @@ -10,12 +10,18 @@ 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); @@ -66,7 +72,8 @@ 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 = @@ -85,7 +92,21 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {

Notes :

- + + + setAddNote( !addNote )} > @@ -96,6 +117,7 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => { > */} {addNote ? "close" : "Add Note"} +
{addNote && (
@@ -119,17 +141,22 @@ const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
)} {!isLoading && - [...(contactProfile?.notes || [])] + [...(IsActive ? contactProfile?.notes || [] : contactNotes || [])] .reverse() .map((noteItem) => ( ) )} -

{!isLoading && contactProfile?.notes.length == 0 && !addNote && (

No Notes Found

) }

+ {IsActive && (

{!isLoading && contactProfile?.notes.length == 0 && !addNote && (

No Notes Found

)}

)} + {!IsActive && ( +

{!isLoading && contactNotes.length == 0 && !addNote && (

No Notes Found

) }

+ + )}
); diff --git a/src/hooks/useDirectory.js b/src/hooks/useDirectory.js index 7d18a554..c21044fb 100644 --- a/src/hooks/useDirectory.js +++ b/src/hooks/useDirectory.js @@ -2,35 +2,43 @@ import { useEffect, useState } from "react"; import { DirectoryRepository } from "../repositories/DirectoryRepository"; import { cacheData, getCachedData } from "../slices/apiDataManager"; -export const useDirectory = () => { +export const useDirectory = (isActive) => { const [contacts, setContacts] = useState([]); const [loading, setLoading] = useState(false); - const [error, setError] = useState(); + const [error, setError] = useState(null); - const fetch = async () => { - const cache_contacts = getCachedData("contacts"); - if (!cache_contacts) { - setLoading(true); - try { - const response = await DirectoryRepository.GetContacts(); - setContacts(response.data); - cacheData("contacts", response.data); - setLoading(false); - } catch (error) { - setError(error); - setLoading(false); - } - } else { - setContacts(cache_contacts); + const fetch = async (activeParam = isActive) => { + setLoading(true); + try { + const response = await DirectoryRepository.GetContacts(activeParam); + setContacts(response.data); + cacheData("contacts", { data: response.data, isActive: activeParam }); + } catch (error) { + setError(error); + } finally { + setLoading(false); } }; - useState(() => { - fetch(); - }, []); - return { contacts, loading, error }; + useEffect(() => { + const cachedContacts = getCachedData("contacts"); + if (!cachedContacts?.data || cachedContacts.isActive !== isActive) { + fetch(isActive); + } else { + setContacts(cachedContacts.data); + } + }, [isActive]); + + return { + contacts, + loading, + error, + refetch: fetch, + }; }; + + export const useBuckets = () => { const [buckets, setBuckets] = useState([]); const [loading, setLoading] = useState(false); @@ -101,9 +109,9 @@ const fetchContactProfile = async () => { } -export const useContactNotes = (id) => +export const useContactNotes = (id,IsActive) => { - const [ conatNotes, setContactNotes ] = useState( [] ); + const [ contactNotes, setContactNotes ] = useState( [] ); const [ loading, setLoading ] = useState( false ); const [ Error, setError ] = useState( "" ); @@ -114,7 +122,7 @@ const fetchContactNotes = async () => { if (!cached || cached.contactId !== id) { setLoading(true); try { - const resp = await DirectoryRepository.GetNote(id); + const resp = await DirectoryRepository.GetNote(id,IsActive); setContactNotes(resp.data); cacheData("Contact Notes", { data: resp.data, contactId: id }); } catch (err) { @@ -136,5 +144,5 @@ const fetchContactNotes = async () => { } }, [id]); - return { conatProfile, loading, Error }; + return { contactNotes, loading, Error }; } diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx index dfbcbb81..ecc6e910 100644 --- a/src/pages/Directory/Directory.jsx +++ b/src/pages/Directory/Directory.jsx @@ -16,7 +16,9 @@ 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); @@ -32,7 +34,7 @@ const Directory = () => { const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]); const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]); - const { contacts, loading } = useDirectory(); + const { contacts, loading } = useDirectory(IsActive); const { contactCategory, loading: contactCategoryLoading } = useContactCategory(); const { buckets } = useBuckets(); @@ -40,7 +42,7 @@ const Directory = () => { try { let response; let updatedContacts; - const contacts_cache = getCachedData("contacts") || []; + const contacts_cache = getCachedData("contacts")?.data || []; if (selectedContact) { response = await DirectoryRepository.UpdateContact(data.id, data); @@ -56,7 +58,7 @@ const Directory = () => { showToast("Contact created successfully", "success"); setIsOpenModal(false); } - + cacheData("Contacts", {data:updatedContacts,isActive:IsActive}); setContactList(updatedContacts); } catch (error) { const msg = @@ -70,12 +72,12 @@ const Directory = () => { const handleDeleteContact = async () => { try { setIsDeletng(true); - const contacts_cache = getCachedData("contacts") || []; + const contacts_cache = getCachedData("contacts")?.data || []; const response = await DirectoryRepository.DeleteContact(deleteContact); const updatedContacts = ContactList.filter((c) => c.id !== deleteContact); setContactList(updatedContacts); - cacheData("Contacts", updatedContacts); + cacheData("Contacts", {data:updatedContacts,isActive:IsActive}); showToast("Contact deleted successfully", "success"); setDeleteContact(null); @@ -102,7 +104,6 @@ const Directory = () => { useEffect(() => { setContactList(contacts); - // Set temp filter list only (UI checkboxes, not actual filtering yet) setTempSelectedCategoryIds([]); setTempSelectedBucketIds([]); }, [contacts]); @@ -247,7 +248,7 @@ const Directory = () => {
)} -
+
{
    -

    Filter by

    +

    Filter by

    {/* Bucket Filter */}
    @@ -377,17 +378,17 @@ const Directory = () => {
    -
    Category - Action + {IsActive && Action} - {loading && ContatList.length === 0 && ( + {loading && ( Loading... @@ -471,6 +472,7 @@ const Directory = () => { currentItems.map((contact) => ( {
) : (
- {currentItems.map((contact, index) => ( + {!loading && currentItems.map((contact, index) => (
api.get( '/api/directory' ), + GetContacts: (isActive) => api.get( `/api/directory?active=${isActive}` ), 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 ) => api.get( `/api/directory/note/${ id }` ), + GetNote: ( id,isActive ) => api.get( `/api/directory/note/${ id }?active=${isActive}` ), UpdateNote: ( id, data ) => api.put( `/api/directory/note/${ id }`, data ), DeleteNote:(id)=> api.delete(`/api/directory/note/${ id }`) } \ No newline at end of file