Add ids for all matches with level and team id

js/components/Match.js

@@ -127,7 +127,7 @@ export class Match extends React.Component {
             <Card className={'shadow-sm match '} onClick={this.toggleModal}>
                 <div className="d-flex flex-row">
                     <CardBody className={borderClass + ' border py-2 ' + cardClass + ' ' + styles.match_bg}>
-                        <MatchTable match={this.state.match} borderColor={borderClass}/>
+                        <MatchTable match={this.state.match} stageLevel={this.props.stageLevel} borderColor={borderClass}/>
                     </CardBody>
                     <span className="badge bg-secondary align-items-center">
                         {groupInformation}

js/components/MatchTable.js

@@ -41,13 +41,16 @@ export function MatchTable(props) {
             </tbody>
         </Table>);
     } else {
+        const team1Id = `favorite-team-level-${props.stageLevel}-${props.match.team1.id}`;
+        const team2Id = `favorite-team-level-${props.stageLevel}-${props.match.team1.id}`;
+
         return (<Table className='mb-0'>
             <tbody>
-                <tr>
+                <tr id={team1Id}>
                     <th className='stage border-top-0'>{props.match.team1.score}</th>
                     <td className={'border-top-0 ' + team1Class}>{props.match.team1.name}</td>
                 </tr>
-                <tr>
+                <tr id={team2Id}>
                     <th className={'stage border-bottom-0 ' + props.borderColor}>{props.match.team2.score}</th>
                     <td className={'border-bottom-0 ' + props.borderColor + ' ' + team2Class}>
                         {props.match.team2.name}

js/components/PlayoffStages.js

@@ -50,7 +50,7 @@ export class PlayoffStages extends Component {
         return (<div>
             {this.props.playoffStages.map(stage => <Stage isSignedIn={this.props.isSignedIn}
                 isOwner={this.props.isOwner} updateNextStage={() => this.updateNextStage(stage.id)}
-                level={getLevelName(stage.level)} matches={stage.matches}
+                level={getLevelName(stage.level)} matches={stage.matches} stageLevel={stage.level}
                 key={stage.level}/>)}
         </div>);
     }

js/components/Stage.js

@@ -3,15 +3,22 @@ import {Match} from './Match';
 import React from 'react';
 
 export function Stage(props) {
-    const {isSignedIn, isOwner, updateNextStage} = props;
+    const {isSignedIn, isOwner, updateNextStage, stageLevel} = props;
 
     return (<div>
         <Container className='py-5'>
             <h1 className='custom-font'>{props.level}</h1>
             <Row>
                 {props.matches.map((match => (
-                    <Col className='minw-25' key={match.id}><Match match={match} isSignedIn={isSignedIn}
-                        isOwner={isOwner} onFinish={updateNextStage}/></Col>)))}
+                    <Col className='minw-25' key={match.id}>
+                        <Match
+                            match={match}
+                            isSignedIn={isSignedIn}
+                            isOwner={isOwner}
+                            onFinish={updateNextStage}
+                            stageLevel={stageLevel}
+                        />
+                    </Col>)))}
             </Row>
         </Container>
     </div>);