Functioning React Redux To Do list app, decoupled code

Author: asiakay

.vscode/launch.json

@@ -0,0 +1,21 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "command": "npm start",
+            "name": "Run npm start",
+            "request": "launch",
+            "type": "node-terminal"
+        },
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

package-lock.json

@@ -7,6 +7,8 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "classname": "0.0.0",
+    "classnames": "^2.2.6",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-redux": "^7.2.1",

package.json

@@ -0,0 +1,16 @@
+import React from 'react';
+import AddTodo from './components/AddTodo';
+import TodoList from './components/TodoList';
+import VisibilityFilters from './components/VisibilityFilters';
+import "./styles.css";
+
+export default function TodoApp(){
+    return (
+        <div className="todo-app">
+            <h1>Todo List</h1>
+            <AddTodo />
+            <TodoList />
+            <VisibilityFilters />
+        </div>
+    );
+}

src/TodoApp.js

@@ -1,8 +1,8 @@
-import { configureStore } from '@reduxjs/toolkit';
-import counterReducer from '../features/counter/counterSlice';
+// import { configureStore } from '@reduxjs/toolkit';
+// import counterReducer from '../features/counter/counterSlice';
 
-export default configureStore({
-  reducer: {
-    counter: counterReducer,
-  },
-});
+// export default configureStore({
+//   reducer: {
+//     counter: counterReducer,
+//   },
+// });

src/app/store.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { connect } from "react-redux";
+import { addTodo } from "../redux/actions";
+
+class AddTodo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { input: "" };
+  }
+
+  updateInput = input => {
+    this.setState({ input });
+  };
+
+  handleAddTodo = () => {
+    this.props.addTodo(this.state.input);
+    this.setState({ input: "" });
+  };
+
+  render() {
+    return (
+      <div>
+        <input
+          onChange={e => this.updateInput(e.target.value)}
+          value={this.state.input}
+        />
+        <button className="add-todo" onClick={this.handleAddTodo}>
+          Add Todo
+        </button>
+      </div>
+    );
+  }
+}
+
+export default connect(
+  null,
+  { addTodo }
+)(AddTodo);
+// export default AddTodo;

src/components/AddTodo.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import cx from "classnames";
+import { toggleTodo } from "../redux/actions";
+
+const Todo = ({ todo, toggleTodo }) => (
+  <li className="todo-item" onClick={() => toggleTodo(todo.id)}>
+    {todo && todo.completed ? "👌" : "👋"}{" "}
+    <span
+      className={cx(
+        "todo-item__text",
+        todo && todo.completed && "todo-item__text--completed"
+      )}
+    >
+      {todo.content}
+    </span>
+  </li>
+);
+
+// export default Todo;
+export default connect(
+  null,
+  { toggleTodo }
+)(Todo);

src/components/Todo.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { connect } from "react-redux";
+import Todo from "./Todo";
+// import { getTodos } from "../redux/selectors";
+import { getTodosByVisibilityFilter } from "../redux/selectors";
+import { VISIBILITY_FILTERS } from "../constants";
+
+const TodoList = ({ todos }) => (
+  <ul className="todo-list">
+    {todos && todos.length
+      ? todos.map((todo, index) => {
+          return <Todo key={`todo-${todo.id}`} todo={todo} />;
+        })
+      : "No todos, yay!"}
+  </ul>
+);
+
+// const mapStateToProps = state => {
+//   const { byIds, allIds } = state.todos || {};
+//   const todos =
+//     allIds && state.todos.allIds.length
+//       ? allIds.map(id => (byIds ? { ...byIds[id], id } : null))
+//       : null;
+//   return { todos };
+// };
+
+const mapStateToProps = state => {
+  const { visibilityFilter } = state;
+  const todos = getTodosByVisibilityFilter(state, visibilityFilter);
+  return { todos };
+  //   const allTodos = getTodos(state);
+  //   return {
+  //     todos:
+  //       visibilityFilter === VISIBILITY_FILTERS.ALL
+  //         ? allTodos
+  //         : visibilityFilter === VISIBILITY_FILTERS.COMPLETED
+  //           ? allTodos.filter(todo => todo.completed)
+  //           : allTodos.filter(todo => !todo.completed)
+  //   };
+};
+// export default TodoList;
+export default connect(mapStateToProps)(TodoList);

src/components/TodoList.js

@@ -0,0 +1,38 @@
+import React from "react";
+import cx from "classnames";
+import { connect } from "react-redux";
+import { setFilter } from "../redux/actions";
+import { VISIBILITY_FILTERS } from "../constants";
+
+const VisibilityFilters = ({ activeFilter, setFilter }) => {
+  return (
+    <div className="visibility-filters">
+      {Object.keys(VISIBILITY_FILTERS).map(filterKey => {
+        const currentFilter = VISIBILITY_FILTERS[filterKey];
+        return (
+          <span
+            key={`visibility-filter-${currentFilter}`}
+            className={cx(
+              "filter",
+              currentFilter === activeFilter && "filter--active"
+            )}
+            onClick={() => {
+              setFilter(currentFilter);
+            }}
+          >
+            {currentFilter}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+const mapStateToProps = state => {
+  return { activeFilter: state.visibilityFilter };
+};
+// export default VisibilityFilters;
+export default connect(
+  mapStateToProps,
+  { setFilter }
+)(VisibilityFilters);

src/components/VisibilityFilters.js

@@ -0,0 +1,5 @@
+export const VISIBILITY_FILTERS = {
+    ALL: "all",
+    COMPLETED: "completed",
+    INCOMPLETE: 'incomplete'
+};