Add loader and retry to get puzzle data action. Will retry every 5 seconds for 3 minutes.

Author: mschmidt712

applications/kr8sswordz-pages/src/actions/actionTypes.js

@@ -1,4 +1,5 @@
 export const puzzle = {
+  PUZZLE_LOADING: 'PUZZLE_LOADING',
   CLEAR_PUZZLE_DATA: 'CLEAR_PUZZLE_DATA',
   GET_PUZZLE_DATA_SUCCESS: 'GET_PUZZLE_DATA_SUCCESS',
   GET_PUZZLE_DATA_FAILURE: 'GET_PUZZLE_DATA_FAILURE',
@@ -10,6 +11,7 @@ export const puzzle = {
 };
 
 export const websocket = {
+  CONNECTION_LOADING: 'CONNECTION_LOADING',
   CONNECT_TO_SOCKET: 'CONNECT_TO_SOCKET',
   DISCONNECT_FROM_SOCKET: 'DISCONNECT_FROM_SOCKET',
   GET_PODS: 'GET_PODS',

applications/kr8sswordz-pages/src/actions/puzzleActions.js

@@ -1,3 +1,4 @@
+import fetchRetry from 'fetch-retry';
 import * as actions from './actionTypes';
 import constants from '../constants';
 const baseUrl = `http://puzzle.${constants.minikubeIp}.xip.io/puzzle/v1`;
@@ -13,7 +14,11 @@ export function getPuzzleDataFailure () {
 
 export function getPuzzleData () {
   return dispatch => {
-    return fetch(`${baseUrl}/crossword`)
+    dispatch({type: actions.puzzle.PUZZLE_LOADING});
+    return fetchRetry(`${baseUrl}/crossword`, {
+      retries: 36,
+      retryDelay: 5000
+    })
       .then((resp) => {
         return resp.json();
       })

applications/kr8sswordz-pages/src/actions/webSocketActions.js

@@ -25,6 +25,7 @@ export function getPods () {
 
 export function connectToSocket () {
   return dispatch => {
+    dispatch({type: types.websocket.CONNECTION_LOADING});
     socket.open(() => {
       dispatch({type: 'CONNECT_TO_SOCKET'});
     });

applications/kr8sswordz-pages/src/components/App.js

@@ -1,13 +1,23 @@
 import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
 import Header from './shared/Header';
+import Loader from './shared/Loader';
 
 /**
  * The App component for the project.
  */
 class App extends React.Component {
   render () {
+    let loading = false;
+    if (this.props.webSocketLoading || this.props.puzzleLoading) {
+      loading = true;
+    }
+
     return (
       <div>
+        {loading &&
+          <Loader />
+        }
         <Header />
         {this.props.children}
       </div>
@@ -19,7 +29,22 @@ App.propTypes = {
   /**
    * The child elements of the app.
    */
-  children: PropTypes.element
+  children: PropTypes.element,
+  /**
+   * A boolean indicating whether the websocket connection is loaded or not.
+   */
+  webSocketLoading: PropTypes.bool,
+  /**
+   * A boolean indicating whether the puzzle is loaded or not.
+   */
+  puzzleLoading: PropTypes.bool
 };
 
-export default App;
+function mapStateToProps (state) {
+  return {
+    webSocketLoading: state.webSocket.loading,
+    puzzleLoading: state.puzzle.loading
+  };
+}
+
+export default connect(mapStateToProps, null)(App);

applications/kr8sswordz-pages/src/components/shared/Loader.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Loader (props) {
+  return (
+    <div className="background-fade item-center">
+        <div className="loader"></div>
+    </div>
+  );
+}
+
+export default Loader;

applications/kr8sswordz-pages/src/reducers/puzzleReducer.js

@@ -5,14 +5,21 @@ const initialState = {
   fromMongo: false,
   sendingData: false,
   puzzleId: '',
-  puzzleData: []
+  puzzleData: [],
+  loading: false
 };
 
 export default function puzzleReducer (state = initialState, action) {
   switch (action.type) {
+    case types.puzzle.PUZZLE_LOADING: {
+      return Object.assign({}, state, {
+        loading: true
+      });
+    }
     case types.puzzle.GET_PUZZLE_DATA_SUCCESS: {
       return Object.assign({}, state, {
-        puzzleData: action.data.words
+        puzzleData: action.data.words,
+        loading: false
       });
     }
     case types.puzzle.GET_PUZZLE_DATA_FAILURE: {

applications/kr8sswordz-pages/src/reducers/websocketReducer.js

@@ -3,14 +3,21 @@ import * as types from '../actions/actionTypes';
 const initialState = {
   connected: false,
   pods: [],
-  activePod: undefined
+  activePod: undefined,
+  loading: false
 };
 
 export default function websocketReducer (state = initialState, action) {
   switch (action.type) {
+    case types.websocket.CONNECTION_LOADING: {
+      return Object.assign({}, state, {
+        loading: true
+      });
+    }
     case types.websocket.CONNECT_TO_SOCKET: {
       return Object.assign({}, state, {
-        connected: true
+        connected: true,
+        loading: false
       });
     }
     case types.websocket.DISCONNECT_FROM_SOCKET: {
@@ -19,14 +26,20 @@ export default function websocketReducer (state = initialState, action) {
       });
     }
     case types.websocket.GET_PODS: {
-      return Object.assign({}, state, { pods: action.pods });
+      return Object.assign({}, state, {
+        pods: action.pods,
+        loading: false
+      });
     }
     case types.websocket.POD_UP: {
       if (state.pods.includes(action.pod)) {
         return state;
       } else {
         const pods = [...state.pods, action.pod];
-        return Object.assign({}, state, { pods });
+        return Object.assign({}, state, {
+          pods,
+          loading: false
+        });
       }
     }
     case types.websocket.POD_DOWN: {

applications/kr8sswordz-pages/src/styles/molecules/_loader.scss

@@ -0,0 +1,41 @@
+@import '../utils/variables';
+
+.loader {
+    border: 16px solid $brand-gray;
+    border-top: 16px solid $kubernetes-blue;
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    100% { transform: rotate(360deg); }
+}
+
+.item-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin fadein-opacity($fade-time: 1s) {
+            animation: fadein $fade-time ease-in-out forwards;
+}
+
+.background-fade {
+  @include fadein-opacity(250ms);
+  position: fixed;
+  top: 0;
+  left: 0;
+  min-height: 100%;
+  width: 100%;
+  background-color: $transparent-black;
+  z-index: 11;
+}
+
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}

applications/kr8sswordz-pages/src/styles/molecules/_molecules.scss

@@ -6,3 +6,4 @@
 @import './image-column';
 @import './puzzle';
 @import './slider-container';
+@import './loader';

applications/kr8sswordz-pages/src/styles/utils/_variables.scss

@@ -2,6 +2,7 @@
 $true-white: #fff;
 $off-white: #eee;
 $kubernetes-blue: #158d8b;
+$transparent-black: rgba(0,0,0,0.2);
 $base-font-size: 1vw;
 $brand-blue: #303e48;
 $brand-gray: #dee0e2;

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "cmdify": "^0.0.4",
     "colors": "^1.1.2",
+    "fetch-retry": "^1.1.0",
     "inquirer": "^3.0.6",
     "rx": "^4.1.0",
     "yamljs": "^0.2.8"
@@ -17,7 +18,7 @@
     "part1": "node start.js part1.yml",
     "part2": "node start.js part2.yml",
     "part3": "node start.js part3.yml",
-    "part4": "node start.js part4.yml"    
+    "part4": "node start.js part4.yml"
   },
   "repository": {
     "type": "git",