## Общее
```
import React from 'react';
```
Ненужен если не используется, посмотри как это настроить, по умолчанию в новых проектах он ен нужен. (Для этого может понадобится обновить версию typescript)
---
Хотел бы узнать зачем webpack настроен вручную...
У меня yarn не смог запустить проект
---
eslint и prettier можно настроить пожестче
---
в **tsconfig** настроет `baseUrl`, при этом все импорты относительные
Вместо `import { IRootReducer } from '../../../redux/reducers/state';`
Можно писать `import { IRootReducer } from 'redux/reducers/state';`
---
Анимация у человеска организована стилями css, это быстрый вариант, но ограниченный. Если есть планы по **большому** расширению функционала, то рекомендую смотреть в сторону pixijs и react-pixi
---
`: any` - *depricated*, типы стоит всегда называть, typescript все таки)
---
```typescript
useEffect(() => {}, [<prop1>, <prop2>]);
```
`[]` - depricated (позволяется если нет пропсов совсем)
---
точки с запятой либо используем в конце функций, типов и т.п. либо не используем
---
Нужно убрать варнинги и критические ошибки в консоле
---
перед `return` лучше перенос оставлять
## По файлам
**src/view/components/LoginForm/index.tsx:16**
```typescript
const LoginForm: React.FC<IFormRenderProps> = ({ handler, communication }: IFormRenderProps) => {
```
брать все props есть смысл только при пробросе вниз `<Component {...props} />`
---
**src/core/Config.ts** - должен быть в системных енвироментах или в корне типо .env.development
https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env
**src/src/index.txt** - удалить
**src/view/containers/Header/components/Burger** - удалить
**src/view/containers/Header/Header.scss:10-12** - удалить
**src/styles/fonts.scss** - пустой
**src/view/components/InputField/index.tsx:34** - добавить `type={type}`. При вводе пароля, видим что пишем
**src/modules/ProfilePage/index.tsx:11** - нет импорта. либо комментим импорт вместе с компонентом - либо удаляем оба
**src/view/elements/Logo/index.tsx** - `svg-inline-react` ? не вижу причин для его использования, в нем же неправильно проброшена svg (смотри console.log)
**src/view/containers/VideosContainer/index.tsx** - в `useEffect` мы имеем неудавлетворенную зависимость `communication`
Если нет юзера то выдается мок. Надо сделать страницу приватной, тогда `user` точно будет и не нужно класть [user] в useEffect, там тогда вообще useEffect не нужен будет
**src/redux/actions/communication/index.ts** - c redux toolkit легче и красивее
**/src/redux/reducers/video/sagas/index.ts:10** videoMock - сомневаюсь что на продакшене это нужно
**/src/redux/reducers/video/sagas/index.ts:58** - `yield call` неявно указан тип `any`
**URL :/profile, :/upload** - неприватные ссылки
**src/view/containers/ProjectContainer/index.tsx:41-45** - Приватные страницы должны проверяться в одном месте выше по роутам
смотри примеры
https://reactrouter.com/web/example/auth-workflow
https://github.com/remix-run/react-router/blob/main/examples/auth/src/App.tsx
**src/view/elements/Heading/index.tsx** - все варианты делают одно и то же кроме default и то он отличается только `h1` - `p`, рассмотри как убрать дублирующийся код
---
**src/modules** - лишнее, все оборачиваем одинаково, предлагаю написать один компонент с парой свойств управляющих содержимым или еще лучше написать одинаково для всех компонентов и обернуть ими роутер
не надо все компоненты копипастить и оборачивать одним и тем же
лучше в одном файле все обернуть, даже в MainRouter
Wrapper не обернут только profile и examples - я не увидел отличий
---
**src/view/containers/ProjectContainer/index.tsx:49~21** - перенос строки после вызова копонента https://airbnb.io/javascript/react/#alignment
**src/view/containers/ProjectContainer/index.tsx:39** - `singleVideo` вместо `curVideoId`
**src/view/containers/ProjectContainer/index.tsx:37** - `console.log` не использовать без явной необходимости
**src/view/containers/ProjectContainer/index.tsx:22** - `props` объявлена но не используется
**src/view/containers/ProjectContainer/index.tsx:23** - `useParams<{id: string}>()` вместо интерфейса, если не используется в проекте больше. Интерфейс избыточен
**src/view/containers/ProjectContainer/index.tsx:55** - `</>` выглядит как одинокая.
Пример отступов airbnb
```typescript
{singleVideo &&
<>
<ProjectName
title={singleVideo.name}
handler={(value: string) => dispatch(
singleVideoAction.singleVideoEdit({
name: value,
id: curVideoId,
})
)}
/>
<VideosWrapper video={singleVideo} />
</>
}
```
---
**src/view/containers/ProjectContainer/components/ProjectName/index.tsx:18**
Пример переносов:
```typescript
<input
className={b()}
value={inputTitle}
onBlur={(e) => handler(e.currentTarget.value)}
onChange={event => setTitle(event.target.value)}
/>
```
---
**src/view/containers/ProjectContainer/components/VideosWrapper/index.tsx:20** - отступ на 1 вниз
**src/view/containers/ProjectContainer/components/VideosWrapper/index.tsx:26** - убрать console.log
**src/view/containers/ProjectContainer/components/VideosWrapper/index.tsx:43** - добавить отступ
**src/view/containers/ProjectContainer/components/VideosWrapper/index.tsx:51** - убрать console.log
**src/view/containers/ProjectContainer/components/VideosWrapper/index.tsx:54** - убрать отступ
**src/view/containers/ProjectContainer/components/VideosWrapper/index.tsx** - после смены страницы видео может продолжить играть, не проверял но похорошему `componentWillUnmount` **-->** `{pauseVideo(); videoRef.current?.remove()}` удалить видео из памяти
**src/view/containers/ProjectContainer/components/VideosWrapper/index.tsx** - не вижу `videoRef.current?.load()`, для этого там `console.log` ?
**src/view/containers/ProjectContainer/components/VideosWrapper/index.tsx** - сложно сказать что конкретно нужно сделать, но большое количество свойств должно намекнуть на неправильную декомпозицию
videoRef прокидываем вниз чтоб управлять им и снизу и всерху, тоже признак неверной структуры. Сложно понять взаимодействие
Попробую предложить сделать отдельно хук загружающий видео, дописать менеджмент видео и уже в интерфейсных компонентах просто дергать функции
---
**src/assets/index.html:6** - не вижу папки images
**src/core/MainRouter.tsx:18** - не безопасно хранить токен в localStorage (этим часто принебрегают, просто лучше об этом знать)
**src/core/helpers/encodeUrlParams.ts** - однострочная одноразовая утилита, а она нужна?
**src/redux/reducers/communication/index.ts** - признак того что код можно сократить
**src/core/api/modules/Auth.ts** - можно ли сократить очень похожий или дублирующийся код?
**src/core/api/modules/LocalStorage.ts** - зачем `Date.now()`?, просто лишняя нагрузка.
**src/core/api/modules/LocalStorage.ts** - класс `LocalStorage` проверяет есть ли локалсторадж, потом `getObject` проверяет, потом в блоке `try` вызываем `get`, он тоже проверяет доступность
Не слышал о такой проблеме, но если она есть, используй паттерн одиночка, и просто в дескрипторах проверяй `_available`.
Интересно приложение нормально будет себя вести без localStorage? Если нет, то нужен аналог, хотя бы редакса в случае `_available = false`
## Типы
**src/types/index.ts** - можно обойтись без экспортов и импортов https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-d-ts.html
**src/types/requests/auth/index.ts** - типы тоже можно оптимизировать, переиспользовать и прочее. Главное делать по смыслу приложения
*Пример:*
```
interface UserRequest {
name: string;
email: string;
password: string;
token: string;
}
export type ILoginRequest = Pick<UserRequest, "name" | "password">;
export type IRegisterRequest = Omit<UserRequest, "token">;
export type IForgotRequest = Pick<UserRequest, "email">;
export type IRestoreRequest = Omit<UserRequest, "name">;
```
Множество одинаковых типов, как минимум в половине можно их объеденить
`IRestorePasswordResponse` и `IForgotPasswordResponse` одинаковые - однострочные и больше нигде не используются
## Рекомендации
https://atomicdesign.bradfrost.com/chapter-2/
https://feature-sliced.design/docs/get-started/motivation/
https://storybook.js.org/
Sign in with Wallet
Connect another wallet