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 @@
<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/
......
......@@ -6,4 +6,5 @@ export const SET_SELECTED_FACILITY = 'SET_SELECTED_FACILITY';
export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
export const ADD_FAVORITE_FACILITY = 'ADD_FAVORITE_FACILITY';
export const REMOVE_FAVORITE_FACILITY = 'REMOVE_FAVORITE_FACILITY';
export const SET_ALL_FAVORITES = 'SET_ALL_FAVORITES';
\ No newline at end of file
export const SET_ALL_FAVORITES = 'SET_ALL_FAVORITES';
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 = () => {
return (dispatch) => {
......@@ -41,4 +41,8 @@ export const setFacilities = (facilities) => {
type: SET_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}) => {
const filterCards = (facility) => {
const name = facility.facility_name.toLowerCase()
return name.includes(searchTerm.toLowerCase())
}
}
// console.log(facilities)
return (
<Grid container className={'card-container-root'} spacing={24} justify={'center'} alignItems={'flex-end'}>
{facilities.filter(filterCards).map(item =>{
......
......@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
import {setAllFavorites, toggleSidebar, toggleSidebarMap} from '../actions/ui';
import AppBar from '../components/AppBar';
import Sidebar from '../components/Sidebar';
import {getFacilities, setFacilities} from '../actions/api';
import {getFacilities, setFacilities,sortByFavorites} from '../actions/api';
import CardContainer from '../components/CardContainer';
import SearchBar from './SearchBar';
import KeyboardArrowLeft from 'material-ui-icons/KeyboardArrowLeft';
......@@ -15,13 +15,15 @@ class Layout extends React.Component {
super(props);
}
componentWillMount() {
componentWillMount = () => {
/*
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
are any updates.
*/
try {
localStorage = window.localStorage;
if (localStorage.getItem('facilities')) {
const facilities = localStorage.getItem('facilities');
this.props.setFacilities(facilities)
......@@ -30,6 +32,7 @@ class Layout extends React.Component {
const favorites = JSON.parse(localStorage.getItem('favorites'));
this.props.setAllFavorites(favorites);
}
this.props.sortByFavorites()
} catch(e) {
console.log('you should enable cookies so we can remember what places you favorite')
}
......@@ -38,7 +41,7 @@ class Layout extends React.Component {
};
render() {
const {isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities, selectedFacility} = this.props;
const {isSidebarOpen, isSidebarMapOpen, toggleSidebar, toggleSidebarMap, getFacilities, selectedFacility,facilities,searchTerm,sortByFavorites,favorites} = this.props;
return (
<div className={'layout-root'}>
<AppBar isOpen={false} handleMenuClick={() => {
......@@ -47,8 +50,8 @@ class Layout extends React.Component {
<div className={'layout-main-content'}>
<SearchBar suggestions={{}}/>
<div className={'layout-card-container'}>
<CardContainer styles={'layout-card-container'} searchTerm={this.props.searchTerm}
facilities={this.props.facilities}/>
<CardContainer styles={'layout-card-container'} searchTerm={searchTerm}
facilities={facilities} />
</div>
</div>
<div className={'layout-sidebar-toggle-container'}>
......@@ -61,7 +64,8 @@ class Layout extends React.Component {
}
</button>
</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}/>
</div>
</div>
......@@ -70,6 +74,8 @@ class Layout extends React.Component {
}
function mapStateToProps(state) {
console.log('sorted')
console.log(state.facilities.data)
return {
facilities: state.facilities.data,
favorites: state.ui.favorites,
......@@ -86,5 +92,6 @@ export default connect(mapStateToProps, {
toggleSidebarMap,
getFacilities,
setFacilities,
setAllFavorites
setAllFavorites,
sortByFavorites
})(Layout);
......@@ -142,7 +142,8 @@ const styles = theme => ({
},
searchIcon:{
display:'block',
opacity:.54,
// opacity:.54,
color:'rgba(0,0,0,0.54)'
},
noSuggestInput:{
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 = {
isLoading:false,
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){
case GET_FACILITIES:
return Object.assign({},state,{
isLoading:true,
});
case SET_FACILITIES:
return {
data:action.facilities,
isLoading:false
};
return Object.assign({},state,{
data:action.facilities.sort(sortFunc),
isLoading:false,
});
case SORT_BY_FAVORITES:
const newData = cloneDeep(state.data);
return Object.assign({},state,{
data:newData.sort(sortFunc),
});
default:
return state
}
......
......@@ -3,10 +3,10 @@ import { routerReducer } from 'react-router-redux';
import ui from './ui';
import {facilities} from './api'
const reducers = combineReducers({
router:routerReducer,
ui,
facilities,
const reducers = (state = {},action) => ({
router:routerReducer(state.router,action),
ui:ui(state.ui,action),
facilities:facilities(state.facilities,action,state.ui),
})
export default reducers;
......@@ -5,7 +5,7 @@
border: 1.5px solid;
border-radius: 3px;
padding: 5px;
font-weight: bold !important;
// font-weight: bold !important;
&.facility-status-closed {
color: white;
......
......@@ -31,7 +31,7 @@
.layout-sidebar-toggle-btn {
width: 24px;
height: 48px;
height: 54px;
position: absolute;
top: 16px;
right: -1px;
......@@ -44,8 +44,9 @@
.layout-arrow-icon {
position: absolute;
top: 12px;
top: 16px;
right: 0;
color:rgba(0, 0, 0, 0.54);
width: 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