backend: fixed loading of routes

src/components/dialogs/MapListDialog.jsx

@@ -4,28 +4,32 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { RouteRow } from '$components/maps/RouteRow';
 import type { Route } from '$constants/types';
+import { compareDesc } from 'date-fns';
 
 type Props = {
   routes: { [id: String]: Route },
   editing: Boolean,
+  routes_sorted: Array<string>,
 };
 
-const Component = ({ routes, editing }: Props) => (
+const Component = ({ routes, editing, routes_sorted }: Props) => (
   <div className="dialog-maplist">
     {
-     Object.keys(routes).map(id => (
-       <RouteRow
-         editing={editing}
-         {...routes[id]}
-         key={id}
-       />
+      routes_sorted.map(id => (
+        <RouteRow
+          editing={editing}
+          {...routes[id]}
+          key={id}
+        />
       ))
     }
   </div>
 );
 
 const mapStateToProps = ({ user: { editing, user: { routes } } }) => ({
-  routes, editing,
+  routes,
+  editing,
+  routes_sorted: Object.keys(routes).sort((a, b) => compareDesc(routes[a].updated_at, routes[b].updated_at)),
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({

src/components/dialogs/StickersDialog.jsx

@@ -11,7 +11,7 @@ export const StickersDialog = ({ setActiveSticker }: Props) => (
   <div className="helper stickers-helper">
     {
       Object.keys(STICKERS).map(set => (
-        <div>
+        <div key={set}>
           <div className="stickers-set-title">{STICKERS[set].title || null}</div>
           <div className="stickers-grid">
             {

src/modules/Sticker.js

@@ -35,11 +35,17 @@ export class Sticker {
         <div
           className={classnames('sticker-label', {})}
           ref={el => { this.stickerImage = el; }}
-          onMouseDown={this.onDragStart}
-          onMouseUp={this.onDragStop}
         >
           <StickerDesc value={this.text} onChange={this.setText} />
-          {this.generateStickerSVG(set, sticker)}
+          <div
+            className="sticker-image"
+            style={{
+              backgroundImage: `url('${STICKERS[set].url}`,
+              backgroundPosition: `${-STICKERS[set].layers[sticker].off * 72} 50%`,
+            }}
+            onMouseDown={this.onDragStart}
+            onMouseUp={this.onDragStop}
+          />
           <div
             className="sticker-delete"
             onMouseDown={this.onDelete}
@@ -49,22 +55,6 @@ export class Sticker {
       this.element
     );
 
-    // this.stickerImage = document.createElement('div');
-    // this.stickerArrow = document.createElement('div');
-    // this.stickerDelete = document.createElement('div');
-
-    // this.element.className = 'sticker-container';
-
-    // this.stickerImage.className = 'sticker-label';
-    // this.stickerArrow.className = 'sticker-arrow';
-    // this.stickerDelete.className = 'sticker-delete';
-
-    // this.stickerImage.innerHTML = this.generateStickerSVG(sticker);
-
-    // this.element.appendChild(this.stickerArrow);
-    // this.element.appendChild(this.stickerImage);
-    // this.stickerImage.appendChild(this.stickerDelete);
-
     const mark = new DomMarker({
       element: this.element,
       className: 'sticker-container',
@@ -72,13 +62,8 @@ export class Sticker {
 
     this.marker = marker(latlng, { icon: mark });
 
-    //
-
-    // this.stickerImage.addEventListener('mousedown', this.onDragStart);
-    // this.stickerImage.addEventListener('mouseup', this.onDragStop);
     this.element.addEventListener('mouseup', this.onDragStop);
     this.element.addEventListener('mouseup', this.preventPropagations);
-    // this.stickerDelete.addEventListener('mousedown', this.onDelete);
     this.marker.addEventListener('dragend', this.triggerOnChange);
 
     this.setAngle(angle);
@@ -98,12 +83,13 @@ export class Sticker {
     this.preventPropagations(e);
 
     this.isDragging = true;
-    this.marker.disableEdit();
 
     this.lockMapClicks(true);
 
     window.addEventListener('mousemove', this.onDrag);
     window.addEventListener('mouseup', this.onDragStop);
+
+    this.marker.disableEdit();
   };
 
   preventPropagations = e => {
@@ -116,16 +102,15 @@ export class Sticker {
   onDragStop = e => {
     this.preventPropagations(e);
 
-    if (!this.marker) return;
-
     this.triggerOnChange();
     this.isDragging = false;
-    this.marker.enableEdit();
 
     window.removeEventListener('mousemove', this.onDrag);
     window.removeEventListener('mouseup', this.onDragStop);
 
     this.lockMapClicks(false);
+
+    this.marker.enableEdit();
   };
 
   onDrag = e => {
@@ -150,34 +135,16 @@ export class Sticker {
     }
 
     const rad = 56;
-    // const mrad = 76;
+
     const x = ((Math.cos(angle + Math.PI) * rad) - 30);
     const y = ((Math.sin(angle + Math.PI) * rad) - 30);
 
-    // const ax = ((Math.cos(angle + 3.4) * mrad) - 12);
-    // const ay = ((Math.sin(angle + 3.4) * mrad) - 12);
-
     this.stickerImage.style.left = 6 + x;
     this.stickerImage.style.top = 6 + y;
 
-    // this.stickerDelete.style.left = ax;
-    // this.stickerDelete.style.top = ay;
-
     this.stickerArrow.style.transform = `rotate(${angle + Math.PI}rad)`;
   };
 
-  generateStickerSVG = (set, sticker) => {
-    return (
-      <div
-        className="sticker-image"
-        style={{
-          backgroundImage: `url('${STICKERS[set].url}`,
-          backgroundPosition: `${-STICKERS[set].layers[sticker].off * 72} 50%`,
-        }}
-      />
-    );
-  };
-
   dumpData = () => ({
     angle: this.angle,
     latlng: { ...this.marker.getLatLng() },

src/redux/user/sagas.js

@@ -242,15 +242,24 @@ function* sendSaveRequestSaga({ title, address, force }) {
   return yield put(setSaveSuccess({ address: result.address, save_error: TIPS.SAVE_SUCCESS, title }));
 }
 
+function* refreshUserData() {
+  const user = yield select(getUser);
+  const data = yield call(checkUserToken, user);
+
+  return yield put(setUser(data));
+}
+
 function* setSaveSuccessSaga({ address, title }) {
   const { id } = yield select(getUser);
 
   pushPath(`/${address}/edit`);
   yield put(setTitle(title));
   yield put(setAddress(address));
-  // yield editor.setAddress(address);
+
   yield editor.owner = id;
 
+  yield call(refreshUserData);
+
   return yield editor.setInitialData();
 }
 
@@ -353,7 +362,6 @@ function* locationChangeSaga({ location }) {
 
 function* gotVkUserSaga({ user }) {
   const data = yield call(checkUserToken, user);
-
   yield put(setUser(data));
 }
 

src/styles/dialogs.less

@@ -52,6 +52,10 @@
 .route-title {
   margin-bottom: 5px;
   font-weight: bold;
+
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .route-description {
@@ -71,5 +75,9 @@
 
   span {
     padding-right: 10px;
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
   }
 }