marco.pms.web/src/components/Directory/NotesDirectory.jsx

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 { 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 [ IsActive, setIsActive ] = useState( true )
  const {contactNotes} = useContactNotes(contactProfile?.id,!IsActive)

  
  const [NotesData, setNotesData] = useState();
  const [IsSubmitting, setIsSubmitting] = useState(false);
  const [addNote, setAddNote] = 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],
      }));

      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", "");
      setIsSubmitting(false);
      showToast("Note added successfully!", "success");
      setAddNote( false );
      setIsActive(true)
    } 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">
      <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 )}
        >
          {/* <i
            className={`icon-base  bx ${
              addNote ? "bx-x bx-sm" : "bx-pencil"
            } bx-xs `}
          ></i> */}
          {addNote ? "close" : "Add Note"}
        </span>
       </div>
      </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 className=" justify-content-start  px-1 mt-1">
        {isLoading && (
          <div className="text-center">
            {" "}
            <p>Loading...</p>{" "}
          </div>
        )}
        {!isLoading &&
          [...(IsActive ?   contactProfile?.notes || [] : contactNotes || [])]
            .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> )}
        {!IsActive && (
        <p>{!isLoading && contactNotes.length == 0 && !addNote && (<p className="text-center">No Notes Found</p>) }</p>

        )}
      </div>
    </div>
  );
};

export default NotesDirectory;