Pin component for brimble collaboration

pin-component.tsx

import React, { useContext } from "react";
import { Thread, Pin } from "@cord-sdk/react";
import SupabaseImplementation from "@/implementations/supabase.implementation";
import { PinType } from "@/types/collaboration.type";
import GroupIdContext from "@/context/groupid.context";
import { Rnd } from "react-rnd";

const PinComment = (pinData: PinType) => {
  const groupId = useContext(GroupIdContext) as string;

  const supabase = SupabaseImplementation.getInstance();

  const { id, thread_id, page, x, y } = pinData;

  const [open, setOpen] = React.useState(false);

  const [position, setPosition] = React.useState({ x, y });

  const handleStop = React.useCallback(
    (_: any, data: any) => {
      setPosition({ x: data.x, y: data.y });
      updatePosition(String(id), { x: data.x, y: data.y });
    },
    [id],
  );

  const updatePosition = async (id: string, data: Partial<PinType>) => {
    await supabase.updatePin(id, data);
  };

  return (
    <Rnd
      onDragStop={handleStop}
      position={{ x: position.x, y: position.y }}
      bounds="window"
      enableResizing={false}
      style={{ border:"2px solid red" }}
    >
      <Pin
        threadId={thread_id}
        location={page}
        onClick={() => setOpen((x) => !x)}
      >
        <Thread
          threadId={thread_id}
          groupId={groupId}
          autofocus={true}
          location={{ page }}
          style={{
            left: "0px",
            position: "absolute",
            top: "100%",
            visibility: open ? "visible" : "hidden",
            height: "300px",
            width: "300px",
          }}
        />
      </Pin>
    </Rnd>
  );
};

export default PinComment;