Less verbose Archive
This commit is contained in:
@@ -15,350 +15,86 @@ interface PerformerCard extends Performer {
|
|||||||
showDesc: boolean;
|
showDesc: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const dataByYear: Record<number, Performer[]> = {
|
||||||
|
2025: PerformersData2025,
|
||||||
|
2024: PerformersData2024,
|
||||||
|
2023: PerformersData2023,
|
||||||
|
2022: PerformersData2022,
|
||||||
|
2021: PerformersData2021,
|
||||||
|
};
|
||||||
|
|
||||||
|
const sortedYears = Object.keys(dataByYear).map(Number).sort((a, b) => b - a);
|
||||||
|
|
||||||
const Archive = () => {
|
const Archive = () => {
|
||||||
const [performers2021, setPerformers2021] = useState<PerformerCard[]>([]);
|
const [performersByYear, setPerformersByYear] = useState<Record<number, PerformerCard[]>>({});
|
||||||
const [performers2022, setPerformers2022] = useState<PerformerCard[]>([]);
|
|
||||||
const [performers2023, setPerformers2023] = useState<PerformerCard[]>([]);
|
|
||||||
const [performers2024, setPerformers2024] = useState<PerformerCard[]>([]);
|
|
||||||
const [performers2025, setPerformers2025] = useState<PerformerCard[]>([]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let cards: PerformerCard[] = [];
|
const initial: Record<number, PerformerCard[]> = {};
|
||||||
|
for (const year of sortedYears) {
|
||||||
PerformersData2021.map((p) => {
|
initial[year] = dataByYear[year].map((p) => ({ ...p, showDesc: false }));
|
||||||
let newCard = { ...p, showDesc: false };
|
}
|
||||||
cards.push(newCard);
|
setPerformersByYear(initial);
|
||||||
});
|
|
||||||
|
|
||||||
setPerformers2021(cards);
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
const togglePerformerDesc = (year: number, id: string) => {
|
||||||
let cards: PerformerCard[] = [];
|
setPerformersByYear((prev) => ({
|
||||||
|
...prev,
|
||||||
PerformersData2022.map((p) => {
|
[year]: prev[year].map((p) =>
|
||||||
let newCard = { ...p, showDesc: false };
|
p.id === id ? { ...p, showDesc: !p.showDesc } : p
|
||||||
cards.push(newCard);
|
),
|
||||||
});
|
}));
|
||||||
|
|
||||||
setPerformers2022(cards);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let cards: PerformerCard[] = [];
|
|
||||||
|
|
||||||
PerformersData2023.map((p) => {
|
|
||||||
let newCard = { ...p, showDesc: false };
|
|
||||||
cards.push(newCard);
|
|
||||||
});
|
|
||||||
|
|
||||||
setPerformers2023(cards);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let cards: PerformerCard[] = [];
|
|
||||||
|
|
||||||
PerformersData2024.map((p) => {
|
|
||||||
let newCard = { ...p, showDesc: false };
|
|
||||||
cards.push(newCard);
|
|
||||||
});
|
|
||||||
|
|
||||||
setPerformers2024(cards);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let cards: PerformerCard[] = [];
|
|
||||||
|
|
||||||
PerformersData2025.map((p) => {
|
|
||||||
let newCard = { ...p, showDesc: false };
|
|
||||||
cards.push(newCard);
|
|
||||||
});
|
|
||||||
|
|
||||||
setPerformers2025(cards);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const togglePerformerDesc2021 = (id: string) => {
|
|
||||||
let updated: PerformerCard[];
|
|
||||||
updated = performers2021.map((p) => {
|
|
||||||
if (p.id === id) {
|
|
||||||
p.showDesc = !p.showDesc;
|
|
||||||
}
|
|
||||||
return p;
|
|
||||||
});
|
|
||||||
|
|
||||||
setPerformers2021(updated);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const togglePerformerDesc2022 = (id: string) => {
|
|
||||||
let updated: PerformerCard[];
|
|
||||||
updated = performers2022.map((p) => {
|
|
||||||
if (p.id === id) {
|
|
||||||
p.showDesc = !p.showDesc;
|
|
||||||
}
|
|
||||||
return p;
|
|
||||||
});
|
|
||||||
|
|
||||||
setPerformers2022(updated);
|
|
||||||
};
|
|
||||||
|
|
||||||
const togglePerformerDesc2023 = (id: string) => {
|
|
||||||
let updated: PerformerCard[];
|
|
||||||
updated = performers2023.map((p) => {
|
|
||||||
if (p.id === id) {
|
|
||||||
p.showDesc = !p.showDesc;
|
|
||||||
}
|
|
||||||
return p;
|
|
||||||
});
|
|
||||||
|
|
||||||
setPerformers2023(updated);
|
|
||||||
};
|
|
||||||
|
|
||||||
const togglePerformerDesc2024 = (id: string) => {
|
|
||||||
let updated: PerformerCard[];
|
|
||||||
updated = performers2024.map((p) => {
|
|
||||||
if (p.id === id) {
|
|
||||||
p.showDesc = !p.showDesc;
|
|
||||||
}
|
|
||||||
return p;
|
|
||||||
});
|
|
||||||
|
|
||||||
setPerformers2024(updated);
|
|
||||||
};
|
|
||||||
|
|
||||||
const togglePerformerDesc2025 = (id: string) => {
|
|
||||||
let updated: PerformerCard[];
|
|
||||||
updated = performers2025.map((p) => {
|
|
||||||
if (p.id === id) {
|
|
||||||
p.showDesc = !p.showDesc;
|
|
||||||
}
|
|
||||||
return p;
|
|
||||||
});
|
|
||||||
|
|
||||||
setPerformers2025(updated);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={shared.page + ' ' + styles.archivePage}>
|
<section className={shared.page + ' ' + styles.archivePage}>
|
||||||
<h1>Arkisto</h1>
|
<h1>Arkisto</h1>
|
||||||
<h2 className={styles.year}>2025</h2>
|
{sortedYears.map((year) => (
|
||||||
{performers2025.map((p) => (
|
<React.Fragment key={year}>
|
||||||
<div className={styles.performerContainer} key={p.id}>
|
<h2 className={styles.year}>{year}</h2>
|
||||||
<Image
|
{(performersByYear[year] ?? []).map((p) => (
|
||||||
className={styles.performerImage}
|
<div className={styles.performerContainer} key={p.id}>
|
||||||
src={'/performers/2025/' + p.id + '.jpg'}
|
<Image
|
||||||
width={100}
|
className={styles.performerImage}
|
||||||
height={100}
|
src={'/performers/' + year + '/' + p.id + '.jpg'}
|
||||||
layout='fixed'
|
width={100}
|
||||||
alt={p.name}
|
height={100}
|
||||||
/>
|
layout='fixed'
|
||||||
<div className={styles.performerTextContainer}>
|
alt={p.name}
|
||||||
<div
|
/>
|
||||||
className={styles.performerTitle}
|
<div className={styles.performerTextContainer}>
|
||||||
onClick={() => togglePerformerDesc2025(p.id)}
|
<div
|
||||||
>
|
className={styles.performerTitle}
|
||||||
<h2>{p.name}</h2>
|
onClick={() => togglePerformerDesc(year, p.id)}
|
||||||
<button className={shared.openingChevron}>
|
>
|
||||||
{p.showDesc ? (
|
<h2>{p.name}</h2>
|
||||||
<BiChevronDown size='3rem' />
|
<button className={shared.openingChevron}>
|
||||||
) : (
|
{p.showDesc ? (
|
||||||
<BiChevronLeft size='3rem' />
|
<BiChevronDown size='3rem' />
|
||||||
)}
|
) : (
|
||||||
</button>
|
<BiChevronLeft size='3rem' />
|
||||||
</div>
|
)}
|
||||||
<CSSTransition
|
</button>
|
||||||
in={p.showDesc}
|
|
||||||
timeout={1000}
|
|
||||||
classNames='fadeTransition'
|
|
||||||
>
|
|
||||||
{p.showDesc ? (
|
|
||||||
<div>
|
|
||||||
{p.paragraphs.map((parag, index) => (
|
|
||||||
<p key={index}>{parag.toString()}</p>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
<CSSTransition
|
||||||
<span></span>
|
in={p.showDesc}
|
||||||
)}
|
timeout={1000}
|
||||||
</CSSTransition>
|
classNames='fadeTransition'
|
||||||
<hr />
|
>
|
||||||
</div>
|
{p.showDesc ? (
|
||||||
</div>
|
<div>
|
||||||
))}
|
{p.paragraphs.map((parag, index) => (
|
||||||
<h2 className={styles.year}>2024</h2>
|
<p key={index}>{parag.toString()}</p>
|
||||||
{performers2024.map((p) => (
|
))}
|
||||||
<div className={styles.performerContainer} key={p.id}>
|
</div>
|
||||||
<Image
|
) : (
|
||||||
className={styles.performerImage}
|
<span></span>
|
||||||
src={'/performers/2024/' + p.id + '.jpg'}
|
)}
|
||||||
width={100}
|
</CSSTransition>
|
||||||
height={100}
|
<hr />
|
||||||
layout='fixed'
|
</div>
|
||||||
alt={p.name}
|
|
||||||
/>
|
|
||||||
<div className={styles.performerTextContainer}>
|
|
||||||
<div
|
|
||||||
className={styles.performerTitle}
|
|
||||||
onClick={() => togglePerformerDesc2024(p.id)}
|
|
||||||
>
|
|
||||||
<h2>{p.name}</h2>
|
|
||||||
<button className={shared.openingChevron}>
|
|
||||||
{p.showDesc ? (
|
|
||||||
<BiChevronDown size='3rem' />
|
|
||||||
) : (
|
|
||||||
<BiChevronLeft size='3rem' />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<CSSTransition
|
))}
|
||||||
in={p.showDesc}
|
</React.Fragment>
|
||||||
timeout={1000}
|
|
||||||
classNames='fadeTransition'
|
|
||||||
>
|
|
||||||
{p.showDesc ? (
|
|
||||||
<div>
|
|
||||||
{p.paragraphs.map((parag, index) => (
|
|
||||||
<p key={index}>{parag.toString()}</p>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<span></span>
|
|
||||||
)}
|
|
||||||
</CSSTransition>
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<h2 className={styles.year}>2023</h2>
|
|
||||||
{performers2023.map((p) => (
|
|
||||||
<div className={styles.performerContainer} key={p.id}>
|
|
||||||
<Image
|
|
||||||
className={styles.performerImage}
|
|
||||||
src={'/performers/2023/' + p.id + '.jpg'}
|
|
||||||
width={100}
|
|
||||||
height={100}
|
|
||||||
layout='fixed'
|
|
||||||
alt={p.name}
|
|
||||||
/>
|
|
||||||
<div className={styles.performerTextContainer}>
|
|
||||||
<div
|
|
||||||
className={styles.performerTitle}
|
|
||||||
onClick={() => togglePerformerDesc2023(p.id)}
|
|
||||||
>
|
|
||||||
<h2>{p.name}</h2>
|
|
||||||
<button className={shared.openingChevron}>
|
|
||||||
{p.showDesc ? (
|
|
||||||
<BiChevronDown size='3rem' />
|
|
||||||
) : (
|
|
||||||
<BiChevronLeft size='3rem' />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<CSSTransition
|
|
||||||
in={p.showDesc}
|
|
||||||
timeout={1000}
|
|
||||||
classNames='fadeTransition'
|
|
||||||
>
|
|
||||||
{p.showDesc ? (
|
|
||||||
<div>
|
|
||||||
{p.paragraphs.map((parag, index) => (
|
|
||||||
<p key={index}>{parag.toString()}</p>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<span></span>
|
|
||||||
)}
|
|
||||||
</CSSTransition>
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<h2 className={styles.year}>2022</h2>
|
|
||||||
{performers2022.map((p) => (
|
|
||||||
<div className={styles.performerContainer} key={p.id}>
|
|
||||||
<Image
|
|
||||||
className={styles.performerImage}
|
|
||||||
src={'/performers/2022/' + p.id + '.jpg'}
|
|
||||||
width={100}
|
|
||||||
height={100}
|
|
||||||
layout='fixed'
|
|
||||||
alt={p.name}
|
|
||||||
/>
|
|
||||||
<div className={styles.performerTextContainer}>
|
|
||||||
<div
|
|
||||||
className={styles.performerTitle}
|
|
||||||
onClick={() => togglePerformerDesc2022(p.id)}
|
|
||||||
>
|
|
||||||
<h2>{p.name}</h2>
|
|
||||||
<button className={shared.openingChevron}>
|
|
||||||
{p.showDesc ? (
|
|
||||||
<BiChevronDown size='3rem' />
|
|
||||||
) : (
|
|
||||||
<BiChevronLeft size='3rem' />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<CSSTransition
|
|
||||||
in={p.showDesc}
|
|
||||||
timeout={1000}
|
|
||||||
classNames='fadeTransition'
|
|
||||||
>
|
|
||||||
{p.showDesc ? (
|
|
||||||
<div>
|
|
||||||
{p.paragraphs.map((parag, index) => (
|
|
||||||
<p key={index}>{parag.toString()}</p>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<span></span>
|
|
||||||
)}
|
|
||||||
</CSSTransition>
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<h2 className={styles.year}>2021</h2>
|
|
||||||
{performers2021.map((p) => (
|
|
||||||
<div className={styles.performerContainer} key={p.id}>
|
|
||||||
<Image
|
|
||||||
className={styles.performerImage}
|
|
||||||
src={'/performers/2021/' + p.id + '.jpg'}
|
|
||||||
width={100}
|
|
||||||
height={100}
|
|
||||||
layout='fixed'
|
|
||||||
alt={p.name}
|
|
||||||
/>
|
|
||||||
<div className={styles.performerTextContainer}>
|
|
||||||
<div
|
|
||||||
className={styles.performerTitle}
|
|
||||||
onClick={() => togglePerformerDesc2021(p.id)}
|
|
||||||
>
|
|
||||||
<h2>{p.name}</h2>
|
|
||||||
<button className={shared.openingChevron}>
|
|
||||||
{p.showDesc ? (
|
|
||||||
<BiChevronDown size='3rem' />
|
|
||||||
) : (
|
|
||||||
<BiChevronLeft size='3rem' />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<CSSTransition
|
|
||||||
in={p.showDesc}
|
|
||||||
timeout={1000}
|
|
||||||
classNames='fadeTransition'
|
|
||||||
>
|
|
||||||
{p.showDesc ? (
|
|
||||||
<div>
|
|
||||||
{p.paragraphs.map((parag, index) => (
|
|
||||||
<p key={index}>{parag.toString()}</p>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<span></span>
|
|
||||||
)}
|
|
||||||
</CSSTransition>
|
|
||||||
<hr />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
))}
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user