From 3d06ff065d5b957e8439021997cf778e5e84f1aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20Ytterstr=C3=B6m?= <anders.ytterstrom@kundo.se>
Date: Wed, 21 Nov 2018 14:58:11 +0100
Subject: [PATCH] Sort albums by year, artist or id

 * The store gets a sort key.
 * Action creators and actions are added to set sort key.
 * A component is added which dispatches a reducer to update the state.
 * Album list get the sort key from the state and sort albums on render.
---
 src/actions/index.js          |  8 ++++++++
 src/components/app.js         |  2 ++
 src/components/sort-select.js | 20 ++++++++++++++++++++
 src/containers/sort-select.js | 14 ++++++++++++++
 src/reducers/index.js         |  2 ++
 src/reducers/sortKey.js       | 10 ++++++++++
 6 files changed, 56 insertions(+)
 create mode 100644 src/components/sort-select.js
 create mode 100644 src/containers/sort-select.js
 create mode 100644 src/reducers/sortKey.js

diff --git a/src/actions/index.js b/src/actions/index.js
index 842104b..77c01e7 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -1,5 +1,6 @@
 export const INIT_ALBUM_LIST = 'INIT_ALBUM_LIST';
 export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
+export const SET_SORT_KEY = 'SET_SORT_KEY';
 
 export const initAlbumList = payload => ({
     type: INIT_ALBUM_LIST,
@@ -12,3 +13,10 @@ export const setVisibilityFilter = filter => ({
         filter,
     }
 });
+
+export const setSortKey = key => ({
+    type: SET_SORT_KEY,
+    payload: {
+        key,
+    }
+});
diff --git a/src/components/app.js b/src/components/app.js
index 97fceaa..ed8132c 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import AlbumListContainer from '../containers/album-list';
 import FilterInputContainer from '../containers/filter-input';
+import SortSelectContainer from '../containers/sort-select';
 
 export default class App extends Component {
     render() {
@@ -8,6 +9,7 @@ export default class App extends Component {
             <div>
                 <header>
                     <h1>Brütal Legend</h1>
+                    <SortSelectContainer />
                     <FilterInputContainer />
                 </header>
                 <AlbumListContainer />
diff --git a/src/components/sort-select.js b/src/components/sort-select.js
new file mode 100644
index 0000000..24f6fca
--- /dev/null
+++ b/src/components/sort-select.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+export default class SortSelect extends Component {
+    render() {
+        const { value, handleOnChange } = this.props;
+        return (
+            <div>
+                <label htmlFor="sortBy">Sortera efter</label>
+                <select
+                    id="sortBy"
+                    value={value}
+                    onChange={evt => handleOnChange(evt.target.value)}>
+                    <option value="id">Inköpsdatum</option>
+                    <option value="artist">Artist</option>
+                    <option value="year">År</option>
+                </select>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/containers/sort-select.js b/src/containers/sort-select.js
new file mode 100644
index 0000000..7828c63
--- /dev/null
+++ b/src/containers/sort-select.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import SortSelect from '../components/sort-select';
+import {setSortKey} from "../actions";
+
+const mapStateToProps = state => ({
+    value: state.sortKey
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  handleOnChange: (key) => dispatch(setSortKey(key))
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SortSelect);
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 228f126..5139c23 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux';
 import albums from './albums';
 import visibilityFilter from './visibilityFilter';
+import sortKey from "./sortKey";
 
 export default combineReducers({
     albums,
     visibilityFilter,
+    sortKey,
 });
diff --git a/src/reducers/sortKey.js b/src/reducers/sortKey.js
new file mode 100644
index 0000000..4e04afa
--- /dev/null
+++ b/src/reducers/sortKey.js
@@ -0,0 +1,10 @@
+import {SET_SORT_KEY} from '../actions';
+
+export default (state = 'id', action) => {
+    switch (action.type) {
+        case SET_SORT_KEY:
+            return action.payload.key;
+        default:
+            return state;
+    }
+};