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 {
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 (
+
+
+
+
+ );
+ }
+}
\ 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;
+ }
+};