Newer
Older
import React from "react";
import "./App.scss";
import TopBar from "./organisms/TopBar";
import BottomBar from "./organisms/BottomBar";
import StandardView from "./pages/StandardView";
import { Switch, Route } from "react-router-dom";
import SignIn from "./pages/SignIn";
import SettingsModal from "./pages/SettingsModal";
showSettings: boolean;
fileView: string;
this.state = {
toggledLeft: false,
toggledRight: false,
showSettings: false,
fileView: localStorage.getItem("fileView") || "card"
}
componentDidMount() {
document.documentElement.style.fontSize = `${localStorage.getItem(
"interfaceSize"
window.addEventListener("resize", () => {
if (window.innerWidth !== this.width) {
this.width = window.innerWidth;
this.showOrHideSideBars();
}
});
this.showOrHideSideBars();
}
if (window.innerWidth <= 1024) {
this.setState(state => ({
toggledLeft: !state.toggledLeft
if (window.innerWidth <= 1024) {
this.setState(state => ({
toggledRight: !state.toggledRight
showOrHideSideBars() {
if (window.innerWidth <= 1024) {
});
} else {
this.setState({
toggledLeft: 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 }
<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}
e.preventDefault();
this.toggleLeftBar();
}}
e.preventDefault();
this.toggleRightBar();
}}
/>
onSettingsClick={() => this.setState({ showSettings: true })}
toggledLeft={this.state.toggledLeft}
toggledRight={this.state.toggledRight}
e.preventDefault();
this.setState({ toggledLeft: false, toggledRight: false });
}}
fileView={this.state.fileView}
<BottomBar pages={horizontalBarPages} />
</Route>
</Switch>