Responsive Todo App using React and styled-components

Community feedback

• 

  Elir-Mahad•100

  @Elir-MahadPosted almost 3 years ago

  Hey there friend !

  The site looks good.

  Regarding the functionality:

  Things that work:

  • When i click the checkmark of a todo item, then click on active, the items that show up in the active list are the correct ones.

  • When i remove an item by clicking on the X, the correct number of items left is shown on the bottom left of the box.

  • The dragging and dropping functionality works.

  • The dark mode works and looks beautiful !!!

  • Site is responsive !!

  Issues/suggestions:

  • When i click the checkmark of a task. Then press the X .. it gets removed from the list. But then when i go to the completed tab, the completed task does not show up there.

  • If i add a new todo item, then when i click the x, the task is not removed from the list.

  • The checkmark circle, next to the create a new todo input field, seems to serve no purpose. Perhaps you can remove it.

  Regarding your code:

  • Consider using one Style.js file, that has all your styled components; so that in your components folder, you'll have only the js files. This is something that i do, that's why i'm suggesting it. But i also like how you organized it.

  When i expect other people to read my code i usually:

  1. Add a file called codeStructure in the level of the App.js file.

  2. In codeStructure file i include a brief overview of how i organized my code (4 to 5 lines).

  3. On top of each component j.s file, i write a few lines (2 or 3) explaining the purpose of this component and what is exactly happening in the code.

  4. Some comments on your code would also be useful. For example: Line 14 of control.js is : onClick={() => {props.setFilter('All'); setActiveBtn({active:'All'});}}>All</Button> . When i look at this line, i wouldn't immediately know where the filter useState exists, because its not in this file. I found that it was set in the App.js line 19. Instead of me having to look for it, it would be easier if you made a comment to indicate these types of things.

  5. You are a one line machine. The whole process of reading your code would be a lot faster if you broke things down. For example: In ListItem.js line 11 : props.isActive({id:props.text.id, completed:!checked, active: checked}) can be broken down into smaller pieces with comments explaining what's happening.

  I assume other people, who are not at your level, will try to read your code on this site, so it would be helpful for them (i.e, me lol). I usually write things out like this:

  const handleChecked = () => {
    // comment
  setChecked(!checked);
    // comment
  props.isActive({
    // comment
    id:props.text.id, 
    // comment 
    completed:!checked, 
    // comment
    active: checked
    // comment
  })
  //
  }
  
  // Below is an example of how i commented on one of my own projects:
   
  const getRestaurant = (id) => {
      // The constant getResturant stores a process
      // it takes in an id as a parameter
      RestaurantDataService
        // Enter the RestaurantDataService component
        .get(id)
        // run the function called get and pass the id into it
        .then((response) => {
          // grab the response
          setRestaurant(response.data);
          // insert the response data into the constant restaurant;
          console.log(response.data);
          // console log the data
        })
        .catch((e) => {
          console.log(e);
        });
      // console.log any errors
    };
  

  It might seem redundant but it expedites the reading process.

  keep up the good work !

  Marked as helpful

  0

  ---

  

  Jeremiah Charles•280

  @xlr8torPosted almost 3 years ago

  @Elir-Mahad Thanks for the feedback Mahad!

  1. I've fixed the first and second issues thanks for spotting them.
  2. Regarding the checkmark circle that's coming from the design guide
  3. I'll start adding a codeStructure file to all projects and work on adding meaningful comments 😅.
  4. I usually break the styles into separate files for component reusability. What do you think of this?

  0

  

  Elir-Mahad•100

  @Elir-MahadPosted almost 3 years ago

  @xlr8tor Breaking styles is something that I never did before, but after going through your code and seeing the structure, i think i might copy your format !! Keep up the good work !!

  0
• 

  Mathis•770

  @MathisHumbertPosted almost 3 years ago

  Hi! Nice work, everything seems to work! This looks great and responsive, good job!

  I already did this project in javaScript but I will dot it with react soon. I'm currently learning React and I loved your code.

  I just think that you could improve your app by keeping track of any changes by the user with LocalStorage.

  0

  ---

  

  Jeremiah Charles•280

  @xlr8torPosted almost 3 years ago

  @MathisHumbert Thanks for the feedback, I'll work on including LocalStorage into the app. Looking forward to seeing your solution in React 😀.

  0