educoder/public/react/src/modules/user/AccountPage.js

import React, { Component } from 'react';

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import {CNotificationHOC} from '../courses/common/CNotificationHOC'
import Loading from '../../Loading';

import Loadable from 'react-loadable';

import { TPMIndexHOC } from '../tpm/TPMIndexHOC';

import { SnackbarHOC, getImageUrl } from 'educoder';
import AccountNav from './account/AccountNav'
import axios from 'axios'

const AccountBasic= Loadable({
  loader: () => import('./account/AccountBasic'),
  loading: Loading,
})
const AccountBasicEdit= Loadable({
  loader: () => import('./account/AccountBasicEdit'),
  loading: Loading,
})

const AccountCertification= Loadable({
  loader: () => import('./account/AccountCertification'),
  loading: Loading,
})
const AccountSecure= Loadable({
  loader: () => import('./account/AccountSecure'),
  loading: Loading,
})

class AccountPage extends Component {
  constructor (props) {
    super(props)
    this.state = {
      basicInfo:undefined
    }
  }

  componentDidUpdate =(prevState)=>{
    if(this.props.current_user && this.props.current_user != prevState.current_user){
      this.getBasicInfo(this.props.current_user.login);
    }
  }

  componentDidMount = () =>{
    if(this.props.current_user){
      this.getBasicInfo(this.props.current_user.login);
    }
  }

  getBasicInfo=(login)=>{
    let url=`/users/accounts/${login || this.props.current_user.login}.json`;
    axios.get(url).then((result)=>{
      if(result.data){
        if(result.data && result.data.base_info_completed == false){
          this.props.history.push(`/account/basic/edit`);
        }
        this.setState({
          basicInfo: Object.assign({}, {...result.data}, { avatar_url: `${result.data.avatar_url}?t=${new Date().getTime()}`})
        })
      }
    }).catch((error)=>{
      console.log(error);
    })
  }
    render() {
      let { basicInfo }=this.state;
      const common = { basicInfo, getBasicInfo : this.getBasicInfo }
      return (
          <div className="newMain clearfix">
            <div className="educontent df pt20">
              <style>{`
                .accountPage {
                  display: flex;
                }
              `}</style>
              <AccountNav {...this.props} {...common}></AccountNav>
              <div className="basicFormWrap">
                <Switch {...this.props}>
                  <Route exact path="/account/basic"
                          render={
                            (props) => (<AccountBasic {...this.props} {...props} {...this.state} {...common} />)
                          }
                  ></Route>
                  <Route exact path="/account/basic/edit"
                          render={
                            (props) => (<AccountBasicEdit {...this.props} {...props} {...this.state} {...common} />)
                          }
                  ></Route>

                  <Route exact path="/account/certification"
                          render={
                            (props) => (<AccountCertification {...this.props} {...props} {...this.state} {...common} />)
                          }
                  ></Route>

                  <Route exact path="/account/secure"
                          render={
                            (props) => (<AccountSecure {...this.props} {...props} {...this.state} {...common} />)
                          }
                  ></Route>

                  <Route exact path="/account"
                          render={
                            (props) => (<AccountBasic {...this.props} {...props} {...this.state} {...common} />)
                          }
                  ></Route>
                </Switch>
              </div>
            </div>
          </div>
      );
    }
}

export default CNotificationHOC()(SnackbarHOC() ( TPMIndexHOC ( AccountPage )));