add explicit pool filter sort by setting

KevinAst · Oct 13, 2017 · d5cc0b2 · d5cc0b2
1 parent f3d2ddb
commit d5cc0b2
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 7 deletions.
diff --git a/src/appState/listView.js b/src/appState/listView.js
@@ -10,7 +10,8 @@ export default combineReducers({
   filter: reducerHash({ // filter applied to visual listView
     [actions.eateries.applyFilter]: (state, action) => action.filter,
   }, { // initialState
-    distance: null, // distance in miles (default: null - for any distance), when set: implies sort by distance
+    distance: null,    // distance in miles (default: null - for any distance)
+    sortOrder: 'name', // sortOrder: 'name'/'distance'
   }),
 
   entries: reducerHash({ // filtered entries displayed in visual listView

diff --git a/src/comp/EateriesListScreen.js b/src/comp/EateriesListScreen.js
@@ -37,7 +37,7 @@ function EateriesListScreen({entries, dbPool, filter, showDetail, handleSpin}) {
     const content = [];
     eateries.forEach( eatery => {
       // optionally supply sub-header when ordered by distance
-      if (filter.distance && eatery.distance !== currentDistance) {
+      if (filter.sortOrder === 'distance' && eatery.distance !== currentDistance) {
         currentDistance = eatery.distance;
         content.push((
           <ListItem itemDivider key={`subheader${currentDistance}`}>

diff --git a/src/comp/EateryFilterScreen.js b/src/comp/EateryFilterScreen.js
@@ -17,6 +17,7 @@ import {Body,
 import commonStyles          from './commonStyles';
 import eateryFilterFormMeta  from '../logic/iForms/eateryFilterFormMeta';
 import ITextField            from '../util/iForms/comp/ITextField';
+import IRadioField           from '../util/iForms/comp/IRadioField';
 
 
 /**
@@ -29,6 +30,11 @@ function EateryFilterScreen({iForm}) {
 
   const formLabel       = iForm.getLabel();
   const formInProcess   = iForm.inProcess();
+  const sortOrderRadioProps = {
+    fieldName: 'sortOrder',
+    iForm,
+  };
+
 
   return (
     <Container style={commonStyles.container}>
@@ -64,7 +70,12 @@ function EateryFilterScreen({iForm}) {
                       keyboardType="numeric"/>
           <Note>   ... optionally prune entries within this distance</Note>
           <Note>   ... leave blank to view entire pool</Note>
-          <Note>   ... when supplied, will order by distance</Note>
+
+          {verticalSpacing}
+          <IRadioField {...sortOrderRadioProps}>
+            <IRadioField.Op value="name"     label="Restaurant" {...sortOrderRadioProps}/>
+            <IRadioField.Op value="distance" label="Distance" {...sortOrderRadioProps}/>
+          </IRadioField>
 
           {verticalSpacing}
 

diff --git a/src/logic/eateries.js b/src/logic/eateries.js
@@ -116,11 +116,13 @@ export const processFilter = createLogic({
     // console.log(`xx logic: eatery.processFilter, action is: `, action);
     //   action: {
     //     "domain": {
-    //       "distance": 6, // null when NOT supplied
+    //       "distance":  6, // null when NOT supplied
+    //       "sortOrder": "name",
     //     },
     //     "type": "eateries.applyFilter.process",
     //     "values": {
     //       "distance": 6, // null when NOT supplied
+    //       "sortOrder": "name",
     //     },
     //   }
 
@@ -162,8 +164,8 @@ export const applyFilter = createLogic({
                             return filter.distance ? entry.distance <= filter.distance : true;
                           })
                           .sort((e1, e2) => { // sort entries
-                            // ... order by distance (when supplied)
-                            let order = filter.distance ? e1.distance-e2.distance : 0;
+                            // ... order by distance (when requested)
+                            let order = filter.sortOrder==='distance' ? e1.distance-e2.distance : 0;
                             // ... order by name - either secondary (within distance), or primary (when no distance)
                             if (order === 0)
                               order = e1.name.localeCompare(e2.name);

diff --git a/src/logic/iForms/eateryFilterFormMeta.js b/src/logic/iForms/eateryFilterFormMeta.js
@@ -2,14 +2,17 @@ import Yup        from 'yup';
 import IFormMeta  from '../../util/iForms/IFormMeta';
 import actions    from '../../actions';
 
-const distanceMsg = 'Miles should be a positive number (when supplied)';
+const distanceMsg  = 'Miles should be a positive number (when supplied)';
+const sortOrderMsg = "Sort order should be either 'name' or 'distance'";
 
 export default IFormMeta({
   formDesc:  'Pool Filter',
   formSchema: Yup.object().shape({
     // distance is an optional positive number (or null for any distance)
     // NOTE: could NOT get default() to work, but transform() to null, works in conjunction with .nullable()
     distance:   Yup.number().label('Miles').typeError(distanceMsg).nullable().transform(val => val || null).positive(distanceMsg),
+    sortOrder:  Yup.string().label('Sort').typeError(sortOrderMsg).required().matches(/(name|distance)/, sortOrderMsg),
+
   }),
   formActionsAccessor: ()         => actions.eateries.applyFilter,
   formStateSelector:   (appState) => appState.eateries.listView.filterForm,