modified to match golang backend

src/components/dialogs/MapListDialog.tsx

@@ -16,7 +16,7 @@ import { isMobile } from '$utils/window';
 import classnames from 'classnames';
 
 import * as Range from 'rc-slider/lib/Range';
-import { TABS } from '$constants/dialogs';
+import { TABS, TABS_TITLES } from '$constants/dialogs';
 import { Icon } from '$components/panels/Icon';
 import { pushPath } from '$utils/history';
 import { IRootState, IRouteListItem } from '$redux/user/reducer';
@@ -110,12 +110,12 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
     }
   };
 
-  dropRoute = (_id: string): void => {
-    this.props.dropRoute(_id);
+  dropRoute = (address: string): void => {
+    this.props.dropRoute(address);
   };
 
-  modifyRoute = ({ _id, title, is_public }: { _id: string, title: string, is_public: boolean }): void => {
-    this.props.modifyRoute(_id, { title, is_public });
+  modifyRoute = ({ address, title, is_public }: { address: string, title: string, is_public: boolean }): void => {
+    this.props.modifyRoute(address, { title, is_public });
     this.stopEditing();
   };
 
@@ -161,13 +161,13 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
         }
         <div className="dialog-tabs">
           {
-            Object.keys(TABS).map(item => (role === ROLES.admin || item !== 'all') && (
+            Object.values(TABS).map(item => (role === ROLES.admin || item !== TABS.PENDING) && (
               <div
                 className={classnames('dialog-tab', { active: tab === item })}
                 onClick={() => this.props.searchSetTab(item)}
                 key={item}
               >
-                {TABS[item]}
+                {TABS_TITLES[item]}
               </div>
             ))
           }
@@ -211,9 +211,9 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
                 <RouteRowWrapper
                   title={route.title}
                   distance={route.distance}
-                  _id={route.address}
+                  address={route.address}
                   is_public={route.is_public}
-                  is_starred={route.is_starred}
+                  is_published={route.is_published}
                   tab={tab}
                   is_editing_mode={is_dropping ? 'drop' : 'edit'}
                   is_editing_target={editor_target === route.address}

src/components/maps/RouteRowDrop.tsx

@@ -6,13 +6,13 @@ import { Tooltip } from "$components/panels/Tooltip";
 import { ReactElement } from "react";
 
 interface Props {
-  _id: string,
+  address: string,
   stopEditing: typeof MapListDialog.stopEditing,
   dropRoute: typeof MapListDialog.dropRoute,
 }
 
 export const RouteRowDrop = ({
- _id, stopEditing, dropRoute,
+  address, stopEditing, dropRoute,
 }: Props): ReactElement<Props, null> => (
   <div
     className="route-row-drop"
@@ -21,7 +21,7 @@ export const RouteRowDrop = ({
       className="route-row"
     >
       <div className="button-group">
-        <div className="button" onClick={dropRoute.bind(null, _id)}>Удалить</div>
+        <div className="button" onClick={dropRoute.bind(null, address)}>Удалить</div>
         <div className="button primary" onClick={stopEditing}>Отмена</div>
       </div>
     </div>

src/components/maps/RouteRowEditor.tsx

@@ -6,7 +6,7 @@ import { MapListDialog } from "$components/dialogs/MapListDialog";
 
 interface Props {
   title: string;
-  _id: string;
+  address: string;
   is_public: boolean,
   modifyRoute: typeof MapListDialog.modifyRoute,
 }
@@ -29,10 +29,10 @@ export class RouteRowEditor extends React.Component<Props, State> {
   stopEditing = () => {
     const {
       state: { title, is_public },
-      props: { _id }
+      props: { address }
     } = this;
 
-    this.props.modifyRoute({ _id, title, is_public })
+    this.props.modifyRoute({ address, title, is_public })
   };
 
   setPublic = () => this.setState({ is_public: !this.state.is_public });

src/components/maps/RouteRowView.tsx

@@ -1,93 +1,100 @@
 // @flow
-import * as React from 'react';
-import { Icon } from '$components/panels/Icon';
+import * as React from "react";
+import { Icon } from "$components/panels/Icon";
 import { MapListDialog } from "$components/dialogs/MapListDialog";
 import { Tooltip } from "$components/panels/Tooltip";
 import { ReactElement } from "react";
-import classnames from 'classnames';
+import classnames from "classnames";
 import { toggleRouteStarred } from "$redux/user/actions";
+import { TABS } from "$constants/dialogs";
 
 interface Props {
-  tab: string,
+  tab: string;
 
-  _id: string,
-  title: string,
-  distance: number,
-  is_public: boolean,
-  is_admin: boolean,
-  is_starred: boolean,
+  address: string;
+  title: string;
+  distance: number;
+  is_public: boolean;
+  is_admin: boolean;
+  is_published: boolean;
 
-  openRoute: typeof MapListDialog.openRoute,
-  toggleStarred: typeof MapListDialog.toggleStarred,
-  startEditing: typeof MapListDialog.startEditing,
-  stopEditing: typeof MapListDialog.stopEditing,
-  showMenu: typeof MapListDialog.showMenu,
-  hideMenu: typeof MapListDialog.hideMenu,
-  showDropCard: typeof MapListDialog.showDropCard,
+  openRoute: typeof MapListDialog.openRoute;
+  toggleStarred: typeof MapListDialog.toggleStarred;
+  startEditing: typeof MapListDialog.startEditing;
+  stopEditing: typeof MapListDialog.stopEditing;
+  showMenu: typeof MapListDialog.showMenu;
+  hideMenu: typeof MapListDialog.hideMenu;
+  showDropCard: typeof MapListDialog.showDropCard;
 }
 
 export const RouteRowView = ({
-  title, distance, _id, openRoute, tab, startEditing, showMenu, showDropCard, hideMenu, is_admin, is_starred, toggleStarred,
+  title,
+  distance,
+  address,
+  openRoute,
+  tab,
+  startEditing,
+  showMenu,
+  showDropCard,
+  hideMenu,
+  is_admin,
+  is_published,
+  toggleStarred
 }: Props): ReactElement<Props, null> => (
-  <div
-    className={classnames('route-row-view', { has_menu: (tab === 'my') })}
-  >
-    {
-      (tab === 'all' || tab === 'starred') && is_admin &&
-      <div className="route-row-fav" onClick={toggleStarred.bind(null, _id)}>
-        {
-          is_starred
-            ? <Icon icon="icon-star-fill" size={24} />
-            : <Icon icon="icon-star-blank" size={24} />
-        }
+  <div className={classnames("route-row-view", { has_menu: tab === "my" })}>
+    {(tab === TABS.PENDING || tab === TABS.STARRED) && is_admin && (
+      <div className="route-row-fav" onClick={toggleStarred.bind(null, address)}>
+        {is_published ? (
+          <Icon icon="icon-star-fill" size={24} />
+        ) : (
+          <Icon icon="icon-star-blank" size={24} />
+        )}
       </div>
-    }
-    <div
-      className="route-row"
-      onClick={() => openRoute(_id)}
-    >
+    )}
+    <div className="route-row" onClick={() => openRoute(address)}>
       <div className="route-title">
-        {
-          (tab === 'my' || !is_admin) && is_starred &&
-          <div className="route-row-corner"><Icon icon="icon-star-fill" size={18} /></div>
-        }
-        <span>
-          {(title || _id)}
-        </span>
+        {(tab === "my" || !is_admin) && is_published && (
+          <div className="route-row-corner">
+            <Icon icon="icon-star-fill" size={18} />
+          </div>
+        )}
+        <span>{title || address}</span>
       </div>
 
       <div className="route-description">
         <span>
           <Icon icon="icon-link-1" />
-          {_id}
+          {address}
         </span>
         <span>
           <Icon icon="icon-cycle-1" />
-          {(distance && `${distance} km`) || '0 km'}
+          {(distance && `${distance} km`) || "0 km"}
         </span>
       </div>
     </div>
-    {
-      tab === 'my' &&
-        <React.Fragment>
-          <div
-            className="route-row-edit-button pointer"
-            onMouseOver={showMenu.bind(null, _id)}
-            onMouseOut={hideMenu}
-          >
-            <Icon icon="icon-more-vert" />
-            <div className="route-row-edit-menu pointer">
-              <div onMouseDown={showDropCard.bind(null, _id)}>
-                <Tooltip>Удалить</Tooltip>
-                <Icon icon="icon-trash-3" size={32} />
-              </div>
-              <div onMouseDown={startEditing.bind(null, _id)} className="modify-button">
-                <Tooltip>Редактировать</Tooltip>
-                <Icon icon="icon-edit-1" size={32} />
-              </div>
+    {tab === "my" && (
+      <React.Fragment>
+        <div
+          className="route-row-edit-button pointer"
+          onMouseOver={showMenu.bind(null, address)}
+          onMouseOut={hideMenu}
+        >
+          <Icon icon="icon-more-vert" />
+          <div className="route-row-edit-menu pointer">
+            <div onMouseDown={showDropCard.bind(null, address)}>
+              <Tooltip>Удалить</Tooltip>
+              <Icon icon="icon-trash-3" size={32} />
+            </div>
+            <div
+              onMouseDown={startEditing.bind(null, address)}
+              className="modify-button"
+            >
+              <Tooltip>Редактировать</Tooltip>
+              <Icon icon="icon-edit-1" size={32} />
             </div>
           </div>
-        </React.Fragment>
-    }
+        </div>
+      </React.Fragment>
+    )}
   </div>
 );

src/components/maps/RouteRowWrapper.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import classnames from 'classnames';
+import * as React from "react";
+import classnames from "classnames";
 import { MapListDialog } from "$components/dialogs/MapListDialog";
 import { RouteRowView } from "$components/maps/RouteRowView";
 import { RouteRowEditor } from "$components/maps/RouteRowEditor";
@@ -7,76 +7,85 @@ import { RouteRowDrop } from "$components/maps/RouteRowDrop";
 import { ReactElement } from "react";
 
 interface Props {
-  _id: string,
-  tab: string,
-  title: string,
-  distance: number,
-  is_public: boolean,
-  is_starred: boolean,
+  address: string;
+  tab: string;
+  title: string;
+  distance: number;
+  is_public: boolean;
+  is_published: boolean;
 
-  is_admin: boolean,
-  is_editing_target: boolean,
-  is_menu_target: boolean,
+  is_admin: boolean;
+  is_editing_target: boolean;
+  is_menu_target: boolean;
 
-  openRoute: typeof MapListDialog.openRoute,
-  startEditing: typeof MapListDialog.startEditing,
-  stopEditing: typeof MapListDialog.stopEditing,
-  showMenu: typeof MapListDialog.showMenu,
-  hideMenu: typeof MapListDialog.hideMenu,
-  showDropCard: typeof MapListDialog.showDropCard,
-  dropRoute: typeof MapListDialog.dropRoute,
-  modifyRoute: typeof MapListDialog.modifyRoute,
-  toggleStarred: typeof MapListDialog.toggleStarred,
+  openRoute: typeof MapListDialog.openRoute;
+  startEditing: typeof MapListDialog.startEditing;
+  stopEditing: typeof MapListDialog.stopEditing;
+  showMenu: typeof MapListDialog.showMenu;
+  hideMenu: typeof MapListDialog.hideMenu;
+  showDropCard: typeof MapListDialog.showDropCard;
+  dropRoute: typeof MapListDialog.dropRoute;
+  modifyRoute: typeof MapListDialog.modifyRoute;
+  toggleStarred: typeof MapListDialog.toggleStarred;
 
-  is_editing_mode: 'edit' | 'drop',
+  is_editing_mode: "edit" | "drop";
 }
 
 export const RouteRowWrapper = ({
-  title, distance, _id, openRoute, tab,  startEditing, showMenu,
-  showDropCard, is_public, is_editing_target, is_menu_target, is_editing_mode,
-  dropRoute, stopEditing, modifyRoute, hideMenu, is_admin, is_starred, toggleStarred,
+  title,
+  distance,
+  address,
+  openRoute,
+  tab,
+  startEditing,
+  showMenu,
+  showDropCard,
+  is_public,
+  is_editing_target,
+  is_menu_target,
+  is_editing_mode,
+  dropRoute,
+  stopEditing,
+  modifyRoute,
+  hideMenu,
+  is_admin,
+  is_published,
+  toggleStarred
 }: Props): ReactElement<Props, null> => (
   <div
-    className={classnames('route-row-wrapper', {
+    className={classnames("route-row-wrapper", {
       is_menu_target,
-      is_editing_target,
+      is_editing_target
     })}
   >
-    {
-      is_editing_target && is_editing_mode === 'edit' &&
-        <RouteRowEditor
-          title={title}
-          _id={_id}
-          is_public={is_public}
-          modifyRoute={modifyRoute}
-        />
-    }
-    {
-      is_editing_target && is_editing_mode === 'drop' &&
-        <RouteRowDrop
-          _id={_id}
-          dropRoute={dropRoute}
-          stopEditing={stopEditing}
-        />
-    }
-    {
-      !is_editing_target &&
-        <RouteRowView
-          _id={_id}
-          tab={tab}
-          title={title}
-          distance={distance}
-          is_public={is_public}
-          is_starred={is_starred}
-          openRoute={openRoute}
-          startEditing={startEditing}
-          stopEditing={stopEditing}
-          showMenu={showMenu}
-          hideMenu={hideMenu}
-          showDropCard={showDropCard}
-          is_admin={is_admin}
-          toggleStarred={toggleStarred}
-        />
-    }
+    {is_editing_target && is_editing_mode === "edit" && (
+      <RouteRowEditor
+        title={title}
+        address={address}
+        is_public={is_public}
+        modifyRoute={modifyRoute}
+      />
+    )}
+    {is_editing_target && is_editing_mode === "drop" && (
+      <RouteRowDrop address={address} dropRoute={dropRoute} stopEditing={stopEditing} />
+    )}
+    {!is_editing_target && (
+      <RouteRowView
+        address={address}
+        tab={tab}
+        title={title}
+        distance={distance}
+        is_public={is_public}
+        is_published={is_published}
+        openRoute={openRoute}
+        startEditing={startEditing}
+        stopEditing={stopEditing}
+        showMenu={showMenu}
+        hideMenu={hideMenu}
+        showDropCard={showDropCard}
+        is_admin={is_admin}
+        toggleStarred={toggleStarred}
+      />
+    )}
   </div>
 );

src/components/panels/UserPanel.tsx

@@ -11,7 +11,7 @@ import { Icon } from '$components/panels/Icon';
 
 import classnames from 'classnames';
 import { CLIENT } from '$config/frontend';
-import { DIALOGS } from '$constants/dialogs';
+import { DIALOGS, TABS } from '$constants/dialogs';
 import { IRootState } from "$redux/user/reducer";
 import { Tooltip } from "$components/panels/Tooltip";
 import { TitleDialog } from "$components/dialogs/TitleDialog";
@@ -65,7 +65,7 @@ export class Component extends React.PureComponent<Props, State> {
 
   setMenuOpened = () => this.setState({ menuOpened: !this.state.menuOpened });
   openMapsDialog = () => {
-    this.props.openMapDialog('my');
+    this.props.openMapDialog(TABS.MY);
   };
 
   openAppInfoDialog = () => {