Skip to content
Snippets Groups Projects
App.tsx 3.57 KiB
Newer Older
import React from "react";
import "./App.scss";
import TopBar from "./organisms/TopBar";
import BottomBar from "./organisms/BottomBar";
danieldeng2's avatar
danieldeng2 committed
import {
  faBookOpen,
danieldeng2's avatar
danieldeng2 committed
  faCalendarWeek,
  faChalkboardTeacher
danieldeng2's avatar
danieldeng2 committed
} from "@fortawesome/free-solid-svg-icons";
import StandardView from "./pages/StandardView";
danieldeng2's avatar
danieldeng2 committed
import { Switch, Route } from "react-router-dom";
import SignIn from "./pages/SignIn";
danieldeng2's avatar
danieldeng2 committed
import SettingsModal from "./pages/SettingsModal";
danieldeng2's avatar
danieldeng2 committed
type AppState = {
  toggledLeft: boolean;
danieldeng2's avatar
danieldeng2 committed
  toggledRight: boolean;
  showSettings: boolean;
  fileView: string;
danieldeng2's avatar
danieldeng2 committed
class App extends React.Component<{}, AppState> {
  width = window.innerWidth;
  constructor(props: {}) {
    super(props);
danieldeng2's avatar
danieldeng2 committed
    this.state = {
      toggledLeft: false,
      toggledRight: false,
      showSettings: false,
      fileView: localStorage.getItem("fileView") || "card"
danieldeng2's avatar
danieldeng2 committed
    };
    document.documentElement.style.fontSize = `${localStorage.getItem(
      "interfaceSize"
    ) || "90"}%`;

    window.addEventListener("resize", () => {
      if (window.innerWidth !== this.width) {
        this.width = window.innerWidth;
        this.showOrHideSideBars();
      }
    });
    this.showOrHideSideBars();
  }
danieldeng2's avatar
danieldeng2 committed
  toggleLeftBar() {
    if (window.innerWidth <= 1024) {
      this.setState({
        toggledRight: false
    this.setState(state => ({
      toggledLeft: !state.toggledLeft
danieldeng2's avatar
danieldeng2 committed
    }));
danieldeng2's avatar
danieldeng2 committed
  toggleRightBar() {
    if (window.innerWidth <= 1024) {
danieldeng2's avatar
danieldeng2 committed
      this.setState({
        toggledLeft: false
    this.setState(state => ({
      toggledRight: !state.toggledRight
danieldeng2's avatar
danieldeng2 committed
    }));
  showOrHideSideBars() {
    if (window.innerWidth <= 1024) {
      this.setState({
        toggledLeft: false,
        toggledRight: false
      });
    } else {
      this.setState({
        toggledLeft: true,
        toggledRight: true
  }

  setFileView(view: string) {
    this.setState({ fileView: view });
    localStorage.setItem("fileView", view);
  }
  render() {
    const horizontalBarPages = [
      { name: "Dashboard", path: "/dashboard", icon: faHome },
danieldeng2's avatar
danieldeng2 committed
      { name: "Modules", path: "/modules", icon: faChalkboardTeacher },
danieldeng2's avatar
danieldeng2 committed
      { name: "Timeline", path: "/timeline", icon: faCalendarWeek },
      { name: "Exams", path: "/exams", icon: faBookOpen }
danieldeng2's avatar
danieldeng2 committed
        <SettingsModal
          show={this.state.showSettings}
          onHide={() => this.setState({ showSettings: false })}
          fileView={this.state.fileView}
          onCardViewClick={() => this.setFileView("card")}
          onListViewClick={() => this.setFileView("list")}
danieldeng2's avatar
danieldeng2 committed
        <Switch>
          <Route path="/signin">
            <SignIn />
          </Route>
danieldeng2's avatar
danieldeng2 committed
          <Route path="/">
            <TopBar
              pages={horizontalBarPages}
              onFavIconClick={e => {
danieldeng2's avatar
danieldeng2 committed
                e.preventDefault();
                this.toggleLeftBar();
              }}
              onUserIconClick={e => {
danieldeng2's avatar
danieldeng2 committed
                e.preventDefault();
                this.toggleRightBar();
              }}
            />
danieldeng2's avatar
danieldeng2 committed
            <StandardView
danieldeng2's avatar
danieldeng2 committed
              onSettingsClick={() => this.setState({ showSettings: true })}
danieldeng2's avatar
danieldeng2 committed
              toggledLeft={this.state.toggledLeft}
              toggledRight={this.state.toggledRight}
              onOverlayClick={e => {
danieldeng2's avatar
danieldeng2 committed
                e.preventDefault();
                this.setState({ toggledLeft: false, toggledRight: false });
              }}
              fileView={this.state.fileView}
danieldeng2's avatar
danieldeng2 committed
            />
danieldeng2's avatar
danieldeng2 committed
            <BottomBar pages={horizontalBarPages} />
          </Route>
        </Switch>
export default App;