App.js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Query } from "react-apollo";
import jwtDecode from "jwt-decode";

import "./styles/styleIndex";
import {
  Header,
  Footer,
  Home,
  HomeNoLogin,
  HomeWaiting,
  AuthController,
  SignupOne,
  SignupTwo,
  HomeShowcase,
  ImmersiveContainer,
  AdminImmersiveContainer,
  ImmersiveHeader,
  AdminImmersiveHeader
} from "./components";
import AdminHomeContainer from "./components/admin/home/AdminHomeContainer";
import MakeNewCourseContainer from "./components/admin/home/MakeNewCourseContainer";
import AdminHomeShowcase from "./components/admin/showcase/AdminHomeShowcase";
import Loading from "./components/Loading";
import { GET_IMMERSIVE } from "./apollo/queries";

class App extends Component {
  state = {
    isLogin: false,
    isAdmin: false,
    imBatch: null,
    userId: null,
    isLecture: true,
    isRefer: false,
    sidebarOpen: false
  };

  // Auth 다루기 (로그인, 어드민, 어떤유저인지)
  handleAuth = () => {
    const token = localStorage.getItem("token");
    if (!token) {
      return alert("여기서는 토큰이 없으면 안돼! 로직을 다시 살펴보자");
    }
    const decoded = jwtDecode(token);
    const { exp, isAdmin, userId } = decoded;

    // Checking if token is expired.
    if (exp < Date.now() / 1000) {
      this.handleLogout();
      return alert("토큰이 만료 되었네요! 다시 로그인을 해주시겠어요?");
    }
    this.setState({
      isLogin: true,
      isAdmin,
      imBatch: decoded.imBatch,
      userId
    });
  };

  // 로그아웃 다루기
  handleLogout = async () => {
    await localStorage.removeItem("token");
    await this.setState({
      isLogin: false,
      isAdmin: false,
      imBatch: null,
      userId: null
    });
    window.location.replace("https://learnco.codestates.com");
  };

  // 강의 탭 토글
  handleToggleLecture = () => {
    const { isLecture } = this.state;
    if (isLecture) return;
    this.setState({
      isLecture: true,
      isRefer: false
    });
  };

  // 레퍼런스 탭 토글
  handleToggleRefer = () => {
    const { isRefer } = this.state;
    if (isRefer) return;
    this.setState({
      isLecture: false,
      isRefer: true
    });
  };

  // 햄버거바 토글
  handleHamburgerBarClick = () => {
    this.setState({
      sidebarOpen: !this.state.sidebarOpen
    });
  };

  // 강좌 클릭시 햄버거바 닫기
  closeHamburgerBarClick = () => {
    this.setState({
      sidebarOpen: false
    });
  };

  componentDidMount() {
    const token = localStorage.getItem("token");
    if (token) {
      const decoded = jwtDecode(token);

      // Checking if token is expired.
      if (decoded.exp < Date.now() / 1000) {
        alert("로그아웃 되었습니다. 다시 로그인 해주세요.");
        return this.handleLogout();
      }

      this.setState({
        isLogin: true,
        isAdmin: decoded.isAdmin,
        imBatch: decoded.imBatch,
        userId: decoded.userId
      });
    }
  }

  render() {
    const {
      isLecture,
      isRefer,
      isLogin,
      isAdmin,
      imBatch,
      sidebarOpen
    } = this.state;

    const sidebarClassName = sidebarOpen ? "" : "mobile-display-none";
    const contentClassName = sidebarOpen ? "mobile-display-none" : "";
    const sidebarIcon = sidebarOpen
      ? "fas fa-chevron-circle-left"
      : "fas fa-chevron-circle-right";

    if (!isLogin) {
      return (
        <Router>
          <div className="App">
            <div className="header">
              <Switch>
                <Route
                  exact
                  path="/"
                  render={({ match, history }) => (
                    <Header
                      isLogin={isLogin}
                      handleLogout={this.handleLogout}
                      match={match}
                      history={history}
                    />
                  )}
                />
                <Route
                  path="/signup"
                  render={({ match }) => (
                    <Header isLogin={isLogin} match={match} />
                  )}
                />
              </Switch>
            </div>
            <div className="showcase">
              <Switch>
                <Route
                  exact
                  path="/"
                  render={() => <HomeShowcase isLogin={isLogin} />}
                />
                )}
              </Switch>
            </div>
            <div className="body">
              <Switch>
                <Route exact path="/" render={() => <HomeNoLogin />} />
                <Route exact path="/signup" component={SignupOne} />
                <Route
                  path="/signup/additional/:githubId/:userId"
                  render={({ match, history }) => (
                    <SignupTwo match={match} history={history} />
                  )}
                />
                />
                <Route
                  path="/temp"
                  render={({ match, history }) => (
                    <AuthController
                      match={match}
                      history={history}
                      handleAuth={this.handleAuth}
                    />
                  )}
                />
              </Switch>
            </div>
            <div className="footer">
              <Switch>
                <Route exact path="/" component={Footer} />
              </Switch>
            </div>
          </div>
        </Router>
      );
    }
    if (!isAdmin && !imBatch) {
      return (
        <Router>
          <div className="App">
            <div className="header">
              <Switch>
                <Route
                  exact
                  path="/"
                  render={({ match, history }) => (
                    <Header
                      isLogin={isLogin}
                      handleLogout={this.handleLogout}
                      match={match}
                      history={history}
                    />
                  )}
                />
                <Route
                  path="/signup"
                  render={({ match }) => (
                    <Header isLogin={isLogin} match={match} />
                  )}
                />
              </Switch>
            </div>
            <div className="showcase">
              <Switch>
                <Route
                  exact
                  path="/"
                  render={() => <HomeShowcase isLogin={isLogin} />}
                />
                )}
              </Switch>
            </div>
            <div className="body">
              <Switch>
                <Route exact path="/" render={() => <HomeWaiting />} />
                <Route exact path="/signup" component={SignupOne} />
                <Route
                  path="/signup/additional/:githubId/:userId"
                  render={({ match, history }) => (
                    <SignupTwo match={match} history={history} />
                  )}
                />
                />
                <Route
                  path="/temp"
                  render={({ match, history }) => (
                    <AuthController
                      match={match}
                      history={history}
                      handleAuth={this.handleAuth}
                    />
                  )}
                />
              </Switch>
            </div>
            <div className="footer">
              <Switch>
                <Route exact path="/" component={Footer} />
              </Switch>
            </div>
          </div>
        </Router>
      );
    }

    return (
      <Query query={GET_IMMERSIVE}>
        {({ loading, data, error }) => {
          if (loading)
            return (
              <div className="home-container">
                <Loading />
              </div>
            );
          if (error) {
            console.log(error);
            return <span>something happened</span>;
          }

          // 기수배정 해지된 수강생 예외 처리 (강제 로그아웃 시키기);
          if (!data.getImmersive) return this.handleLogout();

          return (
            <Router>
              <div className="App">
                <div className="header">
                  <Switch>
                    <Route
                      exact
                      path="/"
                      render={({ match, history }) => (
                        <Header
                          isLogin={isLogin}
                          handleLogout={this.handleLogout}
                          match={match}
                          history={history}
                        />
                      )}
                    />
                    <Route
                      path="/signup"
                      render={({ match }) => (
                        <Header isLogin={isLogin} match={match} />
                      )}
                    />
                    <Route
                      path="/newcourse"
                      render={({ match }) => (
                        <Header isLogin={isLogin} match={match} />
                      )}
                    />
                    <Route
                      path="/admin-immersive/:batch"
                      render={({ match, history }) => (
                        <AdminImmersiveHeader
                          match={match}
                          history={history}
                          isAdmin={isAdmin}
                        />
                      )}
                    />
                    <Route
                      path="/immersive/:batch"
                      render={({ match }) => (
                        <ImmersiveHeader
                          match={match}
                          isAdmin={isAdmin}
                          sidebarIcon={sidebarIcon}
                          handleHamburgerBarClick={this.handleHamburgerBarClick}
                        />
                      )}
                    />
                  </Switch>
                </div>
                <div className="showcase">
                  <Switch>
                    {isAdmin ? (
                      <Route
                        exact
                        path="/"
                        render={() => (
                          <AdminHomeShowcase
                            immersiveId={data.getImmersive_id}
                          />
                        )}
                      />
                    ) : (
                      <Route
                        exact
                        path="/"
                        render={() => <HomeShowcase isLogin={isLogin} />}
                      />
                    )}
                  </Switch>
                </div>
                <div className="body">
                  <Switch>
                    {isAdmin ? (
                      <Route
                        exact
                        path="/"
                        render={() => (
                          <AdminHomeContainer batch={data.getImmersive.batch} />
                        )}
                      />
                    ) : (
                      <Route
                        exact
                        path="/"
                        render={() => <Home batch={data.getImmersive.batch} />}
                      />
                    )}
                    <Route
                      exact
                      path="/newcourse"
                      render={({ history }) => (
                        <MakeNewCourseContainer history={history} />
                      )}
                    />
                    <Route exact path="/signup" component={SignupOne} />
                    <Route
                      path="/signup/additional/:githubId/:userId"
                      render={({ match, history }) => (
                        <SignupTwo match={match} history={history} />
                      )}
                    />
                    <Route
                      path="/admin-immersive/:batch"
                      render={({ match }) => (
                        <AdminImmersiveContainer
                          match={match}
                          isAdmin={isAdmin}
                          isLecture={isLecture}
                          isRefer={isRefer}
                          handleToggleLecture={this.handleToggleLecture}
                          handleToggleRefer={this.handleToggleRefer}
                        />
                      )}
                    />
                    <Route
                      path="/immersive/:batch"
                      render={({ match, history }) => (
                        <ImmersiveContainer
                          match={match}
                          isLecture={isLecture}
                          isRefer={isRefer}
                          sidebarClassName={sidebarClassName}
                          contentClassName={contentClassName}
                          closeHamburgerBarClick={this.closeHamburgerBarClick}
                          handleToggleLecture={this.handleToggleLecture}
                          handleToggleRefer={this.handleToggleRefer}
                        />
                      )}
                    />
                    <Route
                      path="/temp"
                      render={({ match, history }) => (
                        <AuthController
                          match={match}
                          history={history}
                          handleAuth={this.handleAuth}
                        />
                      )}
                    />
                  </Switch>
                </div>
                <div className="footer">
                  <Switch>
                    <Route exact path="/" component={Footer} />
                    <Route path="/signup" component={Footer} />
                    <Route path="/newcourse" component={Footer} />
                  </Switch>
                </div>
              </div>
            </Router>
          );
        }}
      </Query>
    );
  }
}
export default App;