-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor: ExperimentCollection, ExperimentCollectionDashboard, Header…
…, Score & Rank components (#1140) * refactor: Remove unused 'score' variable in ExperimentCollection component * refactor: Update import paths for Header component in ExperimentCollectionDashboard and Header files * refactor: Move Score component & useAnimatedScore hook to their own files * refactor: Untangle Header props * refactor: Update Score component to use TypeScript * refactor: Convert Rank component to use TypeScript * test: Add unit tests for Rank component * refactor: Update totalScore prop type to use lowercase 'number' in Header component * story: Add Score story * refactor: Improve Rank typing * chore: Add scoreClass options to Score.stories.tsx * refactor: Update Rank component to use RankPayload interface * refactor: Update Score component to use rank class for styling * story: Add story for "old" Score component * refactor: Update Score and Rank components to use RankPayload interface * refactor: Split (new) Score & Rank * fix: Handle minor issues after rebase * refactor: Split Rank / Score into Cup, ScoreCounter & Rank, which combines them * fix(lint): Fix linting issues * fix(story): Fix stories by using "block" instead of "experiment" * story: Add Rank story * refactor: Extract ProfileView from Profile component * feat: Add ProfileView component and story
- Loading branch information
1 parent
8da17f8
commit fca85c1
Showing
27 changed files
with
735 additions
and
277 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { render } from '@testing-library/react'; | ||
| import Cup from './Cup'; | ||
| import { describe, expect, it } from 'vitest'; | ||
|
|
||
|
|
||
| describe('Cup Component', () => { | ||
| it('renders with the correct class and text', () => { | ||
| const rank = { | ||
| className: 'gold', | ||
| text: 'Gold Cup', | ||
| }; | ||
|
|
||
| const { getByTestId, getByText } = render(<Cup {...rank} />); | ||
|
|
||
| const cupElement = getByTestId('cup'); | ||
|
|
||
| // Check if the main div has the correct classes | ||
| expect(cupElement.classList.contains('aha__cup')).toBe(true); | ||
| expect(cupElement.classList.contains('gold')).toBe(true); | ||
| expect(cupElement.classList.contains('offsetCup')).toBe(true); | ||
|
|
||
| // Check if the h4 element contains the correct text | ||
| expect(document.body.contains(getByText('Gold Cup'))).toBe(true); | ||
| }); | ||
|
|
||
| it('does not have offsetCup class when text is empty', () => { | ||
| const rank = { | ||
| className: 'silver', | ||
| text: '', | ||
| }; | ||
|
|
||
| const { getByTestId } = render(<Cup {...rank} />); | ||
|
|
||
| const cupElement = getByTestId('cup'); | ||
|
|
||
| // Check if the main div has the correct classes | ||
| expect(cupElement.classList.contains('aha__cup')).toBe(true); | ||
| expect(cupElement.classList.contains('silver')).toBe(true); | ||
| expect(cupElement.classList.contains('offsetCup')).toBe(false); | ||
|
|
||
| // Check if the h4 element contains the correct text | ||
| const cupText = getByTestId('cup-text'); | ||
| expect(document.body.contains(cupText)).toBe(true); | ||
| expect(cupText.textContent).toBe(''); | ||
| }); | ||
|
|
||
| it('renders the cup div', () => { | ||
| const rank = { | ||
| className: 'bronze', | ||
| text: 'Bronze Cup', | ||
| }; | ||
|
|
||
| const { getByTestId } = render(<Cup {...rank} />); | ||
|
|
||
| const cupElement = getByTestId('cup-animation'); | ||
|
|
||
| // Check if the cup div is present | ||
| expect(document.body.contains(cupElement)).toBe(true); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import classNames from "classnames"; | ||
|
|
||
| export interface CupProps { | ||
| className: string | "diamond" | "platinum" | "gold" | "silver" | "bronze" | "plastic"; | ||
| text: string; | ||
| } | ||
|
|
||
|
|
||
| // Rank shows a decorated representation of a rank | ||
| const Rank = ({ className, text }: CupProps) => ( | ||
| <div | ||
| className={classNames("aha__cup", className, { | ||
| offsetCup: text, | ||
| })} | ||
| data-testid="cup" | ||
| > | ||
| <div className="cup" data-testid="cup-animation" /> | ||
| <h4 data-testid="cup-text">{text}</h4> | ||
| </div > | ||
| ); | ||
|
|
||
| export default Rank; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
75 changes: 75 additions & 0 deletions
75
frontend/src/components/ExperimentCollection/Header/Header.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import React from "react"; | ||
| import { Link } from "react-router-dom"; | ||
|
|
||
|
|
||
| import Social from "../../Social/Social" | ||
| import HTML from '@/components/HTML/HTML'; | ||
| import { ScoreDisplayConfig } from "@/types/Theme"; | ||
| import Rank from "@/components/Rank/Rank"; | ||
|
|
||
| interface HeaderProps { | ||
| name: string; | ||
| description: string; | ||
| nextBlockSlug: string | undefined; | ||
| nextBlockButtonText: string; | ||
| collectionSlug: string; | ||
| aboutButtonText: string; | ||
| totalScore: number; | ||
| scoreDisplayConfig?: ScoreDisplayConfig; | ||
| } | ||
|
|
||
| export const Header: React.FC<HeaderProps> = ({ | ||
| name, | ||
| description, | ||
| nextBlockSlug, | ||
| nextBlockButtonText, | ||
| aboutButtonText, | ||
| collectionSlug, | ||
| totalScore, | ||
| scoreDisplayConfig, | ||
| }) => { | ||
|
|
||
| // TODO: Fix this permanently and localize in and fetch content from the backend | ||
| // See also: https://github.com/Amsterdam-Music-Lab/MUSCLE/issues/1151 | ||
| // 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 = [name ? name.replace(/ /g, '') : 'amsterdammusiclab']; | ||
|
|
||
| const social = { | ||
| apps: ['facebook', 'twitter'], | ||
| message, | ||
| url: currentUrl, | ||
| hashtags, | ||
| } | ||
|
|
||
| return ( | ||
| <div className="hero"> | ||
| <div className="intro"> | ||
| <HTML body={description} innerClassName="" /> | ||
| <nav className="actions"> | ||
| {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> | ||
| {scoreDisplayConfig && totalScore !== 0 && ( | ||
| <div className="results"> | ||
| <Rank | ||
| cup={{ className: scoreDisplayConfig.scoreClass, text: '' }} | ||
| score={{ score: totalScore, label: scoreDisplayConfig.scoreLabel }} | ||
| /> | ||
| <Social | ||
| social={social} | ||
| /> | ||
| </div> | ||
| )} | ||
| {scoreDisplayConfig && totalScore === 0 && ( | ||
| <h3>{scoreDisplayConfig.noScoreLabel}</h3> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
|
|
||
|
|
||
| export default Header; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.