favorites sorting

public/index.html

@@ -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/

src/actions/action-types.js

@@ -7,3 +7,4 @@ 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';
+export const SORT_BY_FAVORITES = 'SORT_BY_FAVORITES';
\ No newline at end of file

src/actions/api.js

-import {GET_FACILITIES, SET_FACILITIES} from './action-types'
+import {GET_FACILITIES, SET_FACILITIES, SORT_BY_FAVORITES} from './action-types'
 
 export const apiTest = () => {
     return (dispatch) => {
@@ -42,3 +42,7 @@ export const setFacilities = (facilities) => {
         facilities: JSON.parse(facilities)
     }
 };
+
+export const sortByFavorites = () => ({
+        type: SORT_BY_FAVORITES
+})
\ No newline at end of file

src/components/CardContainer.js

@@ -8,6 +8,7 @@ const CardContainer = ({searchTerm, facilities}) => {
         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 =>{

src/containers/Layout.js

@@ -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);

src/containers/SearchBar.js

@@ -142,7 +142,8 @@ const styles = theme => ({
   },
   searchIcon:{
       display:'block',
-      opacity:.54,
+    //   opacity:.54,
+    color:'rgba(0,0,0,0.54)'
   },
   noSuggestInput:{
       display:'flex',

src/reducers/api.js

-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 Object.assign({},state,{
+                data:action.facilities.sort(sortFunc),
+                isLoading:false,
+            }); 
            
-            return {
-                data:action.facilities,
-                isLoading:false
-            };
+        case SORT_BY_FAVORITES:
+            const newData = cloneDeep(state.data);
+            return Object.assign({},state,{
+                data:newData.sort(sortFunc),
+            });
         default:
             return state
     }

src/reducers/index.js

@@ -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;

src/styles/components/facilityStatus.scss

@@ -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;

src/styles/containers/layout.scss

@@ -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;
 }