LDBR 3.1: Исправить navbar, добавить аватар. (#35)

* LDBR-3.1: Добавить необходимый код для отображения авы * LDBR-3.1: Исправить печать ошибок в login view * LDBR-3.1: Переверстать navbar * --amend * LDBR-3.1: Добавить media свойство * LDBR-3.1: Исправить некорректное состояние не корректное обновление LoginName полсе логина, отправка actiona на обновление профиля после логина * LDBR-3.1: Вернуть SW * LDBR-3.1: Исправить замечания линтера * LDBR-3.1: Внести правки после ревью
frontend-park-mail-ru · Nov 17, 2021 · b9b527b · b9b527b
1 parent 4fdd171
commit b9b527b
Show file tree

Hide file tree

Showing 17 changed files with 198 additions and 106 deletions.
diff --git a/public/assets/nodata.webp b/public/assets/nodata.webp
diff --git a/src/components/Navbar/Navbar.hbs b/src/components/Navbar/Navbar.hbs
@@ -1,24 +1,26 @@
 <header id="header-main">
+    <div class="navbar__wrapper">
+        <div class="navbar">
+            <a href="/" draggable="false">
+                <img alt="Brrrello" src="/assets/logo.webp" class="navbar__logo"
+                     draggable="false"/>
+            </a>
+            <div class="navbar__links">
+                {{#if isAuthorized}}
+                    <div class="navbar__link-wrapper"><a href="/boards" class="navbar__link">Доски</a></div>
+                    <a href="/profile" class="avatar-wrapper">
+                        <img id="navbarAvatarId" class="avatar"
+                             src="{{avatar}}"
+                             alt="{{userName}}">
+                        <span id="navbarUserNameId">{{userName}}</span>
+                    </a>
 
-<div class ="navbar__wrapper">
-    <div class="navbar">
-        <div class="navbar__header">
-            <div class="navbar__title">
-                <a href="/" draggable="false"><img alt="Brrrello" src="/assets/logo.webp" class="navbar__logo" draggable="false"/></a>
+                    <div class="navbar__link-wrapper"><a id="logout" class="navbar__link">Выход</a></div>
+                {{else}}
+                    <div class="navbar__link-wrapper"><a href="/login" class="navbar__link">Войти</a></div>
+                    <div class="navbar__link-wrapper"><a href="/register" class="navbar__link">Зарегистрироваться</a></div>
+                {{/if}}
             </div>
         </div>
-
-        <div class="navbar__links">
-            {{#if isAuthorized}}
-                <a href="/boards" class="navbar__link">Доски</a>
-                <a href="/profile" class="navbar__link">Профиль</a>
-                <a id="logout" class="navbar__link">Выход</a>
-            {{else}}
-                <a href="/login" class="navbar__link">Войти</a>
-                <a href="/register" class="navbar__link">Зарегистрироваться</a>
-            {{/if}}
-        </div>
     </div>
-</div>
-
 </header>
diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
@@ -10,6 +10,7 @@ import UserStore from '../../stores/UserStore/UserStore.js';
 // Шаблон
 import template from './Navbar.hbs';
 
+
 /**
  * Класс, реализующий компонент Navbar.
  */
@@ -24,7 +25,6 @@ export default class NavbarComponent extends BaseComponent {
         this._onRefresh = this._onRefresh.bind(this);
         UserStore.addListener(this._onRefresh);
 
-
         this._logoutCallback = this._logout.bind(this);
     }
 

diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss
@@ -2,54 +2,96 @@
 @import '../../styles/scss/Fonts';
 @import '../../styles/scss/Common';
 
-/* navbar style */
-
 .navbar__wrapper {
     background-color: $main-theme-color;
     border-bottom: 1px solid #C3C3C3;
     user-select: none;
+    padding-bottom: 1px;
 }
 
 .navbar {
-    height: 56px;
+    min-height: $nav-bar-height;
     max-width: 1680px;
     position: relative;
     background-color: $main-theme-color;
 
     margin: 0 auto;
     font-family: 'Montserrat', sans-serif;
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    &__logo {
+        height: $nav-bar-height;
+        width: 136px;
+    }
+
+    &__links {
+        font-size: 18px;
+        height: auto;
+
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: stretch;
+    }
+
+    &__link-wrapper {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        cursor: pointer;
+        min-height: $nav-bar-height;
+
+        &:hover {
+            background-color: $nav-bar-hover;
+        }
+    }
+
+    &__link {
+        display: block;
+        padding: 0 12px;
+        color: white;
+        text-decoration: none;
+    }
 }
-
-.navbar__header {
-    display: inline-block;
-}
-
-.navbar__logo {
-    height: 56px;
-    width: 136px; 
-    display: inline-block;
-    padding: 2px;
-}
-
-.navbar__link__title {
-    color: rgb(255, 255, 255);
+
+.avatar-wrapper {
+    min-height: $nav-bar-height;
+    padding: 0 12px;
+    color: white;
     text-decoration: none;
+    cursor: pointer;
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    &:hover {
+        background-color: $nav-bar-hover;
+    }
 }
-
-.navbar__links {
-    display: block;
-    float: right;
-    font-size: 18px;
+
+img.avatar {
+    width: 35px;
+    height: 35px;
+    border: 2px solid $tertiary-bg-color;
+    margin-right: 10px;
 }
-
-.navbar__link {
-    display: inline-block;
-    padding: 18px 12px;
-    color: rgb(255, 255, 255);
+
+.navbar__link__title {
+    color: white;
     text-decoration: none;
-    cursor: pointer;
 }
-
-.navbar__link:hover {
-    background-color: rgba(0, 0, 0, 0.5);
+
+@media screen and (max-width: 450px) {
+    .navbar {
+        flex-direction: column;
+        &__links {
+            flex-direction: column;
+        }
+    }
 }
diff --git a/src/index.js b/src/index.js
@@ -19,8 +19,8 @@ import RegisterView from './views/RegisterView/RegisterView.js';
 import LoginView from './views/LoginView/LoginView.js';
 import BoardsView from './views/BoardsView/BoardsView.js';
 import BoardView from './views/BoardView/BoardView.js';
-import CardComponent from './components/Card/Card.js';
 import ProfileView from './views/ProfileView/ProfileView.js';
+import {settingsActions} from './actions/settings';
 
 if ('serviceWorker' in navigator) {
     window.addEventListener('load', () => {
@@ -41,20 +41,24 @@ window.addEventListener('DOMContentLoaded', async () => {
     const root = document.getElementById(Html.Root);
     document.getElementById('no-connection').innerHTML = '';
 
+    const boardView = new BoardsView(root);
+    Router.register(Urls.Root, boardView);
+    Router.register(Urls.Boards, boardView);
+    Router.register(Urls.Register, new RegisterView(root));
+    Router.register(Urls.Login, new LoginView(root));
+    Router.register(Urls.Board, new BoardView(root));
+    Router.register(Urls.Profile, new ProfileView(root));
+
     UserStore.addListener(() => {
-        if (UserStore.getContext('isAuthorized') !== undefined) {
-            try {
-                Router.register(Urls.Root, new BoardsView(root));
-                Router.register(Urls.Register, new RegisterView(root));
-                Router.register(Urls.Login, new LoginView(root));
-                Router.register(Urls.Card, new CardComponent());
-                Router.register(Urls.Boards, new BoardsView(root));
-                Router.register(Urls.Board, new BoardView(root));
-                Router.register(Urls.Profile, new ProfileView(root));
-                Router.start();
-            } catch (error) {
-                console.error(error);
-            }
+        if (UserStore.getContext('isAuthorized') === undefined) {
+            return;
+        }
+
+        try {
+            settingsActions.getSettings(UserStore.getContext('userName'));
+            Router.start();
+        } catch (error) {
+            console.error(error);
         }
     });
 });
diff --git a/src/modules/Network/Network.js b/src/modules/Network/Network.js
@@ -46,16 +46,14 @@ class Network {
 
     /**
      * Метод, реализующий запрос GET /api/sessions.
-     * @param {object} data полезная нагрузка запроса
      * @return {Promise<Response>} промис запроса
      */
-    async getUser(data) {
+    async getUser() {
         const options = {
             method: 'get',
             headers: {
                 'Content-Type': 'application/json',
             },
-            body: JSON.stringify(data),
         };
         return this.httpRequest(
             `http://${this.BackendUrl}:${this.BackendPort}/${this._endpoints.sessions}`,

diff --git a/src/modules/Router/Router.js b/src/modules/Router/Router.js
@@ -3,7 +3,6 @@ import {Html, Urls} from '../../constants/constants.js';
 import NotFoundView from '../../views/NotFoundView/NotFoundView.js';
 
 import BaseView from '../../views/BaseView.js';
-import BaseComponent from '../../components/BaseComponent.js';
 
 /**
  * Роутер отсеживает переход по url, и вызывает соответствующие им view
@@ -35,7 +34,7 @@ class Router {
             return this;
         }
 
-        if (!(view instanceof BaseView) && !(view instanceof BaseComponent)) {
+        if (!(view instanceof BaseView)) {
             return this;
         }
 

diff --git a/src/stores/SettingsStore/SettingsStore.js b/src/stores/SettingsStore/SettingsStore.js
@@ -37,7 +37,7 @@ class SettingsStore extends BaseStore {
         this._storage.set('email', null);
         this._storage.set('password', null);
         this._storage.set('passwordRepeat', null);
-        this._storage.set('avatar', null);
+        this._storage.set('avatar', '/assets/nodata.webp');
     }
 
     /**

diff --git a/src/stores/UserStore/UserStore.js b/src/stores/UserStore/UserStore.js
@@ -9,6 +9,7 @@ import Validator from '../../modules/Validator/Validator.js';
 
 // Constants
 import {ConstantMessages, HttpStatusCodes} from '../../constants/constants.js';
+import {settingsActions} from '../../actions/settings';
 
 /**
  * Класс, реализующий хранилище пользователя
@@ -174,8 +175,9 @@ class UserStore extends BaseStore {
 
         switch (response.status) {
         case HttpStatusCodes.Ok:
-            this._storage.set('userName', response.data.login);
+            this._storage.set('userName', data.login);
             this._storage.set('isAuthorized', true);
+            settingsActions.getSettings(this._storage.get('userName'));
             return;
 
         case HttpStatusCodes.Unauthorized:

diff --git a/src/styles/scss/Common.scss b/src/styles/scss/Common.scss
@@ -19,19 +19,6 @@ body {
   background: linear-gradient(45deg, $primary-bg-color, $secondary-bg-color);
   height: 100%;
   font-family: 'Montserrat', sans-serif;
-  min-width: 400px;
-}
-
-.horizontal-line {
-  border-bottom: solid 2px $tertiary-bg-color;
-  margin: 5px;
-}
-
-.vertical-line {
-  height: 25px;
-  border-left: solid 2px $tertiary-bg-color;
-  margin-left: 5px;
-  margin-right: 5px;
 }
 
 .close-button {
@@ -47,13 +34,11 @@ body {
   }
 }
 
-$simple-form-radius: 10px;
-
 .simple-form-element {
   font: inherit;
   font-size: 24px;
   width: 100%;
-  border-radius: $simple-form-radius;
+  border-radius: $common-radius;
   background-color: $secondary-bg-color;
   border: 4px solid $tertiary-bg-color;
   padding: 2px 10px;
@@ -85,6 +70,7 @@ $simple-form-radius: 10px;
 
 .avatar {
   height: 30px;
+  width: 30px;
   border-radius: 50%;
 }
 

diff --git a/src/styles/scss/Constants.scss b/src/styles/scss/Constants.scss
@@ -23,3 +23,7 @@ $footer-size: 50px;
 $max-height-politic: min-content;
 
 $popup-wrapper-color: rgba(0, 0, 0, 0.4);
+$common-radius: 10px;
+
+$nav-bar-height: 56px;
+$nav-bar-hover: rgba(0, 0, 0, 0.5);
diff --git a/src/views/BoardView/BoardView.js b/src/views/BoardView/BoardView.js
@@ -20,6 +20,7 @@ import DeleteCardPopUp from '../../popups/DeleteCard/DeleteCardPopUp.js';
 // Stores
 import UserStore from '../../stores/UserStore/UserStore.js';
 import BoardStore from '../../stores/BoardStore/BoardStore.js';
+import SettingsStore from '../../stores/SettingsStore/SettingsStore';
 
 // Modules
 import Router from '../../modules/Router/Router.js';
@@ -42,12 +43,17 @@ export default class BoardView extends BaseView {
      * @param {Element} parent HTML-элемент, в который будет осуществлена отрисовка
      */
     constructor(parent) {
-        const context = new Map([...UserStore.getContext(), ...BoardStore.getContext()]);
+        const context = new Map([
+            ...UserStore.getContext(),
+            ...BoardStore.getContext(),
+            ...SettingsStore.getContext(),
+        ]);
         super(context, template, parent);
 
         this._bindCallBacks();
         UserStore.addListener(this._onRefresh); // + field
         BoardStore.addListener(this._onRefresh);
+        SettingsStore.addListener(this._onRefresh);
 
         // Добавить попапы
         this.addComponent('BoardSettingPopUp', new BoardSettingPopUp());
@@ -76,7 +82,12 @@ export default class BoardView extends BaseView {
         this.removeEventListeners();
         this.removeComponentsList('_cardlists');
 
-        this._setContext(new Map([...UserStore.getContext(), ...BoardStore.getContext()]));
+        this._setContext(new Map([
+            ...UserStore.getContext(),
+            ...BoardStore.getContext(),
+            ...SettingsStore.getContext(),
+        ]));
+
         if (!this._isActive) {
             return;
         }