Review

[Nikita-Kuzhl]

No description provided.

[Krimsit]

Работа достаточно хорошая. Молодец, что написал апишку на ноде, знания как пишутся апишки и как они работают очень полезны в работе. По фронту могу выделить некоторые замечания:

1. Побольше дели на компоненты, например всякие инпуты, селекты и прочие выноси в отдельные компоненты. Таки образом небе не придётся прописывать каждый раз логику для них, а только менять стили при надобности.
2. Для большей читабельности кода отделяй логические блок. Например сначала у тебя идёт блок с объявлением хуков, затем состояния и рефы, потом функции и далее эффекты с вёрсткой.
3. Импорты компонентов. Не обязательно для каждого компонента создавать index.ts(js), можно импортировать их так:

import Card from "Card/Card.ts(js)"

Так же в папках где много разных компонентов лучше создать входной файл index.ts(js) в котором ты будешь экспортировать все компоненты. Пример файла index.ts:

export { default as Card } from "./Card/Card.ts"
export { default as Header } from "./Header/Header.ts"

А импорт будет происходить так:

import { Card, Header } from "components"

5. Старайся всякую логику по возможности выносить в отдельные хуки.
6. Подчищай console.log, и закомментированный и ненужный код.
7. Чтоб не запускать api и client отдельно, их можно объеденить в докере

[Krimsit]

Совет: чтобы не засорять код в папках с множеством экспортируемых файлов можно создать файл index.js(ts) в котором у ты будешь экспортировать эти файлы:

export { default as Main } from "./Main"
export { default as Catalog} from "./Catalog"

Благодаря этому ты можешь прописать import один раз и просто внутри импорта прописывать нужные компоненты:

import { Main, Catalog } from "./pages"

[Nikita-Kuzhl]

Спасибо за ревью!) Учту все ошибки.

[Krimsit]

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

import { useState } from "react"

import { useCustomHook } from "hooks"

import { Input } from "components"

import "styles" 

[Krimsit]

Эти действия можно перенести в useSignInMutation

[Krimsit]

Библиотека clsx поддерживает функционал добавления класса в зависимости от условий

clsx(s.class1, ..., {
  [styles.warning]: !!errors.password
})

[Krimsit]

input лучше вынести в отдельный компонент

[Krimsit]

Лучше выносить интерфейсы и типы в отдельный файл

[Krimsit]

Не обязательно импортировать React, можно просто:

import { FC } from "react"

[Krimsit]

Можно сократить до:

setParam({
  ...param,
  checkbox:  param.checkbox.includes(i.value) ? param.checkbox.filter((item) => item !== i.value) : [...param.checkbox, i.value]
})

[Krimsit]

Можно упростить до:

<button onClick={() => handleClickFavorite()} className={styles.heart__button}>
  <p>{favorites.includes(item.id) ? "Добавлено" : "В закладки"}</p>
  <HeartIcon style={favorites.includes(item.id) ? styles.heart__icon_active : styles.heart__icon} width={15} height={15} />
</button>

[Krimsit]

Константы лучше выносить в отдельный файл