React: Routing and Hooks by maiano · Pull Request #3 · maiano/react-2025

maiano · 2025-07-27T19:47:16Z

Task: link
Screen

shot:

Deploy: link
Done 28.07.2025 / deadline 28.07.2025
Score: 60 / 100

Custom hook to restore search query from LS - 20
Pagination is present in both URL and on the page - 20
Upon clicking, open details panel on the right side of the page: - 5
Use router outlet, left side of the page should continue displaying the list of results - 10
Initiate an additional API call, display a loader, and update the URL - 10
Details panel should be closed either on the "close" button click or on the main panel click - 10
About page is implemented with author information and a link to the RS School React course - 5
404 is implemented - 5
New tests are added for the new functionality - 15

kosmodromm

lgtm

kosmodromm · 2025-08-04T15:30:25Z

src/components/Card/Card.tsx

+      onKeyDown={
+        isClickable
+          ? (e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                onClick?.(id);
+              }
+            }
+          : undefined
+      }


вынеси в handleKeyDown()

kosmodromm · 2025-08-04T15:36:34Z

src/components/Card/Card.tsx

-export class Card extends Component<CardProps> {
-  getValue(key: string, value: string): string {
+export const Card = ({ character, onClick, variant = 'list' }: CardProps) => {
+  const { id, name, status, species, gender, image, origin, location } =


лучше сделать enum в character.ts для status, gender и variant. типа такого enum CharacterGender {
FEMALE = 'Female',
MALE = 'Male',
GENDERLESS = 'Genderless',
UNKNOWN = 'unknown',
}

kosmodromm · 2025-08-04T15:36:41Z

src/components/Card/Card.tsx

 type CardProps = {
  character: Character;
+  onClick?: (id: number) => void;
+  variant?: 'list' | 'details';


будет прозрачнее, если variant будет обязательный

да. конечно

kosmodromm · 2025-08-04T15:38:25Z

src/app/routes.tsx

+    element: <Navigate to={PATHS.CHARACTER} replace />,
+  },
+  {
+    path: '/character',


почему не используются пути из paths.ts?

пропустил, когда рефакторил

kosmodromm · 2025-08-04T15:38:34Z

src/app/routes.tsx

+    path: PATHS.NOT_FOUND,
+    element: <ErrorLayout />,
+    errorElement: <FallBack />,
+    children: [{ path: PATHS.NOT_FOUND, element: <NotFoundPage /> }],


зачем здесь дублирование пути?

kosmodromm · 2025-08-05T10:33:49Z

src/hooks/useCharactersQuery.ts

+
+export const useCharactersQuery = (query: string, page: number) =>
+  useQuery({
+    queryKey: ['characters', { query, page }],


вынести в QUERY_KEYS объект

kosmodromm · 2025-08-05T10:36:49Z

src/hooks/useLocalStorage.ts

+  const get = (): T => {
+    try {
+      const item = localStorage.getItem(key);
+      if (item === null) return defaultValue;
+
+      if (typeof defaultValue === 'string') {
+        return item as T;
+      }
+      return JSON.parse(item) as T;
+    } catch {
+      return defaultValue;
+    }
+  };
+
+  const [value, setValue] = useState<T>(get);


сейчас get вызывается при каждом ререндере, нужно ли это?
можно поменять на const [value, setValue] = useState(() => get()); и тогда выхов get будет только при маунте

kosmodromm · 2025-08-05T10:45:25Z

src/hooks/useLocalStorage.ts

+export function useLocalStorage<T>(key: string, defaultValue: T) {
+  const get = (): T => {
+    try {
+      const item = localStorage.getItem(key);
+      if (item === null) return defaultValue;
+
+      if (typeof defaultValue === 'string') {
+        return item as T;
+      }
+      return JSON.parse(item) as T;
+    } catch {
+      return defaultValue;
+    }
+  };
+
+  const [value, setValue] = useState<T>(get);
+
+  const set = useCallback(
+    (value: T) => {
+      try {
+        if (typeof value === 'string') {
+          localStorage.setItem(key, value);
+        } else {
+          localStorage.setItem(key, JSON.stringify(value));
+        }
+        setValue(value);
+      } catch {}
+    },
+    [key],
+  );


лучше всегда сериализовать/десериализовать JSON.stringify и JSON.parse. попробуй переделай. код станет проще и будет меньше потенциальных ошибок

kosmodromm · 2025-08-05T14:03:58Z

src/pages/HomePage/HomePage.tsx

+  const searchQueryFromURL = searchParams.get('name') || '';
+  const pageFromURL = Number(searchParams.get('page') || 1);


почитай про ?? оператор. тут нужен он

kosmodromm · 2025-08-05T14:04:29Z

src/pages/HomePage/HomePage.tsx

-  componentDidMount(): void {
-    this.fetchCharacters(this.state.searchQuery);
-  }
+  const searchQuery = searchQueryFromURL || '';


зачем? это уже делается в searchQueryFromURL

maiano added 15 commits July 27, 2025 17:24

refactor: migrate Button to function component

66a25a5

refactor: migrate Input to function component

d69996b

refactor: migrate Header and Footer to function component

653d5e1

refactor: migrate LoadingOverlay to function component

e034448

refactor: migrate Pagination to function component

a8f1ca7

refactor: migrate FallBack to function component

2e7edde

refactor: migrate Card to function component

326ace8

refactor: migrate CardList to function component

2216928

refactor: migrate SearchBar to function component

3e35c98

refactor: move error throwing logic to Footer

2311b71

refactor: add MainLayout and stubs for AboutPage and NotFoundPage

fbb58f0

feat: add React Router with basic route configuration

ccbca58

test: change test for App component

3e5dc94

refactor: migrate MainPage to function component

cfbad37

fix: handling of missing data errors and add an ErrorLayout

e603859

maiano requested a review from kosmodromm July 31, 2025 20:04

maiano added 14 commits August 1, 2025 02:25

fix: 404 test to expect empty result

2b46ca4

feat: implement generic hook for typed localStorage

4f61b94

refactor: move the routes to a separate module

a4d74f8

test: add integration test to App tests

999acb9

feat: sync search and pagination with URL

b3e20f9

feat: add navigation links to header

9e59271

refactor: migrate data fetching to useCharactersQuery

a36826d

feat: add fetch-character util

06843d0

feat: add useCharacterQuery hook

48ddf6b

feat: implement the CharacterDetails

ba412fe

fix: auto-close character panel if id is not in current results

bf1e2bc

feat: add variant prop to support details layout

9f0d3d0

feat: modal layout for CharacterDetails on mobile

9da071e

refactor: move navigation logic from CharacterDetails

d8dc56d

feat: add placeholder message for About page

97b62c8

kosmodromm reviewed Aug 5, 2025

View reviewed changes

		const searchQueryFromURL = searchParams.get('name') \|\| '';
		const pageFromURL = Number(searchParams.get('page') \|\| 1);

Conversation

maiano commented Jul 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kosmodromm 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!

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

maiano commented Jul 27, 2025 •

edited

Loading