This is technical project assignment (TPA5) - Todo App ReactJs - Redux from the Skilvul Bootcamp Fullstack of the Innovation Women Program 2023.

• Overview
  • Specs
  • Scheme
  • Screenshot
  • Link
• My process
  • Built with
  • What I learned
• Author

1. Create a Todo List application using React.js and state management Redux
2. Users can add 1 new Todo List
3. Users can see all Todo Lists (All) both active and completed
4. Users can view/filter the Todo List with active status
5. Users can view/filter the Todo List with completed status
6. Users can delete Todo List
7. Users can edit the Todo List

• The user was adding a todo, but the user changed his mind. User wants to edit todo / delete todo / view todo filter, automatically the process of adding todo is cancelled. This also applies to the todo editing process.

• The user is editing a todo, the user deletes all the content, then clicks save, the todo editing process is automatically cancelled. This also applies to the process of adding todos

• Live Site URL: Todo-App

• React Js
• Redux
• Tailwind

The recaps noted here are basic things that I rarely use.

• change useState to global state:

  // from this ...
  const [todo, setTodo] = useState('')
  const [isEditing, setIsEditing] = useState(false);
  const [editingTodoId, setEditingTodoId] = useState(null);
  const [editedTodoContent, setEditedTodoContent] = useState('');

  // to this ...
  editTodoId: null,
  editTodoContent: "",
  isEditing: false,
  inputTodoContent: "",
  isEmpty: false,

• create click management (if I click on this, then it will ... ) :

// form this ... (without redux) 
  const deleteButton = (id) => {
    if (todo.trim() !== "") {
      // If the user is add todo, cancel add todo
      setTodo("");
    } else if (isEditing) {
      // If the user is editing, cancel editing
      setEditingTodoId(null);
      setIsEditing(false);
      setEditedTodoContent("");
    } else {
      // If the user is not editing, process delete todo
      dispatch(deleteTodo(id));
    }
  }

// to this ... (with redux)
  const deleteButton = (id) => {
    if (inputTodoContent.trim() !== "") {
      dispatch(cancelAdd())
    } else if (isEditing) {
      dispatch(cancelEdit())
    } else {
      dispatch(deleteTodo(id))
    }
  }

• When using redux for simple applications, using global state is very helpful. I thought about adding PropTypes, but for a simple app like TodoApp, it's not necessary. The reason is, each component can be connected to each other by utilizing Redux's global status. However, that doesn't mean that PropTypes are useless, but they will be very useful for large-scale applications. Also keep in mind the functions of state and props are different, so this will be the reason when to use them to write clean and readable code.

• Skilvul Profile - @fidaatag
• Twitter - @fidaatag
• Linkedin - Fidaa Mustaghfiroh