Function Link

client/src/components/ui/Link/index.tsx:50–87

(props: Props)

`

export default function Link(props: Props) {
  const viewer = useFragment(viewerFragment, props.viewer)
  const link = useFragment(linkFragment, props.link)
  const [formIsOpen, setFormIsOpen] = useState(false)

  const toggleForm = useCallback(() => {
    setFormIsOpen(!formIsOpen)
  }, [setFormIsOpen, formIsOpen])

  const parentTopics = liftNodes<ParentTopicType>(link.displayParentTopics)
  const showEditButton = !link.loading && link.viewerCanUpdate
  const repoColors = (link.repoLinks || []).map((repoLink) => repoLink.displayColor as Color)
  const canEdit = !!(link.viewerCanUpdate && viewer.selectedRepoId)

  return (
    <Item
      canEdit={canEdit}
      className="Box-row--link"
      formIsOpen={formIsOpen}
      newlyAdded={link.newlyAdded}
      repoColors={repoColors}
      showEditButton={showEditButton}
      showLink
      showRepoOwnership={link.showRepoOwnership}
      title={link.displayTitle}
      toggleForm={toggleForm}
      topics={parentTopics}
      url={link.displayUrl}
    >
      {formIsOpen && viewer.id && (
        <EditLinkLoader
          linkId={link.id}
          viewerId={viewer.id}
        />
      )}
    </Item>
  )
}