web/front/TopicPage.tsx

import React from 'react'
import { useRouter } from 'next/router'

import {
  ArticleIcon,
  MyHead,
  NewArticleIcon,
  SeeIcon,
  TopicIcon,
  TopicsHelp,
  slugFromArray
} from 'front'
import { idToTitle } from 'ourbigbook'
import ArticleList from 'front/ArticleList'
import CustomLink from 'front/CustomLink'
import LoadingSpinner from 'front/LoadingSpinner'
import routes from 'front/routes'

import { ArticleType } from 'front/types/ArticleType'
import { CommonPropsType } from 'front/types/CommonPropsType'
import { IssueType } from 'front/types/IssueType'
import { TopicType } from 'front/types/TopicType'

export interface TopicPageProps extends CommonPropsType {
  articleInTopicByLoggedInUser: ArticleType,
  // TODO not ideal. Only Articles are really possible. This is to appease ArticleList.
  articles: (ArticleType & IssueType & TopicType)[];
  articlesCount: number;
  hasUnlisted: boolean;
  list: boolean;
  order: string;
  orderAscDesc: string;
  topic: TopicType;
  page: number;
  what: string;
}

export const TopicPage = ({
  articleInTopicByLoggedInUser,
  articles,
  articlesCount,
  hasUnlisted,
  list,
  loggedInUser,
  order,
  page,
  topic,
  what
}: TopicPageProps) => {
  const router = useRouter();
  const topicId = slugFromArray(router.query.id)
  let titleText
  if (topic) {
    titleText = topic.titleSource
  } else {
    titleText = idToTitle(topicId)
  }
  if (router.isFallback) { return <LoadingSpinner />; }
  const topicIdDisplay = <div className="h2-container">
    <h2 className="meta inline" title="Topic ID">ID: {topicId}</h2>
  </div>
  return <>
    <MyHead title={titleText} />
    <div className="topic-page">
      {topic
        ? <>
            <div className="content-not-ourbigbook">
              <div className="h1-container h1">
                <h1 className="inline">
                  <TopicIcon />
                  {' '}
                  <span
                    className="ourbigbook-title"
                    dangerouslySetInnerHTML={{ __html: topic.titleRender }}
                  />
                </h1>
              </div>
              {topicIdDisplay}
              <div className="tab-list">
                <CustomLink
                  className={`tab-item${order === 'score' ? ' active' : ''}`}
                  href={routes.topic(topicId, { sort: 'score' })}
                >
                  <ArticleIcon /> Top articles
                </CustomLink>
                <CustomLink
                  className={`tab-item${order === 'createdAt' ? ' active' : ''}`}
                  href={routes.topic(topicId, { sort: 'created' })}
                >
                  <ArticleIcon /> Latest articles
                </CustomLink>
                {articleInTopicByLoggedInUser
                  ? <CustomLink
                      className="tab-item btn small"
                      href={routes.article(articleInTopicByLoggedInUser.slug)}
                    >
                      <SeeIcon /> View your article in topic
                    </CustomLink>
                  : <CustomLink
                      className="tab-item btn small"
                      href={routes.articleNew({ title: topic.titleSource })}
                      updatePreviousPage={true}
                    >
                      <NewArticleIcon /> New article in topic
                    </CustomLink>
                }
              </div>
            </div>
            <ArticleList {...{
              articles,
              articlesCount,
              hasUnlisted,
              list,
              loggedInUser,
              page,
              showAuthor: true,
              showBody: true,
              showFullBody: true,
              what,
            }}/>
          </>
        : <>
            <div className="content-not-ourbigbook">
              <div className="h1-container h1">
                <TopicIcon /> 
                {' '}
                <h1 className="inline">{titleText}</h1>
              </div>
              {topicIdDisplay}
              <p>There are no articles in this topic.</p>
              <p>
                <CustomLink
                  className="btn new"
                  href={routes.articleNew({ 'title': titleText })}
                  updatePreviousPage={true}
                >
                  <NewArticleIcon title={null}/>{' '}Create the first article for this topic
                </CustomLink>
              </p>
            </div>
          </>
      }
    </div>
    <p className="content-not-ourbigbook">
      <TopicsHelp />
    </p>
  </>
}

export default TopicPage