Commit 9aef0da3 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

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
......@@ -7,23 +7,11 @@
<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.
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet'/>
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>
......@@ -31,15 +19,5 @@
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.
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>
</html>
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';
......
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)
......@@ -47,4 +36,4 @@ export const setFacilities = (facilities) => {
export const sortByFavorites = () => ({
type: SORT_BY_FAVORITES
})
\ No newline at end of file
});
\ No newline at end of file
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
......@@ -28,7 +15,7 @@ export const setSelectedFacility = (facility) => ({
export const setSearchTerm = (term) => ({
type: SET_SEARCH_TERM,
term,
term
});
export const setCampusRegion = (campusRegion) => ({
......@@ -48,7 +35,5 @@ export const removeFavoriteFacility = slug => ({
export const setAllFavorites = (favorites) => ({
type: SET_ALL_FAVORITES,
favorites,
favorites
});
......@@ -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,11 +23,12 @@ class CustomAppBar extends React.Component {
toggleExpand() {
this.setState({
isAppBarExpanded: !this.state.isAppBarExpanded
})
});
};
render() {
return (<div>
return (
<div>
<AppBar position="absolute"
className={classNames('app-bar', this.state.isSearchExpanded && 'app-bar-search-expanded')}>
<Toolbar className={'app-bar-tool-bar'}>
......@@ -43,18 +44,17 @@ class CustomAppBar extends React.Component {
</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')}>
<Button className={classNames('app-bar-link-button', 'app-bar-text-color')}>
About
</Button>
<Button
className={classNames('app-bar-link-button', 'app-bar-text-color')}>
<Button className={classNames('app-bar-link-button', 'app-bar-text-color')}>
Feedback
</Button>
</div>
</Toolbar>
</AppBar>
</div>);
</div>
);
};
}
......
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}) => {
......
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 React from 'react';
import ReactMapboxGl, {Marker} from "react-mapbox-gl";
import {withStyles} from 'material-ui/styles';
import {addRoute,getGeoLine, getMaxBounds} from '../utils/mapboxUtils';
import {getMaxBounds} from '../utils/mapboxUtils';
import MapDialog from './MapDialog';
const token = "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA";
const mapboxToken = "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA";
let starbucksLogo = new Image();
starbucksLogo.src = require('../images/starbucksSVG.svg')
starbucksLogo.width = 60
starbucksLogo.height = 60
const images = ['starbucks',starbucksLogo,{pixelRatio:3}]
starbucksLogo.src = require('../images/starbucksSVG.svg');
starbucksLogo.width = 60;
starbucksLogo.height = 60;
const Map = ReactMapboxGl({
accessToken: token,
interactive:false,
attributionControl:false,
accessToken: mapboxToken,
interactive: false,
attributionControl: false,
});
// const client = new MapboxClient(token);
const Mark = {
backgroundColor: '#e74c3c',
borderRadius: '50%',
width: '12px',
height: '12px',
border: '3px solid #EAA29B',
backgroundColor: '#e74c3c',
borderRadius: '50%',
width: '12px',
height: '12px',
border: '3px solid #EAA29B',
};
class FacilitiesMap extends React.Component {
constructor(props){
super(props)
var sw = new mapboxgl.LngLat(-77.307045, 38.827285);
var ne = new mapboxgl.LngLat(-77.303368,38.831866);
var llb = new mapboxgl.LngLatBounds(sw, ne);
constructor(props) {
super(props);
const southWestBounds = [-77.321649, 38.823919]; //Coordinates for the south-west bound
const northEastBounds = [-77.295213, 38.835720]; //Coordinates for the north-east bound
this.state = {
positionReady:false,
position:{longitude:0,latitude:0},
mappedRoute:false,
fitBounds:[
[ -77.321649,38.823919], // Southwest coordinates
[ -77.295213,38.835720] // Northeast coordinates
],
positionReady: false,
position: {longitude: 0, latitude: 0},
mappedRoute: false,
fitBounds: [southWestBounds, northEastBounds],
maxBounds: getMaxBounds(),
fitBoundsOptions:{
},
mapDialogOpen:false
fitBoundsOptions: {},
mapDialogOpen: false
}
}
componentWillMount = () =>{
// if ("geolocation" in navigator) {
// const t1 = performance.now();
// navigator.geolocation.getCurrentPosition((position) =>{
// const newCoords = position.coords
// this.setState({
// position:newCoords,
// positionReady:true,
// })
// const t2 = performance.now()
// console.log("took "+(t2-t1)/1000 + " seconds to load your current position")
// })
// } else {
// console.log('geolocation is not availabe for your computer')
// }
}
// componentWillReceiveProps = (nextProps) =>{
// try {
// const coordsArr = nextProps.facility.facility_location.coordinate_location.coordinates
// const coordsObj = {latitude:coordsArr[1],longitude:coordsArr[0]}
// if(this.state.positionReady){
// getGeoLine(client,this.state.position,coordsObj,()=>{}).then((route)=>{
// const coords = route.geometry.coordinates
// const bounds = coords.reduce(function(bounds, coord) {
// return bounds.extend(coord);
// }, new mapboxgl.LngLatBounds(coords[0], coords[0]));
// const boundsArr = [[bounds._sw.lng,bounds._sw.lat],[bounds._ne.lng,bounds._ne.lat]]
// console.log(bounds)
// console.log(boundsArr)
// this.setState({
// mappedRoute:coords,
// fitBounds:boundsArr,
// fitBoundsOptions:{padding:20},
// })
// })
// }
// }catch(e){
// }
// }
handleRequestClose = () => {
this.setState({
mapDialogOpen:false,
})
}
mapDialogOpen: false,
});
};
render (){
const {facilities,facility,classes,isMapOpen} = this.props
const {position,positionReady,fitBounds,maxBounds,mappedRoute,fitBoundsOptions,mapDialogOpen} = this.state
let center,zoom;
try{
render() {
const {facilities, facility, classes, isMapOpen} = this.props;
const {fitBounds, maxBounds, fitBoundsOptions, mapDialogOpen} = this.state;
let center, zoom;
try {
center = facility.facility_location.coordinate_location.coordinates;
zoom = [17];
}catch(e){
center = [(maxBounds[0][0]+maxBounds[1][0])/2,(maxBounds[0][1]+maxBounds[1][1])/2]
zoom=[17];
} catch (e) {
center = [(maxBounds[0][0] + maxBounds[1][0]) / 2, (maxBounds[0][1] + maxBounds[1][1]) / 2];
zoom = [17];
}
return(
<div className={classes.mapContainer} style={{'transform': isMapOpen ? 'translateY(0px)' : 'translateY(436px)'}}>
<Map
onStyleLoad={(map,e)=>{
// map.addControl(new mapboxgl.GeolocateControl({
// positionOptions: {
// enableHighAccuracy: true
// },
// trackUserLocation: true
// }));
}}
return (
<div className={classes.mapContainer}
style={{'transform': isMapOpen ? 'translateY(0px)' : 'translateY(436px)'}}>
<Map
animationOptions={{
animate:false
animate: false
}}
onClick={(map,e)=>{
onClick={() => {
this.setState({
mapDialogOpen: true
})
console.log('changed')
});
}}
style="mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde"
movingMethod={'easeTo'}
containerStyle={{
height: "200px",
width: "380px",
margin:"10px",
borderRadius:'3px',
margin: "10px",
borderRadius: '3px',
cursor: 'pointer',
}}
center={center}
zoom={17}
fitBounds={fitBounds}
fitBoundsOptions={fitBoundsOptions}
zoom={zoom}
maxBounds={maxBounds}>
{(facilities.length > 0) && facilities.map((item) =>{
return(
{(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>
<div style={Mark}/>
</Marker>
)
})}
</Map>
<MapDialog
open={mapDialogOpen}
......@@ -170,8 +112,9 @@ class FacilitiesMap extends React.Component {
/>
</div>
)
}
}
}
const styleSheet = {
mapContainer: {
transition: '250ms ease-in-out',
......@@ -181,11 +124,3 @@ const styleSheet = {
export default withStyles(styleSheet)(FacilitiesMap)
\ No newline at end of file
// {<Layer
// type="line"
// layout={{"line-join": "round","line-cap": "round"}}
// paint={{"line-color": "#888","line-width": 5}}
// >
// {mappedRoute && <Feature coordinates={mappedRoute}/>}
// </Layer>}
\ No newline at end of file
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>
......
......@@ -45,13 +45,13 @@ 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'}>
......
......@@ -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>
)
......
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')}/>);
}
}
......
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';