Add Random button

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;

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(

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 };
 }

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);

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);