Merge pull request #20 from yassinedoghri/development

Update countdown component to be generic and fix minor bugs for v0.5.1

README.md

@@ -77,7 +77,7 @@ $ yarn start
 │  │  ...
 │  ├── components/      # UI styled-components
 │  ├── config/          # config files
-│  ├── constants/       # constants (eg. actionType names)
+│  ├── constants/       # constants (eg. actionType names, routes)
 │  ├── containers/      # game containers
 │  │  ├── HomeScreen/
 │  │  ├── PlayScreen/

package.json

@@ -1,7 +1,7 @@
 {
   "name": "marvel-jarvig",
-  "version": "0.5.0",
-  "description": "Marvel J.A.R.V.I.G. (Just A Rather Very Interesting Game) is a game that lets you find and discover Marvel Comics characters based on their name, image and description!",
+  "version": "0.5.1",
+  "description": "Marvel JARVIG (Just A Rather Very Interesting Game) is a game that lets you find and discover Marvel Comics characters based on their name, image and description!",
   "homepage": "https://yassinedoghri.github.io/marvel-jarvig/",
   "repository": {
     "type": "git",
@@ -69,6 +69,7 @@
     "lint-staged": "^7.0.5",
     "prettier": "1.12.1",
     "react-test-renderer": "^16.3.2",
+    "redux-devtools-extension": "^2.13.2",
     "stylelint": "^9.2.0",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-config-styled-components": "^0.1.1",

src/actions/GameActions.js

@@ -6,6 +6,7 @@ import {
   INIT_NEW_GAME,
   NEXT_QUESTION,
   PASS_QUESTION,
+  SAVE_GAME_TIME,
   SELECT_CHARACTER,
   SET_DIFFICULTY,
   UPDATE_SETTINGS
@@ -59,6 +60,11 @@ export const endGame = () => ({
   type: END_GAME
 });
 
+export const saveGameTime = time => ({
+  type: SAVE_GAME_TIME,
+  payload: time
+});
+
 export const callRequest = () => ({
   type: API_CALL_REQUEST
 });

src/components/Logo/__tests__/__snapshots__/index.js.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Logo Block adds mobileIcon modifier 1`] = `
+exports[`Logo Block adds mobileicon modifier 1`] = `
 <a
   className="sc-bxivhb cZFXvN"
   href="/"
-  mobileIcon="true"
+  mobileicon="true"
   onClick={[Function]}
 >
   <img

src/components/Logo/__tests__/index.js

@@ -17,10 +17,10 @@ describe("Logo Block", () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it("adds mobileIcon modifier", () => {
+  it("adds mobileicon modifier", () => {
     const tree = renderWithTheme(
       <MemoryRouter>
-        <Logo to="/" mobileIcon="true">
+        <Logo to="/" mobileicon="true">
           <Logo.MarvelLogo />
           <Logo.JarvigText />
           <Logo.Icon />

src/components/Logo/index.js

@@ -27,11 +27,11 @@ const Logo = styled(Link)`
   }
 
   & ${MarvelLogo}, & ${JarvigText} {
-    display: ${props => (props.mobileIcon ? "none" : "block")};
+    display: ${props => (props.mobileicon ? "none" : "block")};
   }
 
   & ${Icon} {
-    display: ${props => (props.mobileIcon ? "block" : "none")};
+    display: ${props => (props.mobileicon ? "block" : "none")};
   }
 
   ${media.desktop`

src/constants/actionTypes.js

@@ -15,6 +15,7 @@ export const NEXT_QUESTION = "NEXT_QUESTION";
 export const SELECT_CHARACTER = "SELECT_CHARACTER";
 export const CLEAR_GAME = "CLEAR_GAME";
 export const END_GAME = "END_GAME";
+export const SAVE_GAME_TIME = "SAVE_GAME_TIME";
 
 export const API_CALL_REQUEST = "API_CALL_REQUEST";
 export const API_CALL_SUCCESS = "API_CALL_SUCCESS";

src/constants/routes.js

@@ -0,0 +1,7 @@
+const Routes = {
+  Home: "/",
+  Play: "/play",
+  Results: "/results"
+};
+
+export default Routes;

src/containers/App.js

@@ -1,4 +1,5 @@
 import { FlexWrapper } from "components";
+import Routes from "constants/routes";
 import FooterContent from "containers/FooterContent";
 
 import HeaderContent from "containers/HeaderContent";
@@ -21,7 +22,7 @@ class App extends Component {
           <HeaderContent />
           <MainContent />
           <SidebarHelp />
-          {location.pathname === "/" && <SidebarSettings />}
+          {location.pathname === Routes.Home && <SidebarSettings />}
           <FooterContent />
         </FlexWrapper>
       </ThemeProvider>

src/containers/Countdown.js

@@ -1,4 +1,3 @@
-import { GameUI } from "components";
 import PropTypes from "prop-types";
 import React, { Component } from "react";
 
@@ -28,24 +27,23 @@ class Countdown extends Component {
     };
     this.timer = 0;
     this.startTimer = this.startTimer.bind(this);
+    this.stopTimer = this.stopTimer.bind(this);
     this.countDown = this.countDown.bind(this);
   }
 
   componentDidMount() {
-    const { result, isGamePaused } = this.props;
-    if (
-      (result.length === 0 && this.timer === 0) ||
-      (result.length === 0 && isGamePaused)
-    ) {
-      this.startTimer();
+    this.startTimer();
+  }
+
+  componentDidUpdate() {
+    const { isPaused, onCountdownPaused } = this.props;
+    if (isPaused) {
+      onCountdownPaused(this.state.time);
     }
   }
 
   componentWillUnmount() {
-    if (this.timer) {
-      clearInterval(this.timer);
-    }
-    this.timer = 0;
+    this.stopTimer();
   }
 
   startTimer() {
@@ -54,11 +52,18 @@ class Countdown extends Component {
     }
   }
 
+  stopTimer() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+    this.timer = 0;
+  }
+
   countDown() {
     // Remove one second, set state so a re-render happens.
-    const { isGamePaused, onCountdownEnd } = this.props;
+    const { isPaused, onCountdownEnd } = this.props;
 
-    if (!isGamePaused) {
+    if (!isPaused) {
       const seconds = this.state.seconds - 1;
       this.setState({
         time: Countdown.secondsToTime(seconds),
@@ -67,33 +72,34 @@ class Countdown extends Component {
 
       // Check if we're at zero.
       if (seconds === 0) {
-        clearInterval(this.timer);
-        onCountdownEnd();
+        this.stopTimer();
+        onCountdownEnd(this.state.time);
       }
     }
   }
 
   render() {
     const { time } = this.state;
-    const { isGamePaused } = this.props;
     const timer =
       time.m === 0
         ? time.s
         : `${time.m}:${time.s < 10 ? `0${time.s}` : time.s}`;
 
-    return <GameUI.Label blink={isGamePaused}>{timer}</GameUI.Label>;
+    return <React.Fragment>{timer}</React.Fragment>;
   }
 }
 
 Countdown.propTypes = {
   from: PropTypes.number.isRequired,
-  isGamePaused: PropTypes.bool,
-  result: PropTypes.arrayOf(PropTypes.string).isRequired,
-  onCountdownEnd: PropTypes.func.isRequired
+  isPaused: PropTypes.bool,
+  onCountdownPaused: PropTypes.func,
+  onCountdownEnd: PropTypes.func
 };
 
 Countdown.defaultProps = {
-  isGamePaused: false
+  isPaused: false,
+  onCountdownPaused: () => {},
+  onCountdownEnd: () => {}
 };
 
 export default Countdown;

src/containers/FooterContent.js

@@ -1,4 +1,5 @@
 import { toggleSidebar } from "actions/UIActions";
+import Routes from "constants/routes";
 import PropTypes from "prop-types";
 import React, { Component } from "react";
 
@@ -17,7 +18,7 @@ class FooterContent extends Component {
     return (
       <Footer>
         <Toolbar>
-          {location.pathname === "/" && (
+          {location.pathname === Routes.Home && (
             <Toolbar.Item md onClick={() => toggleSidebar("settings")}>
               <FaCog />
             </Toolbar.Item>

src/containers/HeaderContent.js

@@ -1,36 +1,49 @@
-import { endGame } from "actions/GameActions";
+import { endGame, saveGameTime } from "actions/GameActions";
 
 import { GameUI, Header, Logo } from "components/index";
+import Routes from "constants/routes";
 import Countdown from "containers/Countdown";
-import logo from "containers/MarvelLogo.svg";
 import iconJarvig from "containers/icon-jarvig.svg";
+import logo from "containers/MarvelLogo.svg";
 import PropTypes from "prop-types";
 import React, { Component } from "react";
 import FaClock from "react-icons/lib/fa/clock-o";
 
 import FaHeart from "react-icons/lib/fa/heart";
+
+import TiChevronLeft from "react-icons/lib/ti/chevron-left";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 import { push } from "react-router-redux";
 import { bindActionCreators, compose } from "redux";
-
-import TiChevronLeft from "react-icons/lib/ti/chevron-left";
+import { formatTimer } from "utils/helpers";
 
 class HeaderContent extends Component {
-  handleCountdownEnd() {
-    const { endGame, push } = this.props;
+  handleCountdownPaused(time) {
+    const { game, saveGameTime } = this.props;
+
+    if (game.time !== time) {
+      saveGameTime(time);
+    }
+  }
 
+  handleCountdownEnd(time) {
+    const { endGame, push, saveGameTime } = this.props;
+
+    saveGameTime(time);
     endGame();
-    push("/result");
+    push(Routes.Results);
   }
 
   render() {
     const { location, time, game, isLoading, error } = this.props;
 
+    const isGamePaused = isLoading || game.checked || game.over || error;
+
     return (
-      location.pathname !== "/" && (
+      location.pathname !== Routes.Home && (
         <Header>
-          <Logo inline="true" mobileIcon="true" to="/" title="Go Home">
+          <Logo inline="true" mobileicon="true" to="/" title="Go Home">
             <TiChevronLeft />
             <Logo.MarvelLogo sm src={logo} alt="Marvel Logo" />
             <Logo.JarvigText sm spaceLeft>
@@ -43,12 +56,20 @@ class HeaderContent extends Component {
               <GameUI.Icon>
                 <FaClock />
               </GameUI.Icon>
-              <Countdown
-                from={time * 60}
-                isGamePaused={isLoading || game.checked || game.over || error}
-                onCountdownEnd={() => this.handleCountdownEnd()}
-                result={game.result}
-              />
+              <GameUI.Label blink={isGamePaused}>
+                {!game.over ? (
+                  <Countdown
+                    from={time * 60}
+                    isPaused={isGamePaused}
+                    onCountdownPaused={time => this.handleCountdownPaused(time)}
+                    onCountdownEnd={time => this.handleCountdownEnd(time)}
+                  />
+                ) : (
+                  <React.Fragment>
+                    {game.time ? formatTimer(game.time) : 0}
+                  </React.Fragment>
+                )}
+              </GameUI.Label>
             </GameUI.Item>
             <GameUI.Item>
               <GameUI.Icon animated>
@@ -78,6 +99,7 @@ HeaderContent.propTypes = {
     message: PropTypes.string
   }),
   endGame: PropTypes.func.isRequired,
+  saveGameTime: PropTypes.func.isRequired,
   push: PropTypes.func.isRequired
 };
 
@@ -96,7 +118,8 @@ const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
       push,
-      endGame
+      endGame,
+      saveGameTime
     },
     dispatch
   );

src/containers/MainContent.js

@@ -1,22 +1,29 @@
 import { Main } from "components";
+import Routes from "constants/routes";
 
 import HomeScreen from "containers/HomeScreen";
 import PlayScreen from "containers/PlayScreen";
 import ResultScreen from "containers/ResultScreen";
 import PropTypes from "prop-types";
 import React, { Component } from "react";
-import { Route, Switch, withRouter } from "react-router-dom";
+import { Redirect, Route, Switch, withRouter } from "react-router-dom";
 import withTracker from "utils/withTracker";
 
 class MainContent extends Component {
   render() {
     const { location } = this.props;
     return (
-      <Main isHome={location.pathname === "/"}>
+      <Main isHome={location.pathname === Routes.Home}>
         <Switch>
-          <Route exact path="/" component={withTracker(HomeScreen)} />
-          <Route path="/play" component={withTracker(PlayScreen)} />
-          <Route path="/result" component={withTracker(ResultScreen)} />
+          <Route exact path={Routes.Home} component={withTracker(HomeScreen)} />
+          <Route exact path={Routes.Play} component={withTracker(PlayScreen)} />
+          <Route
+            exact
+            path={Routes.Results}
+            component={withTracker(ResultScreen)}
+          />
+          {/* 404: redirects to homepage */}
+          <Redirect to={Routes.Home} />
         </Switch>
       </Main>
     );