fix: Handle minor issues after rebase

Amsterdam-Music-Lab · Jun 28, 2024 · 361d6a6 · 361d6a6
1 parent b66bf37
commit 361d6a6
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 48 deletions.
diff --git a/...ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.test.tsx b/...ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.test.tsx
@@ -32,7 +32,7 @@ const experiment2 = getExperiment({
 const collectionWithDashboard = { dashboard: [experiment1, experiment2] }
 
 const header = {
-    nextExperimentButtonText: 'Next experiment',
+    nextBlockButtonText: 'Next experiment',
     aboutButtonText: 'About us',
 }
 const collectionWithTheme = {
@@ -123,4 +123,4 @@ describe('ExperimentCollectionDashboard', () => {
         );
         await screen.findByText('About us');
     });
-})
+})
diff --git a/...ents/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.tsx b/...ents/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.tsx
@@ -15,7 +15,7 @@ interface ExperimentCollectionDashboardProps {
 
 export const ExperimentCollectionDashboard: React.FC<ExperimentCollectionDashboardProps> = ({ experimentCollection, participantIdUrl, totalScore }) => {
 
-    const { dashboard, description } = experimentCollection;
+    const { dashboard, description, name } = experimentCollection;
     const { nextExperimentButtonText, aboutButtonText } = experimentCollection.theme?.header || { nextExperimentButtonText: "", aboutButtonText: "" };
 
     const scoreDisplayConfig = experimentCollection.theme?.header?.score;
@@ -32,9 +32,10 @@ export const ExperimentCollectionDashboard: React.FC<ExperimentCollectionDashboa
                     nextBlockSlug={nextBlockSlug}
                     collectionSlug={experimentCollection.slug}
                     totalScore={totalScore}
+                    name={name}
                     description={description}
                     scoreDisplayConfig={scoreDisplayConfig}
-                    nextExperimentButtonText={nextExperimentButtonText}
+                    nextBlockButtonText={nextExperimentButtonText}
                     aboutButtonText={aboutButtonText}
                 />
             )}

diff --git a/frontend/src/components/ExperimentCollection/Header/Header.tsx b/frontend/src/components/ExperimentCollection/Header/Header.tsx
@@ -9,19 +9,21 @@ import { ScoreDisplayConfig } from "@/types/Theme";
 import Rank from "@/components/Rank/Rank";
 
 interface HeaderProps {
+    name: string;
     description: string;
     nextBlockSlug: string | undefined;
-    nextExperimentButtonText: string;
+    nextBlockButtonText: string;
     collectionSlug: string;
     aboutButtonText: string;
     totalScore: number;
     scoreDisplayConfig?: ScoreDisplayConfig;
 }
 
 export const Header: React.FC<HeaderProps> = ({
+    name,
     description,
     nextBlockSlug,
-    nextExperimentButtonText,
+    nextBlockButtonText,
     aboutButtonText,
     collectionSlug,
     totalScore,
@@ -33,7 +35,7 @@ export const Header: React.FC<HeaderProps> = ({
     // Get current URL minus the query string
     const currentUrl = window.location.href.split('?')[0];
     const message = totalScore > 0 ? `Ha! Ik ben muzikaler dan ik dacht - heb maar liefst ${totalScore} punten! Speel mee met #ToontjeHoger` : "Ha! Speel mee met #ToontjeHoger en laat je verrassen: je bent muzikaler dat je denkt!";
-    const hashtags = [experimentCollectionTitle ? experimentCollectionTitle.replace(/ /g, '') : 'amsterdammusiclab'];
+    const hashtags = [name ? name.replace(/ /g, '') : 'amsterdammusiclab'];
 
     const social = {
         apps: ['facebook', 'twitter'],
@@ -47,7 +49,7 @@ export const Header: React.FC<HeaderProps> = ({
             <div className="intro">
                 <HTML body={description} innerClassName="" />
                 <nav className="actions">
-                    {nextBlockSlug && <a className="btn btn-lg btn-primary" href={`/${nextBlockSlug}`}>{nextExperimentButtonText}</a>}
+                    {nextBlockSlug && <a className="btn btn-lg btn-primary" href={`/${nextBlockSlug}`}>{nextBlockButtonText}</a>}
                     {aboutButtonText && <Link className="btn btn-lg btn-outline-primary" to={`/collection/${collectionSlug}/about`}>{aboutButtonText}</Link>}
                 </nav>
             </div>

diff --git a/frontend/src/stories/Header.stories.tsx b/frontend/src/stories/Header.stories.tsx
@@ -3,71 +3,71 @@ import { BrowserRouter as Router } from "react-router-dom";
 import Header from "../components/ExperimentCollection/Header/Header";
 
 export default {
-  title: "Header",
-  component: Header,
-  parameters: {
-    layout: "fullscreen",
-  },
+    title: "Header",
+    component: Header,
+    parameters: {
+        layout: "fullscreen",
+    },
 };
 
 function getHeaderData(overrides = {}) {
-  return {
-    description: "<h1>Experiment ABC</h1><p>This is the experiment description</p>",
-    nextExperimentSlug: '/th1-mozart',
-    nextExperimentButtonText: 'Volgende experiment',
-    collectionSlug: '/collection/thkids',
-    aboutButtonText: 'Over ons',
-    totalScore: 420,
-    scoreDisplayConfig: {
-      scoreClass: 'gold',
-      scoreLabel: 'points',
-    },
-    ...overrides,
-  };
+    return {
+        description: "<h1>Experiment ABC</h1><p>This is the experiment description</p>",
+        nextExperimentSlug: '/th1-mozart',
+        nextBlockButtonText: 'Volgende experiment',
+        collectionSlug: '/collection/thkids',
+        aboutButtonText: 'Over ons',
+        totalScore: 420,
+        scoreDisplayConfig: {
+            scoreClass: 'gold',
+            scoreLabel: 'points',
+        },
+        ...overrides,
+    };
 }
 
 const getDecorator = (Story) => (
-  <div
-    className="aha__collection"
-    style={{ width: "100%", height: "100%", backgroundColor: "#aaa", padding: "1rem" }}
-  >
-    <Router>
-      <Story />
-    </Router>
-  </div>
+    <div
+        className="aha__collection"
+        style={{ width: "100%", height: "100%", backgroundColor: "#aaa", padding: "1rem" }}
+    >
+        <Router>
+            <Story />
+        </Router>
+    </div>
 );
 
 export const Default = {
-  args: getHeaderData(),
-  decorators: [getDecorator],
+    args: getHeaderData(),
+    decorators: [getDecorator],
 };
 
 export const ZeroScore = {
-  args: getHeaderData({ score: 0, score_message: "No points!" }),
-  decorators: [getDecorator],
+    args: getHeaderData({ score: 0, score_message: "No points!" }),
+    decorators: [getDecorator],
 };
 
 export const NegativeScore = {
-  args: getHeaderData({ score: -100, score_message: "Incorrect!" }),
-  decorators: [getDecorator],
+    args: getHeaderData({ score: -100, score_message: "Incorrect!" }),
+    decorators: [getDecorator],
 };
 
 export const ScoreWithoutLabel = {
-  args: getHeaderData({ score_message: "" }),
-  decorators: [getDecorator],
+    args: getHeaderData({ score_message: "" }),
+    decorators: [getDecorator],
 };
 
 export const CustomLabel = {
-  args: getHeaderData({ score_message: "points earned" }),
-  decorators: [getDecorator],
+    args: getHeaderData({ score_message: "points earned" }),
+    decorators: [getDecorator],
 };
 
 export const CustomScoreClass = {
-  args: getHeaderData({ scoreClass: "silver" }),
-  decorators: [getDecorator],
+    args: getHeaderData({ scoreClass: "silver" }),
+    decorators: [getDecorator],
 };
 
 export const SelectableScoreClass = {
-  args: getHeaderData(),
-  decorators: [getDecorator],
+    args: getHeaderData(),
+    decorators: [getDecorator],
 };