Merge branch 'ui' of https://github.com/mostafa-elhaiany/DineDevine i…

…nto ui

DineDevineUI/src/App.tsx

@@ -30,6 +30,7 @@ import ProfilePage from "./pages/ProfilePage";
 import WaitingPage from "./pages/WaitingPage";
 import OnboardingPage from "./pages/OnboardingPage";
 import SelectRestaurantPage from "./pages/SelectRestaurantPage";
+import IcebreakerPage from "./pages/IcebreakerPage";
 
 setupIonicReact();
 
@@ -41,6 +42,7 @@ const App: React.FC = () => (
             <Route path="/profile" component={ProfilePage} />
             <Route path="/match" component={MatchPage} />
             <Route path="/waiting" component={WaitingPage} />
+            <Route path="/icebreaker" component={IcebreakerPage} />
             <Route path="/select-restaurant" component={SelectRestaurantPage} />
             <Redirect exact from="/" to="/onboarding" />
         </IonRouterOutlet>

DineDevineUI/src/pages/IcebreakerPage.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react';
+import { IonContent, IonHeader, IonList, IonPage, IonTitle, IonToolbar, IonItem, IonLabel } from '@ionic/react';
+
+const IcebreakerPage = ({ match }) => {
+    const [questions, setQuestions] = useState([]);
+
+    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>Match Questions</IonTitle>
+                </IonToolbar>
+            </IonHeader>
+
+            <IonContent>
+                <IonList>
+                    {questions.map((question, index) => (
+                        <IonItem key={index}>
+                            <IonLabel>{question}</IonLabel>
+                        </IonItem>
+                    ))}
+                </IonList>
+            </IonContent>
+        </IonPage>
+    );
+};
+
+export default IcebreakerPage;

DineDevineUI/src/pages/MatchPage.tsx

@@ -1,8 +1,8 @@
 import React, {useEffect, useState} from 'react';
 import {
     IonButton, IonButtons, IonModal,
-    IonContent, IonDatetime, IonDatetimeButton,
-    IonHeader, IonIcon,
+    IonContent, IonDatetime, IonDatetimeButton, IonSelectOption,
+    IonHeader, IonIcon, IonSelect,
     IonPage,
     IonTitle,
     IonToolbar,
@@ -67,7 +67,12 @@ const MatchPage: React.FC<RouteComponentProps> = (props: RouteComponentProps) =>
                                     <IonButton  fill={"clear"} slot={"start"}>
                                         <IonIcon ios={personOutline} md={personOutline}/>
                                     </IonButton>
-                                    <span>{numberOfPeople}</span>
+                                    <IonSelect aria-label="2" placeholder="2">
+                                        <IonSelectOption value="2">2</IonSelectOption>
+                                        <IonSelectOption value="3">3</IonSelectOption>
+                                        <IonSelectOption value="4">4</IonSelectOption>
+                                        <IonSelectOption value="5">5</IonSelectOption>
+                                    </IonSelect>
                                 </div>
                                 <div className={"people-button"}>
                                     <IonButton fill={"clear"} slot={"start"}>