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..."}
/>
+
+
({
});
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);