Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
Showing with 385 additions and 625 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
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);
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 = {
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 {fitBounds, maxBounds, fitBoundsOptions, mapDialogOpen} = this.state;
render (){
const {facilities,facility,classes,isMapOpen} = this.props
const {position,positionReady,fitBounds,maxBounds,mappedRoute,fitBoundsOptions,mapDialogOpen} = this.state
let center,zoom;
try{
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
// }));
}}
animationOptions={{
animate:false
}}
onClick={(map,e)=>{
this.setState({
mapDialogOpen: true
})
console.log('changed')
}}
style="mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde"
movingMethod={'easeTo'}
containerStyle={{
height: "200px",
width: "380px",
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(
<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>
<MapDialog
open={mapDialogOpen}
facilities={facilities}
facility={facility}
maxBounds={maxBounds}
zoom={zoom}
center={center}
onClose={this.handleRequestClose}
/>
</div>
)
}
return (
<div className={classes.mapContainer}
style={{'transform': isMapOpen ? 'translateY(0px)' : 'translateY(436px)'}}>
<Map
animationOptions={{
animate: false
}}
onClick={() => {
this.setState({
mapDialogOpen: true
});
}}
style="mapbox://styles/mduffy8/cjbcdxi3v73hp2spiyhxbkjde"
movingMethod={'easeTo'}
containerStyle={{
height: "200px",
width: "380px",
margin: "10px",
borderRadius: '3px',
cursor: 'pointer',
}}
center={center}
fitBounds={fitBounds}
fitBoundsOptions={fitBoundsOptions}
zoom={zoom}
maxBounds={maxBounds}>
{(facilities.length > 0) && facilities.map((item) => {
return (
<Marker
key={item.slug}
coordinates={item.facility_location.coordinate_location.coordinates}
anchor="bottom">
<div style={Mark}/>
</Marker>
)
})}
</Map>
<MapDialog
open={mapDialogOpen}
facilities={facilities}
facility={facility}
maxBounds={maxBounds}
zoom={zoom}
center={center}
onClose={this.handleRequestClose}
/>
</div>
)
}
}
const styleSheet = {
const styleSheet = {
mapContainer: {
transition: '250ms ease-in-out',
width: '100%'
......@@ -180,12 +123,4 @@ const styleSheet = {
};
export default withStyles(styleSheet)(FacilitiesMap)
// {<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
export default withStyles(styleSheet)(FacilitiesMap)
\ No newline at end of file
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