Merge pull request #4 from peppermenta/develop

Develop

.env.example

@@ -0,0 +1,8 @@
+REACT_APP_FIREBASE_API_KEY = 
+REACT_APP_FIREBASE_AUTH_DOMAIN = 
+REACT_APP_FIREBASE_DATABASE_URL = 
+REACT_APP_FIREBASE_PROJECT_ID = 
+REACT_APP_FIREBASE_STORAGE_BUCKET = 
+REACT_APP_FIREBASE_MESSAGING_SENDER_ID = 
+REACT_APP_FIREBASE_APP_ID = 
+REACT_APP_MESS_API_ENDPOINT = 

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -21,3 +22,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+

debug.log

@@ -0,0 +1 @@
+[1127/053907.921:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

package.json

@@ -8,15 +8,18 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "dotenv": "^8.2.0",
     "firebase": "^8.1.1",
     "husky": "^4.3.0",
     "lint-staged": "^10.4.0",
     "prettier": "^2.1.2",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-firebase-hooks": "^2.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "unfetcher": "^1.1.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -4,10 +4,13 @@
 
 .main-container {
   padding-bottom: 5%;
+  padding-left: 0px;
+  padding-right: 0px;
 }
 
 .bottom-nav {
   width: 100%;
   position: fixed;
   bottom: 0;
+  text-align: center;
 }

src/App.js

@@ -1,37 +1,33 @@
-import React, { useState } from 'react';
-import './App.css';
+import React, { useState, useEffect } from 'react';
 import firebase from 'firebase';
+import dotenv from 'dotenv';
 import { useAuthState } from 'react-firebase-hooks/auth';
-import {
-  BottomNavigation,
-  BottomNavigationAction,
-  Container,
-  CssBaseline,
-} from '@material-ui/core';
+import { Container, CssBaseline } from '@material-ui/core';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
-import RestaurantIcon from '@material-ui/icons/Restaurant';
-import LocalTaxiIcon from '@material-ui/icons/LocalTaxi';
-import DirectionsBusIcon from '@material-ui/icons/DirectionsBus';
-import CalendarTodayIcon from '@material-ui/icons/CalendarToday';
-import firebaseConfig from './firebaseConfig';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import Home from './pages/Home';
+import Mess from './pages/Mess';
+import Cab from './pages/Cab';
+import Timetable from './pages/TimeTable';
+import Bus from './pages/Bus';
+import BottomNav from './components/BottomNav';
+import NavbarDrawer from './components/NavbarDrawer';
 
-firebase.initializeApp(firebaseConfig);
-const googleProvider = new firebase.auth.GoogleAuthProvider();
+import './App.css';
 
-const login = () => {
-  const provider = googleProvider;
-  provider.addScope('profile');
-  provider.addScope('email');
-  firebase
-    .auth()
-    .signInWithPopup(provider)
-    .then((result) => {
-      const token = result.credential.accessToken;
-      const { user } = result;
-      console.log({ user });
-      console.log({ token });
-    });
-};
+dotenv.config();
+
+firebase.initializeApp({
+  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
+  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
+  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.REACT_APP_FIREBASE_APP_ID,
+});
+
+const googleProvider = new firebase.auth.GoogleAuthProvider();
 
 const muiTheme = createMuiTheme({
   palette: {
@@ -50,74 +46,84 @@ const muiTheme = createMuiTheme({
   },
 });
 
+const login = () => {
+  const provider = googleProvider;
+  provider.addScope('profile');
+  provider.addScope('email');
+  firebase
+    .auth()
+    .signInWithPopup(provider)
+    .then((result) => {
+      const token = result.credential.accessToken;
+      const { user } = result;
+      console.log({ user });
+      console.log({ token });
+    });
+};
+
 function App() {
   const [user, loading, error] = useAuthState(firebase.auth()); // eslint-disable-line
-  const [currentTab, setCurrentTab] = useState('mess');
+  const [messData, setMessData] = useState({});
 
-  const handleTabChange = (_, newTab) => {
-    setCurrentTab(newTab);
-  };
-
-  const currentComponent = (tabName) => {
-    if (tabName) {
-      // Need to replace with mess menu page
-      return <p>{tabName}</p>;
-    }
-    // Need to show 404
-    return <h1>Error</h1>;
-  };
+  useEffect(() => {
+    fetch(process.env.REACT_APP_MESS_API_ENDPOINT)
+      .then((res) => res.json())
+      .then((res) => {
+        setMessData(res);
+      })
+      .catch((err) => {
+        console.log(err);
+        setMessData(null);
+      });
+  }, [setMessData]);
 
   if (!user) {
     return (
       <button type="submit" onClick={login}>
         Sign in with google
+        {' '}
       </button>
     );
   }
 
   return (
-    <ThemeProvider theme={muiTheme}>
-      <CssBaseline />
-      <Container className="main-container">
-        {currentComponent(currentTab)}
-      </Container>
-      <Container className="bottom-nav" disableGutters maxWidth={false}>
-        <BottomNavigation
-          value={currentTab}
-          onChange={handleTabChange}
-          showLabels
-        >
-          <BottomNavigationAction
-            label="Mess Menu"
-            value="mess"
-            icon={<RestaurantIcon />}
-          />
-          <BottomNavigationAction
-            label="Timetable"
-            value="timetable"
-            icon={<CalendarTodayIcon />}
-          />
-          <BottomNavigationAction
-            label="Cab Sharing"
-            value="cab-sharing"
-            icon={<LocalTaxiIcon />}
-          />
-          <BottomNavigationAction
-            label="Bus Schedule"
-            value="bus-schedule"
-            icon={<DirectionsBusIcon />}
-          />
-        </BottomNavigation>
-      </Container>
-      <button
-        type="submit"
-        onClick={() => {
-          firebase.auth().signOut();
-        }}
-      >
-        Logout
-      </button>
-    </ThemeProvider>
+    <Router>
+      <ThemeProvider theme={muiTheme}>
+        <CssBaseline />
+        <NavbarDrawer />
+        <Container className="main-container">
+          <Switch>
+            <Route path="/home">
+              <Home />
+            </Route>
+            <Route path="/mess">
+              <Mess Menu={messData} />
+              {' '}
+            </Route>
+            {' '}
+            <Route path="/cab">
+              <Cab />
+            </Route>
+            {' '}
+            <Route path="/bus">
+              <Bus />
+            </Route>
+            {' '}
+            <Route path="/timetable">
+              <Timetable />
+            </Route>
+            {' '}
+          </Switch>
+          {' '}
+        </Container>
+        {' '}
+        <Container className="bottom-nav" disableGutters maxWidth={false}>
+          <BottomNav />
+        </Container>
+        {' '}
+      </ThemeProvider>
+      {' '}
+    </Router>
   );
 }
 

src/components/BottomNav.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { BottomNavigation, BottomNavigationAction } from '@material-ui/core';
+import HomeIcon from '@material-ui/icons/Home';
+import RestaurantIcon from '@material-ui/icons/Restaurant';
+import LocalTaxiIcon from '@material-ui/icons/LocalTaxi';
+import DirectionsBusIcon from '@material-ui/icons/DirectionsBus';
+import CalendarTodayIcon from '@material-ui/icons/CalendarToday';
+import { Link } from 'react-router-dom';
+
+function BottomNav() {
+  const [currentTab, setCurrentTab] = useState('home');
+  const handleTabChange = (_, newTab) => {
+    setCurrentTab(newTab);
+  };
+  return (
+    <BottomNavigation value={currentTab} onChange={handleTabChange} showLabels>
+      <BottomNavigationAction
+        component={Link}
+        to="/home"
+        label="Home"
+        value="home"
+        icon={<HomeIcon />}
+      />
+      <BottomNavigationAction
+        component={Link}
+        to="/mess"
+        label="Mess Menu"
+        value="mess"
+        icon={<RestaurantIcon />}
+      />
+      <BottomNavigationAction
+        component={Link}
+        to="/timetable"
+        label="Timetable"
+        value="timetable"
+        icon={<CalendarTodayIcon />}
+      />
+      <BottomNavigationAction
+        component={Link}
+        to="/cab"
+        label="Cab Sharing"
+        value="cab-sharing"
+        icon={<LocalTaxiIcon />}
+      />
+      <BottomNavigationAction
+        component={Link}
+        to="/bus"
+        label="Bus Schedule"
+        value="bus-schedule"
+        icon={<DirectionsBusIcon />}
+      />
+    </BottomNavigation>
+  );
+}
+export default BottomNav;