-
Notifications
You must be signed in to change notification settings - Fork 1
/
IcebreakerPage.tsx
59 lines (52 loc) · 1.72 KB
/
IcebreakerPage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React, { useEffect, useState } from 'react';
import {
IonContent,
IonHeader,
IonList,
IonPage,
IonTitle,
IonToolbar,
IonItem,
IonLabel,
IonButton, IonIcon
} from '@ionic/react';
import './pages.css'
import {personCircleOutline} from "ionicons/icons";
const IcebreakerPage = ({ match }) => {
const [questions, setQuestions] = useState(
["If you could invite any famous person to join us for lunch, who would it be and why?",
"Describe yourself with 3 words",
"What animal?"]);
useEffect(() => {
const id1 = match.params.id1;
const id2 = match.params.id2;
// Make a GET request to the API with the provided IDs
fetch(`/matches/icebreaker/${id1}/${id2}`)
.then((response) => response.json())
.then((data) => {
setQuestions(data.questions); // Assuming the API response is an object with a "questions" property
})
.catch((error) => {
console.error('Error fetching data:', error);
});
}, [match.params.id1, match.params.id2]);
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle className={'center-title'}>Icebreakers</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
{questions.map((question, index) => (
<IonItem key={index}>
<IonLabel className={"wrap-text"} >{question}</IonLabel>
</IonItem>
))}
</IonList>
</IonContent>
</IonPage>
);
};
export default IcebreakerPage;