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
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-title" content="What's Open"> <meta name="apple-mobile-web-app-title" content="What's Open">
<meta name="apple-mobile-web-app-capable" content="yes"> <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.
Unlike "/favicon.png" or "favicon.png", "%PUBLIC_URL%/favicon.png" will <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
work correctly both with client-side routing and a non-root public URL. <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
Learn how to configure a non-root public URL by running `npm run build`. <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'/>
<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.
You can add webfonts, meta tags, or analytics to this file. <title>What's Open</title>
The build step will place the bundled scripts into the <body> tag. </head>
<body>
To begin the development, run `npm start` or `yarn start`. <noscript>
To create a production bundle, use `npm run build` or `yarn build`. You need to enable JavaScript to run this app.
--> </noscript>
</body> <div id="root"></div>
</body>
</html> </html>
export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';
export const SET_SIDEBAR = 'SET_SIDEBAR'; export const SET_SIDEBAR = 'SET_SIDEBAR';
export const TOGGLE_SIDEBAR_MAP = 'TOGGLE_SIDEBAR_MAP';
export const SET_FACILITIES = 'SET_FACILITIES'; export const SET_FACILITIES = 'SET_FACILITIES';
export const GET_FACILITIES = 'GET_FACILITIES'; export const GET_FACILITIES = 'GET_FACILITIES';
export const SET_SELECTED_FACILITY = 'SET_SELECTED_FACILITY'; 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 = () => { const API_GET_FACILITIES = 'https://api.srct.gmu.edu/whatsopen/v2/facilities/';
return (dispatch) => {
return fetch('/api/facilities', {'method': 'get'}).then((res) => {
return res.json()
}, (error) => {
console.log(error)
}).then(json => {
console.log(json[0])
})
}
};
export const getFacilities = () => dispatch => { export const getFacilities = () => dispatch => {
dispatch({ dispatch({
type: GET_FACILITIES type: GET_FACILITIES
}); });
const request = new Request('https://api.srct.gmu.edu/whatsopen/v2/facilities/', { const request = new Request(API_GET_FACILITIES, {
method: 'GET' method: 'GET'
}); });
...@@ -29,16 +18,16 @@ export const getFacilities = () => dispatch => { ...@@ -29,16 +18,16 @@ export const getFacilities = () => dispatch => {
} }
return res.json(); return res.json();
}) }).then(json => {
.then(json => {
dispatch(setFacilities(JSON.stringify(json))); dispatch(setFacilities(JSON.stringify(json)));
}); });
}; };
export const setFacilities = (facilities) => { export const setFacilities = (facilities) => {
try{ try {
localStorage.setItem('facilities', facilities); localStorage.setItem('facilities', facilities);
}catch(e){} } catch (e) {
}
return { return {
type: SET_FACILITIES, type: SET_FACILITIES,
facilities: JSON.parse(facilities) facilities: JSON.parse(facilities)
...@@ -46,5 +35,5 @@ export const setFacilities = (facilities) => { ...@@ -46,5 +35,5 @@ export const setFacilities = (facilities) => {
}; };
export const sortByFavorites = () => ({ export const sortByFavorites = () => ({
type: SORT_BY_FAVORITES type: SORT_BY_FAVORITES
}) });
\ No newline at end of file \ No newline at end of file
import { import {
ADD_FAVORITE_FACILITY, ADD_FAVORITE_FACILITY, REMOVE_FAVORITE_FACILITY, SET_ALL_FAVORITES, SET_CAMPUS_REGION, SET_SEARCH_TERM,
REMOVE_FAVORITE_FACILITY, SET_SELECTED_FACILITY, SET_SIDEBAR
SET_SEARCH_TERM,
SET_CAMPUS_REGION,
TOGGLE_SIDEBAR,
TOGGLE_SIDEBAR_MAP,
SET_ALL_FAVORITES, SET_SELECTED_FACILITY, SET_SIDEBAR
} from './action-types'; } from './action-types';
export const toggleSidebar = () => ({
type: TOGGLE_SIDEBAR,
});
export const setSidebar = (setOpen) => ({ export const setSidebar = (setOpen) => ({
type: SET_SIDEBAR, type: SET_SIDEBAR,
setOpen setOpen
}); });
export const toggleSidebarMap = () => ({
type: TOGGLE_SIDEBAR_MAP,
});
export const setSelectedFacility = (facility) => ({ export const setSelectedFacility = (facility) => ({
type: SET_SELECTED_FACILITY, type: SET_SELECTED_FACILITY,
facility facility
}); });
export const setSearchTerm = (term) => ({ export const setSearchTerm = (term) => ({
type: SET_SEARCH_TERM, type: SET_SEARCH_TERM,
term, term
}); });
export const setCampusRegion = (campusRegion) => ({ export const setCampusRegion = (campusRegion) => ({
type: SET_CAMPUS_REGION, type: SET_CAMPUS_REGION,
campusRegion campusRegion
}); });
export const addFavoriteFacility = slug => ({ export const addFavoriteFacility = slug => ({
...@@ -48,7 +35,5 @@ export const removeFavoriteFacility = slug => ({ ...@@ -48,7 +35,5 @@ export const removeFavoriteFacility = slug => ({
export const setAllFavorites = (favorites) => ({ export const setAllFavorites = (favorites) => ({
type: SET_ALL_FAVORITES, type: SET_ALL_FAVORITES,
favorites, favorites
}); });
...@@ -6,11 +6,11 @@ import Button from 'material-ui/Button'; ...@@ -6,11 +6,11 @@ import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton'; import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu'; import MenuIcon from 'material-ui-icons/Menu';
import SearchBar from '../containers/SearchBar'; import SearchBar from '../containers/SearchBar';
import classNames from 'classnames' import classNames from 'classnames';
class CustomAppBar extends React.Component { class CustomAppBar extends React.Component {
constructor(props) { constructor() {
super(); super();
this.state = { this.state = {
isAppBarExpanded: false, isAppBarExpanded: false,
...@@ -23,38 +23,38 @@ class CustomAppBar extends React.Component { ...@@ -23,38 +23,38 @@ class CustomAppBar extends React.Component {
toggleExpand() { toggleExpand() {
this.setState({ this.setState({
isAppBarExpanded: !this.state.isAppBarExpanded isAppBarExpanded: !this.state.isAppBarExpanded
}) });
}; };
render() { render() {
return (<div> return (
<AppBar position="absolute" <div>
className={classNames('app-bar', this.state.isSearchExpanded && 'app-bar-search-expanded')}> <AppBar position="absolute"
<Toolbar className={'app-bar-tool-bar'}> className={classNames('app-bar', this.state.isSearchExpanded && 'app-bar-search-expanded')}>
<img src={require('../images/SRCT_square.svg')} className={'app-bar-logo'}/> <Toolbar className={'app-bar-tool-bar'}>
<Typography type="title" className={classNames('app-bar-title', 'app-bar-text-color')}> <img src={require('../images/SRCT_square.svg')} className={'app-bar-logo'}/>
What's Open <Typography type="title" className={classNames('app-bar-title', 'app-bar-text-color')}>
</Typography> What's Open
<SearchBar onSearchExpand={() => this.setState({isSearchExpanded: true})} </Typography>
onSearchCollapse={() => this.setState({isSearchExpanded: false})}/> <SearchBar onSearchExpand={() => this.setState({isSearchExpanded: true})}
<IconButton onClick={this.toggleExpand} aria-label="Menu" onSearchCollapse={() => this.setState({isSearchExpanded: false})}/>
className={classNames('app-bar-menu-button', 'app-bar-text-color')}> <IconButton onClick={this.toggleExpand} aria-label="Menu"
<MenuIcon/> className={classNames('app-bar-menu-button', 'app-bar-text-color')}>
</IconButton> <MenuIcon/>
<div </IconButton>
className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}> <div
<Button className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}>
className={classNames('app-bar-link-button', 'app-bar-text-color')}> <Button className={classNames('app-bar-link-button', 'app-bar-text-color')}>
About About
</Button> </Button>
<Button <Button className={classNames('app-bar-link-button', 'app-bar-text-color')}>
className={classNames('app-bar-link-button', 'app-bar-text-color')}> Feedback
Feedback </Button>
</Button> </div>
</div> </Toolbar>
</Toolbar> </AppBar>
</AppBar> </div>
</div>); );
}; };
} }
......
import React from 'react' import React from 'react';
import FacilityCard from '../containers/FacilityCard' import FacilityCard from '../containers/FacilityCard';
import Grid from 'material-ui/Grid'; import Grid from 'material-ui/Grid';
const CardContainer = ({searchTerm, campusRegion, facilities}) => { const CardContainer = ({searchTerm, campusRegion, facilities}) => {
......
import React from 'react' import React from 'react';
import ReactMapboxGl, { Layer, Feature,Marker,Source,GeoJSONLayer } from "react-mapbox-gl"; import ReactMapboxGl, {Marker} from "react-mapbox-gl";
import MapboxClient from 'mapbox'
import mapboxgl from 'mapbox-gl'
import {withStyles} from 'material-ui/styles'; import {withStyles} from 'material-ui/styles';
import {addRoute,getGeoLine, getMaxBounds} from '../utils/mapboxUtils'; import {getMaxBounds} from '../utils/mapboxUtils';
import MapDialog from './MapDialog'; import MapDialog from './MapDialog';
const token = "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA"; const mapboxToken = "pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA";
let starbucksLogo = new Image(); let starbucksLogo = new Image();
starbucksLogo.src = require('../images/starbucksSVG.svg') starbucksLogo.src = require('../images/starbucksSVG.svg');
starbucksLogo.width = 60 starbucksLogo.width = 60;
starbucksLogo.height = 60 starbucksLogo.height = 60;
const images = ['starbucks',starbucksLogo,{pixelRatio:3}]
const Map = ReactMapboxGl({ const Map = ReactMapboxGl({
accessToken: token, accessToken: mapboxToken,
interactive:false, interactive: false,
attributionControl:false, attributionControl: false,
}); });
// const client = new MapboxClient(token);
const Mark = { const Mark = {
backgroundColor: '#e74c3c', backgroundColor: '#e74c3c',
borderRadius: '50%', borderRadius: '50%',
width: '12px', width: '12px',
height: '12px', height: '12px',
border: '3px solid #EAA29B', border: '3px solid #EAA29B',
}; };
class FacilitiesMap extends React.Component {
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
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);
this.state = { this.state = {
positionReady:false, positionReady: false,
position:{longitude:0,latitude:0}, position: {longitude: 0, latitude: 0},
mappedRoute:false, mappedRoute: false,
fitBounds:[ fitBounds: [southWestBounds, northEastBounds],
[ -77.321649,38.823919], // Southwest coordinates
[ -77.295213,38.835720] // Northeast coordinates
],
maxBounds: getMaxBounds(), maxBounds: getMaxBounds(),
fitBoundsOptions:{ fitBoundsOptions: {},
}, mapDialogOpen: false
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 = () => { handleRequestClose = () => {
this.setState({ this.setState({
mapDialogOpen:false, mapDialogOpen: false,
}) });
} };
render() {
const {facilities, facility, classes, isMapOpen} = this.props;
const {fitBounds, maxBounds, fitBoundsOptions, mapDialogOpen} = this.state;
render (){ let center, zoom;
const {facilities,facility,classes,isMapOpen} = this.props try {
const {position,positionReady,fitBounds,maxBounds,mappedRoute,fitBoundsOptions,mapDialogOpen} = this.state
let center,zoom;
try{
center = facility.facility_location.coordinate_location.coordinates; center = facility.facility_location.coordinate_location.coordinates;
zoom = [17]; zoom = [17];
}catch(e){ } catch (e) {
center = [(maxBounds[0][0]+maxBounds[1][0])/2,(maxBounds[0][1]+maxBounds[1][1])/2] center = [(maxBounds[0][0] + maxBounds[1][0]) / 2, (maxBounds[0][1] + maxBounds[1][1]) / 2];
zoom=[17]; zoom = [17];
} }
return(
<div className={classes.mapContainer} style={{'transform': isMapOpen ? 'translateY(0px)' : 'translateY(436px)'}}> return (
<Map <div className={classes.mapContainer}
onStyleLoad={(map,e)=>{ style={{'transform': isMapOpen ? 'translateY(0px)' : 'translateY(436px)'}}>
// map.addControl(new mapboxgl.GeolocateControl({ <Map
// positionOptions: { animationOptions={{
// enableHighAccuracy: true animate: false
// }, }}
// trackUserLocation: true onClick={() => {
// })); this.setState({
mapDialogOpen: true
}} });
animationOptions={{ }}
animate:false style="mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde"
}} movingMethod={'easeTo'}
onClick={(map,e)=>{ containerStyle={{
this.setState({ height: "200px",
mapDialogOpen: true width: "380px",
}) margin: "10px",
console.log('changed') borderRadius: '3px',
}} cursor: 'pointer',
style="mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde" }}
movingMethod={'easeTo'} center={center}
containerStyle={{ fitBounds={fitBounds}
height: "200px", fitBoundsOptions={fitBoundsOptions}
width: "380px", zoom={zoom}
margin:"10px", maxBounds={maxBounds}>
borderRadius:'3px', {(facilities.length > 0) && facilities.map((item) => {
cursor: 'pointer', return (
<Marker
}} key={item.slug}
center={center} coordinates={item.facility_location.coordinate_location.coordinates}
zoom={17} anchor="bottom">
fitBounds={fitBounds} <div style={Mark}/>
fitBoundsOptions={fitBoundsOptions} </Marker>
zoom={zoom} )
maxBounds={maxBounds}> })}
{(facilities.length > 0) && facilities.map((item) =>{ </Map>
return( <MapDialog
<Marker open={mapDialogOpen}
key={item.slug} facilities={facilities}
coordinates={item.facility_location.coordinate_location.coordinates} facility={facility}
anchor="bottom"> maxBounds={maxBounds}
{/*<img height={20} width={20} src={require('../images/starbucksSVG.svg')}/>*/} zoom={zoom}
<div style={Mark}></div> center={center}
</Marker> onClose={this.handleRequestClose}
) />
})} </div>
)
</Map> }
<MapDialog
open={mapDialogOpen}
facilities={facilities}
facility={facility}
maxBounds={maxBounds}
zoom={zoom}
center={center}
onClose={this.handleRequestClose}
/>
</div>
)
}
} }
const styleSheet = {
const styleSheet = {
mapContainer: { mapContainer: {
transition: '250ms ease-in-out',