81 lines
3.3 KiB
TypeScript
81 lines
3.3 KiB
TypeScript
import React, { useState } from "react";
|
|
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
|
import "./styles.css";
|
|
|
|
import Login from "./components/login/Login";
|
|
import Home from "./components/home/Home";
|
|
import Contacts from "./components/contacts/Contacts";
|
|
import Calendar from "./components/calendar/Calendar";
|
|
import Navbar from "./components/navbar/Navbar";
|
|
import { ThemeProvider } from "@emotion/react";
|
|
import ProtectedRoute from "./ProtectedRoute";
|
|
|
|
import Theme from "./Theme";
|
|
|
|
import "./style/App.css";
|
|
import Sidebar from "./components/sidebar/Sidebar";
|
|
import {
|
|
MeetingStatus,
|
|
SidebarUserObj,
|
|
} from "./components/sidebar/SidebarUser";
|
|
import MeetingDetails from "./components/meeting-details/MeetingDetails";
|
|
import { Box } from "@mui/material";
|
|
|
|
const App: React.FC = () => {
|
|
const [meetingInfoOpen, setMeetingInfoOpen] = useState(false);
|
|
|
|
/* Temporary data */
|
|
const [sidebarUsers] = useState<SidebarUserObj[]>([
|
|
{ id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.ONLINE },
|
|
{ id: 1, name: "Matt B.", meetingStatus: MeetingStatus.IN_MEETING },
|
|
{ id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.OFFLINE },
|
|
{ id: 3, name: "Bob A.", meetingStatus: MeetingStatus.AWAY },
|
|
{ id: 4, name: "Bob B.", meetingStatus: MeetingStatus.IN_MEETING },
|
|
{ id: 5, name: "Bob C.", meetingStatus: MeetingStatus.OFFLINE },
|
|
{ id: 6, name: "Bob D.", meetingStatus: MeetingStatus.ONLINE },
|
|
{ id: 7, name: "Bob E.", meetingStatus: MeetingStatus.AWAY },
|
|
{ id: 8, name: "Bob F.", meetingStatus: MeetingStatus.OFFLINE },
|
|
{ id: 9, name: "Bob G.", meetingStatus: MeetingStatus.ONLINE },
|
|
{ id: 10, name: "Bob H.", meetingStatus: MeetingStatus.AWAY },
|
|
{ id: 11, name: "Bob I.", meetingStatus: MeetingStatus.OFFLINE },
|
|
{ id: 12, name: "Bob J.", meetingStatus: MeetingStatus.AWAY },
|
|
{ id: 13, name: "Bob K.", meetingStatus: MeetingStatus.IN_MEETING },
|
|
{ id: 14, name: "Bob L.", meetingStatus: MeetingStatus.IN_MEETING },
|
|
{ id: 15, name: "Bob M.", meetingStatus: MeetingStatus.OFFLINE },
|
|
{ id: 16, name: "Bob N.", meetingStatus: MeetingStatus.OFFLINE },
|
|
{ id: 17, name: "Bob O.", meetingStatus: MeetingStatus.AWAY },
|
|
{ id: 18, name: "Bob P.", meetingStatus: MeetingStatus.AWAY },
|
|
{ id: 19, name: "Bob Q.", meetingStatus: MeetingStatus.ONLINE },
|
|
{ id: 20, name: "Bob R.", meetingStatus: MeetingStatus.ONLINE },
|
|
]);
|
|
|
|
return (
|
|
<ThemeProvider theme={Theme}>
|
|
<Router>
|
|
<Navbar />
|
|
<Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
|
|
<Box sx={{ flexGrow: 1 }}>
|
|
<Routes>
|
|
<Route path="/login" element={<Login />} />
|
|
<Route element={<ProtectedRoute />}>
|
|
<Route path="/" element={<Home />} />
|
|
<Route
|
|
path="/contacts"
|
|
element={<Contacts setMeetingInfoOpen={setMeetingInfoOpen} />}
|
|
/>
|
|
<Route path="/calendar" element={<Calendar />} />
|
|
</Route>
|
|
</Routes>
|
|
</Box>
|
|
<Box>
|
|
<Sidebar users={sidebarUsers} />
|
|
</Box>
|
|
</Box>
|
|
<MeetingDetails open={meetingInfoOpen} setOpen={setMeetingInfoOpen} />
|
|
</Router>
|
|
</ThemeProvider>
|
|
);
|
|
};
|
|
|
|
export default App;
|