starred content

src/components/dialogs/MapListDialog.tsx

@@ -10,7 +10,7 @@ import {
   setDialogActive,
   mapsLoadMore,
   dropRoute,
-  modifyRoute,
+  modifyRoute, toggleRouteStarred,
 } from '$redux/user/actions';
 import { isMobile } from '$utils/window';
 import classnames from 'classnames';
@@ -21,12 +21,14 @@ import { TABS } from '$constants/dialogs';
 import { Icon } from '$components/panels/Icon';
 import { pushPath } from '$utils/history';
 import { IRootState, IRouteListItem } from '$redux/user/reducer';
+import { ROLES } from "$constants/auth";
 
 export interface IMapListDialogProps extends IRootState {
   marks: { [x: number]: string },
   routes_sorted: Array<IRouteListItem>,
   routes: IRootState['routes'],
   ready: IRootState['ready'],
+  role: IRootState['user']['role'],
 
   mapsLoadMore: typeof mapsLoadMore,
   searchSetDistance: typeof searchSetDistance,
@@ -35,6 +37,7 @@ export interface IMapListDialogProps extends IRootState {
   setDialogActive: typeof setDialogActive,
   dropRoute: typeof dropRoute,
   modifyRoute: typeof modifyRoute,
+  toggleRouteStarred: typeof toggleRouteStarred,
 }
 
 export interface IMapListDialogState {
@@ -117,9 +120,12 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
     this.stopEditing();
   };
 
+  toggleStarred = (id: string) => this.props.toggleRouteStarred(id);
+
   render() {
     const {
       ready,
+      role,
       routes: {
         list,
         loading,
@@ -136,6 +142,8 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
 
     const { editor_target, menu_target, is_editing, is_dropping } = this.state;
 
+    console.log('role', this.props.role);
+
     return (
       <div className="dialog-content">
         { list.length === 0 && loading &&
@@ -156,7 +164,7 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
         }
         <div className="dialog-tabs">
           {
-            Object.keys(TABS).map(item => (
+            Object.keys(TABS).map(item => (role === ROLES.admin || item !== 'all') && (
               <div
                 className={classnames('dialog-tab', { active: tab === item })}
                 onClick={() => this.props.searchSetTab(item)}
@@ -208,6 +216,7 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
                   distance={route.distance}
                   _id={route._id}
                   is_public={route.is_public}
+                  is_starred={route.is_starred}
                   tab={tab}
                   is_editing_mode={is_dropping ? 'drop' : 'edit'}
                   is_editing_target={editor_target === route._id}
@@ -220,7 +229,9 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
                   showDropCard={this.showDropCard}
                   dropRoute={this.dropRoute}
                   modifyRoute={this.modifyRoute}
+                  toggleStarred={this.toggleStarred}
                   key={route._id}
+                  is_admin={role === ROLES.admin}
                 />
               ))
             }
@@ -233,13 +244,15 @@ class Component extends React.Component<IMapListDialogProps, IMapListDialogState
   }
 }
 
-const mapStateToProps = ({ user: { editing, routes } }) => {
+const mapStateToProps = ({ user: { editing, routes, user: { role } } }: { user: IRootState }) => {
   if (routes.filter.max >= 9999) {
     return {
-      routes, editing, marks: {}, ready: false,
+      routes, editing, marks: {}, ready: false, role,
     };
   }
+
   return ({
+    role,
     routes,
     editing,
     ready: true,
@@ -260,6 +273,7 @@ const mapDispatchToProps = dispatch => bindActionCreators({
   mapsLoadMore,
   dropRoute,
   modifyRoute,
+  toggleRouteStarred,
 }, dispatch);
 
 export const MapListDialog = connect(mapStateToProps, mapDispatchToProps)(Component);

src/components/maps/RouteRowView.tsx

@@ -5,15 +5,20 @@ import { MapListDialog } from "$components/dialogs/MapListDialog";
 import { Tooltip } from "$components/panels/Tooltip";
 import { ReactElement } from "react";
 import classnames from 'classnames';
+import { toggleRouteStarred } from "$redux/user/actions";
 
 interface Props {
-  _id: string,
   tab: string,
+
+  _id: string,
   title: string,
   distance: number,
   is_public: boolean,
+  is_admin: boolean,
+  is_starred: boolean,
 
   openRoute: typeof MapListDialog.openRoute,
+  toggleStarred: typeof MapListDialog.toggleStarred,
   startEditing: typeof MapListDialog.startEditing,
   stopEditing: typeof MapListDialog.stopEditing,
   showMenu: typeof MapListDialog.showMenu,
@@ -22,11 +27,21 @@ interface Props {
 }
 
 export const RouteRowView = ({
-  title, distance, _id, openRoute, tab, startEditing, showMenu, showDropCard, hideMenu,
+  title, distance, _id, openRoute, tab, startEditing, showMenu, showDropCard, hideMenu, is_admin, is_starred, toggleStarred,
 }: Props): ReactElement<Props, null> => (
   <div
     className={classnames('route-row-view', { has_menu: (tab === 'mine') })}
   >
+    {
+      (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>
+    }
     <div
       className="route-row"
       onClick={() => openRoute(_id)}

src/components/maps/RouteRowWrapper.tsx

@@ -12,7 +12,9 @@ interface Props {
   title: string,
   distance: number,
   is_public: boolean,
+  is_starred: boolean,
 
+  is_admin: boolean,
   is_editing_target: boolean,
   is_menu_target: boolean,
 
@@ -24,6 +26,7 @@ interface Props {
   showDropCard: typeof MapListDialog.showDropCard,
   dropRoute: typeof MapListDialog.dropRoute,
   modifyRoute: typeof MapListDialog.modifyRoute,
+  toggleStarred: typeof MapListDialog.toggleStarred,
 
   is_editing_mode: 'edit' | 'drop',
 }
@@ -31,7 +34,7 @@ interface Props {
 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,
+  dropRoute, stopEditing, modifyRoute, hideMenu, is_admin, is_starred, toggleStarred,
 }: Props): ReactElement<Props, null> => (
   <div
     className={classnames('route-row-wrapper', {
@@ -64,12 +67,15 @@ export const RouteRowWrapper = ({
           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}
         />
     }
   </div>