text: // Copyright 2021 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 { withRouter, Link } from "react-router-dom";
  import PageColumn from "./PageColumn";
  import i18next from "i18next";
  import TopicList from "./TopicList";
  
  class SearchTag extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        classes: props,
        tagId: props.match.params.tagId,
        page: 1,
        limit: 20,
        topics: [],
        topicNum: 1,
        url: "",
      };
      this.state.url = `/tag/${this.state.tagId}`;
    }
  
    componentDidMount() {
      TopicBackend.getTopicsWithTag(this.state.tagId, this.state.limit, this.state.page).then((res) => {
        this.setState({
          topics: res,
          topicNum: res.length,
        });
      });
    }
  
    showPageColumn() {
      if (this.state.topicNum < this.state.limit) {
        return null;
      }
  
      return <PageColumn page={this.state.page} total={this.state.topicNum} url={this.state.url} tagId={this.state.tagId} />;
    }
  
    renderTag() {
      return (
        <div className={`box ${this.state.tagId}`}>
          <div className="cell" align="center" style={{ border: 0 }}>
            <div className="header">
              <Link to="/">{Setting.getForumName()}</Link> <span className="chevron">&nbsp;›&nbsp;</span>
              <span className="chevron">{this.state.tagId}</span>{" "}
              <span className="gray" style={{ float: "right" }}>
                {`${i18next.t("node:all")} ${this.state.topicNum} ${i18next.t("node:topics")}`}
              </span>
            </div>
          </div>
          <TopicList topics={this.state.topics} showNodeName={false} showAvatar={true} />
          {this.showPageColumn()}
        </div>
      );
    }
  
    render() {
      const pcBrowser = Setting.PcBrowser;
  
      if (this.state.topics.length === 0) {
        return (
          <div>
            <div className="box">
              <div className="header">
                <Link to="/">{Setting.getForumName()}</Link> <span className="chevron">&nbsp;›&nbsp;</span>
                {i18next.t("tag:No related pages with tags")}
              </div>
            </div>
          </div>
        );
      }
  
      return (
        <div>
          {this.renderTag()}
          {pcBrowser ? <div className="sep20" /> : null}
        </div>
      );
    }
  }
  
  export default withRouter(SearchTag);
  