Commit 78966b20 authored by Mattias J Duffy's avatar Mattias J Duffy
Browse files

favorites sorting

parent cd3bee3c
Pipeline #1855 passed with stage
in 1 minute and 43 seconds
...@@ -4,6 +4,9 @@ ...@@ -4,6 +4,9 @@
<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-capable" content="yes">
<!-- <!--
manifest.json provides metadata used when your web app is added to the 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/ homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
......
...@@ -6,4 +6,5 @@ export const SET_SELECTED_FACILITY = 'SET_SELECTED_FACILITY'; ...@@ -6,4 +6,5 @@ export const SET_SELECTED_FACILITY = 'SET_SELECTED_FACILITY';
export const SET_SEARCH_TERM = 'SET_SEARCH_TERM'; export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
export const ADD_FAVORITE_FACILITY = 'ADD_FAVORITE_FACILITY'; export const ADD_FAVORITE_FACILITY = 'ADD_FAVORITE_FACILITY';
export const REMOVE_FAVORITE_FACILITY = 'REMOVE_FAVORITE_FACILITY'; export const REMOVE_FAVORITE_FACILITY = 'REMOVE_FAVORITE_FACILITY';
export const SET_ALL_FAVORITES = 'SET_ALL_FAVORITES'; export const SET_ALL_FAVORITES = 'SET_ALL_FAVORITES';
\ No newline at end of file export const SORT_BY_FAVORITES = 'SORT_BY_FAVORITES';
\ No newline at end of file
import {GET_FACILITIES, SET_FACILITIES} from './action-types' import {GET_FACILITIES, SET_FACILITIES, SORT_BY_FAVORITES} from './action-types'
export const apiTest = () => { export const apiTest = () => {
return (dispatch) => { return (dispatch) => {
...@@ -41,4 +41,8 @@ export const setFacilities = (facilities) => { ...@@ -41,4 +41,8 @@ export const setFacilities = (facilities) => {
type: SET_FACILITIES, type: SET_FACILITIES,
facilities: JSON.parse(facilities) facilities: JSON.parse(facilities)
} }
}; };
\ No newline at end of file
export const sortByFavorites = () => ({
type: SORT_BY_FAVORITES
})
\ No newline at end of file
...@@ -7,7 +7,8 @@ const CardContainer = ({searchTerm, facilities}) => { ...@@ -7,7 +7,8 @@ const CardContainer = ({searchTerm, facilities}) => {
const filterCards = (facility) => { const filterCards = (facility) => {
const name = facility.facility_name.toLowerCase() const name = facility.facility_name.toLowerCase()
return name.includes(searchTerm.toLowerCase()) return name.includes(searchTerm.toLowerCase())
} }
// console.log(facilities)
return ( return (
<Grid container className={'card-container-root'} spacing={24} justify={'center'} alignItems={'flex-end'}> <Grid container className={'card-container-root'} spacing={24} justify={'center'} alignItems={'flex-end'}>
{facilities.filter(filterCards).map(item =>{ {facilities.filter(filterCards).map(item =>{
......
...@@ -3,7 +3,7 @@ import {connect} from 'react-redux'; ...@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
import {setAllFavorites, toggleSidebar, toggleSidebarMap} from '../actions/ui'; import {setAllFavorites, toggleSidebar, toggleSidebarMap} from '../actions/ui';
import AppBar from '../components/AppBar'; import AppBar from '../components/AppBar';
import Sidebar from '../components/Sidebar'; import Sidebar from '../components/Sidebar';
import {getFacilities, setFacilities} from '../actions/api'; import {getFacilities, setFacilities,sortByFavorites} from '../actions/api';
import CardContainer from '../components/CardContainer'; import CardContainer from '../components/CardContainer';
import SearchBar from './SearchBar'; import SearchBar from './SearchBar';
import KeyboardArrowLeft from 'material-ui-icons/KeyboardArrowLeft'; import KeyboardArrowLeft from 'material-ui-icons/KeyboardArrowLeft';
...@@ -15,13 +15,15 @@ class Layout extends React.Component { ...@@ -15,13 +15,15 @@ class Layout extends React.Component {
super(props); super(props);
} }
componentWillMount() { componentWillMount = () => {
/* /*
This is done in order to immediately load the page (retrieving from local storage is faster This is done in order to immediately load the page (retrieving from local storage is faster
than an API call). After retrieving from local storage, then call the API to see if there than an API call). After retrieving from local storage, then call the API to see if there
are any updates. are any updates.
*/ */
try { try {
localStorage = window.localStorage;
if (localStorage.getItem('facilities')) { if (localStorage.getItem('facilities')) {
const facilities = localStorage.getItem('facilities'); const facilities = localStorage.getItem('facilities');
this.props.setFacilities(facilities) this.props.setFacilities(facilities)
...@@ -30,6 +32,7 @@ class Layout extends React.Component { ...@@ -30,6 +32,7 @@ class Layout extends React.Component {
const favorites = JSON.parse(localStorage.getItem('favorites')); const favorites = JSON.parse(localStorage.getItem('favorites'));
this.props.setAllFavorites(favorites); this.props.setAllFavorites(favorites);
} }
this.props.sortByFavorites()
} catch(e) { } catch(e) {
console.log('you should enable cookies so we can remember what places you favorite') console.log('you should enable cookies so we can remember what places you favorite')
} }
...@@ -38,7 +41,7 @@ class Layout extends React.Component { ...@@ -38,7 +41,7 @@ class Layout extends React.Component {
}; };
render() { render() {
const {isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities, selectedFacility} = this.props; const {isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities, selectedFacility,facilities,searchTerm,sortByFavorites,favorites} = this.props;
return ( return (
<div className={'layout-root'}> <div className={'layout-root'}>
<AppBar isOpen={false} handleMenuClick={() => { <AppBar isOpen={false} handleMenuClick={() => {
...@@ -47,8 +50,8 @@ class Layout extends React.Component { ...@@ -47,8 +50,8 @@ class Layout extends React.Component {
<div className={'layout-main-content'}> <div className={'layout-main-content'}>
<SearchBar suggestions={{}}/> <SearchBar suggestions={{}}/>
<div className={'layout-card-container'}> <div className={'layout-card-container'}>
<CardContainer styles={'layout-card-container'} searchTerm={this.props.searchTerm} <CardContainer styles={'layout-card-container'} searchTerm={searchTerm}
facilities={this.props.facilities}/> facilities={facilities} />
</div> </div>
</div> </div>
<div className={'layout-sidebar-toggle-container'}> <div className={'layout-sidebar-toggle-container'}>
...@@ -61,7 +64,8 @@ class Layout extends React.Component { ...@@ -61,7 +64,8 @@ class Layout extends React.Component {
} }
</button> </button>
</div> </div>
<Sidebar facilities={this.props.facilities} facility={selectedFacility} isSidebarOpen={isSidebarOpen} <button onClick={sortByFavorites}>Text</button>
<Sidebar facilities={facilities} facility={selectedFacility} isSidebarOpen={isSidebarOpen}
isSidebarMapOpen={isSidebarMapOpen} toggleSidebarMap={toggleSidebarMap}/> isSidebarMapOpen={isSidebarMapOpen} toggleSidebarMap={toggleSidebarMap}/>
</div> </div>
</div> </div>
...@@ -70,6 +74,8 @@ class Layout extends React.Component { ...@@ -70,6 +74,8 @@ class Layout extends React.Component {
} }
function mapStateToProps(state) { function mapStateToProps(state) {
console.log('sorted')
console.log(state.facilities.data)
return { return {
facilities: state.facilities.data, facilities: state.facilities.data,
favorites: state.ui.favorites, favorites: state.ui.favorites,
...@@ -86,5 +92,6 @@ export default connect(mapStateToProps, { ...@@ -86,5 +92,6 @@ export default connect(mapStateToProps, {
toggleSidebarMap, toggleSidebarMap,
getFacilities, getFacilities,
setFacilities, setFacilities,
setAllFavorites setAllFavorites,
sortByFavorites
})(Layout); })(Layout);
...@@ -142,7 +142,8 @@ const styles = theme => ({ ...@@ -142,7 +142,8 @@ const styles = theme => ({
}, },
searchIcon:{ searchIcon:{
display:'block', display:'block',
opacity:.54, // opacity:.54,
color:'rgba(0,0,0,0.54)'
}, },
noSuggestInput:{ noSuggestInput:{
display:'flex', display:'flex',
......
import { SET_FACILITIES,GET_FACILITIES } from '../actions/action-types' import { SET_FACILITIES,GET_FACILITIES,SORT_BY_FAVORITES } from '../actions/action-types'
import cloneDeep from 'lodash/cloneDeep';
const defaultState = { const defaultState = {
isLoading:false, isLoading:false,
data:[] data:[]
}; };
export const facilities = (state = defaultState, action) => { export const facilities = (state = defaultState, action,ui) => {
const sortFunc =(a,b) =>{
const favoriteCheck = ui.favorites.includes(b.slug) - ui.favorites.includes(a.slug)
if(favoriteCheck == 0){
if (a.slug < b.slug) {
return -1;
}
if (a.slug > b.slug) {
return 1;
}
return 0
}else{
return ui.favorites.includes(b.slug) - ui.favorites.includes(a.slug);
}
}
switch(action.type){ switch(action.type){
case GET_FACILITIES: case GET_FACILITIES:
return Object.assign({},state,{ return Object.assign({},state,{
isLoading:true, isLoading:true,
}); });
case SET_FACILITIES: case SET_FACILITIES:
return Object.assign({},state,{
return { data:action.facilities.sort(sortFunc),
data:action.facilities, isLoading:false,
isLoading:false });
};
case SORT_BY_FAVORITES:
const newData = cloneDeep(state.data);
return Object.assign({},state,{
data:newData.sort(sortFunc),
});
default: default:
return state return state
} }
......
...@@ -3,10 +3,10 @@ import { routerReducer } from 'react-router-redux'; ...@@ -3,10 +3,10 @@ import { routerReducer } from 'react-router-redux';
import ui from './ui'; import ui from './ui';
import {facilities} from './api' import {facilities} from './api'
const reducers = combineReducers({ const reducers = (state = {},action) => ({
router:routerReducer, router:routerReducer(state.router,action),
ui, ui:ui(state.ui,action),
facilities, facilities:facilities(state.facilities,action,state.ui),
}) })
export default reducers; export default reducers;
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
border: 1.5px solid; border: 1.5px solid;
border-radius: 3px; border-radius: 3px;
padding: 5px; padding: 5px;
font-weight: bold !important; // font-weight: bold !important;
&.facility-status-closed { &.facility-status-closed {
color: white; color: white;
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
.layout-sidebar-toggle-btn { .layout-sidebar-toggle-btn {
width: 24px; width: 24px;
height: 48px; height: 54px;
position: absolute; position: absolute;
top: 16px; top: 16px;
right: -1px; right: -1px;
...@@ -44,8 +44,9 @@ ...@@ -44,8 +44,9 @@
.layout-arrow-icon { .layout-arrow-icon {
position: absolute; position: absolute;
top: 12px; top: 16px;
right: 0; right: 0;
color:rgba(0, 0, 0, 0.54);
width: 24px !important; width: 24px !important;
height: 24px !important; height: 24px !important;
} }
......
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