text: // Copyright 2020 The casbin Authors. All Rights Reserved.
  //
  // Licensed under the Apache License, Version 2.0 (the "License");
  // you may not use this file except in compliance with the License.
  // You may obtain a copy of the License at
  //
  //      http://www.apache.org/licenses/LICENSE-2.0
  //
  // Unless required by applicable law or agreed to in writing, software
  // distributed under the License is distributed on an "AS IS" BASIS,
  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  // See the License for the specific language governing permissions and
  // limitations under the License.
  
  import React from "react";
  import * as Setting from "../Setting";
  import * as TopicBackend from "../backend/TopicBackend";
  import * as NodeBackend from "../backend/NodeBackend";
  import { withRouter } from "react-router-dom";
  import Avatar from "../Avatar";
  import ReplyBox from "./ReplyBox";
  import * as FavoritesBackend from "../backend/FavoritesBackend";
  import * as BalanceBackend from "../backend/BalanceBackend";
  import "../node.css";
  import Zmage from "react-zmage";
  import { Link } from "react-router-dom";
  import "codemirror/lib/codemirror.css";
  import i18next from "i18next";
  
  require("codemirror/mode/markdown/markdown");
  
  const ReactMarkdown = require("react-markdown");
  const pangu = require("pangu");
  
  class TopicBox extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        classes: props,
        topicId: props.match.params.topicId,
        event: props.match.params.event,
        topic: [],
        topicThanksCost: 15,
        favoritesStatus: false,
        defaultTopTopicTime: 10,
        from: "/",
      };
  
      const params = new URLSearchParams(this.props.location.search);
      this.state.from = params.get("from");
      if (this.state.from === null) {
        this.state.from = "/";
      } else {
        this.state.from = decodeURIComponent(this.state.from);
      }
    }
  
    componentDidMount() {
      this.getTopic();
      this.getFavoriteStatus();
      TopicBackend.addTopicBrowseCount(this.state.topicId);
    }
  
    componentWillUnmount() {
      this.props.getNodeBackground("", "", "", "");
    }
  
    componentWillReceiveProps(newProps) {
      if (newProps.location !== this.props.location) {
        if (this.judgeAnchorElement()) {
          return;
        }
        this.setState(
          {
            topicId: newProps.match.params.topicId,
            event: newProps.match.params.event,
          },
          () => this.getTopic()
        );
      }
    }
  
    judgeAnchorElement() {
      let url = window.location.href;
      let id = url.substring(url.lastIndexOf("#") + 1);
      let anchorElement = document.getElementById(id);
      return !!anchorElement;
    }
  
    getTopic(event) {
      TopicBackend.getTopic(this.state.topicId).then((res) => {
        this.setState(
          {
            topic: res,
          },
          () => {
            if (event === "refresh") {
              return;
            }
  
            this.getNodeInfo();
            //this.props.getNodeId(this.state.topic?.nodeId);
            NodeBackend.addNodeBrowseCount(this.state.topic?.nodeId);
          }
        );
      });
    }
  
    getNodeInfo() {
      NodeBackend.getNode(this.state.topic?.nodeId).then((res) => {
        this.props.getNodeBackground(
          this.state.nodeId,
          res?.backgroundImage,
          res?.backgroundColor,
          res?.backgroundRepeat
        );
      });
    }
  
    getFavoriteStatus() {
      if (this.state.event === "review" || this.props.account === null) {
        return;
      }
  
      FavoritesBackend.getFavoritesStatus(this.state.topicId, 1).then((res) => {
        if (res.status === "ok") {
          this.setState({
            favoritesStatus: res.data,
          });
        } else {
          Setting.showMessage("error", res.msg);
        }
      });
    }
  
    renderOutdatedProblem() {
      const diffDays = Setting.getDiffDays(this.state.topic?.createdTime);
  
      if (diffDays <= 30) {
        return null;
      }
  
      return (
        <div className="outdated">
          {i18next.t("topic:This is a topic created")} {diffDays}{" "}
          {i18next.t("topic:days ago, the information in it may have changed.")}
        </div>
      );
    }
  
    addFavorite() {
      FavoritesBackend.addFavorites(this.state.topicId, 1).then((res) => {
        if (res.status === "ok") {
          this.setState({
            favoritesStatus: res.data,
          });
          this.getTopic("refresh");
          this.props.refreshFavorites();
        } else {
          Setting.showMessage("error", res.msg);
        }
      });
    }
  
    deleteFavorite() {
      FavoritesBackend.deleteFavorites(this.state.topicId, 1).then((res) => {
        if (res.status === "ok") {
          this.setState({
            favoritesStatus: !res.data,
          });
          this.getTopic("refresh");
          this.props.refreshFavorites();
        } else {
          Setting.showMessage("error", res.msg);
        }
      });
    }
  
    deleteTopic() {
      if (window.confirm(`Are you sure to delete this topic?`)) {
        TopicBackend.deleteTopic(this.state.topicId).then((res) => {
          if (res) {
            this.props.history.push(this.state.from);
          }
        });
      }
    }
  
    thanksTopic(id, author) {
      if (
        window.confirm(
          `Are you sure to spend ${this.state.topicThanksCost} coins in thanking @${author} for this topic?`
        )
      ) {
        BalanceBackend.addThanks(id, 1).then((res) => {
          if (res?.status === "ok") {
            this.getTopic("refresh");
          } else {
            alert(res?.msg);
          }
        });
      }
    }
  
    topTopic(topType) {
      if (this.props.account?.isModerator || this.state.topic?.nodeModerator) {
        //let time = prompt(i18next.t("topic:How long do you want to top this topic? (minute)"), this.state.defaultTopTopicTime)
        if (
          window.confirm(`${i18next.t("topic:Are you sure to top this topic?")}`)
        ) {
          TopicBackend.topTopic(this.state.topic?.id, "", topType).then((res) => {
            if (res?.status === "ok") {
              this.getTopic("refresh");
            } else {
              alert(i18next.t(`error:${res?.msg}`));
            }
          });
          return;
        }
        return;
      }
  
      if (this.state.topic?.topExpiredTime !== "") {
        alert(i18next.t("topic:This topic has been topped"));
        return;
      }
  
      if (
        window.confirm(
          `${i18next.t("topic:Are you sure you want to pin this topic for")} ${
            this.state.defaultTopTopicTime
          } ${i18next.t(
            "topic:minutes? The operation price is 200 copper coins."
          )}`
        )
      ) {
        TopicBackend.topTopic(this.state.topic?.id, 10, topType).then((res) => {
          if (res?.status === "ok") {
            this.props.history.push("/");
          } else {
            alert(i18next.t(`error:${res?.msg}`));
          }
        });
      }
    }
  
    cancelTopTopic(topType) {
      if (this.props.account?.isModerator || this.state.topic?.nodeModerator) {
        if (
          window.confirm(
            `${i18next.t("topic:Are you sure to cancel top this topic?")}`
          )
        ) {
          TopicBackend.cancelTopTopic(this.state.topic?.id, topType).then(
            (res) => {
              if (res?.status === "ok") {
                this.getTopic("refresh");
              } else {
                alert(i18next.t(`error:${res?.msg}`));
              }
            }
          );
        }
      }
    }
  
    renderTopTopic() {
      return (
        <div className="box">
          <div className="inner">
            <div className="fr">
              &nbsp;{" "}
              <a href="#;" onClick="">
                {i18next.t("topic:Sink")} ↓
              </a>
              &nbsp;{" "}
              {this.props.account?.isModerator ? (
                <a href="#;" onClick={() => this.topTopic()}>
                  {i18next.t("topic:Top this topic")}
                </a>
              ) : (
                <a href="#;" onClick={() => this.topTopic()}>
                  {i18next.t("topic:Top")} {this.state.defaultTopTopicTime}{" "}
                  {i18next.t("topic:minutes")}
                </a>
              )}
            </div>
            &nbsp;
          </div>
        </div>
      );
    }
  
    renderImage = ({ alt, src }) => {
      return <Zmage src={src} alt={alt} />;
    };
  
    renderLink = (props) => {
      let check = Setting.checkPageLink(props.href);
      if (check) {
        return <a {...props} />;
      }
      return <a {...props} target="_blank" rel="nofollow noopener noreferrer" />;
    };
  
    renderMobileButtons() {
      return (
        <div class="inner">
          <div class="fr" align="right">
            {this.props.account !== undefined && this.props.account !== null ? (
              this.state.favoritesStatus ? (
                <a href="#;" onClick={() => this.deleteFavorite()} className="op">
                  {i18next.t("topic:Cancel Favor")}
                </a>
              ) : (
                <a href="#;" onClick={() => this.addFavorite()} className="op">
                  {i18next.t("topic:Favor")}
                </a>
              )
            ) : null}{" "}
            &nbsp;
            <a
              href="#;"
              onClick="window.open('https://twitter.com/share?url=https://www.example.com/t/123456?r=username&amp;related=casbinforum&amp;hashtags=inc&amp;text=title', '_blank', 'width=550,height=370'); recordOutboundLink(this, 'Share', 'twitter.com');"
              className="op"
            >
              Tweet
            </a>{" "}
            &nbsp;
            <a href="#" onclick="shareTopic(``);" class="op">
              Share
            </a>{" "}
            &nbsp;
            <a
              href="#;"
              onClick="if (confirm('Are you sure to ignore this topic?')) { location.href = '/ignore/topic/123456?once=39724'; }"
              className="op"
            >
              {i18next.t("topic:Ignore")}
            </a>{" "}
            &nbsp;
            {this.props.account !== undefined &&
            this.props.account !== null &&
            this.props.account?.id !== this.state.topic?.author ? (
              this.state.topic?.thanksStatus === false ? (
                <div id="topic_thank">
                  <a
                    href="#;"
                    onClick={() =>
                      this.thanksTopic(
                        this.state.topic?.id,
                        this.state.topic?.author
                      )
                    }
                    className="op"
                  >
                    {i18next.t("topic:Thank")}
                  </a>
                </div>
              ) : (
                <div id="topic_thank">
                  <span className="topic_thanked">
                    {i18next.t("topic:Thanked")}
                  </span>
                </div>
              )
            ) : null}{" "}
            &nbsp;
          </div>{" "}
          &nbsp;{" "}
        </div>
      );
    }
  
    renderDesktopButtons() {
      return (
        <div className="topic_buttons">
          <div className="fr topic_stats" style={{ paddingTop: "4px" }}>
            {this.state.topic?.hitCount} {i18next.t("topic:hits")} &nbsp;∙&nbsp;{" "}
            {this.state.topic?.favoriteCount} {i18next.t("topic:favorites")}{" "}
            &nbsp;
          </div>
          {this.props.account !== undefined && this.props.account !== null ? (
            this.state.favoritesStatus ? (
              <a
                href="#;"
                onClick={() => {
                  this.deleteFavorite();
                }}
                className="tb"
              >
                {i18next.t("topic:Cancel Favor")}
              </a>
            ) : (
              <a
                href="#;"
                onClick={() => {
                  this.addFavorite();
                }}
                className="tb"
              >
                {i18next.t("topic:Favor")}
              </a>
            )
          ) : null}
          <a
            href="#;"
            onClick="window.open('https://twitter.com/share?url=https://www.example.com/t/123456?r=username&amp;related=casbinforum&amp;hashtags=inc&amp;text=title', '_blank', 'width=550,height=370'); recordOutboundLink(this, 'Share', 'twitter.com');"
            className="tb"
          >
            Tweet
          </a>
          &nbsp;
          <a
            href="#;"
            onClick="window.open('https://service.weibo.com/share/share.php?url=https://www.example.com/t/123456?r=username&amp;title=casbinforum%20-%20title', '_blank', 'width=550,height=370'); recordOutboundLink(this, 'Share', 'weibo.com');"
            className="tb"
          >
            Weibo
          </a>
          &nbsp;
          <a
            href="#;"
            onClick="if (confirm('Are you sure to ignore this topic?')) { location.href = '/ignore/topic/123456?once=39724'; }"
            className="tb"
          >
            {i18next.t("topic:Ignore")}
          </a>
          &nbsp;
          {this.props.account !== undefined &&
          this.props.account !== null &&
          this.props.account?.id !== this.state.topic?.author ? (
            this.state.topic?.thanksStatus === false ? (
              <div id="topic_thank">
                <a
                  href="#;"
                  onClick={() =>
                    this.thanksTopic(
                      this.state.topic?.id,
                      this.state.topic?.author
                    )
                  }
                  className="tb"
                >
                  {i18next.t("topic:Thank")}
                </a>
              </div>
            ) : (
              <div id="topic_thank">
                <span className="topic_thanked">
                  {i18next.t("topic:Thanked")}
                </span>
              </div>
            )
          ) : null}
        </div>
      );
    }
  
    render() {
      const pcBrowser = Setting.PcBrowser;
  
      if (
        this.props.account === undefined ||
        (this.state.topic !== null && this.state.topic.length === 0)
      ) {
        return (
          <div class="box">
            <div class="header">
              {Setting.getHomeLink()} <span class="chevron">&nbsp;›&nbsp;</span>{" "}
              {i18next.t("loading:Topic is loading")}
            </div>
            <div class="cell">
              <span class="gray bigger">
                {i18next.t("loading:Please wait patiently...")}
              </span>
            </div>
          </div>
        );
      }
  
      if (this.state.topic === null) {
        return (
          <div class="box">
            <div class="header">
              {Setting.getHomeLink()} <span class="chevron">&nbsp;›&nbsp;</span>{" "}
              {i18next.t("error:Topic not found")}
            </div>
            <div class="cell">
              <span class="gray bigger">404 Topic Not Found</span>
            </div>
            <div class="inner">
              ← {Setting.getHomeLink(i18next.t("error:Back to Home Page"))}
            </div>
          </div>
        );
      }
  
      if (this.state.event === "review") {
        if (
          this.props.account === null ||
          this.props.account?.id !== this.state.topic?.author
        ) {
          this.props.history.push(`/t/${this.state.topic?.id}`);
        }
        return (
          <div class="box">
            <div class="header">
              {Setting.getHomeLink()} <span class="chevron">&nbsp;›&nbsp;</span>{" "}
              <Link to={`/go/${this.state.topic?.nodeId}`}>
                {this.state.topic?.nodeName}
              </Link>{" "}
              <span class="chevron">&nbsp;›&nbsp;</span>{" "}
              <Link to={`/t/${this.state.topic?.id}`}>
                {pangu.spacing(this.state.topic?.title)}
              </Link>{" "}
              <span class="chevron">&nbsp;›&nbsp;</span> Review
            </div>
            <div class="cell topic_content markdown_body">
              <p>
                {i18next.t(
                  "topic:The new topic has been successfully created on the"
                )}{" "}
                <Link to={`/go/${this.state.topic?.nodeId}`}>
                  {this.state.topic?.nodeName}
                </Link>{" "}
                {i18next.t(
                  "topic:node, you can click on the title below to continue to view"
                )}
              </p>
              <h1>
                <Link to={`/t/${this.state.topic?.id}`}>
                  {pangu.spacing(this.state.topic?.title)}
                </Link>
              </h1>
              <p>
                {i18next.t(
                  "topic:Following are some guides to help you better use the topic management related functions of the"
                )}{" "}
                {Setting.getForumName()} {i18next.t("topic:community")}
              </p>
              <ul>
                <li>
                  {i18next.t("topic:The topic is currently at")}&nbsp;
                  <Link to={`/go/${this.state.topic?.nodeId}`}>
                    {this.state.topic?.nodeName}
                  </Link>{" "}
                  {i18next.t(
                    "topic:node, within 10 minutes after creation, you can"
                  )}{" "}
                  <Link to={`/move/topic/${this.state.topic?.id}`}>
                    {i18next.t("topic:move freely")}
                  </Link>
                </li>
                <li>
                  {i18next.t(
                    "topic:If you are not satisfied with the content, within 10 minutes of creation, you can"
                  )}{" "}
                  <Link to={`/edit/topic/${this.state.topic?.id}`}>
                    {i18next.t("topic:edit topic")}
                  </Link>
                </li>
              </ul>
            </div>
            <div class="cell topic_content markdown_body">
              <h3>{i18next.t("topic:Topic meta information")}</h3>
              <table cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                  <td align="right" width="120">
                    ID
                  </td>
                  <td align="left">{this.state.topic?.id}</td>
                </tr>
                <tr>
                  <td align="right">{i18next.t("topic:Creator")}</td>
                  <td align="left">
                    <Link to={`/member/${this.state.topic?.author}`}>
                      {this.state.topic?.author}
                    </Link>
                  </td>
                </tr>
                <tr>
                  <td align="right">{i18next.t("topic:Node")}</td>
                  <td align="left">
                    <Link to={`/go/${this.state.topic?.nodeId}`}>
                      {this.state.topic?.nodeName}
                    </Link>
                  </td>
                </tr>
                <tr>
                  <td align="right">{i18next.t("topic:Text syntax format")}</td>
                  <td align="left">Markdown</td>
                </tr>
                <tr>
                  <td align="right">{i18next.t("topic:Hot")}</td>
                  <td align="left">{this.state.topic?.hot}</td>
                </tr>
                <tr>
                  <td align="right">{i18next.t("topic:Topic created")}</td>
                  <td align="left">
                    {Setting.getPrettyDate(this.state.topic?.createdTime)}
                  </td>
                </tr>
                <tr>
                  <td align="right">{i18next.t("topic:Sticky state")}</td>
                  <td align="left">否</td>
                </tr>
                <tr>
                  <td align="right">
                    {i18next.t("topic:Remaining time to top")}
                  </td>
                  <td align="left">0</td>
                </tr>
                <tr>
                  <td align="right">{i18next.t("topic:Movable")}</td>
                  <td align="left">
                    {Setting.getBoolConvertedText(this.state.topic?.editable)}
                  </td>
                </tr>
                <tr>
                  <td align="right">{i18next.t("topic:Editable")}</td>
                  <td align="left">
                    {Setting.getBoolConvertedText(this.state.topic?.editable)}
                  </td>
                </tr>
                <tr>
                  <td align="right">{i18next.t("topic:Appendable")}</td>
                  <td align="left">否</td>
                </tr>
              </table>
            </div>
            <div class="cell topic_content markdown_body">
              <h3>{i18next.t("topic:Related resources")}</h3>
              <ul>
                <li>
                  <Link to={`/go/${this.state.topic?.nodeId}`}>
                    {this.state.topic?.nodeName}
                  </Link>
                  <Link to="/help/currency">
                    {i18next.t("topic:Virtual currency system")}
                  </Link>
                </li>
                <li>
                  <Link to="/help/node">
                    {i18next.t("topic:Node usage help")}
                  </Link>
                </li>
                <li>
                  <Link to="/help/spam">
                    {i18next.t("topic:Treatment of link handling type spam")}
                  </Link>
                </li>
              </ul>
            </div>
          </div>
        );
      }
  
      return (
        <div>
          <div
            className={`box ${this.state.topic.nodeId}`}
            style={{ borderBottom: "0px" }}
          >
            <div className={`header ${this.state.topic.nodeId}`}>
              <div className="fr">
                <Avatar
                  username={this.state.topic?.author}
                  size={pcBrowser ? "large" : "middle"}
                  avatar={this.state.topic?.avatar}
                />
              </div>
              <Link to="/" className={`${this.state.topic?.nodeId}`}>
                {Setting.getForumName()}
              </Link>{" "}
              <span className="chevron">&nbsp;›&nbsp;</span>{" "}
              <Link
                to={`/go/${this.state.topic?.nodeId}`}
                className={`${this.state.topic?.nodeId}`}
              >
                {this.state.topic?.nodeName}
              </Link>
              <div className="sep10" />
              <h1>{this.state.topic?.title}</h1>
              {Setting.PcBrowser ? (
                <span>
                  <div id="topic_677954_votes" className="votes">
                    <a
                      href="javascript:"
                      onClick="upVoteTopic(677954);"
                      className={`vote ${this.state.topic.nodeId}`}
                    >
                      <li className="fa fa-chevron-up" />
                    </a>{" "}
                    &nbsp;
                    <a
                      href="javascript:"
                      onClick="downVoteTopic(677954);"
                      className={`vote ${this.state.topic.nodeId}`}
                    >
                      <li className="fa fa-chevron-down" />
                    </a>
                  </div>
                  &nbsp;{" "}
                </span>
              ) : null}
              <small className="gray">
                <Link
                  to={`/member/${this.state.topic?.author}`}
                  className={`${this.state.topic.nodeId}`}
                >
                  {this.state.topic?.author}
                </Link>{" "}
                · {Setting.getPrettyDate(this.state.topic?.createdTime)} ·{" "}
                {this.state.topic?.hitCount} {i18next.t("topic:hits")}
                &nbsp;{" "}
                {this.props.account?.isModerator ? (
                  <span>
                    {this.state.topic?.homePageTopTime === "" ? (
                      <span>
                        <a
                          href="javascript:void(0);"
                          onClick={() => this.topTopic("homePage")}
                          className="op"
                        >
                          {i18next.t("topic:HomePageTop")}
                        </a>
                        &nbsp;{" "}
                      </span>
                    ) : (
                      <span>
                        <a
                          href="javascript:void(0);"
                          onClick={() => this.cancelTopTopic("homePage")}
                          className="op"
                        >
                          {i18next.t("topic:CancelHomePageTop")}
                        </a>
                        &nbsp;{" "}
                      </span>
                    )}
                    {this.state.topic?.tabTopTime === "" ? (
                      <span>
                        <a
                          href="javascript:void(0);"
                          onClick={() => this.topTopic("tab")}
                          className="op"
                        >
                          {i18next.t("topic:TabTop")}
                        </a>
                        &nbsp;{" "}
                      </span>
                    ) : (
                      <span>
                        <a
                          href="javascript:void(0);"
                          onClick={() => this.cancelTopTopic("tab")}
                          className="op"
                        >
                          {i18next.t("topic:CancelTabTop")}
                        </a>
                        &nbsp;{" "}
                      </span>
                    )}
                    {this.state.topic?.nodeTopTime === "" ? (
                      <span>
                        <a
                          href="javascript:void(0);"
                          onClick={() => this.topTopic("node")}
                          className="op"
                        >
                          {i18next.t("topic:NodeTop")}
                        </a>
                        &nbsp;{" "}
                      </span>
                    ) : (
                      <span>
                        <a
                          href="javascript:void(0);"
                          onClick={() => this.cancelTopTopic("node")}
                          className="op"
                        >
                          {i18next.t("topic:CancelNodeTop")}
                        </a>
                        &nbsp;{" "}
                      </span>
                    )}
                  </span>
                ) : this.state.topic?.nodeModerator ? (
                  <span>
                    {this.state.topic?.nodeTopTime === "" ? (
                      <span>
                        <a
                          href="javascript:void(0);"
                          onClick={() => this.topTopic("node")}
                          className="op"
                        >
                          {i18next.t("topic:NodeTop")}
                        </a>
                        &nbsp;{" "}
                      </span>
                    ) : (
                      <span>
                        <a
                          href="javascript:void(0);"
                          onClick={() => this.cancelTopTopic("node")}
                          className="op"
                        >
                          {i18next.t("topic:CancelNodeTop")}
                        </a>
                        &nbsp;{" "}
                      </span>
                    )}
                  </span>
                ) : null}
                {this.state.topic?.editable ? (
                  <span>
                    <Link
                      to={`/edit/topic/${this.state.topic?.id}`}
                      className="op"
                    >
                      {i18next.t("topic:EDIT")}
                    </Link>
                    &nbsp;{" "}
                    <Link
                      to={`/move/topic/${this.state.topic?.id}`}
                      className="op"
                    >
                      {i18next.t("topic:MOVE")}
                    </Link>
                    &nbsp;{" "}
                    {this.props.account?.isModerator ||
                    this.state.topic?.nodeModerator ? (
                      <Link
                        onClick={() => this.deleteTopic()}
                        to="javascript:void(0);"
                        className="op"
                      >
                        {i18next.t("topic:DELETE")}
                      </Link>
                    ) : null}
                  </span>
                ) : null}
              </small>
            </div>
            {this.renderOutdatedProblem()}
            <div className={`cell ${this.state.topic.nodeId}`}>
              <div className={`topic_content ${this.state.topic.nodeId}`}>
                <div className="markdown_body">
                  <ReactMarkdown
                    renderers={{
                      image: this.renderImage,
                      link: this.renderLink,
                    }}
                    source={Setting.getFormattedContent(
                      this.state.topic?.content,
                      true
                    )}
                    escapeHtml={false}
                  />
                </div>
              </div>
            </div>
            {Setting.PcBrowser
              ? this.renderDesktopButtons()
              : this.renderMobileButtons()}
          </div>
          {pcBrowser ? <div className="sep20" /> : <div className="sep5" />}
          <ReplyBox account={this.props.account} topic={this.state.topic} />
          {pcBrowser ? <div className="sep20" /> : <div className="sep5" />}
          {this.props.account?.isModerator ? this.renderTopTopic() : null}
        </div>
      );
    }
  }
  
  export default withRouter(TopicBox);
  