Todo app using React and Axios (Full-Stack)

Community feedback

• 

  Denis•1,060

  @Mod8124Posted over 1 year ago

  👌 Good job

  I like it pretty much, if you try to go into full-stack app, try to implement an auth system it's weird that every user shares the same tasks. Because I can edit, and delete your task, and add tasks to your feed.

  Also, try to do not to use the same button overall you can do a component for that because they share the same logic you can do only one, then pass the thing that changes as props

  // they're the same
  <button
  onClick={() => setActionsChosen("all")}
  style={{ color: (actionsChosen === "all") ? "var(--bright-blue)" : "" }}
  >All</button>
  
  <button
  onClick={() => setActionsChosen("active")}
  style={{ color: (actionsChosen === "active") ? "var(--bright-blue)" : "" }}
  >Active</button>
  
  <button
  onClick={() => setActionsChosen("completed")}
  style={{ color: (actionsChosen === "completed") ? "var(--bright-blue)" : "" }}
  >Completed</button>
  

  // just one button component 
  const Button = ({text, actionsChosen}) => {
  return <button  onClick={() => setActionsChosen(text)}
  style={{ color: (actionsChosen === text) ? "var(--bright-blue)" : "" }}
  >{text}</button>
  }
  

  also, you don't need that many useState and useEffect for the app, you can use only one for the task and another filter to apply then you can just update the filter and show it to the user

  const [tasks, setTasks] = useState([]) // all task
  const [filter, setFilter] = useState('All'); // filter to apply
  
  const filters = { // object that return the task with filter
  All: (tasks) => tasks,
  Active: (tasks) => tasks.filter((task) => !task.completed),
  completed: (tasks) => tasks.filter((task) => task.completed),
  };
  
  const filteredTasks = filters[filter](tasks); 
  
  const changeFilter = (value) => {
  setFilter(value);
  };
  
  // then just render the filterTask and update by the changeFilter
  {filteredTasks &&
  filteredTasks.map((task, index) => <CardTodo key={index} task={task} index={index} />)}
  
  
  

  and finally try to avoid using the useEffect for fetching data is making double requests to the server you can this video about it react-18

  🤟 I hope it helps you, Good coding

  0