Merge pull request #25 from frontend-park-mail-ru/har-126-add-new-pages

HAR-126: Добавляю страницы чата, поиска и подписок
frontend-park-mail-ru · May 6, 2024 · 2ed2e3f · 2ed2e3f
2 parents f0e7b56 + 2679da0
commit 2ed2e3f
Show file tree

Hide file tree

Showing 96 changed files with 1,791 additions and 243 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,10 +5,12 @@
     <title>Harmonium</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
     <link rel="icon" href="/static/icon.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
     <header id="navbar"></header>
-    <main id="root"></main>
+    <main id="root" class="root"></main>
     <div id="error-block"></div>
+    <dialog class="dialog-window" id="dialog-window"></dialog>
 </body>
 </html>
diff --git a/source/app/App.js b/source/app/App.js
@@ -9,6 +9,9 @@ import {FeedView} from '../pages/feed/ui/FeedView.js';
 import {NavbarView} from '../widgets/navbar/ui/navbar.js';
 import {LoginView} from '../pages/login/ui/loginView.js';
 import {SignupView} from '../pages/signup/ui/signupView.js';
+import WebSocketService from '../shared/api/WebSocket.js';
+import {SearchView} from '../pages/search/index.js';
+import {ChatView} from '../pages/chat/index.js';
 
 /**
  * Class provides class App, the initial class
@@ -26,10 +29,12 @@ export class App {
         router.register('/signup', new SignupView());
         router.register('/pin/{pin_id}', new PinView());
         router.register('/board/{board_id}', new BoardView());
+        router.register('/search/{search_query}', new SearchView());
+        router.register('/chat', new ChatView());
 
         const api = new API('');
         const response = await api.isAuth();
-        if (response.code !== 0) {
+        if (response.code) {
             try {
                 localStorage.removeItem('user');
             } catch (error) {
@@ -38,6 +43,7 @@ export class App {
         } else {
             try {
                 localStorage.setItem('user', JSON.stringify(response.body));
+                WebSocketService.initialize();
             } catch (error) {
                 Error();
             }
@@ -47,4 +53,3 @@ export class App {
         router.start();
     }
 }
-
diff --git a/source/entity/avatar/ui/avatar.js b/source/entity/avatar/ui/avatar.js
@@ -9,11 +9,13 @@ export class Avatar extends View {
     /**
      * Constructor function to initialize start values
      * @constructor
+     * @param {string} avatarID – ID of avatar
+     * @param {any} entity – entity where to search
      * @param {Array} args – arguments to pass forward to View constructor
      */
-    constructor(...args) {
+    constructor(avatarID = 'avatar', entity = document, ...args) {
         super(...args);
-        this.root = document.getElementById('avatar');
+        this.root = entity.querySelector(`#${avatarID}`);
     }
 
     /**

diff --git a/source/entity/boardPin/ui/boardPin.js b/source/entity/boardPin/ui/boardPin.js
@@ -23,7 +23,7 @@ export class BoardPinFeedView extends View {
     * @param {int} pinID - Id of pin to go.
     */
     onClick(pinID) {
-        window.location.pathname = '/pin/' + pinID;
+        history.pushState(null, null, '/pin/' + pinID);
     }
 
     /**
@@ -44,8 +44,11 @@ export class BoardPinFeedView extends View {
         delBtn.addEventListener('click', async (event) => {
             event.preventDefault();
             const api = new API('/boards/' + board.board_id + '/pins/' + pin.pin_id);
-            await api.delete();
-            window.location.pathname = '/board/' + board.board_id;
+            const response = await api.delete();
+            if (response.code) {
+                return;
+            }
+            this.root.remove();
         });
     }
 }
diff --git a/source/entity/button/ui/button.handlebars b/source/entity/button/ui/button.handlebars
@@ -0,0 +1,3 @@
+<button class="button" id="{{id}}">
+    {{content}}
+</button>
diff --git a/source/entity/button/ui/button.js b/source/entity/button/ui/button.js
@@ -0,0 +1,17 @@
+import {View} from '../../../app/View.js';
+import buttonTemplate from './button.handlebars';
+import './button.scss';
+
+export class ButtonView extends View {
+    constructor(rootID, ...args) {
+        super(...args);
+        this.root = document.querySelector(`#${rootID}`);
+    }
+
+    render(content, classes, id) {
+        this.root.innerHTML = buttonTemplate({content, id});
+
+        const button = this.root.querySelector(`#${id}`);
+        button.classList.add(...classes);
+    }
+}
diff --git a/source/entity/button/ui/button.scss b/source/entity/button/ui/button.scss
diff --git a/source/entity/errorWindow/ui/errorWindow.scss b/source/entity/errorWindow/ui/errorWindow.scss
@@ -7,7 +7,7 @@
     border-radius: variables.$element-border-radius;
     background-color: variables.$background-color;
     position: fixed;
-    inset: auto 20px 20px auto;
+    inset: auto 20px 60px auto;
     padding: 20px 35px 20px 20px;
 }
 
@@ -29,3 +29,17 @@
 .error-window__text{
     white-space: pre-line;
 }
+
+@media screen and (max-width: 430px) {
+    .error-window{
+        min-width: 100px;
+        width: 50vw;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .cancel-icon{
+        width: 40px;
+        height: 40px;
+    }
+}
diff --git a/source/entity/pin/ui/pin.js b/source/entity/pin/ui/pin.js
@@ -19,7 +19,7 @@ export class PinFeedView extends View {
     * @param {int} pinID - Id of pin to go.
     */
     onClick(pinID) {
-        window.location.pathname = '/pin/' + pinID;
+        history.pushState(null, null, '/pin/' + pinID);
     }
 
     /**

diff --git a/source/entity/pinPhoto/ui/pinPhoto.scss b/source/entity/pinPhoto/ui/pinPhoto.scss
@@ -5,3 +5,16 @@
     border-radius: variables.$pin-photo-border-radius;
     display: block;
 }
+
+@media screen and (max-width: 1024px) {
+    .pin-photo__image{
+        border-radius: 15px 15px 0 0;
+        width: 60vw;
+    }
+}
+
+@media screen and (max-width: 430px) {
+    .pin-photo__image{
+        width: 100%;
+    }
+}
diff --git a/...eedBoards/ui/profileFeedBoards.handlebars → ...eedBoards/ui/profileFeedBoards.handlebars b/...eedBoards/ui/profileFeedBoards.handlebars → ...eedBoards/ui/profileFeedBoards.handlebars
@@ -1,4 +1,4 @@
-<div class="board__item window" id="board-{{board.board_id}}">
-    <div class="board__title title">{{board.title}}</div>
-    <div class="board__description description">{{board.description}}</div>
-</div>
+<div class="board__item window" id="board-{{board.board_id}}">
+    <div class="board__title title">{{board.title}}</div>
+    <div class="board__description description">{{board.description}}</div>
+</div>
diff --git a/...profileFeedBoards/ui/profileFeedBoards.js → ...profileFeedBoards/ui/profileFeedBoards.js b/...profileFeedBoards/ui/profileFeedBoards.js → ...profileFeedBoards/ui/profileFeedBoards.js
@@ -1,39 +1,39 @@
-import {View} from '../../../app/View.js';
-import profileFeedBoardsTemplate from './profileFeedBoards.handlebars';
-import './profileFeedBoards.scss';
-
-/**
- * Class to handle view of board card
- */
-export class ProfileFeedBoardsView extends View {
-    /**
-     * Initialize variables
-     * @param {Element} root – element where to render
-     * @param {Array} args – arguments to pass into parent function
-     */
-    constructor(root, ...args) {
-        super(...args);
-        this.root = root;
-    }
-
-    /**
-     * Actions on click
-     * @param {int} boardID – id of a board
-     */
-    onClick(boardID) {
-        window.location.pathname = '/board/' + boardID;
-    }
-
-    /**
-     * Function to render board card
-     * @param {json} board – info about board
-     */
-    render(board) {
-        this.root.innerHTML = profileFeedBoardsTemplate({board});
-        const eventRoot = document.querySelector('#board-' + board.board_id);
-        eventRoot.addEventListener('click', (event) => {
-            event.preventDefault();
-            this.onClick(board.board_id);
-        });
-    }
-}
+import {View} from '../../../app/View.js';
+import profileFeedBoardsTemplate from './profileFeedBoards.handlebars';
+import './profileFeedBoards.scss';
+
+/**
+ * Class to handle view of board card
+ */
+export class FeedBoardsView extends View {
+    /**
+     * Initialize variables
+     * @param {Element} root – element where to render
+     * @param {Array} args – arguments to pass into parent function
+     */
+    constructor(root, ...args) {
+        super(...args);
+        this.root = root;
+    }
+
+    /**
+     * Actions on click
+     * @param {int} boardID – id of a board
+     */
+    onClick(boardID) {
+        history.pushState(null, null, '/board/' + boardID);
+    }
+
+    /**
+     * Function to render board card
+     * @param {json} board – info about board
+     */
+    render(board) {
+        this.root.innerHTML = profileFeedBoardsTemplate({board});
+        const eventRoot = document.querySelector('#board-' + board.board_id);
+        eventRoot.addEventListener('click', (event) => {
+            event.preventDefault();
+            this.onClick(board.board_id);
+        });
+    }
+}
diff --git a/...ofileFeedBoards/ui/profileFeedBoards.scss → ...ofileFeedBoards/ui/profileFeedBoards.scss b/...ofileFeedBoards/ui/profileFeedBoards.scss → ...ofileFeedBoards/ui/profileFeedBoards.scss
@@ -27,3 +27,9 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 4;
 }
+
+@media screen and (max-width: 1024px) {
+    .board__item{
+        width: calc(100% - 40px);
+    }
+}
diff --git a/source/entity/userListItem/ui/userListItem.handlebars b/source/entity/userListItem/ui/userListItem.handlebars
@@ -0,0 +1,11 @@
+<div class="user-list-item" id="user-{{user.user_id}}">
+    <div class="avatar list-item-avatar" id="list-item-avatar">
+
+    </div>
+    <div class="list-item-nickname">
+        {{user.nickname}}
+    </div>
+    <div class="list-item-followers-count">
+        подписчиков {{user.subscribers_count}}
+    </div>
+</div>
diff --git a/source/entity/userListItem/ui/userListItem.js b/source/entity/userListItem/ui/userListItem.js
@@ -0,0 +1,23 @@
+import {View} from '../../../app/View.js';
+import userListTemplate from './userListItem.handlebars';
+import './userListItem.scss';
+
+export class UserListItemView extends View {
+    constructor(root, ...args) {
+        super(...args);
+        this.root = root;
+    }
+
+    onClick(userNickname) {
+        history.pushState(null, null, '/profile/' + userNickname);
+    }
+
+    render(user) {
+        this.root.innerHTML = userListTemplate({user});
+        const eventRoot = document.querySelector('#user-' + user.user_id);
+        eventRoot.addEventListener('click', (event) => {
+            event.preventDefault();
+            this.onClick(user.nickname);
+        });
+    }
+}
diff --git a/source/entity/userListItem/ui/userListItem.scss b/source/entity/userListItem/ui/userListItem.scss
@@ -0,0 +1,28 @@
+.user-list-item{
+  width: 300px;
+  height: 70px;
+  display: grid;
+  grid-template:
+              "a b" 1fr
+              "a c" 1fr / 70px 1fr;
+  gap: 5px 10px;
+  align-items: center;
+}
+
+.list-item-avatar{
+  grid-area: a;
+  width: 100%;
+  height: 100%;
+}
+
+.list-item-nickname{
+  grid-area: b;
+  font-size: 18px;
+  text-align: start;
+}
+
+.list-item-followers-count{
+  grid-area: c;
+  font-weight: bold;
+  text-align: start;
+}
diff --git a/source/features/boardList/ui/boardList.js b/source/features/boardList/ui/boardList.js
@@ -3,7 +3,6 @@ import './boardList.scss';
 import {View} from '../../../app/View.js';
 import {BoardView} from '../../../pages/board/ui/boardView.js';
 import {BoardListAPI} from '../api/api.js';
-import {ErrorWindowView} from '../../../entity/errorWindow/ui/errorWindow.js';
 import {errors} from '../../../shared/config.js';
 
 /** Board list window view */
@@ -35,11 +34,14 @@ export class BoardListView extends View {
                     const response = await pinAdd.api();
 
                     if (response.code) {
-                        const errorWindow = new ErrorWindowView();
-                        errorWindow.render(errors[response.code]);
+                        const errorField = document.querySelector('#add-to-board-error');
+                        errorField.innerHTML = errors[response.code];
                         return;
                     }
 
+                    const modal = document.querySelector('#dialog-window');
+                    modal.close();
+
                     const boardView = new BoardView();
                     await boardView.render(board.board_id);
                 });

diff --git a/source/features/feedBlock/ui/feedBlock.js b/source/features/feedBlock/ui/feedBlock.js
@@ -21,10 +21,12 @@ export class FeedBlockView extends View {
     * @async
     * @param {object} objects - Feed items.
     * @param {object} RenderEntity - Entity to render.
-    * @param {string} IDName - Name for id, by default 'pin_id'.
     * @param {...any} args - args for constructor of view.
     */
-    async render(objects, RenderEntity, IDName = 'pin_id', ...args) {
+    async render(objects, RenderEntity, ...args) {
+        if (!objects) {
+            return;
+        }
         this.root.innerHTML = feedBlockTemplate({objects});
         const prefix = '#feed-item-';
         for (let i = 0; i < objects.length; ++i) {

diff --git a/source/features/listBlock/ui/listBlock.handlebars b/source/features/listBlock/ui/listBlock.handlebars
@@ -0,0 +1,5 @@
+{{#each objects}}
+    <div class="list-item" id="list-item-{{@index}}">
+
+    </div>
+{{/each}}
diff --git a/source/features/listBlock/ui/listBlock.js b/source/features/listBlock/ui/listBlock.js
@@ -0,0 +1,25 @@
+import {View} from '../../../app/View.js';
+import listBlockTemplate from './listBlock.handlebars';
+import './listBlock.scss';
+import {Avatar} from '../../../entity/avatar/ui/avatar.js';
+
+export class ListBlockView extends View {
+    constructor(root, ...args) {
+        super(...args);
+        this.root = document.querySelector(`#${root}`);
+    }
+
+    render(objects, RenderEntity, ...args) {
+        this.root.innerHTML = listBlockTemplate({objects});
+        const prefix = '#list-item-';
+        for (let i = 0; i < objects.length; ++i) {
+            const root = document.querySelector(prefix + i);
+
+            const entity = new RenderEntity(root);
+            entity.render(objects[i], ...args);
+
+            const avatar = new Avatar('list-item-avatar', root);
+            avatar.render(objects[i].avatar_url);
+        }
+    }
+}