From 7825367fa4e776bc563502e68fdb4dcfd9845e07 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 1 Dec 2018 20:01:19 -0800
Subject: [PATCH] Add Random button

---
 src/App.css                 | 22 ++++++++++++++++++++++
 src/App.js                  | 12 +++++++++++-
 src/redux/actionCreators.js |  4 ++++
 src/redux/epics.js          | 10 +++++++++-
 src/redux/selectors.js      |  7 +++++++
 5 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/App.css b/src/App.css
index 445b4580..7ab2a854 100644
--- a/src/App.css
+++ b/src/App.css
@@ -24,6 +24,27 @@ a {
   text-decoration: none;
 }
 
+button {
+  border: none;
+  padding: 0;
+  margin: 0;
+  background-color: rgba(247, 181, 76, 1);
+  margin-right: 25px;
+  border: none;
+  font-size: 100%;
+  box-sizing: border-box;
+  border-width: 0.125rem;
+  line-height: 1.15;
+  height: 100%;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  border-radius: 9999px;
+  outline: none;
+  color: #4e4102;
+  font-weight: 550;
+  cursor: pointer;
+}
+
 #search {
   width: 100%;
   position: fixed;
@@ -49,6 +70,7 @@ a {
 #search input {
   margin-right: 25px;
   max-width: 400px;
+  min-width: 100px;
   border: none;
   font-size: 100%;
   box-sizing: border-box;
diff --git a/src/App.js b/src/App.js
index 9c2209de..fc5ac3a5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -148,6 +148,14 @@ class App extends React.Component {
             value={this.props.searchQuery || ""}
             placeholder={"Search..."}
           />
+          <span style={{ flexGrow: 1 }} />
+          <button
+            onClick={() => {
+              this.props.requestRandomSkin();
+            }}
+          >
+            Random
+          </button>
         </div>
         <div
           id="infinite-skins"
@@ -175,12 +183,14 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  // TODO: Extract to action creator
   setSelectedSkin(hash, position) {
     dispatch(Actions.selectedSkin(hash, position));
   },
   setSearchQuery(query) {
     dispatch(Actions.searchQueryChanged(query));
+  },
+  requestRandomSkin() {
+    dispatch(Actions.requestedRandomSkin());
   }
 });
 export default connect(
diff --git a/src/redux/actionCreators.js b/src/redux/actionCreators.js
index cb06676c..b1acb2ce 100644
--- a/src/redux/actionCreators.js
+++ b/src/redux/actionCreators.js
@@ -10,6 +10,10 @@ export function selectedSkin(hash, position) {
   return { type: "SELECTED_SKIN", hash, position };
 }
 
+export function requestedRandomSkin() {
+  return { type: "REQUESTED_RANDOM_SKIN" };
+}
+
 export function gotNewMatchingHashes(matchingHashes) {
   return { type: "GOT_NEW_MATCHING_HASHES", matchingHashes };
 }
diff --git a/src/redux/epics.js b/src/redux/epics.js
index b3db3263..8b539acf 100644
--- a/src/redux/epics.js
+++ b/src/redux/epics.js
@@ -1,6 +1,7 @@
 import { combineEpics } from "redux-observable";
 import { of, from, empty } from "rxjs";
 import * as Actions from "./actionCreators";
+import * as Selectors from "./selectors";
 import { filter, switchMap, map } from "rxjs/operators";
 import { search } from "../algolia";
 
@@ -39,4 +40,11 @@ const searchEpic = actions =>
     })
   );
 
-export default combineEpics(searchEpic, urlChangedEpic);
+const randomSkinEpic = (actions, states) =>
+  actions.pipe(
+    filter(action => action.type === "REQUESTED_RANDOM_SKIN"),
+    map(() => {
+      return Actions.selectedSkin(Selectors.getRandomSkinHash(states.value));
+    })
+  );
+export default combineEpics(searchEpic, urlChangedEpic, randomSkinEpic);
diff --git a/src/redux/selectors.js b/src/redux/selectors.js
index f6dedb59..f3832dd0 100644
--- a/src/redux/selectors.js
+++ b/src/redux/selectors.js
@@ -28,6 +28,13 @@ export function getMatchingSkinHashes(state) {
   return hashes.filter(hash => state.matchingHashes.has(hash));
 }
 
+export function getRandomSkinHash() {
+  const keys = Object.keys(skins);
+  const numberOfSkins = keys.length;
+  const randomIndex = Math.floor(Math.random() * numberOfSkins);
+  return keys[randomIndex];
+}
+
 export function getUrl(state) {
   const hash = getSelectedSkinHash(state);
   const query = getSearchQuery(state);