Mon

src/components/Cases/Title.js

@@ -3,12 +3,10 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-export default class CasesPageTitle extends React.Component {
-  render() {
-    return <h1 id="title">{this.props.stationName}</h1>;
-  }
-}
+const CasesPageTitle = props => <h1 id="title">{props.stationName}</h1>;
 
 CasesPageTitle.propTypes = {
   stationName: PropTypes.string
 };
+
+export default CasesPageTitle;

src/components/Pages/AddNew/AddNewBanner.js

@@ -17,18 +17,16 @@ const StyledCase = styled.div`
   border: none;
 `;
 
-export default class AddNewBanner extends React.Component {
-  render() {
-    return (
-      <Link to={`/${this.props.exam}/${this.props.station}/add-case`}>
-        <StyledCase onClick={this.props.submitStation}> Add New</StyledCase>
-      </Link>
-    );
-  }
-}
+const AddNewBanner = props => (
+  <Link to={`/${props.exam}/${props.station}/add-case`}>
+    <StyledCase onClick={props.submitStation}> Add New</StyledCase>
+  </Link>
+);
 
 AddNewBanner.propTypes = {
   exam: PropTypes.string,
   station: PropTypes.string,
   submitStation: PropTypes.func
 };
+
+export default AddNewBanner;

src/components/Pages/AddNew/AddNewTile.js

@@ -3,12 +3,10 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-export default class AddNewTile extends React.Component {
-  render() {
-    return (
-      <Link to="/history/add/station" id="add-station">
-        <div className="tile">Add New</div>
-      </Link>
-    );
-  }
-}
+const AddNewTile = () => (
+  <Link to="/history/add/station" id="add-station">
+    <div className="tile">Add New</div>
+  </Link>
+);
+
+export default AddNewTile;

src/components/Pages/AddNew/InstructionText.js

@@ -8,16 +8,12 @@ const StyledInstructionH2 = styled.h2`
   margin: 0 16px 16px 16px;
 `;
 
-export default class InstructionText extends React.Component {
-  render() {
-    return (
-      <StyledInstructionH2 id="revision-title">
-        {this.props.text}
-      </StyledInstructionH2>
-    );
-  }
-}
+const InstructionText = props => (
+  <StyledInstructionH2 id="revision-title">{props.text}</StyledInstructionH2>
+);
 
 InstructionText.propTypes = {
   text: PropTypes.string
 };
+
+export default InstructionText;

src/components/Pages/AddNew/NewTileInput.js

@@ -10,20 +10,18 @@ const StyledNewTileInputContainer = styled.div`
   margin-top: 100px;
 `;
 
-export default class NewTileInput extends React.Component {
-  render() {
-    return (
-      <React.Fragment>
-        <StyledNewTileInputContainer>
-          <InstructionText text={this.props.instructionText} />
-          <NewTileTextInput userTypes={this.props.userTypes} />
-        </StyledNewTileInputContainer>
-      </React.Fragment>
-    );
-  }
-}
+const NewTileInput = props => (
+  <React.Fragment>
+    <StyledNewTileInputContainer>
+      <InstructionText text={props.instructionText} />
+      <NewTileTextInput userTypes={props.userTypes} />
+    </StyledNewTileInputContainer>
+  </React.Fragment>
+);
 
 NewTileInput.propTypes = {
   instructionText: PropTypes.string,
   userTypes: PropTypes.func
 };
+
+export default NewTileInput;

src/components/Pages/ComingSoon.js

@@ -19,15 +19,13 @@ const ComingSoonImg = styled.img`
   max-height: 100%;
 `;
 
-export default class ComingSoon extends React.Component {
-  render() {
-    return (
-      <React.Fragment>
-        <ComingSoonDiv>
-          <ComingSoonImg id="coming-soon-icon" src={comingSoonIcon} />
-        </ComingSoonDiv>
-        <NavBar />
-      </React.Fragment>
-    );
-  }
-}
+const ComingSoon = () => (
+  <React.Fragment>
+    <ComingSoonDiv>
+      <ComingSoonImg id="coming-soon-icon" src={comingSoonIcon} />
+    </ComingSoonDiv>
+    <NavBar />
+  </React.Fragment>
+);
+
+export default ComingSoon;

src/components/Pages/Revision/RevisionPage.js

@@ -75,21 +75,15 @@ export default class RevisionPage extends React.Component {
         id="revision"
         markComplete={this.markComplete}
         swipe={this.swipe}
-        caseTitle={this.state.caseTitle}
-        caseDetails={this.state.caseDetails}
-        caseDetailsDisplayed={this.state.caseDetailsDisplayed}
-        markSchemeElements={this.state.markSchemeElements}
-        markSchemeCompleted={this.state.markSchemeCompleted}
+        {...this.state}
       />
     );
 
     const resultsContainer = (
       <ResultsContainer
         markSchemeTotal={this.state.markSchemeElements.length}
-        markSchemeCompleted={this.state.markSchemeCompleted}
-        markSchemeElements={this.state.markSchemeElements}
-        caseTitle={this.state.caseTitle}
         timeElapsed={this.state.time}
+        {...this.state}
       />
     );
     const { exam, station } = this.props.match.params;
@@ -98,11 +92,9 @@ export default class RevisionPage extends React.Component {
         <TopBar
           id="topbar"
           backLink={`${exam}/${station}`}
-          stationName={this.state.stationName}
           submitCase={this.submitCase}
-          tickDisplayed={this.state.tickDisplayed}
           timer
-          time={this.state.time}
+          {...this.state}
         />
         {this.state.resultsDisplayed ? resultsContainer : revisionContainer}
       </React.Fragment>

src/components/Pages/Revision/RevisionTitle.js

@@ -3,12 +3,10 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-export default class RevisionTitle extends React.Component {
-  render() {
-    return <h2 id="revision-title">{this.props.caseTitle}</h2>;
-  }
-}
+const RevisionTitle = props => <h2 id="revision-title">{props.caseTitle}</h2>;
 
 RevisionTitle.propTypes = {
   caseTitle: PropTypes.string
 };
+
+export default RevisionTitle;

src/components/Pages/Statistics.js

@@ -1,14 +1,11 @@
 /* eslint-disable class-methods-use-this */
 import React from "react";
-import Navbar from "../Navbar/Navbar";
 import ComingSoon from "../Pages/ComingSoon";
 
-export default class StatisticsPage extends React.Component {
-  render() {
-    return (
-      <div>
-        <ComingSoon />
-      </div>
-    );
-  }
-}
+const StatisticsPage = () => (
+  <div>
+    <ComingSoon />
+  </div>
+);
+
+export default StatisticsPage;

src/components/TopBar/BackButton.js

@@ -17,17 +17,13 @@ const StyledImg = styled.img`
   height: 20px;
 `;
 
-export default class BackButton extends React.Component {
-  render() {
-    return (
-      <Link to={`/${this.props.link}`}>
-        <StyledButton>
-          <StyledImg src={xIcon} />
-        </StyledButton>
-      </Link>
-    );
-  }
-}
+const BackButton = ({ link }) => (
+  <Link to={`/${link}`}>
+    <StyledButton>
+      <StyledImg src={xIcon} />
+    </StyledButton>
+  </Link>
+);
 
 BackButton.propTypes = {
   link: PropTypes.string
@@ -36,3 +32,5 @@ BackButton.propTypes = {
 BackButton.contextTypes = {
   router: PropTypes.object
 };
+
+export default BackButton;

src/components/TopBar/TopBar.js

@@ -51,11 +51,9 @@ export default class TopBar extends React.Component {
           )}
           {this.props.tickDisplayed && (
             <CompleteButton
-              addNewFlow={this.props.addNewFlow}
               exam={this.props.backLink}
-              station={this.props.station}
               onClick={this.props.submitCase}
-              tickDisplayed={this.props.tickDisplayed}
+              {...this.props}
             />
           )}
         </TopBarContainer>