Sprint 4

.dockerignore

@@ -0,0 +1 @@
+node_modules

.eslintignore

@@ -0,0 +1,3 @@
+webpack.config.js
+webpack.dev.js
+webpack.prod.js

.eslintrc.json

@@ -27,6 +27,7 @@
     "padded-blocks": "off",
     "lines-between-class-members": "off",
     "max-classes-per-file": 0,
-    "import/no-extraneous-dependencies": "off"
+    "import/no-extraneous-dependencies": "off",
+    "no-useless-escape": "off"
   }
 }

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint:all && npm run test

Dockerfile

@@ -0,0 +1,7 @@
+FROM node:18
+WORKDIR /app
+COPY . .
+RUN npm install
+RUN npm run build
+EXPOSE 3000
+CMD ["node", "server.js"]

README.md

@@ -17,6 +17,8 @@ Web-приложение **Messenger** позволяет общаться в ч
 3. Vanilla JS: реализация реактивного фреймворка
 4. Работа с REST API и Service Workers API
 5. SPA роутинг
+6. Webpack-сборка
+7. Pre-commit (Husky) и Dockerfile
 
 
 ## Команды для сборки (Parcel)
@@ -30,6 +32,7 @@ Web-приложение **Messenger** позволяет общаться в ч
 `npm run stylelint:fix` автоматическое исправление ошибок Stylelint  
 `npm run ts:check` проверка на типы  
 `npm run test` запуск тестов  
+`lint:all` запуск всех линтеров  
 
 ## Деплой
 

package.json

@@ -10,14 +10,16 @@
   },
   "scripts": {
     "start": "npm run build && node src/server.js",
-    "build": "parcel build src/index.html --no-source-maps --dist-dir ./dist",
-    "dev": "parcel src/index.html --no-cache --open",
+    "build": "webpack --config webpack.prod.js",
+    "dev": "webpack serve --hot --config webpack.dev.js",
     "eslint:check": "eslint --ext .ts ./src ",
     "eslint:fix": "npm run eslint:check --fix",
     "stylelint:check": "stylelint \"src/**/*.scss\" --custom-syntax postcss-scss",
     "stylelint:fix": "npm run stylelint:check --fix",
     "ts:check": "tsc --noEmit",
-    "test": "ts-mocha src/**/*.test.ts --require test/test.js"
+    "lint:all": "npm run eslint:check && npm run stylelint:check && npm run ts:check",
+    "test": "ts-mocha src/**/*.test.ts --require test/test.js",
+    "prepare": "husky install"
   },
   "repository": {
     "type": "git",
@@ -31,30 +33,39 @@
   },
   "homepage": "https://github.com/yandex-praktikum/middle.messenger.praktikum.yandex#readme",
   "devDependencies": {
-    "@anikin/parcel-transformer-handlebars-precompile": "1.0.1",
-    "@parcel/transformer-inline-string": "2.8.0",
-    "@parcel/transformer-sass": "2.8.0",
-    "@parcel/validator-typescript": "2.8.0",
     "@types/chai": "4.3.4",
     "@types/mocha": "10.0.0",
     "@types/uuid": "8.3.4",
     "@typescript-eslint/eslint-plugin": "5.42.0",
     "@typescript-eslint/parser": "5.42.0",
     "chai": "4.3.7",
+    "clean-webpack-plugin": "4.0.0",
+    "copy-webpack-plugin": "11.0.0",
+    "css-loader": "6.7.2",
     "eslint": "8.26.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-react": "7.31.10",
+    "handlebars-loader": "1.7.2",
+    "html-webpack-plugin": "5.5.0",
+    "husky": "8.0.2",
     "jsdom": "20.0.3",
     "mocha": "10.0.0",
-    "parcel": "2.8.0",
-    "parcel-reporter-static-files-copy": "1.4.0",
     "postcss-scss": "4.0.5",
+    "sass": "1.56.1",
+    "sass-loader": "13.2.0",
+    "style-loader": "3.3.1",
     "stylelint": "14.14.0",
     "stylelint-config-standard": "29.0.0",
+    "svg-inline-loader": "0.8.2",
+    "ts-loader": "9.4.1",
     "ts-mocha": "10.0.0",
-    "typescript": "4.8.4"
+    "typescript": "4.8.4",
+    "webpack": "5.75.0",
+    "webpack-cli": "5.0.0",
+    "webpack-dev-server": "4.11.1",
+    "webpack-merge": "5.8.0"
   },
   "dependencies": {
     "express": "4.18.2",

src/components/message-image/message-image.scss

@@ -28,7 +28,7 @@
     bottom: 18px;
     right: 20px;
     z-index: 20;
-    background-image: url('../static/icons/tick.svg');
+    background-color: $color-white;
   }
 
   &--read::after {
@@ -39,7 +39,7 @@
     bottom: 18px;
     right: 16px;
     z-index: 20;
-    background-image: url('../static/icons/tick.svg');
+    background-color: $color-white;
   }
 
   &--mine &__picture {

src/components/message/message.scss

@@ -45,15 +45,15 @@
 
       bottom: 18px;
       right: 20px;
-      background-image: url('../static/icons/tick.svg');
+      background-color: $color-white;
     }
 
     ::after {
       @include absolute(20px, 20px, '');
 
       bottom: 18px;
       right: 15px;
-      background-image: url('../static/icons/tick.svg');
+      background-color: $color-white;
     }
   }
 

src/controllers/chats-controller.ts

@@ -5,6 +5,8 @@ import { getCurrentChatById } from '../utils/get-current-chat';
 import { Toast } from '../components/toast/toast';
 import { validator } from '../utils/validator';
 import { userController } from './user-controller';
+import { router } from '../services/router';
+import { Route } from '../constants';
 
 class ChatsController extends BaseController {
 
@@ -19,18 +21,52 @@ class ChatsController extends BaseController {
       .finally(this.hideLoader);
   }
 
+  getCurrentChatByHash(id: number) {
+    const activeChat = store.getState().currentChat;
+
+    if (activeChat && activeChat.id === id) {
+      return;
+    }
+
+    if (!activeChat) {
+      this.getChats()
+        .then(() => {
+          this._setCurrentToState(id);
+        });
+    }
+
+    this._setCurrentToState(id);
+  }
+
+  private _setCurrentToState(id: number) {
+
+    const chats = store.getState().chatsList;
+    if (chats && chats.length) {
+      const currentChat = getCurrentChatById(id, chats);
+      if (Object.keys(currentChat).length && currentChat.id) {
+        store.setState('currentChat', currentChat);
+      } else {
+        const toast = new Toast({ text: 'Нет чата с таким id', isError: true });
+        toast.show();
+        store.setState('currentChat', { id: null });
+      }
+    }
+  }
+
   getCurrentChat(id: number) {
     const chats = store.getState().chatsList;
     if (chats.length) {
       const currentChat = getCurrentChatById(id, chats);
       store.setState('currentChat', currentChat);
+      router.go(`${Route.CHAT}#${id}`);
     }
   }
 
   clearCurrentChat() {
     const state = store.getState();
     const newState = { ...state };
     delete newState.currentChat;
+    router.go(Route.CHAT);
     store.setState('currentChat', { id: null });
   }
 

src/index.html

@@ -4,12 +4,10 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="style.scss" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz@8..144&display=swap" rel="stylesheet">
   <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon.png">
-  <script src="index.ts" type="module"></script>
   <title>Messenger</title>
 </head>
 <body>

src/index.ts

@@ -9,13 +9,19 @@ import { Route } from './constants';
 import { router } from './services/router';
 import { Block } from './services/block';
 import { authController } from './controllers/auth-controller';
+import './style.scss';
+import { chatsController } from './controllers/chats-controller';
 
 const onDomLoaded = () => {
   router
     .openPaths(Route.LOGIN, Route.SIGNUP, Route.ERROR, Route.NOTFOUND)
     .hideAuthPaths(Route.LOGIN, Route.SIGNUP)
     .protectedCb(authController.checkUser.bind(authController))
     .hiddenAuthCb(authController.checkHiddenAuth.bind(authController))
+    .setIncludedRoutes({
+      path: Route.CHAT,
+      cb: chatsController.getCurrentChatByHash.bind(chatsController),
+    })
     .use(Route.LOGIN, LoginPage as typeof Block)
     .use(Route.SIGNUP, SignupPage as typeof Block)
     .use(Route.CHAT, ChatPage as typeof Block)

src/layouts/error-layout/error-layout.ts

@@ -1,4 +1,4 @@
-import iconArrow from 'bundle-text:../../../static/icons/back-arrow.svg';
+import iconArrow from '../../../static/icons/back-arrow.svg';
 import tpl from './error-layout.hbs';
 import { Block } from '../../services/block';
 import { IconLink } from '../../components/icon-link/icon-link';

src/layouts/user-layout/user-layout.ts

@@ -1,4 +1,4 @@
-import iconArrow from 'bundle-text:../../../static/icons/back-arrow.svg';
+import iconArrow from '../../../static/icons/back-arrow.svg';
 import tpl from './user-layout.hbs';
 import { Block } from '../../services/block';
 import { IconLink } from '../../components/icon-link/icon-link';

src/modules/avatar-form/avatar-form.hbs

@@ -7,7 +7,9 @@ id="avatar"
 class="visually-hidden"
 accept="image/png, image/jpeg, image/jpg"
 >
-<label class="avatar-form__label" for="avatar"></label>
+<label class="avatar-form__label" for="avatar">
+  {{{icon}}}
+</label>
 <div class="avatar-form__submit">
   <span class="avatar-form__error error"></span>
   {{{submitButton}}}

src/modules/avatar-form/avatar-form.scss

@@ -12,15 +12,15 @@
   }
 
   &__label {
+    @include flexCenter;
+
+    padding: 15px;
     margin-bottom: 15px;
     width: 70px;
     height: 70px;
     border-radius: 50%;
     background-color: $color-blue;
     cursor: pointer;
-    background-image: url('../static/icons/add-avatar.svg');
-    background-repeat: no-repeat;
-    background-position: center center;
 
     &:hover {
       background-color: $color-blue-dark;

src/modules/avatar-form/avatar-form.ts

@@ -5,6 +5,7 @@ import { validator } from '../../utils/validator';
 import { userController } from '../../controllers/user-controller';
 import { store } from '../../services/store';
 import { chatsController } from '../../controllers/chats-controller';
+import addAvatarIcon from '../../../static/icons/add-avatar.svg';
 
 type AvatarFormProps = Record<string, any>;
 
@@ -61,6 +62,7 @@ const avatarFormUser = new AvatarForm({
     },
     value: 'Поменять аватар',
   }),
+  icon: addAvatarIcon,
   events: {
     submit: handleSubmitUser,
     change: validator.handleChangeAvatar,
@@ -75,6 +77,7 @@ const avatarFormChat = new AvatarForm({
     },
     value: 'Поменять аватар',
   }),
+  icon: addAvatarIcon,
   events: {
     submit: handleSubmitChat,
     change: validator.handleChangeAvatar,

src/modules/chat-header/chat-header.ts

@@ -1,7 +1,7 @@
-import menuIcon from 'bundle-text:../../../static/icons/menu.svg';
-import addUserIcon from 'bundle-text:../../../static/icons/add-user.svg';
-import deleteUserIcon from 'bundle-text:../../../static/icons/delete-user.svg';
-import deleteChatIcon from 'bundle-text:../../../static/icons/delete-chat.svg';
+import menuIcon from '../../../static/icons/menu.svg';
+import deleteUserIcon from '../../../static/icons/delete-user.svg';
+import deleteChatIcon from '../../../static/icons/delete-chat.svg';
+import addUserIcon from '../../../static/icons/add-user.svg';
 import tpl from './chat-header.hbs';
 import { Block } from '../../services/block';
 import { IconButton } from '../../components/icon-button/icon-button';

src/modules/chat-message/chat-message.ts

@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
-import iconAttach from 'bundle-text:../../../static/icons/attach.svg';
-import iconSend from 'bundle-text:../../../static/icons/message.svg';
-import iconPhoto from 'bundle-text:../../../static/icons/photo.svg';
-import iconSticker from 'bundle-text:../../../static/icons/smile.svg';
+import iconAttach from '../../../static/icons/attach.svg';
+import iconSend from '../../../static/icons/message.svg';
+import iconPhoto from '../../../static/icons/photo.svg';
+import iconSticker from '../../../static/icons/smile.svg';
 import tpl from './chat-message.hbs';
 import { Block } from '../../services/block';
 import { IconButton } from '../../components/icon-button/icon-button';

src/modules/chat-panel/chat-panel.ts

@@ -1,5 +1,5 @@
-import iconProfile from 'bundle-text:../../../static/icons/profile.svg';
-import newChat from 'bundle-text:../../../static/icons/new-chat.svg';
+import iconProfile from '../../../static/icons/profile.svg';
+import newChat from '../../../static/icons/new-chat.svg';
 import tpl from './chat-panel.hbs';
 import { Block } from '../../services/block';
 import { SearchInput } from '../../components/search-input/search-input';

src/modules/popup-form/popup-form.scss

@@ -11,22 +11,6 @@
     text-transform: uppercase;
   }
 
-  &__label {
-    margin-bottom: 15px;
-    width: 70px;
-    height: 70px;
-    border-radius: 50%;
-    background-color: $color-blue;
-    cursor: pointer;
-    background-image: url('../static/icons/add-avatar.svg');
-    background-repeat: no-repeat;
-    background-position: center center;
-
-    &:hover {
-      background-color: $color-blue-dark;
-    }
-  }
-
   &__submit {
     padding-top: 50px;
     position: relative;