#167 Add react hooks

MateuszNaKodach · Apr 15, 2021 · 9be024a · 9be024a
1 parent 8c87b24
commit 9be024a
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 29 deletions.
diff --git a/frontend/src/components/molecules/LabTabs/MatchesAndResultsTabs.tsx b/frontend/src/components/molecules/LabTabs/MatchesAndResultsTabs.tsx
@@ -7,6 +7,7 @@ import TabList from '@material-ui/lab/TabList';
 import TabPanel from '@material-ui/lab/TabPanel';
 import {MatchesList} from "../../organisms/MatchesList/MatchesList";
 import {Centered} from "../../atoms/Centered";
+import TournamentsResults from "../TournamentResults/TournamentsResults";
 
 const useStyles = makeStyles((theme: Theme) => ({
     root: {
@@ -19,11 +20,11 @@ const useStyles = makeStyles((theme: Theme) => ({
     }
 }));
 
-type LabTabsProps = {
+type MatchesAndResultsTabsProps = {
     readonly tournamentId: string;
 }
 
-export default function MatchesAndResultsTabs(props: LabTabsProps) {
+export default function MatchesAndResultsTabs(props: MatchesAndResultsTabsProps) {
     const classes = useStyles();
     const [value, setValue] = React.useState('1');
 
@@ -46,7 +47,7 @@ export default function MatchesAndResultsTabs(props: LabTabsProps) {
                     <MatchesList tournamentId={props.tournamentId}/>
                 </TabPanel>
                 <TabPanel value="2">
-
+                    <TournamentsResults tournamentId={props.tournamentId}/>
                 </TabPanel>
             </TabContext>
         </div>

diff --git a/frontend/src/components/molecules/TournamentResults/TournamentsResults.tsx b/frontend/src/components/molecules/TournamentResults/TournamentsResults.tsx
@@ -1,38 +1,73 @@
 import {Alert, AlertTitle} from "@material-ui/lab";
 import EmojiEventsIcon from "@material-ui/icons/EmojiEvents";
-import {Box, Tabs, Typography} from "@material-ui/core";
+import {Box, CircularProgress, Tabs, Typography} from "@material-ui/core";
 import Tab from "@material-ui/core/Tab";
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import {Centered} from "../../atoms/Centered";
+import {DoublesTournamentRestAPI} from "../../../restapi/doubles-tournament/DoublesTournamentRestApi";
+import {TournamentPlaceDto} from "../../../restapi/doubles-tournament/TournamentPlaceDto";
 
-function TournamentsResults() {
+type TournamentResultsProps = {
+    tournamentId: string;
+}
+
+function TournamentsResults(props: TournamentResultsProps) {
     const [tournamentStatus, setTournamentStatus] = useState(undefined);
+    const [tournamentPlaces, setTournamentPlaces] = useState<TournamentPlaceDto>();
+
+    useEffect(() => {
+        return () => {
+            DoublesTournamentRestAPI()
+                .getDoublesTournament(props.tournamentId)
+                .then((doublesTournament) => {
 
+                })
+        };
+    }, []);
 
+
+    useEffect(() => {
+        return () => {
+            DoublesTournamentRestAPI()
+                .getTournamentPlaces(props.tournamentId)
+                .then((tournamentPlaces) => {
+                    const firstPlace = tournamentPlaces.items.find((tournamentPlace) => tournamentPlace.placeNumber === 1);
+                    setTournamentPlaces(firstPlace)
+                });
+        };
+    }, []);
+
+
     return (
         <>
-            <Alert severity="info">
-                <AlertTitle><strong>Turniej w trakcie</strong></AlertTitle>
-                Wyniki będą dostępne po zakończeniu wszystkich meczy
-            </Alert>
-
-            <div style={{display: "flex", justifyContent: "center"}}>
-                <Centered>
-                    <EmojiEventsIcon color={"primary"} style={{fontSize: '3rem'}}/>
-                    <Typography variant={"h5"} component={"h5"}>Zwycięzca</Typography>
-                    <Box>
-                        <Tabs
-                            value={0}
-                            orientation="vertical"
-                            variant="scrollable"
-                            aria-label="Vertical tabs example"
-                        >
-                            <Tab label="Gracz1"/>
-                            <Tab label="Gracz2"/>
-                        </Tabs>
-                    </Box>
-                </Centered>
-            </div>
+            <Centered>
+                <CircularProgress/>
+            </Centered>
+            <>
+                <Alert severity="info">
+                    <AlertTitle><strong>Turniej w trakcie</strong></AlertTitle>
+                    Wyniki będą dostępne po zakończeniu wszystkich meczy
+                </Alert>
+
+                <div style={{display: "flex", justifyContent: "center"}}>
+                    <Centered>
+                        <EmojiEventsIcon color={"primary"} style={{fontSize: '3rem'}}/>
+                        <Typography variant={"h5"} component={"h5"}>Zwycięzca</Typography>
+                        <Box>
+                            <Tabs
+                                value={0}
+                                orientation="vertical"
+                                variant="scrollable"
+                                aria-label="Vertical tabs example"
+                            >
+                                <Tab label="Gracz1"/>
+                                <Tab label="Gracz2"/>
+                            </Tabs>
+                        </Box>
+                    </Centered>
+                </div>
+            </>
+
         </>
     );
 }

diff --git a/frontend/src/restapi/doubles-tournament/DoublesTournamentDto.ts b/frontend/src/restapi/doubles-tournament/DoublesTournamentDto.ts
@@ -0,0 +1,7 @@
+import {TournamentTeamsListDto} from "../tournament-teams-list/TournamentTeamsListDto";
+
+export type DoublesTournamentDto = {
+    tournamentId: string;
+    tournamentTeams: TournamentTeamsListDto;
+    status: string;
+}
diff --git a/frontend/src/restapi/doubles-tournament/DoublesTournamentRestApi.ts b/frontend/src/restapi/doubles-tournament/DoublesTournamentRestApi.ts
@@ -1,6 +1,7 @@
 import axios from "axios";
 import {PATH_BASE_URL} from "../../components/atoms/constants/apiPaths";
 import {TournamentPlaceListDto} from "./TournamentPlaceListDto";
+import {DoublesTournamentDto} from "./DoublesTournamentDto";
 
 export type DoublesTournamentRestApiConfig = {
     readonly baseUrl: string;
@@ -27,5 +28,10 @@ export const DoublesTournamentRestAPI = (
                 .get<TournamentPlaceListDto>(`${currentConfig.baseUrl}/doubles-tournament/${tournamentId}/places`)
                 .then((res) => res.data)
         },
+        getDoublesTournament(tournamentId: string): Promise<DoublesTournamentDto> {
+            return axios
+                .get<DoublesTournamentDto>(`${currentConfig.baseUrl}/doubles-tournament/${tournamentId}`)
+                .then((res) => res.data)
+        }
     };
 };
diff --git a/frontend/src/restapi/doubles-tournament/TournamentPlaceDto.ts b/frontend/src/restapi/doubles-tournament/TournamentPlaceDto.ts
@@ -1,4 +1,4 @@
 export type TournamentPlaceDto = {
-    readonly tournamentId: string;
+    readonly teamId: string;
     readonly placeNumber: number;
 }