Now uses two API calls for facilities (open and closed). Small visual changes.

src/actions/api.js

-import { CALL_API,SET_FACILITIES,GET_FACILITIES } from './action-types'
+import {GET_FACILITIES, SET_FACILITIES} from './action-types'
 
-export const  apiTest = () =>{
-    return (dispatch) =>{
+export const apiTest = () => {
+    return (dispatch) => {
 
-        return fetch('/api/facilities',{'method':'get'}).then((res)=>{
+        return fetch('/api/facilities', {'method': 'get'}).then((res) => {
             return res.json()
-    },(error)=>{console.log(error)}).then(json =>{
+        }, (error) => {
+            console.log(error)
+        }).then(json => {
             console.log(json[0])
         })
     }
-}
+};
 
 export const getFacilities = () => dispatch => {
-    // var url = new URL('https://localhost:3000/api/facilities')
-    // url.searchParams.append('format','json')
     dispatch({
-        type:GET_FACILITIES
-    })
-    const request = new Request('https://api.srct.gmu.edu/whatsopen/v2/facilities/', {
-        method: 'GET',
-    })
-    console.log(request)
-   return fetch(request).then((res)=>{
+        type: GET_FACILITIES
+    });
+
+    //A request for all the open facilities
+    const requestOpen = new Request('https://api.srct.gmu.edu/whatsopen/v2/facilities/?open_now=True&format=json', {
+        method: 'GET'
+    });
+
+    //A request for all the closed facilities
+    const requestClosed = new Request('https://api.srct.gmu.edu/whatsopen/v2/facilities/?closed_now=True&format=json', {
+        method: 'GET'
+    });
+
+    /**
+     * Merges the two promises (returned from the fetch operations) in order to dispatch only when both the
+     * open and closed requests are completed.
+     */
+    return Promise.all([
+        fetch(requestOpen)
+            .then(res => {
                 if (res.status < 200 || res.status >= 300) {
                     throw new Error(res.statusText);
                 }
-        return res.json()
-   }).then((json) => {
-       dispatch(setFacilities(JSON.stringify(json)))
-   }) 
-}
+                return res.json();
+            }),
+        fetch(requestClosed)
+            .then(res => {
+                if (res.status < 200 || res.status >= 300) {
+                    throw new Error(res.statusText);
+                }
+                return res.json();
+            })])
+        .then(facilitiesByStatus => { //facilitiesByStatus is in the format: [[openFacilities], [closedFacilities]]
+
+            /**
+             * Iterates over the open and closed facility arrays and adds the isOpen property which drives styling
+             * in the view.
+             */
+            facilitiesByStatus[0].forEach(openFacility => {
+                openFacility.isOpen = true;
+            });
+
+            facilitiesByStatus[1].forEach(closedFacility => {
+                closedFacility.isOpen = false;
+            });
+
+            //Merges the two facility status arrays and sorts by alphabetical order.
+            const allFacilities = facilitiesByStatus[0].concat(facilitiesByStatus[1])
+                .sort((a, b) => a.facility_name > b.facility_name ? 1 : -1);
+            dispatch(setFacilities(JSON.stringify(allFacilities)));
+        });
+};
 
 export const setFacilities = (facilities) => {
-    localStorage.setItem('facilities',facilities)
+    localStorage.setItem('facilities', facilities);
     return {
-        type:SET_FACILITIES,
-        facilities:JSON.parse(facilities)
+        type: SET_FACILITIES,
+        facilities: JSON.parse(facilities)
     }
-}
+};
\ No newline at end of file

src/containers/FacilityCard.js

@@ -62,10 +62,11 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
         let words = removeBrackets(name).split(/[ -]+/); //TODO: Add case change to the regex (ex. IndAroma should be IA, not I).
 
         /*
-           Words that start with ( must be removed.
+           TODO: Probably want this to be a regex test and remove any useless word / symbol (ex. the, and, &, etc.)
+           Words that are empty or start with ( must be removed.
                 Example: 'Recreation and Athletic Complex (RAC)' will result in the initials 'R(' without the filter.
         */
-        words = words.filter(word => !word.startsWith("("));
+        words = words.filter(word => word && !word.startsWith("("));
 
         if (words.length === 0) {
             return "";
@@ -115,9 +116,9 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
     };
 
     return (
-        <Card onClick={handleClick} className={classes.root}>
+        <Card onClick={handleClick} className={classes.root} raised>
             {/*<CardMedia className={classes.media} image={require('../images/chipotleLogo.png')}/>*/}
-            <CardContent className={classes.cardContent}>
+            <CardContent>
                 <Grid container>
                     <Grid item xs={4} className={classes.avatarContainer}>
                         <Avatar className={classes.avatar}
@@ -125,17 +126,23 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
                     </Grid>
 
                     <Grid item xs={8}>
+                        <Grid container direction={'column'} spacing={8}>
+                            <Grid item>
                                 <Typography type={'title'} align={'center'} className={classes.title} noWrap>
                                     {removeBrackets(facility.facility_name)}
                                 </Typography>
-
+                            </Grid>
+                            <Grid item>
                                 <FacilityStatus facility={facility}/>
-
+                            </Grid>
+                            <Grid item>
                                 <Typography type={'caption'} align={'center'} className={classes.location} noWrap>
                                     {removeBrackets(facility.facility_location.building)}
                                 </Typography>
                             </Grid>
                         </Grid>
+                    </Grid>
+                </Grid>
             </CardContent>
         </Card>
     )
@@ -143,7 +150,7 @@ const FacilityCard = ({classes, facility, setSidebar}) => {
 const styleSheet = {
     root: {
         width: 250,
-        height: 100,
+        borderRadius: '5px'
     },
     /**media: {
         flex: 1,

src/containers/FacilityStatus.js

@@ -5,18 +5,17 @@ import Typography from 'material-ui/Typography';
 import {green, red} from 'material-ui/colors'
 
 const FacilityStatus = ({classes, facility}) => {
-    const isOpen = facility => {
-        //TODO
-        return true;
-    };
-
     return (
         <Chip label={
             <div>
-                <Typography type={'caption'} className={classes.isOpenText}>OPEN</Typography>
-                <Typography type={'caption'} className={classes.timeText}>~18 Hrs</Typography>
+                <Typography type={'caption'} className={classes.isOpenText}>
+                    {facility.isOpen ? "OPEN" : "CLOSED"}
+                    </Typography>
+                <Typography type={'caption'} className={classes.timeText}>
+                    ~18 Hrs
+                </Typography>
             </div>
-        } className={classes.chip} style={{backgroundColor: isOpen(facility) ? green[500] : red[500]}}/>
+        } className={classes.chip} style={{backgroundColor: facility.isOpen ? green[500] : red[500]}}/>
     )
 };
 const styleSheet = {