updated cache
This commit is contained in:
parent
0e38709435
commit
c784d18427
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user