import React, { FunctionComponent } from "react";
import { Link } from "react-router-dom";
import { useWorkgroups } from "../gql/queries/workgroups";

export interface WorkgroupLinkProps {
  workgroupId: number
}

export const WorkgroupLink: FunctionComponent<WorkgroupLinkProps> = ({ workgroupId }) => {
  const { workgroups } = useWorkgroups({
    fetchPolicy: "cache-first",
    variables: {
      filter: {
        ids: [workgroupId]
      }
    }
  });

  const workgroupName = workgroups.length > 0 ? workgroups[0].name : `#${workgroupId}`;

  return (
    <Link to={`/workgroups/${workgroupId}`}>{workgroupName}</Link>
  );
};