complete setting and editing description

backend/models/Route.js

@@ -2,11 +2,9 @@ const mongoose = require('mongoose');
 
 const { Schema } = mongoose;
 
-const RouteSchema = new Schema(
-  {
+const RouteSchema = new Schema({
   _id: { type: String, required: true },
   title: { type: String, default: '' },
-    // address: { type: String, required: true },
   version: { type: Number, default: 2 },
   route: { type: Array, default: [] },
   stickers: { type: Array, default: [] },
@@ -19,7 +17,7 @@ const RouteSchema = new Schema(
   updated_at: { type: Date, default: Date.now() },
   logo: { type: String, default: 'DEFAULT' },
   provider: { type: String, default: 'DEFAULT' },
-  },
-);
+  description: { type: String, default: '' },
+});
 
 module.exports.RouteSchema = RouteSchema;

backend/routes/route/post.js

@@ -1,14 +1,21 @@
 const { User, Route } = require('../../models');
 
-const { parseRoute, parseStickers, parseString, parseNumber, parseAddress } = require('../../utils/parse');
+const {
+  parseRoute, parseStickers, parseString, parseNumber, parseAddress
+} = require('../../utils/parse');
 
 module.exports = async (req, res) => {
   const { body, body: { id, token, force } } = req;
 
   const owner = await User.findOne({ _id: id, token }).populate('routes');
-  if (!owner) return res.send({ success: false, reason: 'unauthorized', id, token });
+  if (!owner) {
+    return res.send({
+      success: false, reason: 'unauthorized', id, token
+    });
+  }
 
   const title = parseString(body.title, 64);
+  const description = parseString(body.description, 256);
   const address = parseAddress(body.address, 32);
   const route = parseRoute(body.route);
   const stickers = parseStickers(body.stickers);
@@ -28,23 +35,23 @@ module.exports = async (req, res) => {
 
   if (exists) {
     await exists.set({
-      title, route, stickers, logo, distance, updated_at: Date.now(), provider, is_public,
+      title, route, stickers, logo, distance, updated_at: Date.now(), provider, is_public, description,
     }).save();
 
     return res.send({
-      success: true, title, address, route, stickers, mode: 'overwrited', is_public,
+      success: true, title, address, route, stickers, mode: 'overwrited', is_public, description,
     });
   }
 
   const created = await Route.create({
-    _id: address, title, route, stickers, owner, logo, distance, provider, is_public,
+    _id: address, title, route, stickers, owner, logo, distance, provider, is_public, description,
   });
 
   await owner.routes.push(created);
   await owner.save();
 
   return res.send({
-    success: true, title, address, route, stickers, provider, is_public,
+    success: true, title, address, route, stickers, provider, is_public, description,
   });
 };
 

package-lock.json

@@ -10750,7 +10750,7 @@
       }
     },
     "react-expandable-textarea": {
-      "version": "github:muerwre/react-expandable-textarea#9a3b826abd5203c5d6adf77cf4bfdd10131de417",
+      "version": "github:muerwre/react-expandable-textarea#0cbcbbd875439090a2d48e711da241f2a83dd6b2",
       "from": "github:muerwre/react-expandable-textarea",
       "requires": {
         "classnames": "^2.2.6"

src/components/dialogs/SaveDialog.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { copyToClipboard, getUrlData } from '$utils/history';
-import { toTranslit } from '$utils/format';
+import { toTranslit, parseDesc } from '$utils/format';
 import { TIPS } from '$constants/tips';
 import { MODES } from '$constants/modes';
 import { Icon } from '$components/panels/Icon';
@@ -116,7 +116,7 @@ export class SaveDialog extends React.Component<Props, State> {
                 minRows={2}
                 maxRows={5}
                 placeholder="Описание маршрута"
-                value={description}
+                value={parseDesc(description)}
                 onChange={this.setDescription}
               />
             </div>

src/components/dialogs/TitleDialog.tsx

@@ -5,10 +5,13 @@ import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { getStyle } from "$utils/dom";
 import { nearestInt } from "$utils/geom";
+import { IRootState } from "$redux/user/reducer";
+import { parseDesc } from "$utils/format";
 
 interface ITitleDialogProps {
-  editing: boolean,
-  title?: string,
+  editing: IRootState['editing'],
+  title?: IRootState['title'],
+  description?: IRootState['description'],
   minLines?: number,
   maxLines?: number,
 }
@@ -30,10 +33,14 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
   onLeave = () => this.setState({ raised: false });
 
   componentDidMount() {
-    this.getMaxHeight();
+    this.setMaxHeight();
   }
 
-  getMaxHeight = (): number => {
+  componentDidUpdate() {
+    this.setMaxHeight();
+  }
+
+  setMaxHeight = (): number => {
     if (!this.ref_sizer || !this.ref_title || !this.ref_text) return 0;
 
     const { height: sizer_height } = this.ref_sizer.getBoundingClientRect();
@@ -52,7 +59,7 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
 
     const container_height = sizer_height - title_height - title_margin - text_margins;
 
-    const min_height = (this.props.minLines || 3) * text_line;
+    const min_height = (this.props.minLines || 5) * text_line;
     const max_height = (this.props.maxLines || 20) * text_line;
 
     const height = nearestInt(Math.min(container_height, Math.min(text_height, min_height)), text_line) + text_margins;
@@ -62,7 +69,7 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
   };
 
   render() {
-    const { editing, title } = this.props;
+    const { editing, title, description } = this.props;
     const { raised, height, height_raised } = this.state;
 
     return (
@@ -73,34 +80,32 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
             onMouseOver={this.onHover}
             onMouseOut={this.onLeave}
           >
-            {
-              title &&
             <div
               className="title-dialog-pane title-dialog-name"
               ref={el => { this.ref_title = el; }}
             >
               <h2>{title}</h2>
             </div>
-            }
-            {
+
             <div
-                className="title-dialog-pane title-dialog-text"
+              className={classnames("title-dialog-pane title-dialog-text", { has_shade: height_raised > height })}
               style={{
                 height: (raised ? height_raised : height),
-                  display: height === 0 ? 'none' : 'block'
+                marginBottom: height === 0 ? 0 : 15,
               }}
               ref={el => { this.ref_overflow = el; }}
             >
               <div
                 ref={el => { this.ref_text = el; }}
               >
-
-                </div>
-              </div>
+                {
+                  parseDesc(description)
                 }
               </div>
             </div>
           </div>
+        </div>
+      </div>
     )
   }
 
@@ -110,7 +115,7 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
   ref_overflow;
 }
 
-const mapStateToProps = ({ user: { editing, title } }) => ({ editing, title });
+const mapStateToProps = ({ user: { editing, title, description } }) => ({ editing, title, description });
 const mapDispatchToProps = dispatch => bindActionCreators({ }, dispatch);
 
 export const TitleDialog = connect(mapStateToProps, mapDispatchToProps)(Component);

src/redux/user/actions.ts

@@ -5,10 +5,10 @@ import { IRootState } from "$redux/user/reducer";
 export const setUser = (user: IUser) => ({ type: ACTIONS.SET_USER, user });
 export const userLogout = () => ({ type: ACTIONS.USER_LOGOUT });
 
-export const setEditing = editing => ({ type: ACTIONS.SET_EDITING, editing });
-export const setMode = mode => ({ type: ACTIONS.SET_MODE, mode });
-export const setDistance = distance => ({ type: ACTIONS.SET_DISTANCE, distance });
-export const setChanged = changed => ({ type: ACTIONS.SET_CHANGED, changed });
+export const setEditing = (editing: IRootState['editing']) => ({ type: ACTIONS.SET_EDITING, editing });
+export const setMode = (mode: IRootState['mode']) => ({ type: ACTIONS.SET_MODE, mode });
+export const setDistance = (distance: IRootState['distance']) => ({ type: ACTIONS.SET_DISTANCE, distance });
+export const setChanged = (changed: IRootState['changed']) => ({ type: ACTIONS.SET_CHANGED, changed });
 export const setRouterPoints = routerPoints => ({ type: ACTIONS.SET_ROUTER_POINTS, routerPoints });
 export const setActiveSticker = activeSticker => ({ type: ACTIONS.SET_ACTIVE_STICKER, activeSticker });
 export const setLogo = logo => ({ type: ACTIONS.SET_LOGO, logo });
@@ -44,9 +44,18 @@ export const sendSaveRequest = (payload: {
 
 export const resetSaveDialog = () => ({ type: ACTIONS.RESET_SAVE_DIALOG });
 
-export const setSaveLoading = save_loading => ({ type: ACTIONS.SET_SAVE_LOADING, save_loading });
-export const setSaveSuccess = payload => ({ type: ACTIONS.SET_SAVE_SUCCESS, ...payload });
-export const setSaveError = save_error => ({ type: ACTIONS.SET_SAVE_ERROR, save_error });
+export const setSaveLoading = (save_loading: IRootState['save_loading']) => ({ type: ACTIONS.SET_SAVE_LOADING, save_loading });
+
+export const setSaveSuccess = (payload: {
+  address: IRootState['address'],
+  title: IRootState['address'],
+  is_public: IRootState['is_public'],
+  description: IRootState['description'],
+
+  save_error: string,
+}) => ({ type: ACTIONS.SET_SAVE_SUCCESS, ...payload });
+
+export const setSaveError = (save_error: IRootState['save_error']) => ({ type: ACTIONS.SET_SAVE_ERROR, save_error });
 export const setSaveOverwrite = () => ({ type: ACTIONS.SET_SAVE_OVERWRITE });
 
 export const hideRenderer = () => ({ type: ACTIONS.HIDE_RENDERER });

src/redux/user/reducer.ts

@@ -179,7 +179,11 @@ const setSaveOverwrite: ActionHandler<typeof ActionCreators.setSaveOverwrite> =
 });
 
 const setSaveSuccess: ActionHandler<typeof ActionCreators.setSaveSuccess> = (state, { save_error }) => ({
-  ...state, save_overwriting: false, save_finished: true, save_processing: false, save_error
+  ...state,
+  save_overwriting: false,
+  save_finished: true,
+  save_processing: false,
+  save_error,
 });
 
 const resetSaveDialog: ActionHandler<typeof ActionCreators.resetSaveDialog> = (state) => ({

src/redux/user/sagas.ts

@@ -32,7 +32,7 @@ import {
   setProvider,
   changeProvider,
   setSaveLoading,
-  mapsSetShift, searchChangeDistance, clearAll, setFeature, searchSetTitle, setRouteStarred,
+  mapsSetShift, searchChangeDistance, clearAll, setFeature, searchSetTitle, setRouteStarred, setDescription,
 } from '$redux/user/actions';
 import { getUrlData, parseQuery, pushLoaderState, pushNetworkInitError, pushPath, replacePath } from '$utils/history';
 import { editor } from '$modules/Editor';
@@ -333,17 +333,15 @@ function* sendSaveRequestSaga({
   if (timeout || !result || !result.success || !result.address) return yield put(setSaveError(TIPS.SAVE_TIMED_OUT));
 
   return yield put(setSaveSuccess({
-    address: result.address, save_error: TIPS.SAVE_SUCCESS, title, is_public: result.is_public
+    address: result.address,
+    title: result.title,
+    is_public: result.is_public,
+    description: result.description,
+
+    save_error: TIPS.SAVE_SUCCESS,
   }));
 }
 
-// function* refreshUserData() {
-//   const user = yield select(getUser);
-//   const data = yield call(checkUserToken, user);
-//
-//   return yield put(setUser(data));
-// }
-
 function* getRenderData() {
   yield put(setRenderer({ info: 'Загрузка тайлов', progress: 0.1 }));
 
@@ -570,7 +568,7 @@ function* searchSetTabSaga() {
 }
 
 function* setSaveSuccessSaga({
-  address, title, is_public
+  address, title, is_public, description,
 }: ReturnType<typeof ActionCreators.setSaveSuccess>) {
   const { id } = yield select(getUser);
   const { dialog_active } = yield select(getState);
@@ -580,6 +578,7 @@ function* setSaveSuccessSaga({
   yield put(setTitle(title));
   yield put(setAddress(address));
   yield put(setPublic(is_public));
+  yield put(setDescription(description));
   yield put(setChanged(false));
 
   yield editor.owner = { id };

src/styles/panel.less

@@ -685,8 +685,10 @@
 
     > div {
       margin: 10px;
+      white-space: pre-line;
     }
 
+    &.has_shade {
       ::after {
         content: ' ';
         width: 100%;
@@ -706,4 +708,5 @@
         }
       }
     }
+  }
 }

src/utils/format.ts

@@ -13,3 +13,5 @@ export const toHours = (info: number): string => {
 export const toTranslit = (string: string): string => (
   removeGarbage(ru.reduce((text, el, i) => (text.replace(new RegExp(ru[i], 'g'), en[i])), (String(string) || '')))
 );
+
+export const parseDesc = (text: string): string => text.replace(/(\n{2,})/ig, "\n\n");