fixup! ✨(frontend) split dashboard certifiate page

openfun · May 15, 2024 · 034a2c3 · 034a2c3
1 parent 3bad04d
commit 034a2c3
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 29 deletions.
diff --git 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 (
       <RouterWrapper>
-        <Tabs>
+        <Tabs initialActiveTabName="first-tab">
           <Tabs.Header>
             <Tabs.Tab
-              initialIsActive
               name="first-tab"
               onClick={() => 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
@@ -18,19 +18,27 @@ interface TabsContextProps {
 }
 const TabsContext = createContext<TabsContextProps>({});
 
-const TabContextProvider = ({ children }: PropsWithChildren) => {
-  const [activeTabName, setActiveTabName] = useState<string>();
+const TabContextProvider = ({
+  initialActiveTabName,
+  children,
+}: PropsWithChildren & { initialActiveTabName?: string }) => {
+  const [activeTabName, setActiveTabName] = useState(initialActiveTabName);
   const contextValue = useMemo(() => {
     return { activeTabName, setActiveTabName };
   }, [activeTabName]);
 
   return <TabsContext.Provider value={contextValue}>{children}</TabsContext.Provider>;
 };
 
-const Tabs = ({ children }: PropsWithChildren) => {
+const Tabs = ({
+  initialActiveTabName,
+  children,
+}: PropsWithChildren & { initialActiveTabName: string }) => {
   return (
     <div className="tabs">
-      <TabContextProvider>{children}</TabContextProvider>
+      <TabContextProvider initialActiveTabName={initialActiveTabName}>
+        {children}
+      </TabContextProvider>
     </div>
   );
 };
@@ -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
@@ -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 (
     <div className="dashboard-certificates">
-      <Tabs.Header>
-        <Tabs.Tab
-          name="order-certificate-tab"
-          initialIsActive={certificateType === CertificateType.ORDER}
-          href={LearnerDashboardPaths.ORDER_CERTIFICATES}
-        >
-          <FormattedMessage {...messages.orderCertificateTabLabel} />
-        </Tabs.Tab>
-        <Tabs.Tab
-          name="enrollment-certificate-tab"
-          initialIsActive={certificateType === CertificateType.ENROLLMENT}
-          href={generatePath(LearnerDashboardPaths.ENROLLMENT_CERTIFICATES)}
-        >
-          <FormattedMessage {...messages.enrollmentCertificateTabLabel} />
-        </Tabs.Tab>
-      </Tabs.Header>
-
+      <Tabs
+        initialActiveTabName={
+          certificateType === CertificateType.ORDER
+            ? 'order-certificate-tab'
+            : 'enrollment-certificate-tab'
+        }
+      >
+        <Tabs.Header>
+          <Tabs.Tab name="order-certificate-tab" href={LearnerDashboardPaths.ORDER_CERTIFICATES}>
+            <FormattedMessage {...messages.orderCertificateTabLabel} />
+          </Tabs.Tab>
+          <Tabs.Tab
+            name="enrollment-certificate-tab"
+            href={LearnerDashboardPaths.ENROLLMENT_CERTIFICATES}
+          >
+            <FormattedMessage {...messages.enrollmentCertificateTabLabel} />
+          </Tabs.Tab>
+        </Tabs.Header>
+      </Tabs>
       <div className="dashboard-certificates__content">
         <CertificatesList certificateType={certificateType} />
       </div>

diff --git 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<LearnerDashboardPat
   [LearnerDashboardPaths.ENROLLMENT_CERTIFICATES]: {
     id: 'components.Dashboard.DashboardRoutes.certificates.enrollment.label',
     description: 'Label of the enrollment certificates view used in navigation components.',
-    defaultMessage: 'My enrollment certificates',
+    defaultMessage: 'My attestations of achievement',
   },
   [LearnerDashboardPaths.CONTRACTS]: {
     id: 'components.Dashboard.DashboardRoutes.contracts.label',