[SOK-22] User profile page #13

VladToby · 2024-10-01T05:48:00Z

Скриншоты/видяшка (если есть)

TBD (если есть)

+add backendApi +create axios interceptors +add userReducer and create function for use yandex api +add env *update SignIn.tsx for use backendApi *update SignUp.tsx for use backendApi *format and lint

*update yarn.lock

*fix lint error *add types from yandex api for user

*rename UserReducer to AuthReducer *rename methods in auth-reducer.ts -remove origin host from methods in auth-reducer.ts because base url set in backendApi

Общие доработки: - Верстка шапки - Компонент заголовка - Перенос лайоутов в отдельные папки - PublicLayout - Добавил систему гридов - Доработки базовых стилей

Сам лайоут написал внутри страницы.

# Conflicts: # packages/client/src/app/App.tsx

с подложкой переименовал в СustomPageTitle - Добавил tag main в компонент PublicLayout

…onent

…to SOK-22_user_profile_page

Timur233

Привет! Классно придумал как сделать редактирование информации о пользователе 👍
У меня много правок по верстке и есть предложение добавить компонент для уведомлений пользователя. Я сейчас накидаю дизайн, если ты занят могу сам компонент сверстать, ты просто к себе затянешь.

Комментов много, если что пиши в тг.

Timur233 · 2024-10-01T06:30:10Z

packages/client/src/components/ui/Image/Image.tsx

+  alt?: string
+}
+
+export const Image = (props: ImageProps) => {


Честно говоря, не понимаю зачем нужен этот компонент, выглядит как будто проще написать img

Timur233 · 2024-10-01T06:31:09Z

packages/client/src/components/ui/Avatar/Avatar.tsx

+import { Image } from '@/components/ui/Image/Image'
+import { Button } from '@/components/ui/Button/Button'
+
+export const AVATAR_SRC = 'https://ya-praktikum.tech/api/v2/resources'


Эту константу стоит вынести в env файл, обсуди с Георгием.

Перенёс

Timur233 · 2024-10-01T06:35:06Z

packages/client/src/components/ui/Avatar/Avatar.tsx

+  src: string
+  containerClassName?: string
+  imageClassName?: string
+  onAvatarChange: (file: File) => void


В этом компоненте ничего больше нельзя поменять, я думаю проще переименовать onAvatarChange > onChange

Поправил

packages/client/src/components/ui/Avatar/Avatar.tsx

Timur233 · 2024-10-01T06:43:38Z

packages/client/src/components/ui/Avatar/Avatar.tsx

+    <div
+      className={`${containerClassName}`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}>


Кажется ты чуть-чуть усложнил)) Как по мне проще сделать так:

.avatar-editor {
&::hover {
.avatar-editor__overlay {
display: block;
}
}
}

Есть такое)
Исправил

Timur233 · 2024-10-01T10:46:13Z

packages/client/src/pages/Profile/Profile.scss

+        flex-direction: column;
+        width: 90%;
+        max-width: 400px;
+        margin: 0 auto;


Перед кнопками нужен отступ, как в макете

Поправил

Timur233 · 2024-10-01T10:47:10Z

packages/client/src/pages/Profile/Profile.scss

+        }
+
+        &__edit-button {
+          margin-bottom: 2rem;


Тут отступ больше чем в макете

Поправил

Timur233 · 2024-10-01T10:47:25Z

packages/client/src/pages/Profile/Profile.scss

+        &__change-password {
+          display: flex;
+          flex-direction: column;
+          margin-bottom: 2rem;


Тут тоже отступ виликоват

Поправил

Timur233 · 2024-10-01T10:48:49Z

packages/client/src/pages/Profile/Profile.scss

+          }
+        }
+
+        button {


Я что-то не нашел этот элемент на странице

Исправил

Timur233 · 2024-10-01T11:00:55Z

packages/client/src/pages/Profile/Profile.tsx

По верстке у тебя получилась большая, сложная вложенность, плюс можно использовать систему гридов из проекта, да и в целом уменьшить количество кода. Я накидаю вариант, закреплю в этом сообщении.
Profile.tsx.zip

gloginov

Есть крутые решения над которыми задумался

packages/client/src/pages/Profile/Profile.scss

packages/client/src/pages/Profile/Profile.tsx

… name

shamemask

Попробовал, работает с апи яндекса, отображение симпотичное!

Timur233

Получилось отлично!
Единственное, нужно ограничить ширину инпута, при редактировании информации на странице профиля)

kyzinatra · 2024-10-03T06:50:24Z

packages/client/src/components/ui/Avatar/Avatar.scss

+    border-radius: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    transition: background-color 0.3s ease;
+


Мне кажется, что такие цвета лучше вынести в константы

kyzinatra · 2024-10-03T06:50:55Z

packages/client/src/components/ui/Avatar/Avatar.tsx

+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      const fileUrl = URL.createObjectURL(file)


Логику с генерацией url я бы вынес в отдельный хук

kyzinatra · 2024-10-03T06:52:05Z

packages/client/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -34,19 +34,18 @@ export default function PrivateLayout() {
  }, [])

  // useEffect(() => {
-    // console.log(user)
+  // console.log(user)
  // }, [user])


Лишние комментарии стоит убрать

kyzinatra

Отличная работа! Хорошая верстка страниц для пользователя. Понравилось, что вы выделяете Интпуты в отдельные компоненты. В целом, хорошо организована логика в компонентах. Так что ваша работа принята! Желаю успехов в дальнейшем обучении!

gloginov and others added 17 commits September 27, 2024 10:48

[SOK-16]

4110c13

+add backendApi +create axios interceptors +add userReducer and create function for use yandex api +add env *update SignIn.tsx for use backendApi *update SignUp.tsx for use backendApi *format and lint

[SOK-16]

1597380

*update yarn.lock

[SOK-16]

442c996

*fix lint error *add types from yandex api for user

[SOK-16]

ab29ccb

*rename UserReducer to AuthReducer *rename methods in auth-reducer.ts -remove origin host from methods in auth-reducer.ts because base url set in backendApi

Error Page. Обернул станицу в layout

c08cc7f

Сам лайоут написал внутри страницы.

Правки

901e7f1

# Conflicts: # packages/client/src/app/App.tsx

- Добавил компонент заголовка PageTitle, заголовок

888ba27

с подложкой переименовал в СustomPageTitle - Добавил tag main в компонент PublicLayout

Pre-commit settings

a4590ad

Pre-commit settings

0533838

Отключил eslint в некоторых фалах

5f8153f

format

44d145a

Добавил поддержку jsx

01a321d

added: profile page, change password page, from component, input comp…

a61b010

…onent

added: profile page, change password page, from component, input comp…

f9a4f97

…onent

Merge branch 'develop' of https://github.com/Timur233/falcon-tanks in…

61ab747

…to SOK-22_user_profile_page

fix profile page layout, fix styles

0d46090

VladToby requested review from Timur233, gloginov, k0ndratov and shamemask October 1, 2024 05:49

Timur233 requested changes Oct 1, 2024

View reviewed changes

gloginov reviewed Oct 1, 2024

View reviewed changes

fix avatar component, fix profile page layout, fix default form class…

7b59c39

… name

gloginov approved these changes Oct 2, 2024

View reviewed changes

VladToby added 3 commits October 2, 2024 09:09

Fix input, fix change password page, fix page & styles

dff7926

Fix profile page background images

3cb9e99

Merge with develop

b39dbb2

shamemask approved these changes Oct 2, 2024

View reviewed changes

Merge with develop

ee6ad2b

Fix form erros, rework user reducer, fix avatar src

bd06de6

Timur233 approved these changes Oct 3, 2024

View reviewed changes

Input max width

eef02e0

kyzinatra reviewed Oct 3, 2024

View reviewed changes

kyzinatra approved these changes Oct 3, 2024

View reviewed changes

VladToby added 2 commits October 3, 2024 11:57

Added overlay colors to vars

c3d32aa

delete comments

7bfdf3b

VladToby merged commit af09e99 into develop Oct 3, 2024
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SOK-22] User profile page #13

[SOK-22] User profile page #13

VladToby commented Oct 1, 2024

Timur233 left a comment

Timur233 Oct 1, 2024

Timur233 Oct 1, 2024

VladToby Oct 2, 2024

Timur233 Oct 1, 2024

VladToby Oct 1, 2024

Timur233 Oct 1, 2024

VladToby Oct 1, 2024

Timur233 Oct 1, 2024

VladToby Oct 2, 2024

Timur233 Oct 1, 2024

VladToby Oct 2, 2024

Timur233 Oct 1, 2024

VladToby Oct 2, 2024

Timur233 Oct 1, 2024

VladToby Oct 2, 2024

Timur233 Oct 1, 2024

gloginov left a comment

shamemask left a comment

Timur233 left a comment

kyzinatra Oct 3, 2024

kyzinatra Oct 3, 2024

kyzinatra Oct 3, 2024 •

edited

Loading

kyzinatra left a comment

[SOK-22] User profile page #13

[SOK-22] User profile page #13

Conversation

VladToby commented Oct 1, 2024

Скриншоты/видяшка (если есть)

TBD (если есть)

Timur233 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gloginov left a comment

Choose a reason for hiding this comment

shamemask left a comment

Choose a reason for hiding this comment

Timur233 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kyzinatra Oct 3, 2024 • edited Loading

Choose a reason for hiding this comment

kyzinatra left a comment

Choose a reason for hiding this comment

kyzinatra Oct 3, 2024 •

edited

Loading