backend: fixed loading of routes

backend/models/Route.js

@@ -14,10 +14,9 @@ const RouteSchema = new Schema(
     logo: { type: String, default: 'DEFAULT' },
     distance: { type: Number, default: 0 },
     public: { type: Boolean, default: true },
+    created_at: { type: Date, default: Date.now() },
+    updated_at: { type: Date, default: Date.now() },
   },
-  {
-    timestamps: { createdAt: 'created_at', updatedAt: 'updated_at' }
-  }
 );
 
 module.exports.RouteSchema = RouteSchema;

backend/routes/auth/check.js

@@ -4,17 +4,22 @@ const { generateGuest, generateRandomUrl } = require('./guest');
 module.exports = async (req, res) => {
   const { id, token } = req.query;
 
-  const user = await User.findOne({ _id: id, token }).populate({
-    path: 'routes',
-    options: {
-      limit: 100,
-      sort: { updated_at: -1 },
-    }
-  });
+  const user = await User.findOne({ _id: id, token })
+    .populate({
+      path: 'routes',
+      select: '_id title distance owner updated_at',
+      options: {
+        limit: 100,
+        sort: { updated_at: -1 },
+      }
+    });
+
   const random_url = await generateRandomUrl();
 
   if (user) {
-    return res.send({ success: true, ...user.toObject(), id: user._id, random_url });
+    return res.send({
+      success: true, ...user.toObject(), id: user._id, random_url
+    });
   }
 
   const guest = await generateGuest();

backend/routes/route/post.js

@@ -25,7 +25,9 @@ module.exports = async (req, res) => {
   if (exists && !force) return res.send({ success: false, mode: 'overwriting' });
 
   if (exists) {
-    exists.set({ title, route, stickers, logo, distance }).save();
+    exists.set({
+      title, route, stickers, logo, distance, updated_at: Date.now(),
+    }).save();
 
     return res.send({
       success: true, title, address, route, stickers, mode: 'overwrited'

package-lock.json

@@ -4108,10 +4108,9 @@
       }
     },
     "date-fns": {
-      "version": "1.29.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz",
-      "integrity": "sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw==",
-      "dev": true
+      "version": "2.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.0.0-alpha.25.tgz",
+      "integrity": "sha512-iQzJkHF0L4wah9Ae9PkvwemwFz6qmRLuNZcghmvf2t+ptLs1qXzONLiGtjmPQzL6+JpC01JjlTopY2AEy4NFAg=="
     },
     "date-now": {
       "version": "0.1.4",
@@ -8437,6 +8436,12 @@
             "restore-cursor": "^1.0.1"
           }
         },
+        "date-fns": {
+          "version": "1.29.0",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz",
+          "integrity": "sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw==",
+          "dev": true
+        },
         "figures": {
           "version": "1.7.0",
           "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",

package.json

@@ -56,6 +56,7 @@
     "clean-webpack-plugin": "^0.1.9",
     "cookie-parser": "~1.4.3",
     "croppr": "^2.3.1",
+    "date-fns": "^2.0.0-alpha.25",
     "debug": "~2.6.9",
     "express": "~4.16.0",
     "file-saver": "^2.0.0",

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