Routing Implementation #28

cherkasovaa · 2025-05-09T14:00:10Z

Implement basic routing for navigation between login, registration, and main pages.
Implement a 404 (Not Found) page for invalid route requests

- Implement routing for navigation between login, registration, and main pages. - Add page stubs for main, login, register, and not-found pages.

- Add `dotlottie-react` plugin - Update Vite config for Lottie support - Add clear message for the user - Add Lottie animation - Add back to home page button

- Create Layout component for page structure - Use Layout in router for main and not-found pages Currently, Layout is applied only to the main and 404 pages, as only these pages require the site header. Other pages (such as login and registration) do not use the header at this stage.

akseee · 2025-05-09T17:22:21Z

src/app/layout/Layout.tsx

Мне кажется не стоит добавлять лейаут в апп, тут инициализирующий код, я бы кинула его в shared/ui,

Спасибо за обратную связь!
Я подумала над этим и возможно соглашусь, что Layout может не совсем подходит для слоя app.

Согласно документации, shared/ui предназначен для атомарных, переиспользуемых компонентов (кнопки, инпуты, иконки), а Layout - это композиционный компонент, который объединяет другие компоненты (в данном случае Header и основной контент).
Слой App - это самый верхний, инициализирующий слой, который содержит корневой компонент, глобальные типы, стили, стейт и оборачивает приложение в провайдеры и контексты — то, что присуще проекту в общем.
В принципе, Layout можно было бы рассмотреть для слоя pages, но, в shared его положить вряд ли можно.

https://feature-sliced.github.io/documentation/ru/docs/reference/layers#pages

вот что нашла по офф доке: https://feature-sliced.design/docs/guides/examples/page-layout#simple-layout
(почему то офф ссылку не могу открыть даже с впн, поэтмоу открыла другим методом - https://web.archive.org/web/20241108110427/https://feature-sliced.design/docs/guides/examples/page-layout#simple-layout через таймлайн)

по факту мы обе правы:
Simple layout
The simplest layout can be seen on this page. It has a header with site navigation, two sidebars, and a footer with external links. There is no complicated business logic, and the only dynamic parts are sidebars and the switchers on the right side of the header. Such a layout can be placed entirely in shared/ui or in app/layouts, with props filling in the content for the sidebars:

Но все же, имхо, будто в роутах хочется оставить только чистые роуты. Будет чище, если мы обернем страницу в pages и будем использовать из shared, ибо при использовании из app сломается иерархия

размещение в shared/ui не вяжется с концепцией "от меньшего к большему", ведь по сути Layout - это можно сказать, второй компонент после App (в данном случае).
В документации сказано "Модуль в слайсе может импортировать другие слайсы только в том случае, если они расположены на слоях строго ниже.", а мы не можем по этой концепции импортировать в Layout страницы, если Layout будет в shared. В простой структуре, которая приведена, нет четкого деления на слои (нет импортов), это один сплошной компонент, поэтому Layout там расположен в shared, но у нас есть странички, которые импортируются в Layout, поэтому этот вариант не подходит.

Мы можем перенести Layout в слой pages, и то, это тоже будет нарушать структуру,

Корректная ссылочка на доку:
https://feature-sliced.github.io/documentation/ru/docs/guides/examples/page-layout

Почитала больше источников, поняла в чем была моя проблема - я видела лейаут как более абстрактный из ui/, к которму для определенных страниц мы бы добавляли определенные виджеты и изменяли по разному (при необходимости) на страницах через пропсы хедеров, футеров итд
Но наверно необходимости в таком нет,

В таком случае, лейаут может полностью обертывать весь роут, передав element={} или обернуть по классике, не за чем повторять его на каждую страницу

идея была в том, что хедер и футер отображаются на всех страницах, кроме регистрации и логирования. В целом, можно и так сделать, как ты предлагаешь 🤷‍♀️😉

akseee · 2025-05-09T17:22:40Z

src/app/layout/types/interfaces.ts

Следовательно и интерфейсы будут рядом с лейаутом

akseee · 2025-05-09T17:23:08Z

src/pages/assets/404_animation.lottie

ассетам тоже место в shared/ui наверно, но точно не в страницах

для ассетов в структуре выделяется отдельная папка "public", на уровне с src, но это дело вкуса и договоренностей в команде.
В некоторых случаях (например, как в этом), где ассеты не будут использоваться больше нигде, можно оставить рядом со слоем. Сейчас быстро не найду, где именно я это вычитала, но вот еще одна небольшая статья статья:
https://www.hackfrontend.com/docs/architecture/fsd

в которой написано: FSD предлагает хранить весь код, относящийся к функционалу (UI-компоненты, логику, стили, тесты), в одной фиче., учитывая, что тут только одна анимация, то можно или ее оставить в слое, как сопутствующее, или вынести в отдельную директорию public

Да, действительно так, но сейчас assets вынесен как отдельный слайс, а тут говорится про хранение функционала рядом внутри слайса, ибо относится к нему
то есть структурнее было бы pages/not-found/assets ибо относится только к этой странице, так согласна

Да, я так тоже изначально хотела сделать, потом у кого то у видела в структуре вынесенные assets наверх и расположила директорию в самом верху. В принципе, да, можно действительно ее перенести в pages/not-found/

Здесь тоже думаю, что лучше не выносить далеко assets и хранить их рядом с местом использования (в случае без переиспользования)

akseee · 2025-05-09T17:27:22Z

src/shared/types/NavigationButtonTypes.ts

Типы определенной кнопки лучше пусть будут с определенной кнопкой, если они нигде больше не используются

Что касается структуры, я ориентировалась на примеры из документации и других проектов, например:
https://github.com/UmttikhinaDasha/IT-Bookstore/tree/main/src/shared/types
https://github.com/Yar56/cryptolight/tree/main/src/shared/types/modal

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

Мне кажется, если типы не переиспользуются в других местах, имеет смысл определить их рядом с местом использования, чтобы сохранить изоляцию

akseee · 2025-05-09T17:30:54Z

src/app/router/Router.tsx

+          <Layout>
+            <NotFoundPage />
+          </Layout>


и тогда обертка останется в самих pages, а здесь останется чистый роутинг без ui

aissatsana

Все хорошо, будет здорово поправить структуру по оставленным комментам

aissatsana · 2025-05-12T11:58:30Z

src/shared/types/NavigationButtonTypes.ts

Мне кажется, если типы не переиспользуются в других местах, имеет смысл определить их рядом с местом использования, чтобы сохранить изоляцию

aissatsana · 2025-05-12T12:01:57Z

src/pages/assets/404_animation.lottie

Здесь тоже думаю, что лучше не выносить далеко assets и хранить их рядом с местом использования (в случае без переиспользования)

cherkasovaa added 3 commits May 9, 2025 10:46

feat: routing implementation

6e1e387

- Implement routing for navigation between login, registration, and main pages. - Add page stubs for main, login, register, and not-found pages.

feat: implement a 404 page

b512c41

- Add `dotlottie-react` plugin - Update Vite config for Lottie support - Add clear message for the user - Add Lottie animation - Add back to home page button

akseee reviewed May 9, 2025

View reviewed changes

aissatsana approved these changes May 12, 2025

View reviewed changes

cherkasovaa added 2 commits May 13, 2025 15:34

refactor: update routing structure with nested routes

c66a051

refactor: move NavigationButton types next to the component

25ec1d8

akseee approved these changes May 13, 2025

View reviewed changes

cherkasovaa merged commit 9012168 into sprint-2 May 13, 2025

cherkasovaa deleted the feature/21/routing-implementation branch May 19, 2025 17:28

Routing Implementation #28

Routing Implementation #28

Uh oh!

Conversation

cherkasovaa commented May 9, 2025

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!

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!

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

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants