From cbfd93a92f278078f07a17c1ab8c64cac5fde5c4 Mon Sep 17 00:00:00 2001
From: mrPadre <51297778+mrPadre@users.noreply.github.com>
Date: Tue, 25 Aug 2020 12:51:34 +0300
Subject: [PATCH] =?UTF-8?q?HM-118=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE=D1=81?=
 =?UTF-8?q?=D1=82=D1=8C=20=D0=BC=D0=B5=D0=BD=D1=8F=D1=82=D1=8C=20=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=B0=D1=82=D0=B0=D1=80=D0=BA=D1=83=20=D0=BF=D0=BE=D0=BB?=
 =?UTF-8?q?=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D0=B5=D0=BB=D1=8F=20=D0=B8?=
 =?UTF-8?q?=20=D0=BF=D0=BE=D1=85=D0=BE=D0=B4=D1=83=20=D0=B5=D1=89=D0=B5=20?=
 =?UTF-8?q?=E2=80=A6=20(#58)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* HM-118 Добавил возможность менять аватарку пользователя и походу еще зацепил HM-117 где нужно было поменять способ получения инфы о пользователе
---
 src/api/UsersServiceAPI.js                    | 15 ++++
 src/app.html                                  |  4 +-
 .../avatar-modal-component/AvatarModal.css    | 12 +++
 .../avatar-modal-component/AvatarModal.js     | 75 +++++++++++++++++++
 src/components/form-control/FormControl.js    |  3 +
 .../profile-content/ProfileContent.js         | 14 +++-
 src/components/profile-page/ProfilePage.js    | 18 +++++
 src/consts.js                                 |  4 +
 src/services/UserInfoService.js               |  9 ++-
 9 files changed, 146 insertions(+), 8 deletions(-)
 create mode 100644 src/components/avatar-modal-component/AvatarModal.css
 create mode 100644 src/components/avatar-modal-component/AvatarModal.js

diff --git a/src/api/UsersServiceAPI.js b/src/api/UsersServiceAPI.js
index a29126b..2154513 100644
--- a/src/api/UsersServiceAPI.js
+++ b/src/api/UsersServiceAPI.js
@@ -31,6 +31,21 @@ class UsersService {
         return data;
     }
 
+    getMe = async () => {
+        const {data} = await http.get(`${ROOT_URL}/me`);
+        return data;
+    }
+
+    setAvatar = async (avatar, updateOptions) => {
+        const {data} = await http.post(`${ROOT_URL}/edit-me`, {...updateOptions, avatar});
+        return data;
+    }
+
+    changePassword = async (password, updateOptions) => {
+        const {data} = await http.post(`${ROOT_URL}/edit-me`, {...updateOptions, password});
+        return data;
+    }
+
     /**
      * Метод поиска пользователя по Логину
      * @param {string} login - Логин пользователя
diff --git a/src/app.html b/src/app.html
index 55286a5..7477aae 100644
--- a/src/app.html
+++ b/src/app.html
@@ -116,9 +116,9 @@
                 <div class="Password__inputContainer m-1" id="newpassrepeat"></div>
                 <button type="button" class="Profile__button btn btn-outline-primary mt-3">Сохранить</button>
             </div>
-           <div class="p-2 flex-grow-4">
+            <div class="p-2 flex-grow-4 Profile__avatar-container">
             <img src="./img/ava.jpg" class="Profile__avatar m-2" alt="avatar">
-            <div class="h6 text-center">login_name</div>
+            <div class="h6 text-center Profile__user-name">login_name</div>
            </div>
         </div>
     </template>
diff --git a/src/components/avatar-modal-component/AvatarModal.css b/src/components/avatar-modal-component/AvatarModal.css
new file mode 100644
index 0000000..dcb64dc
--- /dev/null
+++ b/src/components/avatar-modal-component/AvatarModal.css
@@ -0,0 +1,12 @@
+.Avatar__img {
+    width: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    max-height: 400px;
+    min-height: 300px;
+}
+.Avatar__container {
+    padding: 20px;
+    overflow-y: auto;
+}
\ No newline at end of file
diff --git a/src/components/avatar-modal-component/AvatarModal.js b/src/components/avatar-modal-component/AvatarModal.js
new file mode 100644
index 0000000..37021b5
--- /dev/null
+++ b/src/components/avatar-modal-component/AvatarModal.js
@@ -0,0 +1,75 @@
+import Modal from '../modal/Modal';
+import {createElement} from '../../utils/elementUtils';
+import FormControl from '../form-control/index';
+import './AvatarModal.css';
+import usersServiceApi from '../../api/UsersServiceAPI';
+import userInfoService from '../../services/UserInfoService';
+import {EVENTS} from '../../consts';
+
+class AvatarModal extends Modal {
+    constructor (parentNode) {
+        super(parentNode);
+
+        this.header.textContent = 'Основное изображение';
+        this.avatar = createElement({
+            tagName: 'div',
+            options: {
+                className: 'Avatar__img',
+            }
+        });
+        this.width = this.avatar.scrollWidth;
+        this.content.append(this.avatar);
+        this.content.className = 'Avatar__container';
+
+        this.input = this.createComponent(FormControl, this.content, {
+            id: 'avatar-url-input',
+            label: 'URL нового изображения',
+            placeholder: 'Введите URL',
+            className: 'Avatar__url-input'
+        });
+
+        this.submitBtn = createElement({
+            tagName: 'button',
+            options: {
+                className: 'Avatar__submit-btn btn btn-outline-primary'
+            }
+        });
+        this.submitBtn.textContent = 'Применить';
+        this.footer.append(this.submitBtn);
+        this.addEventListener(this.submitBtn, EVENTS.CLICK, () => {
+            this.submit();
+        });
+
+        this.addSubscribe(this.input, 'input', (evt) => {
+            this.url = evt.currentTarget.value;
+            this.changeAvatar(this.url);
+        });
+
+        this.init();
+    }
+
+    changeAvatar (url) {
+        this.avatar.style.backgroundImage = `url(${url})`;
+    }
+
+    init = async () => {
+        const user = await usersServiceApi.getMe();
+        this.changeAvatar(this.url || user.avatar);
+    }
+
+    openEditor () {
+        this.show();
+    }
+
+    submit = async () => {
+        if (this.url) {
+            await usersServiceApi.setAvatar(this.url);
+            userInfoService.setUserLogin();
+            this.hide();
+        } else {
+            this.input.input.placeholder = 'Вы не ввели URL';
+        }
+
+    }
+}
+export default AvatarModal;
diff --git a/src/components/form-control/FormControl.js b/src/components/form-control/FormControl.js
index f36e3e2..4eaa4bd 100644
--- a/src/components/form-control/FormControl.js
+++ b/src/components/form-control/FormControl.js
@@ -36,6 +36,9 @@ class FormControl extends Component {
         this.addEventListener(this.input, 'focus', this.clearError);
         this.addEventListener(this.input, 'click', this.clearError);
         this.addEventListener(this.input, 'keydown', this.clearError);
+        this.addEventListener(this.input, 'input', (evt) => {
+            this.next('input', evt);
+        });
     }
 
     disabled = (value) => {
diff --git a/src/components/profile-content/ProfileContent.js b/src/components/profile-content/ProfileContent.js
index 266184e..590acb3 100644
--- a/src/components/profile-content/ProfileContent.js
+++ b/src/components/profile-content/ProfileContent.js
@@ -1,6 +1,6 @@
 import Component from '../component/Component';
 import FormControl from '../form-control';
-import {FORM_TYPES} from '../../consts';
+import {FORM_TYPES, EVENTS} from '../../consts';
 
 class ProfileContent extends Component {
     constructor (parentNode) {
@@ -10,6 +10,11 @@ class ProfileContent extends Component {
         this.Password = this.mainNode.querySelector('.Password__inputContainer');
         this.profileButton = this.mainNode.querySelector('.Profile__button');
         this.title.textContent = 'Смена пароля';
+        this.avatar = this.mainNode.querySelector('.Profile__avatar');
+        this.addEventListener(this.avatar, EVENTS.CLICK, () => {
+            this.next(EVENTS.OPEN_MODAL);
+        });
+        this.userName = this.mainNode.querySelector('.Profile__user-name');
         this.oldPassword = this.createComponent(FormControl, this.Password, {
             label: 'Старый пароль:',
             id: 'oldpass',
@@ -32,7 +37,12 @@ class ProfileContent extends Component {
             required: true,
         });
 
-        this.addEventListener(this.form, 'submit', this.submit);
+        this.addEventListener(this.form, EVENTS.SUBMIT, this.submit);
+    }
+
+    initProfile (user) {
+        this.avatar.src = user.avatar;
+        this.userName.textContent = user.login;
     }
 
     disabled = (value) => {
diff --git a/src/components/profile-page/ProfilePage.js b/src/components/profile-page/ProfilePage.js
index 459f360..74bc3ce 100644
--- a/src/components/profile-page/ProfilePage.js
+++ b/src/components/profile-page/ProfilePage.js
@@ -1,12 +1,30 @@
 import Component from '../component/index';
 import ProfileContent from '../profile-content';
 import './ProfilePage.css';
+import usersServiceApi from '../../api/UsersServiceAPI';
+import AvatarModal from '../avatar-modal-component/AvatarModal';
+import userInfoService from '../../services/UserInfoService';
+import {EVENTS} from '../../consts';
 
 class ProfilePage extends Component {
     constructor (mainNodeSelector, parentNode) {
         super(mainNodeSelector, parentNode);
         this.form = this.createComponent(ProfileContent, this.mainNode);
+        this.modal = this.createComponent(AvatarModal, this.mainNode);
+        this.addSubscribe(this.form, EVENTS.OPEN_MODAL, () => {
+            this.modal.openEditor();
+        });
 
+        this.init();
+
+        this.addSubscribe(userInfoService, EVENTS.CHANGE_USER_INFO, () => {
+            this.init();
+        });
+    }
+
+    init = async () => {
+        this.user = await usersServiceApi.getMe();
+        this.form.initProfile(this.user);
     }
 }
 
diff --git a/src/consts.js b/src/consts.js
index 27321da..b93d2b5 100644
--- a/src/consts.js
+++ b/src/consts.js
@@ -52,6 +52,10 @@ export const EVENTS = {
     ROW_CLICK: 'rowClick',
     ROW_DOUBLE_CLICK: 'rowDoubleClick',
     CHANGE_USER_INFO: 'changeUserInfo',
+    CHANGE_USER_AVATAR: 'changeUserAvatar',
+    OPEN_MODAL: 'openModal',
+    CLICK: 'click',
+    SUBMIT: 'submit'
 };
 
 export const FORM_TYPES = {
diff --git a/src/services/UserInfoService.js b/src/services/UserInfoService.js
index c5a2776..38f2cca 100644
--- a/src/services/UserInfoService.js
+++ b/src/services/UserInfoService.js
@@ -1,6 +1,4 @@
 import usersServiceApi from '../api/UsersServiceAPI';
-import tokenApi from '../api/TokenAPI';
-import {parseJwt} from '../utils/jwtDecode';
 import {EVENTS} from '../consts';
 import EmitService from './EmitService';
 
@@ -15,10 +13,13 @@ class UserInfoService extends EmitService {
     }
 
     setUserLogin = async () => {
-        const {login} = parseJwt(tokenApi.getAccessToken());
-        this.userInfo = await usersServiceApi.find(login);
+        this.userInfo = await usersServiceApi.getMe();
         this.next(EVENTS.CHANGE_USER_INFO, {...this.userInfo});
     }
+
+    changeAllAvatars () {
+        this.next(EVENTS.CHANGE_USER_AVATAR);
+    }
 }
 
 const userInfoService = new UserInfoService();