memos/web/src/components/MemoRelationListView.tsx

import { useEffect, useState } from "react";
import { useMemoCacheStore } from "@/store/v1";
import Icon from "./Icon";

interface Props {
  relationList: MemoRelation[];
}

const MemoRelationListView = (props: Props) => {
  const memoCacheStore = useMemoCacheStore();
  const [relatedMemoList, setRelatedMemoList] = useState<Memo[]>([]);

  useEffect(() => {
    (async () => {
      const memoList = await Promise.all(props.relationList.map((relation) => memoCacheStore.getOrFetchMemoById(relation.relatedMemoId)));
      setRelatedMemoList(memoList);
    })();
  }, [props.relationList]);

  const handleGotoMemoDetail = (memo: Memo) => {
    window.open(`/m/${memo.id}`, "_blank");
  };

  return (
    <>
      {relatedMemoList.length > 0 && (
        <div className="w-full max-w-full overflow-hidden grid grid-cols-1 gap-1 mt-2">
          {relatedMemoList.map((memo) => {
            return (
              <div
                key={memo.id}
                className="w-auto flex flex-row justify-start items-center hover:bg-gray-100 dark:hover:bg-zinc-800 rounded text-sm p-1 text-gray-500 dark:text-gray-400 cursor-pointer"
                onClick={() => handleGotoMemoDetail(memo)}
              >
                <div className="w-5 h-5 flex justify-center items-center shrink-0 bg-gray-100 dark:bg-zinc-800 rounded-full">
                  <Icon.Link className="w-3 h-auto" />
                </div>
                <span className="mx-1 w-auto truncate">{memo.content}</span>
              </div>
            );
          })}
        </div>
      )}
    </>
  );
};

export default MemoRelationListView;