Merge pull request #5 from peppermenta/develop

Bus Page functionality added.

.env.example

@@ -5,4 +5,5 @@ 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 = 
+REACT_APP_MESS_API_ENDPOINT = 
+REACT_APP_BUS_API_ENDPOINT = 

package.json

@@ -19,6 +19,7 @@
     "react-firebase-hooks": "^2.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
+    "react-window": "^1.8.6",
     "unfetcher": "^1.1.2"
   },
   "scripts": {

src/App.js

@@ -64,6 +64,7 @@ const login = () => {
 function App() {
   const [user, loading, error] = useAuthState(firebase.auth()); // eslint-disable-line
   const [messData, setMessData] = useState({});
+  const [busData, setBusData] = useState({}); // eslint-disable-line
 
   useEffect(() => {
     fetch(process.env.REACT_APP_MESS_API_ENDPOINT)
@@ -77,6 +78,18 @@ function App() {
       });
   }, [setMessData]);
 
+  useEffect(() => {
+    fetch(process.env.REACT_APP_BUS_API_ENDPOINT)
+      .then((res) => res.json())
+      .then((res) => {
+        setBusData(res);
+      })
+      .catch((err) => {
+        console.log(err);
+        setBusData(null);
+      });
+  }, [setBusData]);
+
   if (!user) {
     return (
       <button type="submit" onClick={login}>
@@ -98,31 +111,22 @@ function App() {
             </Route>
             <Route path="/mess">
               <Mess Menu={messData} />
-              {' '}
             </Route>
-            {' '}
             <Route path="/cab">
               <Cab />
             </Route>
-            {' '}
             <Route path="/bus">
-              <Bus />
+              <Bus schedule={busData} />
             </Route>
-            {' '}
             <Route path="/timetable">
               <Timetable />
             </Route>
-            {' '}
           </Switch>
-          {' '}
         </Container>
-        {' '}
         <Container className="bottom-nav" disableGutters maxWidth={false}>
           <BottomNav />
         </Container>
-        {' '}
       </ThemeProvider>
-      {' '}
     </Router>
   );
 }

src/pages/Bus.css

@@ -0,0 +1,4 @@
+.times-list {
+  max-height: 400px;
+  overflow: auto;
+}

src/pages/Bus.js

@@ -1,6 +1,149 @@
-import React from 'react';
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import Box from '@material-ui/core/Box';
+import {
+  Divider, List, ListItem, ListItemText,
+} from '@material-ui/core';
 
-function Bus() {
-  return <h1>Bus Page</h1>;
+import './Bus.css';
+
+function Bus({ schedule }) {
+  const [location, setLocation] = useState('LAB');
+  const [isWeekend, setIsWeekend] = useState(false);
+  const [open, setOpen] = useState(false);
+  const toggleWeek = () => {
+    setIsWeekend(!isWeekend);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleChange = (event) => {
+    setLocation(event.target.value);
+  };
+
+  const makeTimeList = (direction) => {
+    if (direction === 'to') {
+      let times;
+      if (location === 'LINGAMPALLY') {
+        if (isWeekend) {
+          times = schedule.ToIITH.LINGAMPALLYW;
+        } else {
+          times = schedule.ToIITH.LINGAMPALLY;
+        }
+      } else {
+        times = schedule.ToIITH[location];
+      }
+
+      return times.map((time) => (
+        <>
+          <ListItem key={time}>
+            <ListItemText>{time}</ListItemText>
+          </ListItem>
+          <Divider />
+        </>
+      ));
+    }
+    if (direction === 'from') {
+      let times;
+      if (location === 'LINGAMPALLY') {
+        if (isWeekend) {
+          times = schedule.FromIITH.LINGAMPALLYW;
+        } else {
+          times = schedule.FromIITH.LINGAMPALLY;
+        }
+      } else {
+        times = schedule.FromIITH[location];
+      }
+
+      return times.map((time) => (
+        <>
+          <ListItem key={time}>
+            <ListItemText>{time}</ListItemText>
+          </ListItem>
+          <Divider />
+        </>
+      ));
+    }
+
+    return (
+      <ListItem>
+        <ListItemText>Error</ListItemText>
+      </ListItem>
+    );
+  };
+
+  if (schedule === null || schedule === undefined) {
+    return <h1>Error</h1>;
+  }
+
+  if (Object.keys(schedule).length === 0) {
+    return <h1>Loading...</h1>;
+  }
+
+  return (
+    <div>
+      <Box display="flex" flexDirection="row" justifyContent="space-between">
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={() => toggleWeek()}
+        >
+          {isWeekend ? 'Weekday' : 'Weekend'}
+        </Button>
+        <Select
+          labelId="demo-controlled-open-select-label"
+          id="demo-controlled-open-select"
+          open={open}
+          onClose={handleClose}
+          onOpen={handleOpen}
+          value={location}
+          onChange={handleChange}
+        >
+          <MenuItem value="LINGAMPALLY">Lingampally</MenuItem>
+          <MenuItem value="SANGAREDDY">Sangareddy</MenuItem>
+          <MenuItem value="ODF">ODF</MenuItem>
+          <MenuItem value="LAB">Maingate</MenuItem>
+        </Select>
+      </Box>
+      <Box
+        display="flex"
+        flexDirection="row"
+        justifyContent="space-around"
+        padding="50px"
+      >
+        <Box>
+          <h3>
+            IITH to
+            {location[0] + location.substr(1).toLowerCase()}
+          </h3>
+          <List className="times-list">{makeTimeList('to')}</List>
+        </Box>
+        <Box>
+          <h3>
+            {location[0] + location.substr(1).toLowerCase()}
+            {' '}
+            to IITH
+          </h3>
+          <List className="times-list">{makeTimeList('from')}</List>
+        </Box>
+      </Box>
+    </div>
+  );
 }
 export default Bus;
+
+Bus.propTypes = {
+  schedule: PropTypes.objectOf(PropTypes.object),
+};
+
+Bus.defaultProps = {
+  schedule: {},
+};

src/pages/Mess.js

@@ -94,6 +94,11 @@ function Mess({ Menu }) {
   const theme = useTheme();
   const [hall, setHall] = useState('LDH');
 
+  const toggleHall = () => {
+    if (hall === 'LDH') setHall('UDH');
+    else setHall('LDH');
+  };
+
   const getMeal = (meal) => {
     const listItems = Menu[hall][days[activeStep]][meal];
     const additionalKey = `${hall} Additional`;
@@ -142,8 +147,7 @@ function Mess({ Menu }) {
         ))}
       </Stepper>
       <ButtonGroup disableElevation variant="contained" color="primary">
-        <Button onClick={() => setHall('LDH')}>LDH</Button>
-        <Button onClick={() => setHall('UDH')}>UDH</Button>
+        <Button onClick={() => toggleHall()}>{hall}</Button>
       </ButtonGroup>
       <Accordion>
         <AccordionSummary