Vainqueur final (#103)

* Renommage en Final Winner le composant pour ne pas confondre avec vainqueur de matchs

* Correction fonctionnement Choix du vainqueur final

* By default, order teams by winOdd

src/hooks/teams.js

@@ -12,7 +12,7 @@ export const useTeam = (id, initialData) => {
 }
 
 export const useTeams = () => {
-  const query = useFirestore().collection('teams')
+  const query = useFirestore().collection('teams').orderBy('winOdd')
 
   return useFirestoreCollection(query, { initialData: [] }).data?.docs
 }

src/screens/HomePage/Winner/Winner.jsx → src/screens/HomePage/FinalWinner/FinalWinner.jsx

@@ -3,10 +3,10 @@ import CardContent from '@material-ui/core/CardContent'
 import Typography from '@material-ui/core/Typography'
 import React, { Suspense } from 'react'
 import { useSelectedWinner } from '../../../hooks'
-import './Winner.scss'
-import WinnerChoice from './WinnerChoice'
+import './FinalWinner.scss'
+import FinalWinnerChoice from './FinalWinnerChoice'
 
-const Winner = () => {
+const FinalWinner = () => {
   const [team, saveWinner] = useSelectedWinner()
 
   const handleChange = (e) => {
@@ -28,15 +28,15 @@ const Winner = () => {
       </Typography>
       <CardContent>
         <Suspense fallback={<></>}>
-          <WinnerChoice userTeam={team} onValueChange={handleChange} />
+          <FinalWinnerChoice userTeam={team} onValueChange={handleChange} />
         </Suspense>
       </CardContent>
     </Card>
   )
 }
 
-Winner.propTypes = {}
+FinalWinner.propTypes = {}
 
-Winner.defaultProps = {}
+FinalWinner.defaultProps = {}
 
-export default Winner
+export default FinalWinner

src/screens/HomePage/Winner/WinnerChoice/WinnerChoice.jsx → src/screens/HomePage/FinalWinner/FinalWinnerChoice/FinalWinnerChoice.jsx

@@ -10,14 +10,14 @@ import React from 'react'
 import { COMPETITION_START_DATE } from '../../../../shared'
 import Flag from '../../../../components/Flag'
 import { useTeams } from '../../../../hooks'
-import './WinnerChoice.scss'
+import './FinalWinnerChoice.scss'
 
-const WinnerChoice = ({ userTeam, onValueChange }) => {
+const FinalWinnerChoice = ({ userTeam, onValueChange }) => {
   const teams = useTeams()
 
   return (
     <div className="winner-choice">
-      {FlagTest(teams, userTeam)}
+      {FlagDisplay(teams, userTeam)}
       <div className="winner-choice-select-container">
         <Select
           className="winner-choice-select-value"
@@ -35,15 +35,17 @@ const WinnerChoice = ({ userTeam, onValueChange }) => {
           ))}
         </Select>
       </div>
-      {OddTest(teams, userTeam)}
+      {OddDisplay(teams, userTeam)}
     </div>
   )
 }
 
 // Affichage du drapeau du pays choisi
-const FlagTest = (teams, userTeam) => {
+const FlagDisplay = (teams, userTeam) => {
   const teamDisplayed = find(teams, (team) => team.id === userTeam)
 
+  console.log(teamDisplayed)
+
   return (
     teamDisplayed && (
       <Flag
@@ -55,28 +57,28 @@ const FlagTest = (teams, userTeam) => {
 }
 
 // Affichage de la cote du pays choisi
-const OddTest = (teams, userTeam) => {
+const OddDisplay = (teams, userTeam) => {
   const teamDisplayed = find(teams, (team) => team.id === userTeam)
 
   return (
     teamDisplayed && (
       <Tooltip title="Cote pour la victoire finale" placement="right">
-        <Typography variant="body1" className="winner-choice-odd">
-          {teamDisplayed.winOdd}
+        <Typography variant="h1" className="winner-choice-odd">
+          {teamDisplayed.data().winOdd}
         </Typography>
       </Tooltip>
     )
   )
 }
 
-WinnerChoice.defaultProps = {
+FinalWinnerChoice.defaultProps = {
   teams: [],
 }
 
-WinnerChoice.propTypes = {
+FinalWinnerChoice.propTypes = {
   teams: PropTypes.arrayOf(PropTypes.shape({})),
   userTeam: PropTypes.string,
   onValueChange: PropTypes.func.isRequired,
 }
 
-export default WinnerChoice
+export default FinalWinnerChoice

src/screens/HomePage/FinalWinner/FinalWinnerChoice/index.js

@@ -0,0 +1 @@
+export { default } from './FinalWinnerChoice'

src/screens/HomePage/FinalWinner/index.js

@@ -0,0 +1 @@
+export { default } from './FinalWinner'

src/screens/HomePage/HomePage.jsx

@@ -18,7 +18,7 @@ import React from 'react'
 import { AuthCheck } from 'reactfire'
 import myImage from '../../assets/visuels/bandeauEvenement2.webp'
 import './HomePage.scss'
-import Winner from './Winner'
+import FinalWinner from './FinalWinner'
 
 const HomePage = ({ history }) => {
   return (
@@ -82,7 +82,7 @@ const HomePage = ({ history }) => {
         </AuthCheck>
       </div>
       <AuthCheck>
-        <Winner />
+        <FinalWinner />
       </AuthCheck>
       <img alt="Home" className="home-logo" src={myImage} />
     </div>