Self test server

debug.log

@@ -0,0 +1,2 @@
+[1009/151708.453:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
+[1014/202622.802:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

package.json

@@ -35,7 +35,8 @@
     "stylelint-config-recommended-scss": "^3.2.0",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-order": "^0.8.1",
-    "stylelint-scss": "^3.1.3"
+    "stylelint-scss": "^3.1.3",
+    "typescript": "^4.0.3"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -24,6 +24,16 @@ const ProgressPage = React.lazy(() => import('pages/ProgressPage'));
 const TablePage = React.lazy(() => import('pages/TablePage'));
 const TypographyPage = React.lazy(() => import('pages/TypographyPage'));
 const WidgetPage = React.lazy(() => import('pages/WidgetPage'));
+const SuggestPage = React.lazy(() => import('pages/SuggestPage'));
+const CourseSearchPage = React.lazy(() => import('pages/CourseSearchPage'));
+const RequestPage = React.lazy(() => import('pages/RequestPage'));
+const StuSearchPage = React.lazy(() => import('pages/StuSearchPage'));
+const InsSearchPage = React.lazy(() => import('pages/InsSearchPage'));
+const NewsBoardPage = React.lazy(() => import('pages/NewsBoardPage'));
+const FAQsPage = React.lazy(() => import('pages/FAQsPage'));
+const AcaCalenderPage = React.lazy(() => import('pages/AcaCalenderPage'));
+const GPAPage = React.lazy(() => import('pages/GPAPage'));
+const ProfilePage = React.lazy(() => import('pages/ProfilePage'));
 
 const getBasename = () => {
   return `/${process.env.PUBLIC_URL.split('/').pop()}`;
@@ -54,7 +64,7 @@ class App extends React.Component {
 
             <MainLayout breakpoint={this.props.breakpoint}>
               <React.Suspense fallback={<PageSpinner />}>
-                <Route exact path="/" component={DashboardPage} />
+                <Route exact path="/" component={NewsBoardPage} />
                 <Route exact path="/login-modal" component={AuthModalPage} />
                 <Route exact path="/buttons" component={ButtonPage} />
                 <Route exact path="/cards" component={CardPage} />
@@ -63,17 +73,23 @@ class App extends React.Component {
                 <Route exact path="/alerts" component={AlertPage} />
                 <Route exact path="/tables" component={TablePage} />
                 <Route exact path="/badges" component={BadgePage} />
-                <Route
-                  exact
-                  path="/button-groups"
-                  component={ButtonGroupPage}
-                />
+                <Route exact path="/button-groups" component={ButtonGroupPage} />
                 <Route exact path="/dropdowns" component={DropdownPage} />
                 <Route exact path="/progress" component={ProgressPage} />
                 <Route exact path="/modals" component={ModalPage} />
                 <Route exact path="/forms" component={FormPage} />
+                <Route exact path="/request" component={RequestPage} />
+                <Route exact path="/suggest" component={SuggestPage} />
                 <Route exact path="/input-groups" component={InputGroupPage} />
                 <Route exact path="/charts" component={ChartPage} />
+                <Route exact path="/course-class" component={CourseSearchPage}/>
+                <Route exact path="/stu-search" component={StuSearchPage}/>
+                <Route exact path="/ins-search" component={InsSearchPage}/>
+                <Route exact path="/news-board" component={NewsBoardPage}/>
+                <Route exact path="/faqs" component={FAQsPage}/>
+                <Route exact path="/aca-calender" component={AcaCalenderPage}/>
+                <Route exact path="/gpa" component={GPAPage}/>
+                <Route exact path="/profiles" component={ProfilePage}/>
               </React.Suspense>
             </MainLayout>
             <Redirect to="/" />

src/components/Layout/Header.js

@@ -90,33 +90,7 @@ class Header extends React.Component {
         </Nav>
 
         <Nav navbar className={bem.e('nav-right')}>
-          <NavItem className="d-inline-flex">
-            <NavLink id="Popover1" className="position-relative">
-              {isNotificationConfirmed ? (
-                <MdNotificationsNone
-                  size={25}
-                  className="text-secondary can-click"
-                  onClick={this.toggleNotificationPopover}
-                />
-              ) : (
-                <MdNotificationsActiveWithBadge
-                  size={25}
-                  className="text-secondary can-click animated swing infinite"
-                  onClick={this.toggleNotificationPopover}
-                />
-              )}
-            </NavLink>
-            <Popover
-              placement="bottom"
-              isOpen={this.state.isOpenNotificationPopover}
-              toggle={this.toggleNotificationPopover}
-              target="Popover1"
-            >
-              <PopoverBody>
-                <Notifications notificationsData={notificationsData} />
-              </PopoverBody>
-            </Popover>
-          </NavItem>
+
 
           <NavItem>
             <NavLink id="Popover2">
@@ -141,15 +115,6 @@ class Header extends React.Component {
                   className="border-light"
                 >
                   <ListGroup flush>
-                    <ListGroupItem tag="button" action className="border-light">
-                      <MdPersonPin /> Profile
-                    </ListGroupItem>
-                    <ListGroupItem tag="button" action className="border-light">
-                      <MdInsertChart /> Stats
-                    </ListGroupItem>
-                    <ListGroupItem tag="button" action className="border-light">
-                      <MdMessage /> Messages
-                    </ListGroupItem>
                     <ListGroupItem tag="button" action className="border-light">
                       <MdSettingsApplications /> Settings
                     </ListGroupItem>

src/components/Layout/Header_old.js

@@ -0,0 +1,164 @@
+import Avatar from 'components/Avatar';
+import { UserCard } from 'components/Card';
+import Notifications from 'components/Notifications';
+import SearchInput from 'components/SearchInput';
+import { notificationsData } from 'demos/header';
+import withBadge from 'hocs/withBadge';
+import React from 'react';
+import {
+  MdClearAll,
+  MdExitToApp,
+  MdHelp,
+  MdInsertChart,
+  MdMessage,
+  MdNotificationsActive,
+  MdNotificationsNone,
+  MdPersonPin,
+  MdSettingsApplications,
+} from 'react-icons/md';
+import {
+  Button,
+  ListGroup,
+  ListGroupItem,
+  // NavbarToggler,
+  Nav,
+  Navbar,
+  NavItem,
+  NavLink,
+  Popover,
+  PopoverBody,
+} from 'reactstrap';
+import bn from 'utils/bemnames';
+
+const bem = bn.create('header');
+
+const MdNotificationsActiveWithBadge = withBadge({
+  size: 'md',
+  color: 'primary',
+  style: {
+    top: -10,
+    right: -10,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  children: <small>5</small>,
+})(MdNotificationsActive);
+
+class Header extends React.Component {
+  state = {
+    isOpenNotificationPopover: false,
+    isNotificationConfirmed: false,
+    isOpenUserCardPopover: false,
+  };
+
+  toggleNotificationPopover = () => {
+    this.setState({
+      isOpenNotificationPopover: !this.state.isOpenNotificationPopover,
+    });
+
+    if (!this.state.isNotificationConfirmed) {
+      this.setState({ isNotificationConfirmed: true });
+    }
+  };
+
+  toggleUserCardPopover = () => {
+    this.setState({
+      isOpenUserCardPopover: !this.state.isOpenUserCardPopover,
+    });
+  };
+
+  handleSidebarControlButton = event => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    document.querySelector('.cr-sidebar').classList.toggle('cr-sidebar--open');
+  };
+
+  render() {
+    const { isNotificationConfirmed } = this.state;
+
+    return (
+      <Navbar light expand className={bem.b('bg-white')}>
+        <Nav navbar className="mr-2">
+          <Button outline onClick={this.handleSidebarControlButton}>
+            <MdClearAll size={25} />
+          </Button>
+        </Nav>
+        <Nav navbar>
+          <SearchInput />
+        </Nav>
+
+        <Nav navbar className={bem.e('nav-right')}>
+          <NavItem className="d-inline-flex">
+            <NavLink id="Popover1" className="position-relative">
+              {isNotificationConfirmed ? (
+                <MdNotificationsNone
+                  size={25}
+                  className="text-secondary can-click"
+                  onClick={this.toggleNotificationPopover}
+                />
+              ) : (
+                <MdNotificationsActiveWithBadge
+                  size={25}
+                  className="text-secondary can-click animated swing infinite"
+                  onClick={this.toggleNotificationPopover}
+                />
+              )}
+            </NavLink>
+            <Popover
+              placement="bottom"
+              isOpen={this.state.isOpenNotificationPopover}
+              toggle={this.toggleNotificationPopover}
+              target="Popover1"
+            >
+              <PopoverBody>
+                <Notifications notificationsData={notificationsData} />
+              </PopoverBody>
+            </Popover>
+          </NavItem>
+
+          <NavItem>
+            <NavLink id="Popover2">
+              <Avatar
+                onClick={this.toggleUserCardPopover}
+                className="can-click"
+              />
+            </NavLink>
+            <Popover
+              placement="bottom-end"
+              isOpen={this.state.isOpenUserCardPopover}
+              toggle={this.toggleUserCardPopover}
+              target="Popover2"
+              className="p-0 border-0"
+              style={{ minWidth: 250 }}
+            >
+              <PopoverBody className="p-0 border-light">
+                <UserCard
+                  title="Jane"
+                  subtitle="[email protected]"
+                  text="Last updated 3 mins ago"
+                  className="border-light"
+                >
+                  <ListGroup flush>
+                    <ListGroupItem tag="button" action className="border-light">
+                      <MdSettingsApplications /> Settings
+                    </ListGroupItem>
+                    <ListGroupItem tag="button" action className="border-light">
+                      <MdHelp /> Help
+                    </ListGroupItem>
+                    <ListGroupItem tag="button" action className="border-light">
+                      <MdExitToApp /> Signout
+                    </ListGroupItem>
+                  </ListGroup>
+                </UserCard>
+              </PopoverBody>
+            </Popover>
+          </NavItem>
+        </Nav>
+      </Navbar>
+    );
+  }
+}
+
+export default Header;