Todo with React Redux Typescript

mkdir todo-crudcd todo-crud// this creates typescript app with all necessary configurationnpx create-react-app todo --template typescriptcd todonpm i react-icons react-redux redux-persist @reduxjs/toolkit uuidcode .

src  /components    /AddTodo      AddTodo.tsx    /EditTodo      EditTodo.tsx    /FilterTodo      FilterTodo.tsx    /TodoList      /TodoItem        TodoItem.tsx      TodoList.tsx  /redux    todo.ts    store.ts

// Exampleconst AddTodo = ()=>{  return <div>AddTodo</div>}

import React from "react";import AddTodo from "./components/AddTodo/AddTodo";import EditTodo from "./components/EditTodo/EditTodo";import FilterTodo from "./components/FilterTodo/FilterTodo";import TodoList from "./components/TodoList/TodoList";// define the shape of the todo object and export it so that it'd be reusedexport interface TodoInterface {  id: string;  task: string;  completed: boolean;}const App = () => {  const [editTodo, setEditTodo] = useState<TodoInterface | null>(null);  return (    <main className="app">      <div className="app__wrapper">        <div className="app__header">          <h1 className="app__title">Todo App</h1>        </div>        <div className="app__inputs-box">// display edit todo when todo is being edited else display add todo form          {editTodo?.id ? <EditTodo /> : <AddTodo />}          <FilterTodo/>        </div>        <TodoList/>      </div>    </main>  );};export default App;

npm start

import {createSlice} from "@reduxjs/toolkit";import {TodoInterface} from "../App";// shape of todos arrayinterface TodosListInterface {    todos: TodoInterface[]}// initial todos stateconst initialState: TodosListInterface = {    todos: []}// todo slice with intial state and reducers to mutate state. They perform CRUD and also toggle todo. Redux-Toolkit uses Immutable.js which allows us to mutate state but on the background everything works as immutated state.export const todoSlice = createSlice({    name: "todo",    initialState,    reducers: {        addTodo: (state, {payload: {task, id, completed}})=>{                   state.todos.push({id, task, completed})        },        deleteTodo: (state, {payload: {todoId}})=>{            state.todos = state.todos.filter(todo=> todo.id !== todoId)        },        editTodo: (state, {payload: {editedTodo}})=>{            console.log(editedTodo)            state.todos = state.todos.map(todo => todo.id === editedTodo.id ? editedTodo : todo);        },        toggleTodo: (state, {payload: {todoId}})=>{            state.todos = state.todos.map(todo => todo.id === todoId ? {...todo, completed: !todo.completed} : todo);        },    }})// actions for telling reducer what to do with state, they can also include payload for changing stateexport const {addTodo, deleteTodo, editTodo, toggleTodo} = todoSlice.actions;// reducer to change the stateexport default todoSlice.reducer;

import { configureStore } from '@reduxjs/toolkit'import { persistStore, persistReducer } from 'redux-persist'import storage from 'redux-persist/lib/storage'import todoReducer from "./todo";const persistConfig = {  key: 'root',  storage,}const persistedReducer = persistReducer(persistConfig, todoReducer)// we are persisting todos on the local storageexport const store = configureStore({  reducer: {    todos: persistedReducer  },})const persistor = persistStore(store)export {persistor};export type RootState = ReturnType<typeof store.getState>export type AppDispatch = typeof store.dispatch

import React from "react";import ReactDOM from "react-dom/client";import { PersistGate } from "redux-persist/integration/react";import { persistor } from "./redux/store";import "./index.css";import App from "./App";import { store } from "./redux/store";import { Provider } from "react-redux";const root = ReactDOM.createRoot(  document.getElementById("root") as HTMLElement);// we are providing state as global and persisting specified stateroot.render(  <React.StrictMode>    <Provider store={store}>      <PersistGate persistor={persistor}>        <App />      </PersistGate>    </Provider>  </React.StrictMode>);

import React, { useState } from "react";import { useSelector } from "react-redux";import type { RootState } from "./redux/store";import AddTodo from "./components/AddTodo/AddTodo";import EditTodo from "./components/EditTodo/EditTodo";import FilterTodo from "./components/FilterTodo/FilterTodo";import TodoList from "./components/TodoList/TodoList";export interface TodoInterface {  id: string;  task: string;  completed: boolean;}const App = () => {// here we are subsribed to todos state and read it on each time it changes  const todos = useSelector((state: RootState) => state.todos.todos);// editTodo used to get todo that to be edited  const [editTodo, setEditTodo] = useState<TodoInterface | null>(null);// todoFilterValue is used to filter out todos on select  const [todoFilterValue, setTodoFilterValue] = useState("all");// gets filterValue from select and sets it in the state  const getTodoFilterValue = (filterValue: string) =>    setTodoFilterValue(filterValue);// gets todo that to be edited and sets it in the state  const getEditTodo = (editTodo: TodoInterface) => setEditTodo(editTodo);  return (    <main className="app">      <div className="app__wrapper">        <div className="app__header">          <h1 className="app__title">Todo App</h1>        </div>        <div className="app__inputs-box">          {editTodo?.id ? (            <EditTodo editTodo={editTodo} setEditTodo={setEditTodo} />          ) : (            <AddTodo />          )}          <FilterTodo getTodoFilterValue={getTodoFilterValue} />        </div>        <TodoList          todos={todos}          todoFilterValue={todoFilterValue}          getEditTodo={getEditTodo}          setEditTodo={setEditTodo}          editTodo={editTodo}        />      </div>    </main>  );};export default App;

import React from "react";import TodoItem from "./TodoItem/TodoItem";import { TodoInterface } from "../../App";type TodoListProps = {  todos: TodoInterface[];  todoFilterValue: string;  getEditTodo: (editTodo: TodoInterface) => void;  setEditTodo: (editTodo: TodoInterface) => void;  editTodo: TodoInterface | null;};const TodoList = ({  todos,  todoFilterValue,  editTodo,  getEditTodo,  setEditTodo,}: TodoListProps) => {  return (    <ul className="todo-list">      {todos        .filter((todo) => (todoFilterValue === "all" ? true : todo.completed))        .map((todo) => (          <TodoItem            key={todo.id}            todo={todo}            editTodo={editTodo}            getEditTodo={getEditTodo}            setEditTodo={setEditTodo}          />        ))}    </ul>  );};export default TodoList;

import React from "react";import { TodoInterface } from "../../../App";type TodoItemProps = {  todo: TodoInterface;  editTodo: TodoInterface | null;  getEditTodo: (editTodo: TodoInterface) => void;  setEditTodo: (editTodo: TodoInterface) => void;};const TodoItem = ({  todo,  editTodo,  getEditTodo,  setEditTodo,}: TodoItemProps) => {  return <li>TodoItem</li>};export default TodoItem;

import React from "react";type FilterTodoProps = {  getTodoFilterValue: (filterValue: string) => void;};const FilterTodo = ({ getTodoFilterValue }: FilterTodoProps) => {  return <div>FilterTodo</div>;};export default FilterTodo;

import React from "react";import { TodoInterface } from "../../App";type EditTodoProps = {  editTodo: TodoInterface;  setEditTodo: (editTodo: TodoInterface);};const EditTodo = ({ editTodo, setEditTodo }: EditTodoProps) => {  return <div>EditTodo</div>;};export default EditTodo;

import React, { useState } from "react";import { useDispatch } from "react-redux";import { v4 as uuidv4 } from "uuid";import { addTodo } from "../../redux/todo";const AddTodo = () => {  const dispatch = useDispatch();  const [task, setTask] = useState("");  const [error, setError] = useState("");/** this function prevents default behaviour page refresh on form submit and sets error to state if length of characters either less than 5 or greater than 50. Else if there'r no errors than it dispatches action to the reducer to add new task with unique id. And sets input to empty ""*/  const handleAddTaskSubmit = (e: React.FormEvent<HTMLFormElement>) => {    e.preventDefault();    if (task.trim().length < 5) {      setError("Minimum allowed task length is 5");    } else if (task.trim().length > 50) {      setError("Maximum allowed task length is 50");    } else {      dispatch(addTodo({ task, id: uuidv4(), completed: false }));      setTask("");    }  };/** this function removes error from the state if character length is greater than 5 and less than 50*/  const handleUpdateTodoChange = (e: React.ChangeEvent<HTMLInputElement>) => {    setTask(e.target.value);    if (task.trim().length > 5 && task.trim().length < 50) {      setError("");    }  };  return (    <form onSubmit={handleAddTaskSubmit} className="form">      <div className="form__control">        <input          onChange={handleUpdateTodoChange}          value={task}          type="text"          className="form__input"          placeholder="Add todo..."        />        {error && <p className="form__error-text">{error}</p>}      </div>      <button className="btn form__btn">Add Todo</button>    </form>  );};export default AddTodo;

import React from "react";import { MdModeEditOutline } from "react-icons/md";import { FaTrashAlt } from "react-icons/fa";import { useDispatch } from "react-redux";import { deleteTodo, toggleTodo } from "../../../redux/todo";import { TodoInterface } from "../../../App";type TodoItemProps = {  todo: TodoInterface;  editTodo: TodoInterface | null;  getEditTodo: (editTodo: TodoInterface) => void;  setEditTodo: (editTodo: TodoInterface) => void;};const TodoItem = ({  todo,  editTodo,  getEditTodo,  setEditTodo,}: TodoItemProps) => {  const dispatch = useDispatch();// This event handler toggles checkbox on and offconst handleToggleTodoChange = () =>    dispatch(toggleTodo({ todoId: todo.id }));/** This event handler deletes current todo on delete button clickIt also resets editTodo state if it's deleted*/  const handleDeleteTodoClick = () => {    dispatch(deleteTodo({ todoId: todo.id }));    if (todo.id === editTodo?.id) {      setEditTodo({ id: "", task: "", completed: false });    }  };// This event handler gets current todo which is to be edited  const handleGetEditTodoClick = () => getEditTodo(todo);  return (    <li className="todo-list__item">      <label        htmlFor={todo.id}        style={          todo.completed            ? { textDecoration: "line-through" }            : { textDecoration: "none" }        }        className="todo-list__label"      >        <input          onChange={handleToggleTodoChange}          checked={todo.completed ? true : false}          type="checkbox"          id={todo.id}          className="todo-list__checkbox"        />        {todo.task}      </label>      <div className="todo-list__btns-box">        <button onClick={handleGetEditTodoClick}className="todo-list__btn todo-list__edit-btn"><MdModeEditOutline /></button>        <button          onClick={handleDeleteTodoClick}          className="todo-list__btn todo-list__delete-btn"        ><FaTrashAlt /></button>      </div>    </li>  );};export default TodoItem;

import React, { useState, useEffect } from "react";import { useDispatch } from "react-redux";import { v4 as uuidv4 } from "uuid";import { editTodo as updateTodo } from "../../redux/todo";import { TodoInterface } from "../../App";type EditTodoProps = {  editTodo: TodoInterface;};const EditTodo = ({ editTodo }: EditTodoProps) => {  const dispatch = useDispatch();  const [task, setTask] = useState("");  const [error, setError] = useState("");// effect hook is going to set new task on each time user click todo edit button  useEffect(() => {    setTask(editTodo.task);  }, [editTodo]);// This event handler dispatches action to update edited todo and resets editTodo state so that form switches from edit todo to add todo   const handleEditTaskSubmit = (e: React.FormEvent<HTMLFormElement>) => {    e.preventDefault();    if (task.trim().length < 5) {      setError("Minimum allowed task length is 5");    } else if (task.trim().length > 50) {      setError("Maximum allowed task length is 50");    } else {      dispatch(updateTodo({ editedTodo: { ...editTodo, task } }));      setEditTodo({ id: "", task: "", completed: false });      setTask("");    }  };// this event handler removes error if character length greater than 5 and less than 50  const handleUpdateTodoChange = (e: React.ChangeEvent<HTMLInputElement>) => {    setTask(e.target.value);    if (task.trim().length > 5 && task.trim().length < 50) {      setError("");    }  };  console.log(editTodo);  return (    <form onSubmit={handleEditTaskSubmit} className="form">      <div className="form__control">        <input          onChange={handleUpdateTodoChange}          value={task}          type="text"          className="form__input"          placeholder="Edit todo..."        />        {error && <p className="form__error-text">{error}</p>}      </div>      <button className="btn form__btn">Edit Todo</button>    </form>  );};export default EditTodo;

import React, { useState } from "react";type FilterTodoProps = {  getTodoFilterValue: (filterValue: string) => void;};const FilterTodo = ({ getTodoFilterValue }: FilterTodoProps) => {  const [filterTodoVal, setFilterTodoVal] = useState("all");// This event handler updates current select option and passes currently selected option value to App component  const handleFilterTodoChanges = (e: React.ChangeEvent<HTMLSelectElement>) => {    setFilterTodoVal(e.target.value);    getTodoFilterValue(e.target.value);  };  return (    <select      onChange={handleFilterTodoChanges}      value={filterTodoVal}      className="filter-todo"    >      <option value="all">All</option>      <option value="completed">Completed</option>    </select>  );};export default FilterTodo;