Todo React-Redux

Todo React-Redux

by Boris Kachanov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
    <title>Todo App React</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'Courgette', cursive;
  background: #f5f5f5;
}

h2 {
  margin-bottom: 20px;
}

.input {
  font-family: 'Courgette', cursive;
  font-size: 20pt;
  text-transform: uppercase;
  margin-left: 20px;
  margin-top: 20px;
  margin-right: 10px;
  height: 30px;
  width: 200px;
  background: #ffffff;
}

.addButton  {
  width: 100px;
  font-weight: 700;
  color: white;
  text-decoration: none;
  padding: .8em 1em calc(.8em + 3px);
  border-radius: 3px;
  background: rgb(64,199,129);
  transition: 0.2s;
  height: 36px;
  position: absolute;
  margin-top: 20px;
  font-family: 'Courgette', cursive;
  font-size: large;
  padding-top: 7px;

}

.addButton:hover {
  background: rgb(53, 167, 110);
}

.addButton:active {
  background: rgb(33,147,90);
  box-shadow: 0 3px rgb(33,147,90) inset;
}

h2 {
  font-family: 'Courgette', cursive;
  font-size: 50pt;
  margin-left: 20px;
}

.todoList {
  margin: 20px;
  width: 305px;
  vertical-align: middle;
  background: white;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.todoItem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 20pt;
  text-transform: uppercase;
  padding: 2px;
  width: 300px;
  height: 30px;
  border: 1px solid #f5f5f5;
  text-align: justify;
  white-space: nowrap;
}

.todoControlButtons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 50px;
  height: 25px;
  margin-top: -4px;

}

.deleteButton {
  margin-right: 5px;
  color: red;
  cursor: pointer;
  user-select: none;
  margin-top: 3px;
}

.readyButton {
  color: greenyellow;
  cursor: pointer;
  user-select: none;
  font-size: 23pt;
  margin-right: 5px;
}


.navigation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 150px;
  margin-left: 65px;
  margin-top: -20px;
  font-family: 'Courgette', cursive;
  font-size: 18pt;
  color: red;
  user-select: none;
  cursor:...

Babel + JSX

import {Provider} from "react-redux";
import {createStore} from "redux";
import {bindActionCreators} from "redux";
import {connect} from "react-redux";


const initialState = (function () {
    const filters = [
        function currentTodos(item) {
            return item.done === false;
        },
        function doneTodos(item) {
            return item.done === true;
        },
        function allTodos() {
            return true
        }
    ];

    return {
        todoArray: [],
        filters,
        currentFilter: filters[0]
    }

})();




function todoList(state = {initialState}, action) {
    switch (action.type) {
        case "ADD_TODO":
            return {
                state,
                todoArray: [
                    ...state.todoArray,
                    {
                        value: action.payload,
                        done: false,
                        id: state.todoArray.length
                    }
                ]
            };

        case "DELETE_TODO":
            let index = action.payload;
            state.todoArray.splice(index, 1);
            state.todoArray.forEach(function (todo, index) {
                todo.id = index;
            });

            return {
                ...state, todoArray: [...state.todoArray]
            };

        case "DONE_TODO":
            index = action.payload;
            state.todoArray[index].done = true;

            return {
                ...state, todoArray: [...state.todoArray]
            };

        case "SHOW_DONE":
            state.currentFilter = state.filters[1];

            return {
                ...state, currentFilter: state.currentFilter
            };

        case "SET_CURRENT_FILTER":
            return {
                ...state, currentFilter: state.filters[action.payload],
                currentFilterNumber: action.payload
            };

        case "SHOW_CURRENT":
            state.currentFilter = state.filters[0];

            return {
   ...