Skip to content

GitLab

W
whats-open-web
Commit 9aef0da3 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files
Options

Code tidy-up. Fixed: Unused code, code structure, missing semicolons, outdated redux actions, etc.

parent e2e41260
Pipeline #1897 passed with stage
    in 1 minute and 41 seconds
    Expand all Hide whitespace changes
    Inline Side-by-side
    Showing with 540 additions and 777 deletions
    public/index.html
    View file @ 9aef0da3
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <meta name="apple-mobile-web-app-title" content="What's Open">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--
    manifest.json provides metadata used when your web app is added to the
    homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' />
    <!--
    Notice the use of %PUBLIC_URL% in the tags above.
    It will be replaced with the URL of the `public` folder during the build.
    Only files inside the `public` folder can be referenced from the HTML.
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <meta name="apple-mobile-web-app-title" content="What's Open">
    <meta name="apple-mobile-web-app-capable" content="yes">
    Unlike "/favicon.png" or "favicon.png", "%PUBLIC_URL%/favicon.png" will
    work correctly both with client-side routing and a non-root public URL.
    Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>What's Open</title>
    </head>
    <body>
    <noscript>
    You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
    This HTML file is a template.
    If you open it directly in the browser, you will see an empty page.
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet'/>
    You can add webfonts, meta tags, or analytics to this file.
    The build step will place the bundled scripts into the <body> tag.
    To begin the development, run `npm start` or `yarn start`.
    To create a production bundle, use `npm run build` or `yarn build`.
    -->
    </body>
    <title>What's Open</title>
    </head>
    <body>
    <noscript>
    You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    </body>
    </html>
    src/actions/action-types.js
    View file @ 9aef0da3
    export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';
    export const SET_SIDEBAR = 'SET_SIDEBAR';
    export const TOGGLE_SIDEBAR_MAP = 'TOGGLE_SIDEBAR_MAP';
    export const SET_FACILITIES = 'SET_FACILITIES';
    export const GET_FACILITIES = 'GET_FACILITIES';
    export const SET_SELECTED_FACILITY = 'SET_SELECTED_FACILITY';
    ......
    src/actions/api.js
    View file @ 9aef0da3
    import {GET_FACILITIES, SET_FACILITIES, SORT_BY_FAVORITES} from './action-types'
    import {GET_FACILITIES, SET_FACILITIES, SORT_BY_FAVORITES} from './action-types';
    export const apiTest = () => {
    return (dispatch) => {
    return fetch('/api/facilities', {'method': 'get'}).then((res) => {
    return res.json()
    }, (error) => {
    console.log(error)
    }).then(json => {
    console.log(json[0])
    })
    }
    };
    const API_GET_FACILITIES = 'https://api.srct.gmu.edu/whatsopen/v2/facilities/';
    export const getFacilities = () => dispatch => {
    dispatch({
    type: GET_FACILITIES
    });
    const request = new Request('https://api.srct.gmu.edu/whatsopen/v2/facilities/', {
    const request = new Request(API_GET_FACILITIES, {
    method: 'GET'
    });
    ......@@ -29,16 +18,16 @@ export const getFacilities = () => dispatch => {
    }
    return res.json();
    })
    .then(json => {
    }).then(json => {
    dispatch(setFacilities(JSON.stringify(json)));
    });
    };
    export const setFacilities = (facilities) => {
    try{
    try {
    localStorage.setItem('facilities', facilities);
    }catch(e){}
    } catch (e) {
    }
    return {
    type: SET_FACILITIES,
    facilities: JSON.parse(facilities)
    ......@@ -46,5 +35,5 @@ export const setFacilities = (facilities) => {
    };
    export const sortByFavorites = () => ({
    type: SORT_BY_FAVORITES
    })
    \ No newline at end of file
    type: SORT_BY_FAVORITES
    });
    \ No newline at end of file
    src/actions/ui.js
    View file @ 9aef0da3
    import {
    ADD_FAVORITE_FACILITY,
    REMOVE_FAVORITE_FACILITY,
    SET_SEARCH_TERM,
    SET_CAMPUS_REGION,
    TOGGLE_SIDEBAR,
    TOGGLE_SIDEBAR_MAP,
    SET_ALL_FAVORITES, SET_SELECTED_FACILITY, SET_SIDEBAR
    ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY, SET_ALL_FAVORITES, SET_CAMPUS_REGION, SET_SEARCH_TERM,
    SET_SELECTED_FACILITY, SET_SIDEBAR
    } from './action-types';
    export const toggleSidebar = () => ({
    type: TOGGLE_SIDEBAR,
    });
    export const setSidebar = (setOpen) => ({
    type: SET_SIDEBAR,
    setOpen
    });
    export const toggleSidebarMap = () => ({
    type: TOGGLE_SIDEBAR_MAP,
    });
    export const setSelectedFacility = (facility) => ({
    type: SET_SELECTED_FACILITY,
    facility
    type: SET_SELECTED_FACILITY,
    facility
    });
    export const setSearchTerm = (term) => ({
    type: SET_SEARCH_TERM,
    term,
    term
    });
    export const setCampusRegion = (campusRegion) => ({
    type: SET_CAMPUS_REGION,
    campusRegion
    type: SET_CAMPUS_REGION,
    campusRegion
    });
    export const addFavoriteFacility = slug => ({
    ......@@ -48,7 +35,5 @@ export const removeFavoriteFacility = slug => ({
    export const setAllFavorites = (favorites) => ({
    type: SET_ALL_FAVORITES,
    favorites,
    favorites
    });
    src/components/AppBar.js
    View file @ 9aef0da3
    ......@@ -6,11 +6,11 @@ import Button from 'material-ui/Button';
    import IconButton from 'material-ui/IconButton';
    import MenuIcon from 'material-ui-icons/Menu';
    import SearchBar from '../containers/SearchBar';
    import classNames from 'classnames'
    import classNames from 'classnames';
    class CustomAppBar extends React.Component {
    constructor(props) {
    constructor() {
    super();
    this.state = {
    isAppBarExpanded: false,
    ......@@ -23,38 +23,38 @@ class CustomAppBar extends React.Component {
    toggleExpand() {
    this.setState({
    isAppBarExpanded: !this.state.isAppBarExpanded
    })
    });
    };
    render() {
    return (<div>
    <AppBar position="absolute"
    className={classNames('app-bar', this.state.isSearchExpanded && 'app-bar-search-expanded')}>
    <Toolbar className={'app-bar-tool-bar'}>
    <img src={require('../images/SRCT_square.svg')} className={'app-bar-logo'}/>
    <Typography type="title" className={classNames('app-bar-title', 'app-bar-text-color')}>
    What's Open
    </Typography>
    <SearchBar onSearchExpand={() => this.setState({isSearchExpanded: true})}
    onSearchCollapse={() => this.setState({isSearchExpanded: false})}/>
    <IconButton onClick={this.toggleExpand} aria-label="Menu"
    className={classNames('app-bar-menu-button', 'app-bar-text-color')}>
    <MenuIcon/>
    </IconButton>
    <div
    className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}>
    <Button
    className={classNames('app-bar-link-button', 'app-bar-text-color')}>
    About
    </Button>
    <Button
    className={classNames('app-bar-link-button', 'app-bar-text-color')}>
    Feedback
    </Button>
    </div>
    </Toolbar>
    </AppBar>
    </div>);
    return (
    <div>
    <AppBar position="absolute"
    className={classNames('app-bar', this.state.isSearchExpanded && 'app-bar-search-expanded')}>
    <Toolbar className={'app-bar-tool-bar'}>
    <img src={require('../images/SRCT_square.svg')} className={'app-bar-logo'}/>
    <Typography type="title" className={classNames('app-bar-title', 'app-bar-text-color')}>
    What's Open
    </Typography>
    <SearchBar onSearchExpand={() => this.setState({isSearchExpanded: true})}
    onSearchCollapse={() => this.setState({isSearchExpanded: false})}/>
    <IconButton onClick={this.toggleExpand} aria-label="Menu"
    className={classNames('app-bar-menu-button', 'app-bar-text-color')}>
    <MenuIcon/>
    </IconButton>
    <div
    className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}>
    <Button className={classNames('app-bar-link-button', 'app-bar-text-color')}>
    About
    </Button>
    <Button className={classNames('app-bar-link-button', 'app-bar-text-color')}>
    Feedback
    </Button>
    </div>
    </Toolbar>
    </AppBar>
    </div>
    );
    };
    }
    ......
    src/components/CardContainer.js
    View file @ 9aef0da3
    import React from 'react'
    import FacilityCard from '../containers/FacilityCard'
    import React from 'react';
    import FacilityCard from '../containers/FacilityCard';
    import Grid from 'material-ui/Grid';
    const CardContainer = ({searchTerm, campusRegion, facilities}) => {
    ......
    src/components/FacilitiesMap.js
    View file @ 9aef0da3
    This diff is collapsed.
    src/components/FacilityCategory.js
    View file @ 9aef0da3
    import React from 'react';
    import {withStyles} from 'material-ui/styles';
    import Avatar from 'material-ui/Avatar';
    import Typography from 'material-ui/Typography';
    import RestaurantIcon from 'material-ui-icons/Restaurant';
    import StoreIcon from 'material-ui-icons/Store';
    import LocalCafeIcon from 'material-ui-icons/LocalCafe';
    import LocalPrintShopIcon from 'material-ui-icons/LocalPrintshop';
    import LocalPostOfficeIcon from 'material-ui-icons/LocalPostOffice';
    import FitnessCenterIcon from 'material-ui-icons/FitnessCenter';
    import ShoppingCartIcon from 'material-ui-icons/ShoppingCart'
    import {red, blue, brown, grey, teal, deepOrange, lime} from 'material-ui/colors';
    const FacilityCategory = ({category}) => {
    const generateAvatar = () => {
    let color;
    let icon;
    /*
    TODO: May not want to hardcode the id's. Can be dynamically retrieved from /api/categories.
    this wouldn't be of any use unless the API returns something to indicate the icon / color.
    */
    /*
    Proposed Category Types:
    dining hall
    convenience store
    cafe
    restaurant
    food truck ???
    athletic
    mailroom
    print services
    retail
    school offices
    student centers
    */
    switch (category.id) {
    case 1: //Dining Hall
    case 2: //Restaurant
    case 5: //Take out dining hall
    color = red[400];
    icon = <RestaurantIcon className={'facility-category-icon'}/>;
    break;
    case 3: //Convenience Store
    color = blue[500];
    icon = <StoreIcon className={'facility-category-icon'}/>;
    break;
    case 4: //Cafe
    color = brown[500];
    icon = <LocalCafeIcon className={'facility-category-icon'}/>;
    break;
    case 6: //Athletic Facility
    color = teal[500];
    icon = <FitnessCenterIcon className={'facility-category-icon'}/>;
    break;
    case 7: //TODO: Print Services - NOT IN API
    color = grey[500];
    icon = <LocalPrintShopIcon className={'facility-category-icon'} />;
    break;
    case 8: //TODO Mailroom - NOT IN API
    color = deepOrange[500];
    icon = <LocalPostOfficeIcon className={'facility-category-icon'}/>;
    break;
    default:
    color = lime[500];
    icon = <ShoppingCartIcon className={'facility-category-icon'}/>
    }
    return (
    <Avatar className={'facility-category-avatar'} style={{backgroundColor: color}}>
    {icon}
    </Avatar>
    )
    };
    return (
    <div className={'facility-category-wrapper'}>
    {/* {generateAvatar()} */}
    <Typography type={'body1'} noWrap>
    {category.name}
    </Typography>
    ......
    src/components/FacilityDialog.js
    View file @ 9aef0da3
    ......@@ -45,18 +45,18 @@ class FacilityDialog extends React.Component {
    return (
    <Dialog classes={{root: 'fd-dialog-root', paper: 'fd-dialog-paper'}} open={isOpen} onClose={onClose}>
    <IconButton className={'fd-close-btn'} onClick={onClose}>
    <CloseIcon />
    <CloseIcon/>
    </IconButton>
    <Grid container className={'fd-container'} justify={'center'}>
    <Grid item className={'fd-header-container'}>
    <Grid container className={'fd-header'}>
    <Grid item>
    <Avatar src={require('../images/chipotleLogo.png')} />
    <Avatar src={require('../images/chipotleLogo.png')}/>
    </Grid>
    <Grid item className={'fd-header-text-container'}>
    <Typography className={'fd-header-text'} type={'headline'}>
    {removeBrackets(facility.facility_name)}
    </Typography>
    </Typography>
    </Grid>
    </Grid>
    </Grid>
    ......
    src/components/FacilityStatus.js
    View file @ 9aef0da3
    ......@@ -32,8 +32,8 @@ const FacilityStatus = ({facility}) => {
    const statusInfo = generateStatusInfo(facility);
    return (
    <Typography type={'caption'} className={classNames('facility-status-text', statusInfo.isOpen ? 'facility-status-open' : 'facility-status-closed')}>
    {/*{statusInfo.icon}*/}
    <Typography type={'caption'}
    className={classNames('facility-status-text', statusInfo.isOpen ? 'facility-status-open' : 'facility-status-closed')}>
    {statusInfo.label}
    </Typography>
    )
    ......
    src/components/FavoriteButton.js
    View file @ 9aef0da3
    import React from 'react'
    import {withStyles} from 'material-ui/styles';
    import pink from 'material-ui/colors/pink';
    import FavoriteBorderIcon from 'material-ui-icons/FavoriteBorder';
    import FavoriteIcon from 'material-ui-icons/Favorite';
    import PropTypes from 'prop-types';
    ......@@ -29,10 +27,12 @@ class FavoriteButton extends React.Component {
    render() {
    const {isHovered} = this.props;
    if (this.props.isFavorite) {
    return (<FavoriteIcon onClick={this.handleClick} className={classNames('favorite-button-heart', 'favorite-button-heart-favorited')}/>);
    return (<FavoriteIcon onClick={this.handleClick}
    className={classNames('favorite-button-heart', 'favorite-button-heart-favorited')}/>);
    }
    return (<FavoriteBorderIcon onClick={this.handleClick} className={classNames('favorite-button-heart', isHovered ? 'favorite-button-heart-hover' : 'favorite-button-heart-no-hover')}/>);
    return (<FavoriteBorderIcon onClick={this.handleClick}
    className={classNames('favorite-button-heart', isHovered ? 'favorite-button-heart-hover' : 'favorite-button-heart-no-hover')}/>);
    }
    }
    ......
    src/components/MapDialog.js
    View file @ 9aef0da3
    import React from 'react'
    import ReactMapboxGl, { Layer, Feature,Marker,Source,GeoJSONLayer } from "react-mapbox-gl";
    import MapboxClient from 'mapbox'
    import mapboxgl from 'mapbox-gl'
    import {withStyles} from 'material-ui/styles';
    import {addRoute,getGeoLine} from '../utils/mapboxUtils';
    import React from 'react';
    import ReactMapboxGl, {Marker} from "react-mapbox-gl";
    import mapboxgl from 'mapbox-gl';
    import PropTypes from 'prop-types';
    import Button from 'material-ui/Button';
    import Avatar from 'material-ui/Avatar';
    import List, { ListItem, ListItemAvatar, ListItemText } from 'material-ui/List';
    import Dialog, { DialogTitle } from 'material-ui/Dialog';
    import PersonIcon from 'material-ui-icons/Person';
    import AddIcon from 'material-ui-icons/Add';
    import Typography from 'material-ui/Typography';
    import blue from 'material-ui/colors/blue';
    import Dialog from 'material-ui/Dialog';
    const mapboxToken = "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA";
    const emails = ['username@gmail.com', 'user02@gmail.com'];
    const styles = {
    avatar: {
    background: blue[100],
    color: blue[600],
    },
    };
    const token = "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA";
    const Map = ReactMapboxGl({
    accessToken: token,
    attributionControl:false,
    });
    accessToken: mapboxToken,
    attributionControl: false,
    });
    let starbucksLogo = new Image();
    starbucksLogo.src = require('../images/starbucksSVG.svg')
    starbucksLogo.width = 60
    starbucksLogo.height = 60
    const images = ['starbucks',starbucksLogo,{pixelRatio:3}]
    let starbucksLogo = new Image();
    starbucksLogo.src = require('../images/starbucksSVG.svg');
    starbucksLogo.width = 60;
    starbucksLogo.height = 60;
    class MapDialog extends React.Component {
    handleRequestClose = () => {
    this.props.onClose(this.props.selectedValue);
    };
    handleRequestClose = () => {
    this.props.onClose(this.props.selectedValue);
    };
    handleListItemClick = value => {
    this.props.onClose(value);
    };
    render() {
    const {facilities, facility, zoom, center, maxBounds, ...other} = this.props;
    render() {
    const { classes, selectedValue,facility,facilities,zoom,center,maxBounds,...other } = this.props;
    return (
    <Dialog onClose={this.handleRequestClose} {...other}>
    <Map
    onStyleLoad={(map) => {
    map.addControl(new mapboxgl.GeolocateControl({
    positionOptions: {
    enableHighAccuracy: true,
    },
    trackUserLocation: true
    }));
    return (
    <Dialog onClose={this.handleRequestClose} {...other}>
    <Map
    onStyleLoad={(map,e)=>{
    map.addControl(new mapboxgl.GeolocateControl({
    positionOptions: {
    enableHighAccuracy: true,
    },
    trackUserLocation: true
    }));
    }}
    onClick={(map,e)=>{
    this.setState({
    mapDialogOpen: true
    })
    console.log('changed')
    }}
    style="mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde"
    movingMethod={'easeTo'}
    containerStyle={{
    height: "500px",
    width: "600px",
    borderRadius:'5px',
    }}
    center={center}
    zoom={zoom}
    maxBounds={maxBounds}>
    {(facilities.length > 0) && facilities.map((item) =>{
    return(
    <Marker
    key={item.slug}
    coordinates={item.facility_location.coordinate_location.coordinates}
    anchor="bottom">
    <img height={20} width={20} src={require('../images/starbucksSVG.svg')}/>
    {/* <div style={Mark}></div> */}
    </Marker>
    )
    })}
    </Map>
    </Dialog>
    );
    }
    }}
    onClick={() => {
    this.setState({
    mapDialogOpen: true
    });
    }}
    style="mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde"
    movingMethod={'easeTo'}
    containerStyle={{
    height: "500px",
    width: "600px",
    borderRadius: '5px',
    }}
    center={center}
    zoom={zoom}
    maxBounds={maxBounds}>
    {(facilities.length > 0) && facilities.map((item) => {
    return (
    <Marker
    key={item.slug}
    coordinates={item.facility_location.coordinate_location.coordinates}
    anchor="bottom">
    <img height={20} width={20} src={require('../images/starbucksSVG.svg')}/>
    </Marker>
    )
    })}
    </Map>
    </Dialog>
    );
    }
    }
    MapDialog.propTypes = {
    classes: PropTypes.object.isRequired,
    onClose: PropTypes.func,
    selectedValue: PropTypes.string,
    onClose: PropTypes.func,
    selectedValue: PropTypes.string,
    };
    export default withStyles(styles)(MapDialog);
    export default MapDialog;
    src/components/Sidebar.js
    View file @ 9aef0da3
    import React from 'react';
    import Paper from 'material-ui/Paper'
    import Avatar from 'material-ui/Avatar'
    import Typography from 'material-ui/Typography'
    import Paper from 'material-ui/Paper';
    import Avatar from 'material-ui/Avatar';
    import Typography from 'material-ui/Typography';
    import Divider from 'material-ui/Divider';
    import TextwTitle from '../components/TextwTitle'
    import FacilitiesMap from '../components/FacilitiesMap'
    import TextwTitle from '../components/TextwTitle';
    import FacilitiesMap from '../components/FacilitiesMap';
    import classNames from 'classnames';
    import Button from 'material-ui/Button';
    import Chip from 'material-ui/Chip';
    import WeekHours from './WeekHours';
    import { toggleSidebar } from '../actions/ui';
    import FacilityTags from './FacilityTags';
    import {removeBrackets} from '../utils/nameUtils';
    const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, facilities}) => {
    const removeBrackets = (name) => {
    if (typeof(name) === "undefined") {
    return "";
    }
    const openBracket = name.indexOf('[');
    if (openBracket !== -1) {
    return name.substring(0, openBracket);
    }