@rnga/orders/src/dev/components/layout/index.js

## Get schema from @prisma-cms 1. yarn get-api-schema -e http://localhost:4000 2. yarn build-api-fragments

import React, { Fragment, Component } from "react";
// import Layout from "../index";


import { withStyles } from "material-ui";

import Main from "./main";


const styles = {
  root: {

    maxWidth: 1260,
    margin: "0 auto",

    "& #office-auth-form .form-group": {
      marginBottom: 5,
    },

    "& .office-auth-login-wrapper": {
      marginBottom: 20,
    },

  },

}



export class PublicLayout extends Main {


  constructor(props) {

    super(props);

    this.state = {
      ...this.state,
      tabIndex: "orders",
    }
  }


  renderInstruction() {

    return null;

  }


  setTabIndex(tabIndex) {

    return;

    const {
      uri,
    } = this.context;

    const {
      router: {
        history,
      },
    } = this.props;

    let url;


    url = uri.clone().query({
      tabIndex: tabIndex && tabIndex !== "0" ? tabIndex : undefined,
    }).resource();

    if (!url) {
      return null;
    }


    if (!url) {
      return null;
    }

    history.push(url);

  }

  render() {

    const {
      user: currentUser,
      uri,
    } = this.props;


    const {
      tabIndex,
    } = this.state;

    const {
      classes,
      children,
    } = this.props;

    let content = null;



    // const {
    //   tabIndex = "0",
    // } = uri.query(true);


    const {
      id: currentUserId,
      username,
      fullname,
      email,
    } = currentUser || {};

    let tabsTitles = [
      <div
        key="0"
        className="multi-tabs-title-content-wrapper"
      >
        <div className="section-title-bgr"></div>
        <div className="multi-tabs-title-content">
          {currentUser ? email || fullname || username : "Вход в личный кабинет"}
        </div>
      </div>,
      <div
        key="orders"
        className="multi-tabs-title-content-wrapper"
      >
        <div className="section-title-bgr"></div>
        <div className="multi-tabs-title-content">Текущие заказы</div>
      </div>,
      <div
        key="orders_archive"
        className="multi-tabs-title-content-wrapper"
      >
        <div className="section-title-bgr"></div>
        <div className="multi-tabs-title-content">Архив заказов</div>
      </div>,
      <div
        className="multi-tabs-title-content-wrapper"
        key="instructions"
      >
        <div className="section-title-bgr"></div>
        <div className="multi-tabs-title-content">Инструкция</div>
      </div>
    ];


    let tabs = tabsTitles.map((tab) => {


      const {
        key,
      } = tab;

      return <div
        key={key}
        className={["multi_tabs multi-tabs-title", key === tabIndex ? "active" : undefined].join(" ")}
        onClick={event => {
          event.preventDefault();
          event.stopPropagation();
          // this.setState({
          //   tabIndex: index,
          // })

          this.setTabIndex(key);
        }}
      >
        {tab}
      </div>
    });


    let tabContent;


    switch (tabIndex) {



      /**
       * Orders
       */
      case "orders":

        tabContent = children

        break;

      /**
       * Архив заказов
       */
      case "orders_archive":

        tabContent = "Архив пока не создан"

        break;

      case "instructions":

        tabContent = this.renderInstruction();

        break;


      default:


    }


    let styles;




    styles = <style
      dangerouslySetInnerHTML={{
        __html: `
            @import url("/assets/css/bootstrap.min.css");
            @import url("/assets/css/style.css");
            @import url("/assets/css/colors/green.css");
            @import url("/assets/css/owl.carousel.css");
            @import url("/assets/css/owl.transitions.css");
            @import url("/assets/css/animate.min.css");
            @import url("/assets/fonts/fonts.css");
            @import url("/assets/css/rn_style.css");
            @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");
            @import url("/assets/css/font-awesome.min.css");
            @import url("https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css");
        `,
      }}
    />



    content = <Fragment>


      <link
        rel="stylesheet"
        type="text/css"
        href="/assets/auth_query_form/style.css"
      />

      {styles}


      <div
        className={[classes.root, "multi-tabs-wrapper order-profile-tabs"].join(" ")}
      >

        <div className="multi-tabs-title-wrapper">

          {tabs}

        </div>
        <div className="multi-tabs-content-wrapper">


          <div className="multi-tabs-content active">

            <div className="content-simple-wrapper">
              <div className="page-content-wrapper-with-bgr without-art">
                <div className="page-content-wrapper-bgr"></div>
                <div className="page-content-content">
                  {tabContent}
                </div>
              </div>
            </div>
          </div>


        </div>

      </div>


    </Fragment>



    return super.render(content)
  }
}

export default withStyles(styles)(props => <PublicLayout 
  {...props}
/>);