Size: a a a

Atomic Design for React

2020 September 18

VP

Vasya Peregarkin in Atomic Design for React
Sm•ok 😈✔️
Можно же юзать приват роуты с проверками ролей ещё на этапе мэпа роутов
Имеешь в виду в самом файле routes для каждого объекта использовать свойство render вместо component и там оборачивать?
источник

S

Sm•ok 😈✔️ in Atomic Design for React
Нет
источник

AI

Arthur Irgashev in Atomic Design for React
Vasya Peregarkin
Имеешь в виду в самом файле routes для каждого объекта использовать свойство render вместо component и там оборачивать?
Погугли “protected / private route react”
источник

VP

Vasya Peregarkin in Atomic Design for React
Arthur Irgashev
Погугли “protected / private route react”
Для react router config ничего годного не нашёл
источник

S

Sm•ok 😈✔️ in Atomic Design for React
[
  {
        path: string,
        component: Component,
        roles: [Roles.Admin]
       
   }
]
источник

S

Sm•ok 😈✔️ in Atomic Design for React
Arthur Irgashev
Погугли “protected / private route react”
Далее это
источник

S

Sm•ok 😈✔️ in Atomic Design for React
Sm•ok 😈✔️
[
  {
        path: string,
        component: Component,
        roles: [Roles.Admin]
       
   }
]
Это у тебя как роуты хранятся
источник

VP

Vasya Peregarkin in Atomic Design for React
Sm•ok 😈✔️
[
  {
        path: string,
        component: Component,
        roles: [Roles.Admin]
       
   }
]
откуда это свойство roles взялось? Там какой-то кастомный renderRoutes?
источник

c⁣

createStore<🦉>... in Atomic Design for React
Vasya Peregarkin
откуда это свойство roles взялось? Там какой-то кастомный renderRoutes?
который просто удаляет роуты в которых есть роль, которой нет у юзера
и дальше передает результат в renderRoutes

любой разработчик такую функцию сможет написать
источник

VP

Vasya Peregarkin in Atomic Design for React
createStore<🦉> ⁣
который просто удаляет роуты в которых есть роль, которой нет у юзера
и дальше передает результат в renderRoutes

любой разработчик такую функцию сможет написать
Понял, что-то затупил, спасибо
источник

VP

Vasya Peregarkin in Atomic Design for React
Такой вопрос ещё, допустим у меня есть 2 роли, роль админа и пользователя, и у каждой из этих ролей свой лайоут, отличается сайдбар и хеадер. Куда эти 2 лайоута лучше положить, может ли быть фича лайоут? или лучше как то по-другому сделать?
источник

c⁣

createStore<🦉>... in Atomic Design for React
Vasya Peregarkin
Такой вопрос ещё, допустим у меня есть 2 роли, роль админа и пользователя, и у каждой из этих ролей свой лайоут, отличается сайдбар и хеадер. Куда эти 2 лайоута лучше положить, может ли быть фича лайоут? или лучше как то по-другому сделать?
то есть отличается только расположение основных элементов?
источник

c⁣

createStore<🦉>... in Atomic Design for React
просто лейаут это именно расположение
а не сами элементы
источник

VP

Vasya Peregarkin in Atomic Design for React
createStore<🦉> ⁣
просто лейаут это именно расположение
а не сами элементы
есть ui компонент menu, и есть ui компонент layout, который отвечает за расположение. Я хочу сделать компоненты для админа и пользователя с уже готовой разметкой, с навигацией и какой то логикой, которые уже будут содержать вышеупомянутые ui компоненты, но уже с каким то контентом и пропсами. Понятно что это по сути фича, но непонятно куда её лучше закинуть и как правильно назвать
источник

c⁣

createStore<🦉>... in Atomic Design for React
Vasya Peregarkin
есть ui компонент menu, и есть ui компонент layout, который отвечает за расположение. Я хочу сделать компоненты для админа и пользователя с уже готовой разметкой, с навигацией и какой то логикой, которые уже будут содержать вышеупомянутые ui компоненты, но уже с каким то контентом и пропсами. Понятно что это по сути фича, но непонятно куда её лучше закинуть и как правильно назвать
я бы сделал два шаблона

features/user/templates/user.tsx
UserTemplate импортит menu и layout, заполняет нужными ссылками и компонентами, оставляет дырки для children и если нужно для sidebar

features/admin/templates/admin.tsx
аналогично AdminTemplate
источник

c⁣

createStore<🦉>... in Atomic Design for React
все страницы админки импортят AdminTemplate и составляют свой интерфейс

аналогично все страницы обычного юзера:
const AccountPage = () => (
 <UserTemplate sidebar={<AccountSidebar />}>
   {/* account content here */}
 </UserTemplate>
)
источник

c⁣

createStore<🦉>... in Atomic Design for React
таким образом можно независимо менять содержимое каждой страницы и при желании менять дизайн отдельных страниц
и очень легко менять дизайн сразу всех страниц пользователя сразу, аналогично с админом
источник

VP

Vasya Peregarkin in Atomic Design for React
createStore<🦉> ⁣
таким образом можно независимо менять содержимое каждой страницы и при желании менять дизайн отдельных страниц
и очень легко менять дизайн сразу всех страниц пользователя сразу, аналогично с админом
Спасибо большое, а может лучше создать фичу, типа layout или template и туда уже положить UserTemplate и AdminTemplate? Просто в этих обоих компонентах используется одинаковый компонент, который используется только в этих компонентах и больше нигде. Для ui он неочень подходит, да и фичу под него отдельную создавать смысла особого нет, т.к. он довольно таки маленький. А так бы рядом его положил и всё
источник

c⁣

createStore<🦉>... in Atomic Design for React
Vasya Peregarkin
Спасибо большое, а может лучше создать фичу, типа layout или template и туда уже положить UserTemplate и AdminTemplate? Просто в этих обоих компонентах используется одинаковый компонент, который используется только в этих компонентах и больше нигде. Для ui он неочень подходит, да и фичу под него отдельную создавать смысла особого нет, т.к. он довольно таки маленький. А так бы рядом его положил и всё
нет) фичи layout или template быть не может
источник

c⁣

createStore<🦉>... in Atomic Design for React
ибо layout это служебное название
бизнес-ценности оно не несет
источник