backend: route list icon

backend/routes/auth/social/vk.js

@@ -58,7 +58,7 @@ module.exports = async (req, res) => {
     ...newUser, first_name, last_name, photo, name,
   };
 
-  const auth = await User.findOne({ _id: user._id });
+  const auth = await User.findOne({ _id: user._id }).populate('routes');
 
   if (auth) {
     await auth.set({

src/components/panels/UserPanel.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { GuestButton } from '$components/user/GuestButton';
-import { SERVER, TEST } from '$constants/api';
+import { TEST } from '$constants/api';
 import { DEFAULT_USER, ROLES } from '$constants/auth';
 import { UserButton } from '$components/user/UserButton';
 import { UserMenu } from '$components/user/UserMenu';
@@ -11,6 +11,8 @@ import { connect } from 'react-redux';
 import type { UserType } from '$constants/types';
 import { Icon } from '$components/panels/Icon';
 
+import classnames from 'classnames';
+
 type Props = {
   user: UserType,
   userLogout: Function,
@@ -73,6 +75,8 @@ export class Component extends React.PureComponent<Props, void> {
       state: { menuOpened },
     } = this;
 
+    const route_count = Object.keys(user.routes).length;
+
     return (
       <div>
         <div className="panel active">
@@ -92,9 +96,14 @@ export class Component extends React.PureComponent<Props, void> {
 
           <div className="control-bar">
             <button
-              onClick={this.props.takeAShot}
+              className={classnames({ disabled: route_count <= 0 })}
+              // onClick={this.props.takeAShot}
             >
-              <Icon icon="icon-shot-2" />
+              <Icon icon="icon-folder-1" />
+              {
+                route_count > 0 &&
+                <div className="control-bar-counter">{route_count < 100 ? route_count : '...'}</div>
+              }
             </button>
           </div>
         </div>

src/sprites/icon.svg

@@ -299,8 +299,14 @@
 
                 <path xmlns="http://www.w3.org/2000/svg" d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" fill="white" stroke="white" stroke-width="1" transform="translate(4 4)"/>
             </g>
+
+            <g id="icon-folder-1" stroke="none">
+                <path stroke-opacity=".941" stroke-width=".265" d="M0 0h32v32H0z" fill="black"/>
+
+                <path xmlns="http://www.w3.org/2000/svg" d="M9.17 6l2 2H20v10H4V6h5.17M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" fill="white" stroke="white" stroke-width="0" transform="translate(4 4)"/>
+            </g>
         </svg>
     </defs>
 
-    <use xlink:href="#icon-get-1" />
+    <use xlink:href="#icon-folder-1" />
 </svg>

src/styles/panel.less

@@ -75,6 +75,7 @@
     height: 48px;
     box-sizing: border-box;
     user-select: none;
+    position: relative;
 
     &:hover {
       background: rgba(100, 100, 100, 0.2);
@@ -152,6 +153,21 @@
   }
 }
 
+.control-bar-counter {
+  color: white;
+  min-width: 12px;
+  height: 12px;
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 10px;
+  position: absolute;
+  bottom: 50%;
+  right: 50%;
+  box-sizing: border-box;
+  transform: translate(50%, 50%);
+  line-height: 12px;
+}
+
 .panel-separator {
   height: 48px;
   width: 4px;

src/utils/api.js

@@ -2,7 +2,7 @@ import axios from 'axios/index';
 
 import { API } from '$constants/api';
 
-const arrayToObject = (array, key) => array.reduce((obj, el) => ({ ...obj, [el[key]]: el }));
+const arrayToObject = (array, key) => array.reduce((obj, el) => ({ ...obj, [el[key]]: el }), {});
 
 export const checkUserToken = ({ id, token }) => axios.get(API.CHECK_TOKEN, {
   params: { id, token }