KarrLab/datanator_frontend

import React, { Component } from "react";
import { HashLink } from "react-router-hash-link";
import { scrollTo } from "~/utils/utils";
import { MetadataSection } from "./MetadataSection";
import { ConcentrationDataTable } from "./ConcentrationDataTable";
import Error404 from "~/scenes/Error404/Error404";

import "../BiochemicalEntityDetails.scss";

export default class Metabolite extends Component {
  constructor() {
    super();
    this.state = { metadata: null };
  }

  setMetadata(metadata) {
    this.setState({ metadata: metadata });
  }

  render() {
    if (this.state.metadata && this.state.metadata.error404) {
      return <Error404 />;
    }

    return (
      <div>
        <div
          className={
            "loader-full-content-container" +
            (this.state.metadata ? " hide" : "")
          }
        >
          <div className="loader"></div>
        </div>

        <div
          className={
            "content-container biochemical-entity-scene biochemical-entity-metabolite-scene" +
            (this.state.metadata ? "" : " hide")
          }
        >
          <h1 className="page-title">
            Metabolite:{" "}
            <span className="highlight-accent">
              {this.state.metadata ? this.state.metadata.title : ""}
            </span>
            {this.state.metadata && this.state.metadata.organism && (
              <span>
                <span className="highlight-text"> in </span>
                <span className="highlight-accent">
                  {this.state.metadata.organism}
                </span>
              </span>
            )}
          </h1>
          <div className="content-container-columns">
            <div className="overview-column">
              <div className="content-block table-of-contents">
                <h2 className="content-block-heading">Contents</h2>
                <div className="content-block-content">
                  <ul>
                    {this.state.metadata &&
                      this.state.metadata.metadataSections.map((section) => (
                        <li key={section.id}>
                          <HashLink scroll={scrollTo} to={"#" + section.id}>
                            {section.title}
                          </HashLink>
                        </li>
                      ))}
                    <li key="concentration">
                      <HashLink scroll={scrollTo} to="#concentration">
                        Concentration
                      </HashLink>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <div className="content-column section">
              <MetadataSection
                set-scene-metadata={this.setMetadata.bind(this)}
              />
              <ConcentrationDataTable
                set-scene-metadata={this.setMetadata.bind(this)}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}