Function ViewTopicPage

client/src/components/TopicPage/ViewTopicPage/index.tsx:190–240

(props: Props)

}

export default function ViewTopicPage(props: Props) {
  const topic = useFragment(topicFragment, props.topic)
  const viewer = useFragment(viewerFragment, props.viewer)
  const children = liftNodes(topic.children)
  const parentTopics = liftNodes(topic.displayParentTopics)
  const renderHeadingDetail = useCallback(() => headingDetail(topic), [headingDetail, topic])

  const canEdit = topic.viewerCanUpdate

  return (
    <Page>
      <Subhead
        heading={topic.displayName}
        renderHeadingDetail={renderHeadingDetail}
      />
      <Columns>
        <RightColumn>
          <SidebarList
            items={parentTopics}
            placeholder="There are no parent topics for this topic."
            title="Parent topics"
          />
          {renderTopicViews(topic)}
          {canEdit
            ? <AddForm parentTopic={topic} viewer={viewer} />
            : renderNotification()}
        </RightColumn>
        <LeftColumn>
          <List
            placeholder="There are no items in this list."
            hasItems={!isEmpty(children)}
          >
            {children.filter(Boolean).map((child) => {
              const key = (child?.__typename == 'Link' || child?.__typename == 'Topic')
                ? child.id
                : 'client:topicChildren:0'

              return (
                <TopicChild
                  key={key}
                  child={child}
                  viewer={viewer}
                />
              )
            })}
          </List>
        </LeftColumn>
      </Columns>
    </Page>
  )
}