Scalable frontend challenge

package.json

@@ -39,6 +39,7 @@
     "react-redux": "^5.0.6",
     "react-test-renderer": "^15.6.1",
     "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0",
     "style-loader": "0.18.2",
     "sw-precache-webpack-plugin": "0.11.3",
     "url-loader": "0.5.9",

src/App.css

@@ -1,7 +1 @@
-.block {
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  background: red;
-  border: 1px solid #000;
-}
+

src/App.js

@@ -1,31 +1,40 @@
 import React, { Component } from "react";
-import UserCreator from "./UserCreator";
 import { connect } from "react-redux";
+import RandomGif from "./RandomGif";
+import RandomGifPair from "./RandomGifPair";
+import RandomGifPairOfPairs from "./RandomGifPairOfPairs";
+import { increment, toggleButton } from "./state/app";
 
 class App extends Component {
   render() {
-    const { users } = this.props;
+    const { count, increment, toggleButton, buttonEnabled } = this.props;
+
     return (
       <div>
-        <UserCreator />
-        <UserCreator />
-        <UserCreator />
-        <div id="userList">
-          {users.map(({ name }) =>
-            <div key={name} className="user">
-              {name}
-            </div>
-          )}
-        </div>
+        <h1>
+          {count}
+        </h1>
+        <RandomGif onLoad={increment} />
+        <RandomGifPair onLoad={increment} />
+        <RandomGifPairOfPairs onLoad={increment} />
+        <button style={{ background: buttonEnabled ? "green" : "red" }} onClick={toggleButton}>
+          Toggle
+        </button>
       </div>
     );
   }
 }
 
 function mapStateToProps(state) {
   return {
-    users: state.users
+    count: state.app.count,
+    buttonEnabled: state.app.buttonEnabled
   };
 }
 
-export default connect(mapStateToProps)(App);
+const mapDispatchToProps = {
+  increment: increment,
+  toggleButton: toggleButton
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);

src/RandomGif/actions.js

@@ -0,0 +1,15 @@
+import api from "../api";
+export const LOADING = "LOADING";
+export const LOADED = "LOADED";
+export const SET_SRC = "SET_SRC";
+
+const loading = () => ({ type: LOADING });
+const loaded = () => ({ type: LOADED });
+
+const setGifSrc = src => ({ type: SET_SRC, src });
+
+export const getGif = () => (dispatch, getState) => {
+  dispatch(loading());
+
+  api.getRandomGifUrl().then(url => dispatch(setGifSrc(url))).then(() => dispatch(loaded()));
+};

src/RandomGif/index.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { connect } from "react-redux";
+import { getGif, LOADED } from "./actions";
+import reducer from "./reducer";
+import isolate from "../utils/isolate";
+
+const RandomGif = ({ loading, src, getGif }) =>
+  <div style={{ width: "100px" }}>
+    <button onClick={getGif} disabled={loading}>
+      {loading ? "Loading..." : "Get Gif"}
+    </button>
+    {src &&
+      <div>
+        <img alt="Gif" src={src} style={{ marginTop: "5px" }} />
+      </div>}
+  </div>;
+
+const mapStateToProps = state => ({
+  loading: state.loading,
+  src: state.src
+});
+
+const actionCreators = { getGif };
+
+export default isolate(reducer, {
+  [LOADED]: (action, props, getState) => props.onLoad()
+})(connect(mapStateToProps, actionCreators)(RandomGif));

src/RandomGif/reducer.js

@@ -0,0 +1,14 @@
+import { LOADING, SET_SRC } from "./actions";
+
+const initialState = { loading: false };
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case LOADING:
+      return { ...state, loading: true };
+    case SET_SRC:
+      return { ...state, src: action.src, loading: false };
+    default:
+      return state;
+  }
+};

src/RandomGifPair/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+import RandomGif from "../RandomGif";
+
+export default ({ onLoad }) =>
+  <div>
+    <RandomGif onLoad={onLoad} />
+    <RandomGif onLoad={onLoad} />
+  </div>;

src/RandomGifPairOfPairs/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+import RandomGifPair from "../RandomGifPair";
+
+export default ({ onLoad }) =>
+  <div>
+    <RandomGifPair onLoad={onLoad} />
+    <RandomGifPair onLoad={onLoad} />
+  </div>;

src/api.js

@@ -0,0 +1,7 @@
+export default {
+  getRandomGifUrl() {
+    return fetch(`https://api.giphy.com/v1/gifs/random?api_key=26ae311d361143eda202a3670a1b0c63`)
+      .then(response => response.json())
+      .then(json => json.data.fixed_width_small_url);
+  }
+};

src/state/app.js

@@ -1,5 +1,22 @@
-export default function(state = [], action) {
+const INCREMENT = "INCREMENT";
+export function increment() {
+  return { type: INCREMENT };
+}
+
+const TOGGLE_BUTTON = "TOGGLE_BUTTON";
+export function toggleButton() {
+  return { type: TOGGLE_BUTTON };
+}
+
+const initialState = { count: 0, buttonEnabled: false };
+
+export default function(state = initialState, action) {
   switch (action.type) {
+    case INCREMENT:
+      const amountToIncrement = state.buttonEnabled ? 2 : 1;
+      return { ...state, count: state.count + amountToIncrement };
+    case TOGGLE_BUTTON:
+      return { ...state, buttonEnabled: !state.buttonEnabled };
     default:
       return state;
   }

src/store.js

@@ -1,13 +1,11 @@
 import { combineReducers, createStore } from "redux";
 
 import appReducer from "./state/app";
-import usersReducer from "./state/users";
 
 export default () =>
   createStore(
     combineReducers({
-      app: appReducer,
-      users: usersReducer
+      app: appReducer
     }),
     window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
   );

src/utils/isolate.js

@@ -0,0 +1,48 @@
+import React, { Component } from "react";
+import { createStore, compose, applyMiddleware } from "redux";
+import { Provider } from "react-redux";
+import thunk from "redux-thunk";
+
+export default function isolate(reducer, actionsToProps = {}) {
+  return function isolateComponent(WrappedComponent) {
+    return class IsolatedComponent extends Component {
+      constructor(props) {
+        super(props);
+
+        this.displayName = `Isolated(${WrappedComponent.displayName})`;
+
+        const composeEnhancers =
+          window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+            name: this.displayName
+          }) || compose;
+
+        const actionsToPropsMiddleware = store => next => action => {
+          const result = next(action);
+          if (actionsToProps[action.type]) {
+            actionsToProps[action.type](action, this.props, store.getState);
+          }
+          return result;
+        };
+
+        /*
+         * This might be worth taking is as a parameter
+         * even though initializing a new store per component might be a bit tedious,
+         * people could a function for that like I have in store.js to make the props API like
+         * <RandomGif store={createStore()} onLoad={increment} />
+         */
+
+        this.store = createStore(
+          reducer,
+          composeEnhancers(applyMiddleware(thunk, actionsToPropsMiddleware))
+        );
+      }
+      render() {
+        return (
+          <Provider store={this.store}>
+            <WrappedComponent {...this.props} />
+          </Provider>
+        );
+      }
+    };
+  };
+}

yarn.lock

@@ -5240,6 +5240,10 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
+redux-thunk@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5"
+
 redux@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"