State Management and Context API by maiano · Pull Request #4 · maiano/react-2025

maiano · 2025-08-03T16:32:56Z

Task: link
Screenshot:
Deploy: link
Done 04.08.2025 / deadline 04.08.2025
Score: 100 / 100

State management is properly implemented with either Redux Toolkit or Zustand - 35
Selected items are managed through the state store, selected items are persistent across pages - 25
Flyout component is showed/hidden based on the presence of selected items, displays the number of selected items - 15
"Unselect all" button and "Download" button work according to the requirements - 10
User can switch the theme of the application using Context API - 15

AleksGoodness

Видно использование deepSeek =) но в целом все отлично. Советую все же писать код самому что бы лучше в нем разбиратся. Все мы не без грешны.

Очень понравились твои тесты сам стиль их написания моки выглядят красиво.
комментарий пишу до того как смотрел весь код в vscode. С требованиями rs-school нужно быть более внимательным а то можно влететь на большой минус

AleksGoodness · 2025-08-04T10:06:23Z

src/components/Flyout.test.tsx

+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-call */


думаю да же в тестах так лучше не делать. Все же эти правила нужны что бы код писать однообразно

Да, согласен, тем не менее иногда линтер слишком строг

AleksGoodness · 2025-08-04T10:07:49Z

src/components/Flyout.tsx

+import { Button } from '@/components/Button';
+import { UI_STRINGS } from '@/shared/constants/ui-strings';
+import { downloadCharactersCSV } from '@/shared/utils/download-characters-csv';
+import { useSelectedCharactersStore } from '@/store/selectedCharactersStore';


не помешали бы разделители по строке было бы удобней читать

AleksGoodness · 2025-08-04T10:09:35Z

src/components/ThemeSwither.tsx

+import SunIcon from '@/assets//sun-com.svg?react';
+import MoonIcon from '@/assets/moon-com.svg?react';


я как понимаю использовал собственные иконки. хотелось бы знать почему было приянто такое решение.

и посмотри на пути что то не верно в этом пути //

AleksGoodness · 2025-08-04T10:16:18Z

src/main.tsx

+import { FallBack } from '@/components/FallBack/';
+import { ThemeProvider } from '@/context/ThemeProvider.tsx';

 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion


ну ты же понимаешь что так нельзя за это -20 балов в проверке
Usage of ts-ignore (-20 points)
темболие решается это через обычный if

const root = document.getElementById('root'); if (root) createRoot(root).render(

я пока снимать не буду но все же исправь. И я в шоке что до меня тебе такое ни кто не писал

AleksGoodness · 2025-08-04T10:23:20Z

src/pages/HomePage/HomePage.tsx

 import { CardList } from '@/components/CardList';
 import { CharacterDetails } from '@/components/CharacterDetails';
+import { Flyout } from '@/components/Flyout';
 import { LoadingOverlay } from '@/components/LoadingOverlay';
 import { Pagination } from '@/components/Pagination';
 import { SearchBar } from '@/components/SearchBar';


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

import { Button } from './button/Button'; import { CountryItem } from './country-item/CountryItem'; import { CountryList } from './country-list/CountryList'; import { ErrorBoundary } from './error-boundary/ErrorBoundary'; import { Flyout } from './flyout/Flyout'; import { GeneralLayout } from './layout/GeneralLayout'; import { Pagination } from './pagination/Pagination'; import { SearchForm } from './search-form/search-form/SearchForm'; import { SearchInput } from './search-input/SearchInput'; import { SkeletonListItem } from './skeleton-list-item/SkeletonListItem'; import { ThemeChanger } from './theme-changer/ThemeChanger'; export { Button, CountryItem, CountryList, ErrorBoundary, Flyout, GeneralLayout, Pagination, SearchForm, SearchInput, SkeletonListItem, ThemeChanger, };

и вот результат в странице home

import clsx from 'clsx'; import { useState } from 'react'; import { Outlet, useLoaderData, useParams } from 'react-router'; import { Button, CountryList, Flyout, Pagination, SearchForm, } from '@/components'; import type { ICountry } from '@/interfaces';

AleksGoodness · 2025-08-04T10:25:51Z

src/pages/HomePage/HomePage.tsx

-                characterId={characterId}
-                onClose={() =>
-                  navigate(`/character?${searchParams.toString()}`)
+        {isLoading ? null : isError ? (


тернарники трудно понмать советую упростить до строчки
по типу

{isLoading && <loader/>} {isError && <Error/>} {isLoading === false && isError === false && <Cards/>}

Кстати, да накопилось нужен рефакторинг

AleksGoodness · 2025-08-04T10:27:09Z

src/shared/constants/ui-strings.ts

это прикольный подход =)

AleksGoodness · 2025-08-04T10:27:55Z

src/shared/utils/download-characters-csv.ts

+  const link = document.createElement('a');
+  link.setAttribute('href', url);
+  link.setAttribute('download', `${characters.length}_items.csv`);
+  document.body.appendChild(link);


это опять -20 балов за использование прямых манипуляций с дом

AleksGoodness · 2025-08-04T10:28:37Z

src/store/selectedCharactersStore.ts

использование set прям красавчик!

…view

maiano added 12 commits August 3, 2025 16:57

feat: add character store

467faba

feat: integrate a checkbox into the Card

ecd92be

feat: add Flyout component

22d9b32

feat: add logic for saving characters to a file

0d625d8

feat: create ThemeContext

a9bb941

feat: add ThemeSwither

d365a86

chore: override the dark variant to use custom selector

211f702

test: update tests

e43f83b

test: add theme provider test

8d975c3

test: add characterDetails test

625b61f

test: add test for flyout

997bf21

fix: delete unused code

a54d094

maiano requested a review from kosmodromm August 4, 2025 00:49

AleksGoodness reviewed Aug 4, 2025

View reviewed changes

maiano added 11 commits August 10, 2025 17:29

refactor: change the Card component in agreement with the code review

e17ec26

refactor: change the routes.tsx

489da99

refactor: change the CardList component in agreement with the code re…

de45d6e

…view

refactor: change the Button component in agreement with the code review

6e5bb68

refactor: change the Fallback component in agreement with the code re…

3ee7ee6

…view

refactor: change the SearchBar component

edf6630

refactor: change the HomePage component and LoadingSpinner

72d74ad

refactor: move the error testing button code to a separate component

6be5226

refactor: change the Pagination component

3ae5158

refactor: change the useCharacterQuery hook with skipToken

5901ae5

refactor: useLocalStorage hook

a76d03e

		/* eslint-disable @typescript-eslint/no-unsafe-return */
		/* eslint-disable @typescript-eslint/no-unsafe-call */

		import SunIcon from '@/assets//sun-com.svg?react';
		import MoonIcon from '@/assets/moon-com.svg?react';

Comments

Conversation

maiano commented Aug 3, 2025

Uh oh!

AleksGoodness left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AleksGoodness Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

AleksGoodness Aug 4, 2025 •

edited

Loading