routes: spinners

src/components/dialogs/MapListMoreDialog.jsx

@@ -7,12 +7,16 @@ import { Scroll } from '$components/Scroll';
 import {
   searchSetDistance,
   searchSetTitle,
+  searchSetTab,
 } from '$redux/user/actions';
-
+import classnames from 'classnames';
 
 import { Range } from 'rc-slider';
+import { TABS } from '$constants/dialogs';
+import { Icon } from '$components/panels/Icon';
 
 type Props = {
+  ready: Boolean,
   routes: {
     limit: Number,
     loading: Boolean, // <-- maybe delete this
@@ -30,6 +34,7 @@ type Props = {
   searchSetAuthor: Function,
   searchSetDistance: Function,
   searchSetTitle: Function,
+  searchSetTab: Function,
 };
 
 class Component extends React.Component<Props> {
@@ -37,26 +42,12 @@ class Component extends React.Component<Props> {
     this.props.searchSetTitle(value);
   };
 
-  setDistanceMin = ({ target: { value } }) => {
-    console.log('A');
-    const parsed = parseInt(value > 0 ? value : 0, 10);
-    const { distance } = this.props.routes.filter;
-
-    this.props.searchSetDistance([parsed, distance[1] > parsed ? distance[1] : parsed]);
-  };
-
-  setDistanceMax = ({ target: { value } }) => {
-    console.log('B');
-    const parsed = parseInt(value > 0 ? value : 0, 10);
-    const { distance } = this.props.routes.filter;
-
-    this.props.searchSetDistance([distance[0], parsed > distance[0] ? parsed : distance[0]]);
-  };
-
   render() {
     const {
+      ready,
       routes: {
         list,
+        loading,
         filter: {
           min,
           max,
@@ -71,10 +62,18 @@ class Component extends React.Component<Props> {
 
     return (
       <div className="dialog-content">
-        <div className="dialog-head-tabs">
-          <div className="dialog-head-tab active">Мои</div>
-          <div className="dialog-head-tab">Общие</div>
-          <div className="dialog-head-tab">Выбранные</div>
+        <div className="dialog-tabs">
+          {
+            Object.keys(TABS).map(item => (
+              <div
+                className={classnames('dialog-tab', { active: tab === item})}
+                onClick={() => this.props.searchSetTab(item)}
+                key={item}
+              >
+                {TABS[item]}
+              </div>
+            ))
+          }
         </div>
         <div className="dialog-head">
           <div>
@@ -87,17 +86,22 @@ class Component extends React.Component<Props> {
 
             <br />
 
-            <Range
-              min={min}
-              max={max}
-              marks={marks}
-              step={20}
-              onChange={this.props.searchSetDistance}
-              defaultValue={[0, 10000]}
-              value={distance}
-              pushable={20}
-              disabled={min >= max}
-            />
+            {
+              ready
+                ?
+                  <Range
+                    min={min}
+                    max={max}
+                    marks={marks}
+                    step={25}
+                    onChange={this.props.searchSetDistance}
+                    defaultValue={[0, 10000]}
+                    value={distance}
+                    pushable={25}
+                    disabled={min >= max}
+                  />
+                : <div className="range-placeholder" />
+            }
 
           </div>
         </div>
@@ -112,6 +116,22 @@ class Component extends React.Component<Props> {
                 />
               ))
             }
+            { list.length === 0 && loading &&
+                <div className="dialog-maplist-loader">
+                  <div className="dialog-maplist-icon spin">
+                    <Icon icon="icon-sync-1" />
+                  </div>
+                  Загрузка
+                </div>
+            }
+            { ready && !loading && list.length === 0 &&
+                <div className="dialog-maplist-loader">
+                  <div className="dialog-maplist-icon">
+                    <Icon icon="icon-block-1" />
+                  </div>
+                  НИЧЕГО НЕ НАЙДЕНО
+                </div>
+            }
           </div>
         </Scroll>
       </div>
@@ -119,18 +139,29 @@ class Component extends React.Component<Props> {
   }
 }
 
-const mapStateToProps = ({ user: { editing, routes } }) => ({
-  routes,
-  editing,
-  marks: [...new Array((routes.filter.max - routes.filter.min) / 20 + 1)].reduce((obj, el, i) => ({
-    ...obj,
-    [routes.filter.min + (i * 20)]: String(routes.filter.min + (i * 20)),
-  }), {}),
-});
+const mapStateToProps = ({ user: { editing, routes } }) => {
+  if (routes.filter.max >= 9999){
+    return {
+      routes, editing, marks: {}, ready: false,
+    };
+  }
+  return ({
+    routes,
+    editing,
+    ready: true,
+    marks: [...new Array(Math.floor((routes.filter.max - routes.filter.min) / 25) + 1)].reduce((obj, el, i) => ({
+      ...obj,
+      [routes.filter.min + (i * 25)]:
+        ` ${routes.filter.min + (i * 25)}${(routes.filter.min + (i * 25) >= 200) ? '+' : ''}
+      `,
+    }), {}),
+  });
+};
 
 const mapDispatchToProps = dispatch => bindActionCreators({
   searchSetDistance,
   searchSetTitle,
+  searchSetTab,
 }, dispatch);
 
 export const MapListMoreDialog = connect(mapStateToProps, mapDispatchToProps)(Component);

src/components/panels/UserPanel.jsx

@@ -4,7 +4,7 @@ import { GuestButton } from '$components/user/GuestButton';
 import { DEFAULT_USER, ROLES } from '$constants/auth';
 import { UserButton } from '$components/user/UserButton';
 import { UserMenu } from '$components/user/UserMenu';
-import { setUser, userLogout, takeAShot, setDialog, gotVkUser, setDialogActive } from '$redux/user/actions';
+import { setUser, userLogout, takeAShot, setDialog, gotVkUser, setDialogActive, openMapDialog } from '$redux/user/actions';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import type { UserType } from '$constants/types';
@@ -24,6 +24,7 @@ type Props = {
   setDialogActive: Function,
   gotVkUser: Function,
   takeAShot: Function,
+  openMapDialog: Function,
 };
 
 export class Component extends React.PureComponent<Props, void> {
@@ -61,8 +62,9 @@ export class Component extends React.PureComponent<Props, void> {
 
   setMenuOpened = () => this.setState({ menuOpened: !this.state.menuOpened });
   openMapsDialog = () => {
-    this.props.setDialog(DIALOGS.MAP_LIST);
-    this.props.setDialogActive(this.props.dialog !== DIALOGS.MAP_LIST);
+    // this.props.setDialog(DIALOGS.MAP_LIST);
+    // this.props.setDialogActive(this.props.dialog !== DIALOGS.MAP_LIST);
+    this.props.openMapDialog('mine');
   };
 
   openAppInfoDialog = () => {
@@ -146,6 +148,7 @@ const mapDispatchToProps = dispatch => bindActionCreators({
   setDialog,
   gotVkUser,
   setDialogActive,
+  openMapDialog,
 }, dispatch);
 
 export const UserPanel = connect(mapStateToProps, mapDispatchToProps)(Component);