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

import React, { useState } from "react";
import ReactQuill from "react-quill";
import moment from "moment";
import Avatar from "../common/Avatar";
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
import showToast from "../../services/toastService";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import "../common/TextEditor/Editor.css";

const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, setProfileContact, }) => {
  const [editing, setEditing] = useState(false);
  const [editorValue, setEditorValue] = useState(noteItem.note);
  const [isLoading, setIsLoading] = useState(false);
  const [ isDeleting, setIsDeleting ] = useState( false );
  const [isActivProcess,setActiveProcessing]= useState(false)
  const handleUpdateNote = async () => {
    try {
      setIsLoading(true);
      const payload = {
        id: noteItem.id,
        note: editorValue,
        contactId: contactId,
      };

      const response = await DirectoryRepository.UpdateNote(
        noteItem.id,
        payload
      );
      setProfileContact((prev) => ({
        ...prev,
        notes: prev.notes.map((note) =>
          note.id === noteItem.id ? response?.data : note
        ),
      }));

      const cached_contactProfile = getCachedData("Contact Profile");

      if (
        cached_contactProfile &&
        cached_contactProfile.contactId === contactId
      ) {
        const updatedProfile = {
          ...cached_contactProfile,
          data: {
            ...cached_contactProfile?.data,
            notes: cached_contactProfile?.data?.notes.map((note) =>
              note.id === noteItem.id ? response?.data : note
            ),
          },
        };
        cacheData("Contact Profile", updatedProfile);
      }
      setEditing(false);
      setIsLoading( false );
      
      showToast("Note Updated successfully", "success");
    } catch (error) {
      setIsLoading(false);
      const msg =
        error.reponse.data.message ||
        error.message ||
        "Error occured during API calling.";
      showToast("Failed to update note", "error");
    }
  };

  const handleDeleteNote = async (activeStatue) => {
    try {
     activeStatue ?   setActiveProcessing(true) : setIsDeleting(true) 
      const resp = await DirectoryRepository.DeleteNote(noteItem.id,activeStatue);
      setProfileContact((prev) => ({
        ...prev,
        notes: prev.notes.filter((note) => note.id !== noteItem.id),
      }));

      const cachedContactProfile = getCachedData("Contact Profile");

      if (
        cachedContactProfile &&
        cachedContactProfile.contactId === contactId
      ) {
        const updatedCache = {
          ...cachedContactProfile,
          data: {
            ...cachedContactProfile?.data,
            notes: (cachedContactProfile?.data?.notes || []).filter(
              (note) => note.id !== noteItem.id
            ),
          },
        };

        cacheData("Contact Profile", updatedCache);
      }
      setIsDeleting( false );
      setActiveProcessing( false )
      refetchNotes( contactId, false )
      refetchProfile(contactId)
      showToast(`Note ${activeStatue ? "Restored":"Deleted"} Successfully`, "success");
    } catch (error) {
      setIsDeleting(false);
      const msg =
        error.response?.data?.message ||
        error.message ||
        "Error occured during API calling";
      showToast(msg, "error");
    }
  };
  return (
    <div
      className="card p-1 shadow-sm border-1 mb-2 conntactNote"
      style={{ width: "100%", minWidth: "300px", borderRadius: "0px", background: `${noteItem.isActive ?   "": "#f8f6f6"}`  }}
      key={noteItem.id}
    >

      <div className="d-flex justify-content-between align-items-center mb-1">
        <div className="d-flex align-items-center">
          <Avatar
            size="xs"
            firstName={noteItem.createdBy.firstName}
            lastName={noteItem.createdBy.lastName}
            className="m-0"
          />
          <div className="d-flex flex-column ms-2">
            <span className="fw-semibold small">
              {noteItem.createdBy.firstName} {noteItem.createdBy.lastName}
            </span>
            <span className="text-muted" style={{ fontSize: "10px" }}>
              {moment
                .utc(noteItem.createdAt)
                .add(5, "hours")
                .add(30, "minutes")
                .format("MMMM DD, YYYY [at] hh:mm A")}
            </span>
          </div>
        </div>
     <div>
  {noteItem.isActive ? (
    <>
      <i
        className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer"
        onClick={() => setEditing(true)}
      ></i>

      {!isDeleting ? (
        <i
          className="bx bx-trash bx-sm me-1 text-secondary cursor-pointer"
          onClick={() => handleDeleteNote(!noteItem.isActive)}
        ></i>
      ) : (
        <div
          className="spinner-border spinner-border-sm text-secondary"
          role="status"
        >
          <span className="visually-hidden">Loading...</span>
        </div>
      )}
    </>
  ) : isActivProcess ? (
    < i className='bx  bx-loader-alt bx-spin text-primary'  ></i> 
  ) : (
    <i
      className="bx bx-recycle  me-1 text-primary cursor-pointer"
      onClick={() => handleDeleteNote(!noteItem.isActive)}
      title="Restore"
    ></i>
  )}
        </div>
        

      </div>

      <hr className="mt-0" />

      {editing ? (
        <>
          <ReactQuill
            value={editorValue}
            onChange={setEditorValue}
            theme="snow"
            className="compact-editor"
          />
          <div className="d-flex justify-content-end gap-2">
            <span
              className="text-secondary cursor-pointer"
              aria-disabled={isLoading}
              onClick={() => setEditing(false)}
            >
              Cancel
            </span>
            <span
              className="text-primary cursor-pointer"
              aria-disabled={isLoading}
              onClick={handleUpdateNote}
            >
              {isLoading ? "Please Wait..." : "Submit"}
            </span>
          </div>
        </>
      ) : (
        <div dangerouslySetInnerHTML={{ __html: noteItem.note }} />
      )}
    </div>
  );
};

export default NoteCardDirectory;