104 lines
2.9 KiB
JavaScript
104 lines
2.9 KiB
JavaScript
import React, {useEffect, useState} from "react";
|
|
import Editor from "../common/TextEditor/Editor";
|
|
import Avatar from "../common/Avatar";
|
|
import { useForm } from "react-hook-form";
|
|
import { z } from "zod";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { showText } from "pdf-lib";
|
|
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
|
|
import moment from "moment";
|
|
import {getCachedData} from "../../slices/apiDataManager";
|
|
import NoteCardDirectory from "./NoteCardDirectory";
|
|
import showToast from "../../services/toastService";
|
|
|
|
const schema = z.object({
|
|
note: z.string().min(1, { message: "Note is required" }),
|
|
});
|
|
|
|
const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) =>
|
|
{
|
|
const [ NotesData, setNotesData ] = useState()
|
|
const[IsSubmitting,setIsSubmitting] = useState(false)
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
watch,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: {
|
|
note: "",
|
|
},
|
|
});
|
|
|
|
const noteValue = watch("note");
|
|
|
|
const handleEditorChange = (value) => {
|
|
setValue("note", value, { shouldValidate: true });
|
|
};
|
|
|
|
const onSubmit = async (data) => {
|
|
const newNote = { ...data, contactId: contactProfile?.id };
|
|
try
|
|
{
|
|
setIsSubmitting(true)
|
|
const response = await DirectoryRepository.CreateNote( newNote );
|
|
|
|
const createdNote = response.data;
|
|
|
|
setProfileContact((prev) => ({
|
|
...prev,
|
|
notes: [...(prev.notes || []), createdNote],
|
|
}));
|
|
|
|
setValue("note", "");
|
|
const result = response.data
|
|
const cache_notes = getCachedData( "Contact Note" )
|
|
|
|
setIsSubmitting(false)
|
|
showToast("Note added successfully!", "success")
|
|
} catch ( error )
|
|
{
|
|
setIsSubmitting(false)
|
|
const msg =
|
|
error.response.data.message ||
|
|
error.message ||
|
|
"Error occured during API calling";
|
|
showToast(msg, "error");
|
|
}
|
|
};
|
|
|
|
const onCancel = () => {
|
|
setValue("note", "");
|
|
};
|
|
|
|
return (
|
|
<div className="text-start">
|
|
<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
|
|
className=" justify-content-start overflow-auto px-1"
|
|
style={{ maxHeight: "300px", minHeight: "100px" }}
|
|
>
|
|
{isLoading && <div className="text-center"> <p>Loading...</p> </div>}
|
|
{!isLoading && contactProfile?.notes?.map((noteItem) => (
|
|
<NoteCardDirectory noteItem={noteItem} contactId={contactProfile?.id} setProfileContact={setProfileContact} key={noteItem.id} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NotesDirectory;
|