Sethuraman#1: Create separate component for current score heading and…

… removed jsx files.

Co-authored-by: Sravya Kanagarla <[email protected]>

src/ScoreHeader/CurrentScoreHeading.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import Container from 'reactstrap/lib/Container';
+import Row from 'reactstrap/lib/Row';
+import Col from 'reactstrap/lib/Col';
+
+const CurrentScoreHandling = props =>
+  (
+    <Container>
+      <br />
+      <Row>
+        <Col md={{ size: 6, offset: 3 }}>
+          <Row>
+            <Col md="5" xs="4">
+              <b>{props.battingTeam}</b>
+            </Col>
+            <Col sm="1" xs="2" />
+            <Col className="text-align-right">
+              <p>
+                <b>
+                  {props.currentInningScore.runsScored}/
+                  {props.currentInningScore.wicketsFallen} in&nbsp;
+                  {props.currentInningScore.oversBowled}.
+                  {props.currentBowlsBowled}/{props.totalOvers}
+                </b>
+              </p>
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+      <br />
+      <Row>
+        <Col md={{ size: 6, offset: 3 }} sm="12">
+          <Row>
+            <Col>
+              <p>
+                {props.bowlingTeam} scored&nbsp;
+                {props.previousInningScore.runsScored}/
+                {props.previousInningScore.wicketsFallen} in&nbsp;
+                {props.previousInningScore.oversBowled}
+              </p>
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    </Container>
+  );
+
+CurrentScoreHandling.propTypes = {
+  previousInningScore: PropTypes.instanceOf(Object).isRequired,
+  currentInningScore: PropTypes.instanceOf(Object).isRequired,
+  currentBowlsBowled: PropTypes.number.isRequired,
+  totalOvers: PropTypes.number.isRequired,
+  battingTeam: PropTypes.string.isRequired,
+  bowlingTeam: PropTypes.string.isRequired,
+};
+
+const mapStateToProps = state => ({
+  previousInningScore: state.totalScorerReducer.previousInningScore,
+  currentInningScore: state.totalScorerReducer.currentInningScore,
+  currentBowlsBowled: state.totalScorerReducer.currentBowlsBowled,
+  totalOvers: state.totalScorerReducer.totalOvers,
+  battingTeam: state.totalScorerReducer.battingTeam,
+  bowlingTeam: state.totalScorerReducer.bowlingTeam,
+});
+
+export default connect(mapStateToProps)(CurrentScoreHandling);

src/home/Home.css

@@ -4,4 +4,8 @@ html, body {
 
 #root {
     height: 100%
+}
+
+.text-align-right{
+    text-align: 'right'
 }

src/home/Home.jsx

@@ -5,11 +5,13 @@ import './Home.css';
 import { createGameAction } from './actions';
 import ThisOver from '../ThisOver/ThisOver';
 import Scorer from '../scorer/scorer';
+import CurrentScoreHeading from '../ScoreHeader/CurrentScoreHeading';
 
 
 const Home = () =>
   (
     <Container className="h-100">
+      <CurrentScoreHeading />
       <ThisOver />
       <Scorer />
     </Container>

src/state.1.json

@@ -1,15 +1,15 @@
 {
     "previousInningScore": {
-        "runsScored": 0,
-        "wicketsFallen": 0,
+        "runsScored": 150,
+        "wicketsFallen": 7,
         "oversBowled": 20
     },
     "currentInningScore": {
-        "runsScored": 0,
-        "wicketsFallen": 0,
-        "oversBowled": 0
+        "runsScored": 120,
+        "wicketsFallen": 4,
+        "oversBowled": 10
     },
-    "validBallsInCurrentOver": 0,
+    "validBallsInCurrentOver": 4,
     "currentOver": [
         "1",
         "w",

src/store/actions.js

@@ -19,4 +19,4 @@ function getTotalScoreUpdateAction(runs, incrementBalls, incrementWicket) {
   return getaction;
 };
 
-export { getRecordBatsmanScoreAction, getTotalScoreUpdateAction };
+export default { getRecordBatsmanScoreAction, getTotalScoreUpdateAction };

src/store/rootReducer.js

@@ -3,9 +3,11 @@ import gameInformationReducer from '../newGame/reducer';
 import thisOverReducer from '../ThisOver/reducer';
 import batsManScorerReducer from '../batsmanScorer/reducer';
 import bowlerScorerReducer from '../BowlerScorer/reducer';
+import totalScoreReducer from '../totalReducer/reducer';
 
 const rootReducer = combineReducers({
   gameInformation: gameInformationReducer,
+  totalScorerReducer: totalScoreReducer,
   thisOver: thisOverReducer,
   batsManScorer: batsManScorerReducer,
   bowlerScorer: bowlerScorerReducer,