updated cache

This commit is contained in:
Pramod Mahajan 2025-05-21 16:28:44 +05:30
parent 0e38709435
commit c784d18427
2 changed files with 135 additions and 131 deletions

View File

@ -1,4 +1,4 @@
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from "react";
import Editor from "../common/TextEditor/Editor"; import Editor from "../common/TextEditor/Editor";
import Avatar from "../common/Avatar"; import Avatar from "../common/Avatar";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
@ -7,7 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { showText } from "pdf-lib"; import { showText } from "pdf-lib";
import { DirectoryRepository } from "../../repositories/DirectoryRepository"; import { DirectoryRepository } from "../../repositories/DirectoryRepository";
import moment from "moment"; import moment from "moment";
import {getCachedData} from "../../slices/apiDataManager"; import { cacheData, getCachedData } from "../../slices/apiDataManager";
import NoteCardDirectory from "./NoteCardDirectory"; import NoteCardDirectory from "./NoteCardDirectory";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
@ -15,10 +15,10 @@ const schema = z.object({
note: z.string().min(1, { message: "Note is required" }), note: z.string().min(1, { message: "Note is required" }),
}); });
const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) => const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
{ const [NotesData, setNotesData] = useState();
const [ NotesData, setNotesData ] = useState() const [IsSubmitting, setIsSubmitting] = useState(false);
const[IsSubmitting,setIsSubmitting] = useState(false) const [addNote, setAddNote] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
@ -40,27 +40,35 @@ const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) =>
const onSubmit = async (data) => { const onSubmit = async (data) => {
const newNote = { ...data, contactId: contactProfile?.id }; const newNote = { ...data, contactId: contactProfile?.id };
try try {
{ setIsSubmitting(true);
setIsSubmitting(true) const response = await DirectoryRepository.CreateNote(newNote);
const response = await DirectoryRepository.CreateNote( newNote );
const createdNote = response.data; const createdNote = response.data;
setProfileContact((prev) => ({ setProfileContact((prev) => ({
...prev, ...prev,
notes: [...(prev.notes || []), createdNote], 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", ""); setValue("note", "");
const result = response.data setIsSubmitting(false);
const cache_notes = getCachedData( "Contact Note" ) showToast("Note added successfully!", "success");
setAddNote(false);
setIsSubmitting(false) } catch (error) {
showToast("Note added successfully!", "success") setIsSubmitting(false);
} catch ( error )
{
setIsSubmitting(false)
const msg = const msg =
error.response.data.message || error.response.data.message ||
error.message || error.message ||
@ -75,26 +83,63 @@ const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) =>
return ( return (
<div className="text-start"> <div className="text-start">
<form onSubmit={handleSubmit(onSubmit)}> <div
<Editor className={`${
value={noteValue} contactProfile?.notes?.length > 0
loading={IsSubmitting} ? "d-flex justify-content-between"
onChange={handleEditorChange} : "d-flex justify-content-end"
onCancel={onCancel} }`}
onSubmit={handleSubmit(onSubmit)} >
/> {contactProfile?.notes.length > 0 && (
{errors.notes && ( <p className="fw-semibold m-0">Notes :</p>
<p className="text-danger small mt-1">{errors.note.message}</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 <div
className=" justify-content-start overflow-auto px-1" 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 && (
{!isLoading && contactProfile?.notes?.map((noteItem) => ( <div className="text-center">
<NoteCardDirectory noteItem={noteItem} contactId={contactProfile?.id} setProfileContact={setProfileContact} key={noteItem.id} /> {" "}
))} <p>Loading...</p>{" "}
</div>
)}
{!isLoading &&
[...(contactProfile?.notes || [])]
.reverse()
.map((noteItem) => (
<NoteCardDirectory
noteItem={noteItem}
contactId={contactProfile?.id}
setProfileContact={setProfileContact}
key={noteItem.id}
/>
))}
</div> </div>
</div> </div>
); );

View File

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