Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sprint 3 #67

Closed
wants to merge 31 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
6f7da78
Sprint 1 - 1 attempt reviewing
Mar 6, 2024
d08b378
Исправления для прохождения автотестов
Mar 6, 2024
e45e2aa
Исправления после первой проверки ревьюером
Mar 6, 2024
26736c8
Merge pull request #1 from Pillowbee/sprint_1
Pillowbee Mar 7, 2024
45adf89
WIP #1
Pillowbee Mar 13, 2024
febda37
WIP #2
Pillowbee Mar 13, 2024
36a6bc5
WIP #3
Pillowbee Mar 15, 2024
608f32f
WIP #4
Pillowbee Mar 16, 2024
294396f
WIP #5
Pillowbee Mar 18, 2024
07dceb9
WIP #6
Pillowbee Mar 20, 2024
b72393b
WIP #7
Pillowbee Mar 22, 2024
dfcafd4
WIP #8
Pillowbee Mar 22, 2024
4788a58
WIP #9
Pillowbee Mar 24, 2024
62096a9
WIP #10
Pillowbee Mar 24, 2024
0449a19
Попытка №1
Pillowbee Mar 26, 2024
e301476
Попытка №1.1
Pillowbee Mar 26, 2024
e012522
Попытка №1.2
Pillowbee Mar 26, 2024
be56b28
Попытка №1.3
Pillowbee Mar 26, 2024
2fc909b
Попытка №1.4
Pillowbee Mar 26, 2024
f65f5fe
Попытка №2
Pillowbee Mar 27, 2024
3ef1d89
Merge pull request #2 from Pillowbee/sprint_2
Pillowbee Mar 27, 2024
351ec2d
WIP #1
Pillowbee Apr 10, 2024
6e6d327
WIP #2
Pillowbee Apr 12, 2024
98904a5
WIP #3
Pillowbee Apr 14, 2024
cea1423
First attempt in sprint_3
Pillowbee Apr 16, 2024
c8750d6
Fixes for first attempt
Pillowbee Apr 16, 2024
110aede
Fixes for express routing
Pillowbee Apr 16, 2024
71ddb5b
Fixes for first review
Pillowbee Apr 17, 2024
7f5e41e
Fixes for first review #3
Pillowbee Apr 18, 2024
96496be
Fixes for first review #4
Pillowbee Apr 18, 2024
756920f
Fixes for review #5
Pillowbee Apr 18, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[*]
indent_style = space
indent_size = 2
34 changes: 34 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
module.exports = {
"env": {
"browser": true,
"node": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"overrides": [
{
"env": {
"node": true
},
"files": [
".eslintrc.{js,cjs}"
],
"parserOptions": {
"sourceType": "script"
}
}
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint"
],
"rules": {
},
}
26 changes: 26 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -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?
.stylelintcache
package-lock.json
6 changes: 6 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true
}
5 changes: 5 additions & 0 deletions .stylelintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"extends": "stylelint-config-standard",
"rules": {"selector-class-pattern": null
}
}
21 changes: 21 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2024 Yan

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
105 changes: 32 additions & 73 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,83 +1,42 @@
### Ветка, в которой делаете задания спринта, должна называться sprint_i, где i - номер спринта. Не переименовывайте её.
# Тренировочный проект мессенджера.

### Откройте pull request в ветку main из ветки, где вы разрабатывали проект, и добавьте ссылку на этот pr в README.md в ветке main.
### ВАЖНО: pull request должен называться “Sprint i” (i — номер спринта).
Использовался сборщик Vite, Typescript, линтеры Eslint и Stylelint, шаблонизатор Handlebars

### Например, задания для проектной работы во втором спринте вы делаете в ветке sprint_2. Открываете из неё pull request в ветку main. Ссылку на этот pr добавляете в README.md в ветке main. После этого на платформе Практикума нажимаете «Проверить задание».
### Макеты приложения

### Также не забудьте проверить, что репозиторий публичный.
---
[Figma](https://www.figma.com/file/EhwzOuHmvUtGVE62At4ZgK/Chat_external_link-(Copy)?type=design&mode=design&t=bhHRbfH2S9ivRlpz-1 "Макеты в Figma")

### Ссылки на страницы приложения при запуске локально

Даже законченный проект остаётся только заготовкой, пока им не начнут пользоваться. Но сначала пользователь должен понять, зачем ему пользоваться вашим кодом. В этом помогает файл README.
| Экран | Ссылка |
|:----------------|-------------------------------------|
| Логин | http://localhost:3000/#login |
| Регистрация | http://localhost:3000/#register |
| Мессенджер | http://localhost:3000/#main |
| Профиль | http://localhost:3000/#profile |
| Изменить данные | http://localhost:3000/#editUserdata |
| Изменить пароль | http://localhost:3000/#editPassword |
| 404 | http://localhost:3000/#notFound |
| 500 | http://localhost:3000/#serverError |

README — первое, что прочитает пользователь, когда попадёт в репозиторий на «Гитхабе». Хороший REAMDE отвечает на четыре вопроса:
### Ссылки на страницы приложения на Netlify

- Готов ли проект к использованию?
- В чём его польза?
- Как установить?
- Как применять?
| Экран | Ссылка |
|:----------------|------------------------------------------|
| Логин | https://yamess.netlify.app/#login |
| Регистрация | https://yamess.netlify.app/#register |
| Мессенджер | https://yamess.netlify.app/#main |
| Профиль | https://yamess.netlify.app/#profile |
| Изменить данные | https://yamess.netlify.app/#editUserdata |
| Изменить пароль | https://yamess.netlify.app/#editPassword |
| 404 | https://yamess.netlify.app/#notFound |
| 500 | https://yamess.netlify.app/#serverError |

## Бейджи
### Команды npm

Быстро понять статус проекта помогают бейджи на «Гитхабе». Иногда разработчики ограничиваются парой бейджев, которые сообщат о статусе тестов кода:
| Команда | Результат |
|:--------------|-----------------------------------|
| npm run start | сборка и запуск сервера Express |
| npm run dev | запуск dev сервера для разработки |
| npm run build | запуск сборки проекта |

![Бэйджи](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/b.png)

Если пользователь увидит ошибку в работе тестов, то поймёт: использовать текущую версию в важном проекте — не лучшая идея.

Бейджи помогают похвастаться достижениями: насколько популярен проект, как много разработчиков создавало этот код. Через бейджи можно даже пригласить пользователя в чат:

![Версии](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/vers.png)

В README **Webpack** строка бейджев подробно рассказывает о покрытии кода тестами. Когда проект протестирован, это вызывает доверие пользователя. Последний бейдж приглашает присоединиться к разработке.

Другая строка убедит пользователя в стабильности инфраструктуры и популярности проекта. Последний бейдж зовёт в чат проекта.

## Описание

Краткое опишите, какую задачу решает проект. Пользователь не верит обещаниям и не готов читать «полотна» текста. Поэтому в описании достаточно нескольких строк:

![Описание](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/desc.png)

Авторы **React** дробят описание на абзацы и списки — так проще пробежаться глазами по тексту и найти ключевую информацию.

Если у проекта есть сайт, добавьте ссылку в заголовок.

## Установка

Лучше всего пользователя убеждает собственный опыт. Чем быстрее он начнёт пользоваться проектом, тем раньше почувствует пользу. Для этого помогите ему установить приложение: напишите краткую пошаговую инструкцию.

Если проект предназначен для разработчиков, добавьте информацию об установке тестовых версий. Например:

- `npm install` — установка стабильной версии,
- `npm start` — запуск версии для разработчика,
- `npm run build:prod` — сборка стабильной версии.

## **Примеры использования**

Хорошо, если сразу после установки пользователь сможет решить свои задачи без изучения проекта. Это особенно верно, если ваш пользователь — не профессиональный разработчик. Но даже профессионал поймёт вас лучше, если показать примеры использования:

![Ссылки](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/link.png)

Для более подробных инструкции добавьте новые разделы или ссылки:

- на документацию,
- вики проекта,
- описание API.

В учебном проекте будут полезен раздел с описанием стиля кода и правилами разработки: как работать с ветками, пул-реквестами и релизами.

### **Команда**

Если вы работаете в команде, укажите основных участников: им будет приятно, а новые разработчики охотнее присоединятся к проекту. «Гитхаб» — не просто инструмент, это социальная сеть разработчиков.

![Команда](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/team.png)

### **Примеры 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/)».
7 changes: 7 additions & 0 deletions netlify.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
[build]
publish = "dist"

[[redirects]]
from = "/*"
to = "/index.html"
status = 200
37 changes: 37 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{
"name": "yamess",
"private": true,
"version": "0.0.1",
"type": "module",
"engines": {
"node": ">=18.14.0"
},
"scripts": {
"clean": "rm -rf dist",
"start": "tsc && vite build && node src/server.js",
"dev": "vite",
"build": "npm run clean && tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@types/express": "^4.17.21",
"express": "^4.18.3",
"handlebars": "^4.7.6"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^7.1.0",
"@typescript-eslint/parser": "^7.1.0",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"nanoid": "^5.0.6",
"postcss-nested": "^6.0.1",
"prettier": "3.2.5",
"stylelint": "^16.3.1",
"stylelint-config-standard": "^36.0.0",
"typescript": "^5.3.3",
"vite": "^5.1.4",
"vite-plugin-eslint": "^1.8.1",
"vite-plugin-stylelint": "^5.3.1"
}
}
5 changes: 5 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import postcssNested from 'postcss-nested'

export default {
plugins: [postcssNested],
}
47 changes: 47 additions & 0 deletions src/components/avatar/avatar.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
.avatar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 130px;
height: 130px;
overflow: hidden;
border-radius: 50%;

&__text {
display: none;
position: absolute;
cursor: pointer;
}

&__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
background: var(--hover-bg);
}

&:hover {
.avatar__text {
background: var(--hover-bg);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;

span {
font-size: 18px;
text-align: center;
}
}

.avatar__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
}
55 changes: 55 additions & 0 deletions src/components/avatar/avatar.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import Block, { Props } from '@/core/Block'
import './avatar.css'

// language=hbs
const avatarTemplate = `
<div class="avatar {{ className }}">
<img class="avatar__img" src="{{src}}" alt="{{alt}}">
{{#if canChange}}
<div class="avatar__text">
<span>{{{ changeContent }}}</span>
</div>
{{/if}}
</div>
`

type AvatarProps = {
src: string
alt: string
size?: string
className?: string
canChange?: boolean
changeContent?: string
} & Props

export default class Avatar extends Block {
constructor(props: AvatarProps) {
if (!props.src) {
props.src =
'https://i2.wp.com/vdostavka.ru/wp-content/uploads/2019/05/no-avatar.png?fit=512%2C512&ssl=1'
}

super(props)

if (!this.props.canChange) {
this.props.canChange = false
}
if (!this.props.changeContent) {
this.props.changeContent = 'Поменять аватар'
}

const element = this.element as HTMLElement

if (props.size) {
element.style.width = props.size
element.style.height = props.size
} else {
element.style.width = '130px'
element.style.height = '130px'
}
}

render() {
return this.compile(avatarTemplate, this.props)
}
}
17 changes: 17 additions & 0 deletions src/components/button/button.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.button {
width: 100%;
padding: 12px 0;
background: var(--color-blue);
color: var(--color-white);
border: none;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 13px;
}

.button-icon {
background: none;
border: none;
outline: none;
width: auto;
}
Loading
Loading