diff --git a/src/frontend/js/components/Tabs/index.stories.tsx b/src/frontend/js/components/Tabs/index.stories.tsx index 8aeb40bb1f..bc19531734 100644 --- a/src/frontend/js/components/Tabs/index.stories.tsx +++ b/src/frontend/js/components/Tabs/index.stories.tsx @@ -14,10 +14,9 @@ export const Default: Story = { const [tabContent, setTabContent] = useState('This is the first tab content'); return ( - + setTabContent('This is the first tab content')} > diff --git a/src/frontend/js/components/Tabs/index.tsx b/src/frontend/js/components/Tabs/index.tsx index 173124e46c..291dae5914 100644 --- a/src/frontend/js/components/Tabs/index.tsx +++ b/src/frontend/js/components/Tabs/index.tsx @@ -18,8 +18,11 @@ interface TabsContextProps { } const TabsContext = createContext({}); -const TabContextProvider = ({ children }: PropsWithChildren) => { - const [activeTabName, setActiveTabName] = useState(); +const TabContextProvider = ({ + initialActiveTabName, + children, +}: PropsWithChildren & { initialActiveTabName?: string }) => { + const [activeTabName, setActiveTabName] = useState(initialActiveTabName); const contextValue = useMemo(() => { return { activeTabName, setActiveTabName }; }, [activeTabName]); @@ -27,10 +30,15 @@ const TabContextProvider = ({ children }: PropsWithChildren) => { return {children}; }; -const Tabs = ({ children }: PropsWithChildren) => { +const Tabs = ({ + initialActiveTabName, + children, +}: PropsWithChildren & { initialActiveTabName: string }) => { return (
- {children} + + {children} +
); }; @@ -47,14 +55,13 @@ interface TabProps extends PropsWithChildren { name: string; href?: string; onClick?: () => void; - initialIsActive?: boolean; } -Tabs.Tab = ({ name, href, onClick, initialIsActive = false, children }: TabProps) => { +Tabs.Tab = ({ name, href, onClick, children }: TabProps) => { const { activeTabName, setActiveTabName } = useContext(TabsContext); const navigate = useNavigate(); - const isActive = activeTabName ? activeTabName === name : initialIsActive; + const isActive = !!activeTabName && activeTabName === name; const handleOnClick = () => { setActiveTabName?.(name); diff --git a/src/frontend/js/pages/DashboardCertificates/index.tsx b/src/frontend/js/pages/DashboardCertificates/index.tsx index f5c0cd6df8..1c4521d666 100644 --- a/src/frontend/js/pages/DashboardCertificates/index.tsx +++ b/src/frontend/js/pages/DashboardCertificates/index.tsx @@ -1,5 +1,4 @@ import { FormattedMessage, defineMessages } from 'react-intl'; -import { generatePath } from 'react-router-dom'; import { CertificateType } from 'types/Joanie'; import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths'; import Tabs from '../../components/Tabs'; @@ -14,7 +13,7 @@ const messages = defineMessages({ enrollmentCertificateTabLabel: { id: 'components.DashboardCertificates.enrollmentCertificateTabLabel', description: 'The label of the enrollment certificate tab', - defaultMessage: 'Attestation of achievement', + defaultMessage: 'Attestations of achievement', }, }); @@ -25,23 +24,25 @@ interface DashboardCertificatesProps { export const DashboardCertificates = ({ certificateType }: DashboardCertificatesProps) => { return (
- - - - - - - - - + + + + + + + + + +
diff --git a/src/frontend/js/widgets/Dashboard/utils/learnerRoutesPaths.tsx b/src/frontend/js/widgets/Dashboard/utils/learnerRoutesPaths.tsx index 62402e8c88..7e72d6c5f1 100644 --- a/src/frontend/js/widgets/Dashboard/utils/learnerRoutesPaths.tsx +++ b/src/frontend/js/widgets/Dashboard/utils/learnerRoutesPaths.tsx @@ -52,7 +52,7 @@ export const LEARNER_DASHBOARD_ROUTE_LABELS = defineMessages