You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
AdminLessonNav is currently only used in the admin page, but we want to have the same style of navigation tabs in the DOJO exercises page, so it makes sense to make AdminLessonNav more generic and use it in both places since both places have the same requirements and behavior and we want them to be consistent with each other.
We also want the API to require less boilerplate to use. Currently, we need to pass in our own component which requires some boilerplate.
Since the only parts of the nav tabs that change are the nav tab text and the url and whether a tab is selected, we can change the AdminLessonNav props so it just takes in the props { tabs: { text: string, url: string, isSelected: boolean }[] } to represent each tab. We can expect the styling of a selected and unselected tab to be consistent for each use case, so these simplified props cover all our use cases and it requires less boilerplate than the current props which require you to pass in a component.
Problems with this approach:
It's possible for multiple tabs to be selected, which seems like an invalid state, we could solve this by instead having the props be { selectedTabIndex: number | null, tabs: { text: string, url: string }[] }.
We could potentially remove the isSelected and selectedTabIndex and just have the AdminLessonNav determine if a tab is selected by checking the current URL with the URL of each tab. This would make it so we only need to pass in props { tabs: { text: string, url: string }[] }, which is more simple, but it makes it so the tab is only selected if the current URL exactly matches the tab.
We don't have a high degree of customization of the styling, we could solve this by adding an optional component that we can pass in which determines the look of each tab, similar to the current props but this time it's optional.
The text was updated successfully, but these errors were encountered:
AdminLessonNav is currently only used in the admin page, but we want to have the same style of navigation tabs in the DOJO exercises page, so it makes sense to make AdminLessonNav more generic and use it in both places since both places have the same requirements and behavior and we want them to be consistent with each other.
We also want the API to require less boilerplate to use. Currently, we need to pass in our own component which requires some boilerplate.
Since the only parts of the nav tabs that change are the nav tab text and the url and whether a tab is selected, we can change the AdminLessonNav props so it just takes in the props
{ tabs: { text: string, url: string, isSelected: boolean }[] }
to represent each tab. We can expect the styling of a selected and unselected tab to be consistent for each use case, so these simplified props cover all our use cases and it requires less boilerplate than the current props which require you to pass in a component.Problems with this approach:
{ selectedTabIndex: number | null, tabs: { text: string, url: string }[] }
.{ tabs: { text: string, url: string }[] }
, which is more simple, but it makes it so the tab is only selected if the current URL exactly matches the tab.The text was updated successfully, but these errors were encountered: