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 = ({ 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 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 () => {
    try {
      setIsDeleting(true);
      const resp = await DirectoryRepository.DeleteNote(noteItem.id);
      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);
      showToast("Note 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" }}
      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(noteItem.createdAt).format("MMMM DD, YYYY [at] hh:mm A")}
            </span>
          </div>
        </div>
        <div>
          <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}
            ></i>
          )}
          {isDeleting && (
            <div
              class="spinner-border spinner-border-sm text-secondary"
              role="status"
            >
              <span class="visually-hidden">Loading...</span>
            </div>
          )}
        </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;