Sprint 3

.eslintrc.cjs

@@ -0,0 +1,26 @@
+module.exports = {
+  extends: 'airbnb',
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: 'standard-with-typescript',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['prettier', '@typescript-eslint', 'stylelint-scss'],
+  rules: {
+    'max-len': [2, 100],
+    'max-params': [2, 3],
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        endOfLine: 'off',
+      },
+    ],
+  },
+  'comma-dangle': 0,
+  'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+}

.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.sh
+/_temp

.netlify

@@ -0,0 +1,22 @@
+# example netlify.toml
+[build]
+  command = "vite build"
+  # functions = "netlify/functions"
+  publish = "dist"
+
+  ## Uncomment to use this redirect for Single Page Applications like create-react-app.
+  ## Not needed for static site generators.
+  [[redirects]]
+    from = "/*"
+    to = "/index.html"
+    status = 200
+    force = false
+
+  ## (optional) Settings for Netlify Dev
+  ## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection
+  #[dev]
+  #  command = "yarn start" # Command to start your dev server
+  #  port = 3000 # Port that the dev server will be listening on
+  #  publish = "dist" # Folder with the static content for _redirect file
+
+  ## more info on configuring this file: https://docs.netlify.com/configure-builds/file-based-configuration/

.postcssrc

@@ -0,0 +1,3 @@
+{
+	"modules": true
+}

.stylelintrc.json

@@ -0,0 +1,12 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "no-descending-specificity": null
+  },
+  "overrides": [
+    {
+      "files": ["*.js"],
+      "customSyntax": "postcss-lit"
+    }
+  ]
+}

.tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

README.md

@@ -1,83 +1,79 @@
-### Ветка, в которой делаете задания спринта, должна называться sprint_i, где i - номер спринта. Не переименовывайте её.
+# Онлайн мессенджер
 
-### Откройте pull request в ветку main из ветки, где вы разрабатывали проект, и добавьте ссылку на этот pr в README.md в ветке main. 
-### ВАЖНО: pull request должен называться “Sprint i” (i — номер спринта).
-
-### Например, задания для проектной работы во втором спринте вы делаете в ветке sprint_2. Открываете из неё pull request в ветку main. Ссылку на этот pr добавляете в README.md в ветке main. После этого на платформе Практикума нажимаете «Проверить задание».
-
-### Также не забудьте проверить, что репозиторий публичный.
----
-
-
-Даже законченный проект остаётся только заготовкой, пока им не начнут пользоваться. Но сначала пользователь должен понять, зачем ему пользоваться вашим кодом. В этом помогает файл README.
-
-README — первое, что прочитает пользователь, когда попадёт в репозиторий на «Гитхабе». Хороший REAMDE отвечает на четыре вопроса:
-
-- Готов ли проект к использованию?
-- В чём его польза?
-- Как установить?
-- Как применять?
-
-## Бейджи
-
-Быстро понять статус проекта помогают бейджи на «Гитхабе». Иногда разработчики ограничиваются парой бейджев, которые сообщат о статусе тестов кода:
-
-![Бэйджи](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/b.png)
+## Описание
 
-Если пользователь увидит ошибку в работе тестов, то поймёт: использовать текущую версию в важном проекте — не лучшая идея.
+Онлайн мессенджер является веб-приложением, которое позволяет пользователям обмениваться сообщениями
+в режиме реального времени. Приложение включает несколько страниц, включая страницы для входа,
+регистрации, просмотра сообщений, редактирования профиля и страницы с именем пользователя для
+просмотра сообщений.
 
-Бейджи помогают похвастаться достижениями: насколько популярен проект, как много разработчиков создавало этот код. Через бейджи можно даже пригласить пользователя в чат:
+## Версия: 0.3 (В процессе разработки)
 
-![Версии](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/vers.png)
+Текущая версия находится в процессе разработки и представляет собой макет с ограниченной
+функциональностью.
 
-В README **Webpack** строка бейджев подробно рассказывает о покрытии кода тестами. Когда проект протестирован, это вызывает доверие пользователя. Последний бейдж приглашает присоединиться к разработке. 
+## Дезайн и алрес прототипа
 
-Другая строка убедит пользователя в стабильности инфраструктуры и популярности проекта. Последний бейдж зовёт в чат проекта.
+Дезайн для версии 0.1 можно найти по ссылке на
+[Figma](https://www.figma.com/file/3fadPRCD38XteX6sDx6hNk/Messenger?type=design&node-id=0%3A1&t=PYURXJQ9XpU48Zk7-1).
+Прототип на [Netlify](https://sprint-3--mid-messenger-sprint-3.netlify.app/)
 
-## Описание
-
-Краткое опишите, какую задачу решает проект. Пользователь не верит обещаниям и не готов читать «полотна» текста. Поэтому в описании достаточно нескольких строк:
+## Установка
 
-![Описание](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/desc.png)
+1.  Склонируйте репозиторий с помощью команды:  
+    `git clone https://github.com/MIdkhat/middle.messenger.praktikum.yandex.git` branch sprint_3
+2.  Перейдите в каталог проекта: `cd middle.messenger.praktikum.yandex`
+3.  Установите зависимости, выполнив следующую команду (optional для разработчиков): `npm install`
+4.  Запустите приложение, выполнив команду: `npm run start`
+5.  Откройте веб-браузер и перейдите по адресу [http://localhost:3000](http://localhost:3000), чтобы
+    открыть приложение.
 
-Авторы **React** дробят описание на абзацы и списки — так проще пробежаться глазами по тексту и найти ключевую информацию.
+## Команды для разработчиков
 
-Если у проекта есть сайт, добавьте ссылку в заголовок.
+- `npm run dev` — запуск для разраотчика,
+- `npm run build` — сборка приложения
+- `npm run preview` — превью собраного приложения
+- `npm run start` — сборка приложения и запуск превью
 
-## Установка
+## Примеры использования
 
-Лучше всего пользователя убеждает собственный опыт. Чем быстрее он начнёт пользоваться проектом, тем раньше почувствует пользу. Для этого помогите ему установить приложение: напишите краткую пошаговую инструкцию.
+### Страница входа (Login)
 
-Если проект предназначен для разработчиков, добавьте информацию об установке тестовых версий. Например:
+[/login](http://localhost:3000/login) На странице входа пользователь может ввести свои учетные
+данные (логин и пароль) для входа в систему.
 
-- `npm install` — установка стабильной версии,
-- `npm start` — запуск версии для разработчика,
-- `npm run build:prod` — сборка стабильной версии.
+### Страница регистрации (Register)
 
-## **Примеры использования**
+[/register](http://localhost:3000/register) На странице регистрации пользователь может создать новую
+учетную запись, указав свои данные (логин, пароль, адрес электронной почты и т.д.).
 
-Хорошо, если сразу после установки пользователь сможет решить свои задачи без изучения проекта. Это особенно верно, если ваш пользователь — не профессиональный разработчик. Но даже профессионал поймёт вас лучше, если показать примеры использования:
+### Страница профиля (Profile)
 
-![Ссылки](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/link.png)
+[/profile](http://localhost:3000/profile) Можно посмотреть данные пользователя.
 
-Для более подробных инструкции добавьте новые разделы или ссылки:
+### Страница редактирования профиля (Edit Profile)
 
-- на документацию,
-- вики проекта,
-- описание API.
+[/profileedit](http://localhost:3000/profileedit) На странице редактирования профиля пользователь
+может изменить свои данные профиля, такие как имя, фотография и пароль.
 
-В учебном проекте будут полезен раздел с описанием стиля кода и правилами разработки: как работать с ветками, пул-реквестами и релизами.
+### Страница просмотра сообщений (Messages)
 
-### **Команда**
+[/messages](http://localhost:3000/messenger) На странице просмотра сообщений пользователь может
+видеть список всех чатов и полученных сообщений. Через панель инструментов добавлять/удалять чаты и
+их участнков
 
-Если вы работаете в команде, укажите основных участников: им будет приятно, а новые разработчики охотнее присоединятся к проекту. «Гитхаб» — не просто инструмент, это социальная сеть разработчиков.
+### Изменения от версии 0.2
 
-![Команда](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/team.png)
+- добавлен router
+- добавлер API swagger
+- реализована модель model–view–controller
+- настроен WebSocket
+- добавлена регистрация, авторизация, выход из системы
+- добавлена информация пользователя и ее изменение
+- добавлена работа с чатами и пользователями - добавление/удаление
 
-### **Примеры README**
+Необходимые добавления
 
-- «[Реакт](https://github.com/facebook/react)»,
-- «[Эхо](https://github.com/labstack/echo)»,
-- «[Вебпак](https://github.com/webpack/webpack)»,
-- «[ТДенгине](https://github.com/taosdata/TDengine)»,
-- «[Соул-хантинг](https://github.com/vladpereskokov/soul-hunting/)».
+- добавить возможность отсылать файлы и изображения
+- сделать поиск по чатам
+- настройки

deploy.sh

@@ -0,0 +1,28 @@
+#!/usr/bin/env sh
+
+# set NODE_ENV=production
+
+# abort on errors
+set -e
+
+# build
+npm run build
+
+# navigate into the build output directory
+cd dist
+
+# place .nojekyll to bypass Jekyll processing
+echo > .nojekyll
+
+if [ $# -eq 0 ]
+echo Got message
+echo deploy message: $*
+then
+   message="deploy: $*"
+else
+   message='deploy'
+fi
+
+git add -A
+git commit -m "$message"
+git push

index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.scss' {
+  const content: { [className: string]: string }
+  export = content
+}

index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Messenger</title>
+    <link rel="shortcut icon" type="icon" href="./public/images/favicon.ico"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js" integrity="sha512-RNLkV3d+aLtfcpEyFG8jRbnWHxUqVZozacROI4J2F1sTaDqo1dPQYs01OMi1t1w9Y2FdbSCDSQ2ZVdAC8bzgAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script type="module" src="index.ts"></script>
+</head>
+<body>
+  <div id="app"></div>
+  <style>
+    html,
+    body {
+      box-sizing: border-box !important;
+      height: 100vh !important;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    #app {
+      height: 100vh !important;
+      width: 100vw !important;
+    }
+</style>
+</body>
+</html>