routes: added range rising

backend/routes/route/list.js

@@ -15,8 +15,8 @@ module.exports = async (req, res) => {
     criteria = {
       ...criteria,
       $or: [
-        { title: new RegExp(title, 'ig') },
+        { title: new RegExp(title.trim(), 'ig') },
-        { _id: new RegExp(title, 'ig') },
+        { _id: new RegExp(title.trim(), 'ig') },
       ],
     };
   }
@@ -36,18 +36,32 @@ module.exports = async (req, res) => {
     !author || item.owner._id === author
   ));
 
-  const limits = list.reduce(({ min, max }, { distance: dist }) => ({
+  let limits = list.reduce(({ min, max }, { distance: dist }) => ({
     min: Math.ceil(Math.min(dist, min) / 20) * 20,
     max: Math.ceil(Math.max(dist, max) / 20) * 20,
-  }), { min: 0, max: 0 });
+  }), { min: 999999, max: 0 });
+
+  const minDist = parseInt(distance[0], 10);
+  const maxDist = parseInt(distance[1], 10);
+  // const maxDist = parseInt(distance[1], 10) > parseInt(distance[0], 10)
+  //   ? parseInt(distance[1], 10)
+  //   : 10000;
 
   if (distance && distance.length === 2) {
     list = list.filter(item => (
-      item.distance >= parseInt(distance[0], 10) &&
+      item.distance >= minDist &&
-      item.distance <= parseInt(distance[1], 10)
+      item.distance <= maxDist
     ));
   }
 
+  if (list.length === 0) {
+    limits = { min: 0, max: 0 };
+  } else if (limits.max === 0) {
+    limits = { min: 0, max: 0 };
+  } else if (limits.min === limits.max) {
+    limits = { min: limits.max - 20, max: limits.max };
+  }
+
   res.send({
     success: true,
     list,

src/components/dialogs/MapListMoreDialog.jsx

@@ -88,9 +88,10 @@ class Component extends React.Component<Props> {
               marks={marks}
               step={20}
               onChange={this.props.searchSetDistance}
-              defaultValue={distance}
+              defaultValue={[0, 10000]}
+              value={distance}
               pushable={20}
-              disabled={list.length === 0 || min >= max}
+              disabled={min >= max}
             />
 
           </div>

src/redux/user/reducer.js

@@ -128,18 +128,42 @@ const searchSetTab = (state, { tab = 'mine' }) => ({
   }
 });
 
-const searchPutRoutes = (state, { list = [], min, max }) => ({
+const newDistCalc = ({ distance, min, max, filter }) => {
+  if (filter.min === filter.max) {
+    // slider was disabled
+    return [min, max];
+  }
+
+  // state.routes.filter.distance
+};
+
+const searchPutRoutes = (state, { list = [], min, max }) => {
+  console.log('a', state.routes.filter.distance[0], state.routes.filter.min);
+  return ({
     ...state,
     routes: {
       ...state.routes,
       list,
       filter: {
         ...state.routes.filter,
-      min: min || state.routes.filter.min,
+        distance: (state.routes.filter.min === state.routes.filter.max)
-      max: max || state.routes.filter.max,
+          ? [min, max]
+          : state.routes.filter.distance,
+        // distance:
+        //   [
+        //     (state.routes.filter.min > min && state.routes.filter.distance[0] <= state.routes.filter.min)
+        //       ? min
+        //       : state.routes.filter.distance[0],
+        //     (state.routes.filter.max < max && state.routes.filter.distance[1] >= state.routes.filter.max)
+        //       ? max
+        //       : state.routes.filter.distance[1],
+        //   ],
+        min,
+        max,
       }
     }
   });
+}
 
 const searchSetLoading = (state, { loading = false }) => ({
   ...state,
@@ -223,7 +247,7 @@ export const INITIAL_STATE = {
     filter: {
       title: '',
       starred: false,
-      distance: [0, 300],
+      distance: [0, 99999],
       author: '',
       tab: 'mine',
       min: 0,

src/redux/user/sagas.js

@@ -9,7 +9,7 @@ import {
   postMap
 } from '$utils/api';
 import {
-  hideRenderer, searchPutRoutes, searchSetLoading,
+  hideRenderer, searchPutRoutes, searchSetDistance, searchSetLoading,
   setActiveSticker, setAddress,
   setChanged, setDialogActive,
   setEditing,
@@ -437,7 +437,7 @@ function* searchSetSaga() {
   const { id, token } = yield select(getUser);
   yield delay(1000);
   yield put(searchSetLoading(true));
-  const { routes: { filter: { title, distance, tab } } } = yield select(getState);
+  const { routes: { filter, filter: { title, distance, tab } } } = yield select(getState);
 
   const { list, min, max } = yield call(getRouteList, {
     id,
@@ -449,6 +449,22 @@ function* searchSetSaga() {
   });
 
   yield put(searchPutRoutes({ list, min, max }));
+
+  // change distange range if needed and load additional data
+  if (
+    (filter.min > min && filter.distance[0] <= filter.min) ||
+    (filter.max < max && filter.distance[1] >= filter.max)
+  ) {
+    yield put(searchSetDistance([
+      (filter.min > min && filter.distance[0] <= filter.min)
+        ? min
+        : filter.distance[0],
+      (filter.max < max && filter.distance[1] >= filter.max)
+        ? max
+        : filter.distance[1],
+    ]));
+  }
+
   return yield put(searchSetLoading(false));
 }
 

src/styles/slider.less

@@ -145,8 +145,6 @@
   }
 
   &-disabled {
-    background-color: #e9e9e9;
-
     .@{prefixClass}-track {
       background-color: @disabledColor;
     }
@@ -156,10 +154,12 @@
       box-shadow: none;
       background-color: #fff;
       cursor: not-allowed;
+      opacity: 0;
     }
 
-    .@{prefixClass}-mark-text, .@{prefixClass}-dot {
+    .@{prefixClass}-mark-text, .@{prefixClass}-dot, .@{prefixClass}-track {
       cursor: not-allowed!important;
+      opacity: 0;
     }
   }
 }