tietokonepaja/runosaari
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixing performer data rendering for deployment

Browse Source
This commit is contained in:
veikko
2022-06-20 21:02:25 +03:00
parent f97583bf50
commit 3461ee20f4
1 changed files with 37 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
pages/performers.tsx
View File

@@ -3,8 +3,8 @@ import React, { useEffect, useState } from 'react';
import styles from '../styles/Performers.module.scss'; import styles from '../styles/Performers.module.scss';
import shared from '../styles/Shared.module.scss'; import shared from '../styles/Shared.module.scss';
import Performer from '../types/Performer'; import Performer from '../types/Performer';
import performers2021 from '../data/performers/2022';
import { BiChevronDown, BiChevronLeft } from 'react-icons/bi'; import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
import PerformersData from '../data/performers/2022';
interface PerformerCard extends Performer { interface PerformerCard extends Performer {
id: number; id: number;
@@ -17,14 +17,12 @@ const Performers = () => {
useEffect(() => { useEffect(() => {
let cards: PerformerCard[] = []; let cards: PerformerCard[] = [];
performers2021.map((p, index) => { PerformersData.map((p, index) => {
let newCard = { ...p, id: index, showDesc: false }; let newCard = { ...p, id: index, showDesc: false };
cards.push(newCard); cards.push(newCard);
}); });
return () => { setPerformers(cards);
setPerformers(cards);
};
}, []); }, []);
const togglePerformerDesc = (id: number) => { const togglePerformerDesc = (id: number) => {
@@ -37,50 +35,48 @@ const Performers = () => {
}); });
setPerformers(updated); setPerformers(updated);
console.log(performers);
}; };
return ( return (
<section className={shared.page}> <section className={shared.page}>
<h1>Esiintyjät</h1> <h1>Esiintyjät</h1>
{performers.map((p) => ( {performers.map((p) => (
<> <div
<div className={styles.performerContainer}
className={styles.performerContainer} onClick={() => togglePerformerDesc(p.id)}
onClick={() => togglePerformerDesc(p.id)} key={p.id}
> >
<Image <Image
className={styles.performerImage} className={styles.performerImage}
src={p.imagePath} src={p.imagePath}
width={100} width={100}
height={100} height={100}
layout='fixed' layout='fixed'
/> alt={p.name + ' image'}
<div className={styles.performerTextContainer}> />
<div className={styles.performerTitle}> <div className={styles.performerTextContainer}>
<h2>{p.name}</h2> <div className={styles.performerTitle}>
<button className={shared.openingChevron}> <h2>{p.name}</h2>
{p.showDesc ? ( <button className={shared.openingChevron}>
<BiChevronDown size='3rem' /> {p.showDesc ? (
) : ( <BiChevronDown size='3rem' />
<BiChevronLeft size='3rem' /> ) : (
)} <BiChevronLeft size='3rem' />
</button> )}
</div> </button>
{p.showDesc && (
<>
{p.paragraphs.map((parag) => (
<p className={styles.performerDescription}>
{parag.toString()}
</p>
))}
</>
)}
<hr />
</div> </div>
{p.showDesc && (
<>
{p.paragraphs.map((parag, index) => (
<p className={styles.performerDescription} key={index}>
{parag.toString()}
</p>
))}
</>
)}
<hr />
</div> </div>
</> </div>
))} ))}
</section> </section>
); );