marco.pms.web/src/components/Directory/NoteCardDirectoryEditable.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 NoteCardDirectoryEditable = ({
  noteItem,
  contactId,
  onNoteUpdate,
  onNoteDelete,
}) => {
  const [editing, setEditing] = useState(false);
  const [editorValue, setEditorValue] = useState(noteItem.note);
  const [isLoading, setIsLoading] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [isRestoring, setIsRestoring] = useState(false);

  const handleUpdateNote = async () => {
    try {
      setIsLoading(true);
      const payload = {
        id: noteItem.id,
        note: editorValue,
        contactId,
      };
      const response = await DirectoryRepository.UpdateNote(noteItem.id, payload);

      // Optional cache update
      const cachedContactProfile = getCachedData("Contact Profile");
      if (cachedContactProfile?.contactId === contactId) {
        const updatedCache = {
          ...cachedContactProfile,
          data: {
            ...cachedContactProfile.data,
            notes: cachedContactProfile.data.notes.map((note) =>
              note.id === noteItem.id ? response.data : note
            ),
          },
        };
        cacheData("Contact Profile", updatedCache);
      }
      
      // Notify parent
      onNoteUpdate?.(response.data);
      setEditing(false);
      showToast("Note updated successfully", "success");
    } catch (error) {
      showToast("Failed to update note", "error");
    } finally {
      setIsLoading(false);
    }
  };

  const handleDeleteOrRestore = async (shouldRestore) => {
    try {
      shouldRestore ? setIsRestoring(true) : setIsDeleting(true);
      await DirectoryRepository.DeleteNote(noteItem.id, shouldRestore);
      onNoteDelete?.(noteItem.id);
      showToast(`Note ${shouldRestore ? "restored" : "deleted"} successfully`, "success");
    } catch (error) {
      showToast("Failed to process note", "error");
    } finally {
      setIsDeleting(false);
      setIsRestoring(false);
    }
  };

  return (
    <div
      className="card p-1 shadow-sm border-1 mb-4 rounded"
      style={{
        width: "100%",
        background: noteItem.isActive ? "#fff" : "#f8f6f6",
      }}
      key={noteItem.id}
    >
      {/* Header */}
      <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>
        {/* Action Icons */}
        <div>
          {noteItem.isActive ? (
            <>
              <i
                className="bx bxs-edit bx-sm me-2 text-primary cursor-pointer"
                onClick={() => setEditing(true)}
                title="Edit"
              ></i>
              {!isDeleting ? (
                <i
                  className="bx bx-trash bx-sm me-2 text-danger cursor-pointer"
                  onClick={() => handleDeleteOrRestore(false)}
                  title="Delete"
                ></i>
              ) : (
                <div className="spinner-border spinner-border-sm text-danger" />
              )}
            </>
          ) : isRestoring ? (
            <i className="bx bx-loader-alt bx-spin text-primary"></i>
          ) : (
            <i
              className="bx bx-recycle me-2 text-success cursor-pointer"
              onClick={() => handleDeleteOrRestore(true)}
              title="Restore"
            ></i>
          )}
        </div>
      </div>
      <hr className="mt-0 mb-2" />
      {/* Editor or Content */}
      {editing ? (
        <>
          <ReactQuill
            value={editorValue}
            onChange={setEditorValue}
            theme="snow"
            className="compact-editor"
          />
          <div className="d-flex justify-content-end gap-3 mt-2">
            <span
              className="text-secondary cursor-pointer"
              onClick={() => setEditing(false)}
            >
              Cancel
            </span>
            <span
              className="text-primary cursor-pointer"
              onClick={handleUpdateNote}
            >
              {isLoading ? "Saving..." : "Submit"}
            </span>
          </div>
        </>
      ) : (
        <div className="px-1 pb-2 text-start" dangerouslySetInnerHTML={{ __html: noteItem.note }} />
      )}
    </div>
  );
};

export default NoteCardDirectoryEditable;