Skip to content

GitLab

Commit 0e4a6553 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Resolved ui bugs from prior dependency bump, cleaned some code.

parent 4de8da0f
Hide whitespace changes
Inline Side-by-side
src/components/CardContainer.tsx
View file @ 0e4a6553
......@@ -5,13 +5,10 @@ import FacilityCard from '../containers/FacilityCard';
import Grid from '@material-ui/core/Grid';
class CardContainer extends React.Component<CardContainerProps, CardContainerState> {
class CardContainer extends React.Component<CardContainerProps> {
constructor(props: CardContainerProps) {
super(props);
this.state = {
selectedSlug: null
};
}
filterCards = (facility: IFacility) => {
......@@ -40,25 +37,15 @@ class CardContainer extends React.Component<CardContainerProps, CardContainerSta
facilityCategory.includes(lSearchTerm) || hasTag || friendlyName.includes(lSearchTerm);
}
handleFacilityClick = (slug: string) => {
const newValue = (slug !== this.state.selectedSlug) ? slug : null;
this.setState({
selectedSlug: newValue
});
}
render() {
const {facilities} = this.props;
return (
<Grid container={true} className={'card-container-root'} spacing={24} justify={'center'} alignItems={'flex-end'}>
{facilities.filter(this.filterCards).map((item) => {
const isSelected = (item.slug === this.state.selectedSlug);
return (
<Grid key={item.slug} item={true}>
<FacilityCard facility={item} facilities={facilities} isSelected={isSelected} setSelected={this.handleFacilityClick}/>
<FacilityCard facility={item} facilities={facilities}/>
</Grid>
);
})}
......@@ -73,8 +60,4 @@ export interface CardContainerProps {
campusRegion: CampusRegion;
}
export interface CardContainerState {
selectedSlug: string;
}
export default CardContainer;
\ No newline at end of file
src/components/MapDialog.tsx
View file @ 0e4a6553
import * as React from 'react';
import { IFacility } from '../models/facility.model';
import FacilitiesMap from './FacilitiesMap';
import FacilitiesMap from '../containers/FacilitiesMap';
import Dialog from '@material-ui/core/Dialog';
import IconButton from '@material-ui/core/IconButton';
......
src/components/Sidebar.tsx
View file @ 0e4a6553
......@@ -4,7 +4,7 @@ import * as phoneFormatter from 'phone-formatter';
import { IFacility } from '../models/facility.model';
import TextwTitle from './TextwTitle';
import FacilitiesMap from './FacilitiesMap';
import FacilitiesMap from '../containers/FacilitiesMap';
import MapDialog from './MapDialog';
import WeekHours from './WeekHours';
......
src/components/FacilitiesMap.tsx → src/containers/FacilitiesMap.tsx
View file @ 0e4a6553
......@@ -3,12 +3,14 @@ import ReactMapboxGl, { Marker, Popup } from 'react-mapbox-gl';
import { getMaxBounds, getCenterOfCampusRegion } from '../utils/mapboxUtils';
import * as mapboxgl from 'mapbox-gl';
import { removeBrackets } from '../utils/nameUtils';
import { IFacility, CampusRegion, IFacilityLocation } from '../models/facility.model';
import { IFacility, CampusRegion, FacilitiesByLocation } from '../models/facility.model';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import FormControl from '@material-ui/core/FormControl';
import Typography from '@material-ui/core/Typography';
import { ApplicationState } from '../store';
import { connect } from 'react-redux';
const mapboxToken = 'pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA';
......@@ -40,7 +42,6 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
campusRegion: campusRegion,
zoom: [17],
center: facility && facility.facility_location ? facility.facility_location.coordinate_location.coordinates : getCenterOfCampusRegion(campusRegion),
facilityLocations: [],
selectedLocation: null,
isLoaded: false
};
......@@ -51,10 +52,6 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
const campusRegion = facility && facility.facility_location ? facility.facility_location.campus_region : CampusRegion.Fairfax;
this.changeRegion(campusRegion, facility);
if (this.state.facilityLocations.length === 0) {
this.generateLocationArray(facilities);
}
}
changeRegion = (campusRegion: CampusRegion, facility: IFacility = this.props.facility) => {
......@@ -71,27 +68,7 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
}, 100);
}
generateLocationArray = (facilities: IFacility[]) => {
const locations: FacilityMapLocation[] = [];
facilities.forEach((facility) => {
const location = locations.find((loc) => loc.location.id === facility.facility_location.id);
if (location) {
location.facilities.push(facility);
} else {
locations.push({
location: facility.facility_location,
facilities: [facility]
});
}
});
this.setState({
facilityLocations: locations
});
}
selectLocation = (location: FacilityMapLocation) => {
selectLocation = (location: FacilitiesByLocation) => {
const {interactive = true} = this.props;
const oldSelectedLocation = this.state.selectedLocation;
......@@ -107,8 +84,8 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
}
render() {
const {interactive = true} = this.props;
const {maxBounds, facilityLocations, selectedLocation, center, zoom} = this.state;
const {interactive = true, facilitiesByLocation} = this.props;
const {maxBounds, selectedLocation, center, zoom} = this.state;
return (
<this.Map
onStyleLoad={(map: any) => {
......@@ -144,7 +121,7 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
<Select
disableUnderline={true}
value={this.state.campusRegion}
onChange={(e) => this.changeRegion((CampusRegion as any)[e.target.value])}>
onChange={(e) => this.changeRegion(e.target.value as CampusRegion)}>
<MenuItem value={CampusRegion.Fairfax}>Fairfax</MenuItem>
<MenuItem value={CampusRegion.Arlington}>Arlington</MenuItem>
<MenuItem value={CampusRegion.PrinceWilliam}>SciTech</MenuItem>
......@@ -153,7 +130,7 @@ class FacilitiesMap extends React.Component<FacilitiesMapProps, FacilitiesMapSta
</FormControl>
)}
{(facilityLocations.length > 0) && facilityLocations.map((item) => {
{(facilitiesByLocation.length > 0) && facilitiesByLocation.map((item) => {
const location = item.location;
return (
......@@ -196,12 +173,7 @@ export interface FacilitiesMapProps {
facility: IFacility;
facilities: IFacility[];
interactive: boolean;
}
interface FacilityMapLocation {
location: IFacilityLocation;
facilities: IFacility[];
facilitiesByLocation: FacilitiesByLocation[];
}
export interface FacilitiesMapState {
......@@ -209,9 +181,12 @@ export interface FacilitiesMapState {
campusRegion: CampusRegion;
zoom: number[];
center: number[];
facilityLocations: FacilityMapLocation[];
selectedLocation: FacilityMapLocation;
selectedLocation: FacilitiesByLocation;
isLoaded: boolean;
}
export default FacilitiesMap;
\ No newline at end of file
const mapStateToProps = (state: ApplicationState) => ({
facilitiesByLocation: state.facilities.facilitiesByLocation || []
});
export default connect(mapStateToProps)(FacilitiesMap);
\ No newline at end of file
src/containers/FacilityCard.tsx
View file @ 0e4a6553
......@@ -32,25 +32,27 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
}
shouldComponentUpdate = (nextProps: FacilityCardProps) => {
if (this.props.isSelected !== nextProps.isSelected) {
if (this.isFacilitySelected() !== (nextProps.selectedFacility.slug === this.props.facility.slug)) {
return true;
}
const dateModified = nextProps.facility.modified;
if (dateModified !== this.state.modified) {
this.setState({
modified: dateModified
});
return true;
}
return false;
}
handleCardClick = () => {
this.props.setSelected(this.props.facility.slug);
isFacilitySelected = (): boolean => this.props.selectedFacility.slug === this.props.facility.slug;
const newState = !this.props.isSelected;
handleCardClick = () => {
const newState = !this.isFacilitySelected();
trackPiwikEvent('card-action', 'click');
......@@ -60,9 +62,8 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
}, 0);
}
render() {
const {facility, facilities, favorites, addFavoriteFacility, removeFavoriteFacility, isSelected} = this.props;
const {facility, facilities, favorites, addFavoriteFacility, removeFavoriteFacility} = this.props;
const dayOfWeek = [6, 0, 1, 2, 3, 4, 5][new Date().getDay()];
......@@ -86,17 +87,13 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
facility.facility_location.friendly_building :
facility.facility_location.building;
return (
<Card onClick={this.handleCardClick} className={classNames('fc-root', isSelected && 'fc-selected')}
<Card onClick={this.handleCardClick} className={classNames('fc-root', this.isFacilitySelected() && 'fc-selected')}
elevation={3}>
{/*<CardMedia className={'fc-media'}
image={'https://gmucampus.files.wordpress.com/2010/09/00southside2.jpg'} />*/}
<div className={'fc-logo-container'}>
<img className={'fc-logo'}
alt={facility.slug} src={facility.logo} />
</div>
<FavoriteButton slug={facility.slug} initialState={favorites.includes(facility.slug)}
addFavoriteFacility={addFavoriteFacility}
removeFavoriteFacility={removeFavoriteFacility} />
......@@ -110,9 +107,11 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
{removeBrackets(facility.facility_name)}
</Typography>
</Grid>
<Grid item={true} className={'fc-small-grid-item-spacing'}>
<FacilityCategory category={facility.facility_category} />
</Grid>
<Grid item={true} className={'fc-small-grid-item-spacing fc-display-hours'}>
<Typography variant={'body1'}>
{`Today: ${getDisplayHours()}`}
......@@ -137,7 +136,7 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
</Grid>
</CardContent>
<FacilityDialog facility={facility} facilities={facilities} isOpen={isSelected}
<FacilityDialog facility={facility} facilities={facilities} isOpen={this.isFacilitySelected()}
onClose={this.handleCardClick} />
</Card>
);
......@@ -147,10 +146,8 @@ class FacilityCard extends React.Component<FacilityCardProps, FacilityCardState>
export interface FacilityCardProps {
facility: IFacility;
facilities: IFacility[];
isSelected: boolean;
favorites: string[];
selectedFacility: IFacility;
setSelected: (slug: string) => void;
setSelectedFacility: (facility: IFacility) => void;
addFavoriteFacility: (slug: string) => void;
removeFavoriteFacility: (slug: string) => void;
......
src/containers/SearchBar.tsx
View file @ 0e4a6553
......@@ -42,8 +42,7 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
handleRegionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
trackPiwikEvent('change-campus', e.target.value);
const campusRegion = (CampusRegion as any)[e.target.value];
const campusRegion: CampusRegion = e.target.value as CampusRegion;
this.setState({
campus: campusRegion
});
......
src/models/facility.model.ts
View file @ 0e4a6553
......@@ -62,4 +62,9 @@ export interface IFacilityScheduleEntry {
end_day: number;
start_time: string;
end_time: string;
}
export interface FacilitiesByLocation {
location: IFacilityLocation;
facilities: IFacility[];
}
\ No newline at end of file
src/store/facility/facility.reducer.ts
View file @ 0e4a6553
import { IFacility } from '../../models/facility.model';
import { IFacility, FacilitiesByLocation } from '../../models/facility.model';
import { FacilityAction, FacilityActionTypes } from './facility.action-types';
import { generateFacilitiesByLocation } from '../../utils/mapboxUtils';
export interface FacilityState {
isFetching: boolean;
facilities: IFacility[];
facilitiesByLocation: FacilitiesByLocation[];
}
export const facilityReducer = (state: FacilityState = {isFetching: false, facilities: []}, action: FacilityAction) => {
export const facilityReducer = (state: FacilityState = {isFetching: false, facilities: [], facilitiesByLocation: []}, action: FacilityAction) => {
switch (action.type) {
case FacilityActionTypes.FETCH_FACILITIES: {
return {
......@@ -18,7 +20,8 @@ export const facilityReducer = (state: FacilityState = {isFetching: false, facil
return {
...state,
isFetching: false,
facilities: action.facilities
facilities: action.facilities,
facilitiesByLocation: generateFacilitiesByLocation(action.facilities)
};
}
default:
......
src/styles/components/mapDialog.scss
View file @ 0e4a6553
.map-dialog-close-btn {
position: absolute !important;
z-index: 100;
top: 10px;
left: 10px;
top: 5px;
left: 5px;
width: 30px !important;
height: 30px !important;
background-color: white !important;
border-radius: 5px !important;
box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
padding: 4px !important;
}
\ No newline at end of file
src/styles/containers/alertContainer.scss
View file @ 0e4a6553
......@@ -10,6 +10,7 @@
.alert-container-close-btn {
width: 20px !important;
height: 20px !important;
padding: 0 !important;
}
.alert-container-close-icon {
......
src/styles/containers/facilityCard.scss
View file @ 0e4a6553
......@@ -9,12 +9,12 @@
//Above lg
@media screen and (min-width: map-get($breakpoints, lg)) {
.fc-root:hover {
.favorite-button-heart {
color: grey;
}
.fc-root:hover {
.favorite-button-heart {
color: grey;
}
}
}
.fc-card-content {
padding: 8px 4px 0 !important;
......@@ -101,88 +101,46 @@
}
}
/**
//Between lg and xl
@media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) {
.fc-root {
width: 250px * $fc-lg-scale;
height: 250px;
}
.fc-small-grid-item-spacing {
padding: 0 8px !important;
}
.fc-media {
height: 115px * $fc-lg-scale;
}
.fc-logo-container {
width: 100px * $fc-lg-scale;
height: 100px * $fc-lg-scale;
margin-top: -60px * $fc-lg-scale;
border-radius: 50%;
border: 5px * $fc-lg-scale solid white;
}
.fc-logo {
width: 100px * $fc-lg-scale;
height: 100px * $fc-lg-scale;
}
.fc-extra-info {
font-size: 11px;
}
.fc-card-map-marker-icon {
height: 20px !important;
width: 20px !important;
}
.fc-root {
width: 270px !important;
display: flex !important;
align-items: center !important;
}
**/
//@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.fc-root {
width: 270px !important;
display: flex !important;
align-items: center !important;
}
.fc-card-content {
flex: 1;
min-width: 0;
}
.fc-card-content {
flex: 1;
min-width: 0;
}
.fc-media {
display: none !important;
}
.fc-media {
display: none !important;
}
.fc-title-container {
width: 90%;
}
.fc-title-container {
width: 90%;
}
.fc-extra-info {
max-width: 100% !important;
width: 100% !important;
padding: 2px 0 !important;
justify-content: center;
font-size: 11px;
}
.fc-extra-info {
max-width: 100% !important;
width: 100% !important;
padding: 2px 0 !important;
justify-content: center;
font-size: 11px;
}
.fc-small-grid-item-spacing {
padding: 0 8px !important;
}
.fc-small-grid-item-spacing {
padding: 0 8px !important;
}
.fc-logo-container {
margin: 0 0 0 5px !important;
}
.fc-logo-container {
margin: 0 0 0 5px !important;
}
.fc-logo {
margin:5px;
}
.fc-logo {
margin:5px;
}
.fc-card-map-marker-icon {
height: 20px !important;
width: 20px !important;
}
//}
\ No newline at end of file
.fc-card-map-marker-icon {
height: 20px !important;
width: 20px !important;
}
\ No newline at end of file
src/styles/whatsOpen.scss
View file @ 0e4a6553
......@@ -4,7 +4,6 @@
@import './components/alert';
@import './components/appBar';
@import './components/cardContainer';
@import './components/facilitiesMap';
@import './components/facilityCategory';
@import './components/facilityDialog';
@import './components/facilityStatus';
......@@ -15,6 +14,7 @@
@import './components/weekHours';
/* Containers */
@import './containers/alertContainer';
@import './containers/facilitiesMap';
@import './containers/facilityCard';
@import './containers/layout';
@import './containers/searchBar';
......
src/utils/mapboxUtils.ts
View file @ 0e4a6553
import { CampusRegion } from '../models/facility.model';
import { CampusRegion, IFacility, FacilitiesByLocation } from '../models/facility.model';
const campusBounds = {
fairfax: [
......@@ -95,4 +95,22 @@ const getCenterOfCampusRegion = (campus: CampusRegion) => {
return [(maxBounds[0][0] + maxBounds[1][0]) / 2, (maxBounds[0][1] + maxBounds[1][1]) / 2];
};
export {addRoute, getGeoLine, getMaxBounds, getCenterOfCampusRegion};
\ No newline at end of file
const generateFacilitiesByLocation = (facilities: IFacility[]): FacilitiesByLocation[] => {
const locations: FacilitiesByLocation[] = [];
facilities.forEach((facility) => {
const location = locations.find((loc) => loc.location.id === facility.facility_location.id);
if (location) {
location.facilities.push(facility);
} else {
locations.push({
location: facility.facility_location,
facilities: [facility]
});
}
});
return locations;
};
export {addRoute, getGeoLine, getMaxBounds, getCenterOfCampusRegion, generateFacilitiesByLocation};
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment