App.tsx

import React from "react";
import "./App.scss";
import TopBar from "./organisms/TopBar";
import BottomBar from "./organisms/BottomBar";
import {
  faBookOpen,
  faHome,
  faCalendarWeek,
  faChalkboardTeacher,
} from "@fortawesome/free-solid-svg-icons";
import StandardView from "./pages/StandardView";
import { Switch, Route } from "react-router-dom";
import SignIn from "./pages/SignIn";
import SettingsModal from "./pages/SettingsModal";

type AppState = {
  toggledLeft: boolean;
  toggledRight: boolean;
	showSettings: boolean;
	fileView: string;
};

class App extends React.Component<{}, AppState> {
  width = window.innerWidth;
  constructor(props: {}) {
    super(props);
    this.state = {
      toggledLeft: false,
      toggledRight: false,
			showSettings: false,
			fileView: localStorage.getItem("fileView") || "card",
    };
  }

  componentDidMount() {
		document.documentElement.style.fontSize = `${localStorage.getItem("interfaceSize") || "100"}%`;
    

    window.addEventListener("resize", () => {
      if (window.innerWidth !== this.width) {
        this.width = window.innerWidth;
        this.showOrHideSideBars();
      }
    });
    this.showOrHideSideBars();
  }

  toggleLeftBar() {
    if (window.innerWidth <= 1024) {
      this.setState({
        toggledRight: false,
      });
    }
    this.setState((state) => ({
      toggledLeft: !state.toggledLeft,
    }));
  }

  toggleRightBar() {
    if (window.innerWidth <= 1024) {
      this.setState({
        toggledLeft: false,
      });
    }
    this.setState((state) => ({
      toggledRight: !state.toggledRight,
    }));
  }

  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 },
      { name: "Modules", path: "/modules", icon: faChalkboardTeacher },
      { name: "Timeline", path: "/timeline", icon: faCalendarWeek },
      { name: "Exams", path: "/exams", icon: faBookOpen },
    ];

    return (
      <>
        <SettingsModal
          show={this.state.showSettings}
					onHide={() => this.setState({ showSettings: false })}
					fileView={this.state.fileView}
					onCardViewClick={() => this.setFileView("card")}
					onListViewClick={() => this.setFileView("list")}
        />

        <Switch>
          <Route path="/signin">
            <SignIn />
          </Route>

          <Route path="/">
            <TopBar
              pages={horizontalBarPages}
              onFavIconClick={(e) => {
                e.preventDefault();
                this.toggleLeftBar();
              }}
              onUserIconClick={(e) => {
                e.preventDefault();
                this.toggleRightBar();
              }}
            />

            <StandardView
              onSettingsClick={() => this.setState({ showSettings: true })}
              toggledLeft={this.state.toggledLeft}
              toggledRight={this.state.toggledRight}
              onOverlayClick={(e) => {
                e.preventDefault();
                this.setState({ toggledLeft: false, toggledRight: false });
							}}
							fileView={this.state.fileView}
            />

            <BottomBar pages={horizontalBarPages} />
          </Route>
        </Switch>
      </>
    );
  }
}

export default App;