Todo App React

Community feedback

• 

  Igo Brasil Monteiro•150

  @igomonteiroPosted almost 2 years ago

  Hi tbrownlee, you did a nice job!

  About your questions:

  How can I make the checkboxes like the ones in the design file?

  • To do that, you need to "hide" the standard html checkbox input and wrap the input inside a container, then style the container as you want. The checkbox component that you will create can be either a controlled or uncontrolled component, you choose. To set the gradient inside the checkbox, you need to use the property background-image, not the background-color, take a look at my solution. Also, check out this article: Custom checkbox component in React or this one (but this one is in Portuguese) Checkbox component in react

  How do I save info in React on refresh?

  • To save the todo info without implement any API, you can use the browser local storage. You can save the todos in the localStorage everytime the user create or update (checking/unchecking) a todo, in resume, implement this logic using the useEffect hook. In addition, you can create a custom hook (that implement the logic of saving/getting from localStorage) and also use the ContextAPI to manage the todo states. To read more about how to use the localStorage, see this article: Todo app using localStorage and react hooks

  How do I implement drag and drop?

  • To do that you can implement your own drag and drop functionality, but this will be kinda hard, or you can use some drag and drop library. I recommend dnd kit or react beautiful dnd - i'm not a big fan of this last one because the bundle size is huge XD but i've used it in my solution. In this two libs, you will need to implement a function to handle the onDragEnd event. In this function, you will set your new states reordering the element in the array using the index returned by the onDragEnd event of the dragged element. To reorder the array, you can use the splice method, check the docs here.

  IMPORTANT NOTE: splice is a destructive method, which means it modifies the array on which it is called, don't use it in directly on your react state, instead create a new const that store the current todo states and then use the splice method on it, then set your todos state with the new elements by using the setter of your useState.

  One more observation: about your mobile design, reduce the breakpoint to 375px, in your solution the background-image is switching to the mobile image too soon, this way, the image is getting the sides "cut off".

  Good luck if you implement these improvements, but your solution turned out pretty cool.

  Hope you understand, english is not my native language, but i'm trying.

  Keep up the hard work! 🚀

  Marked as helpful

  1

  ---

  

  tbrownlee•350

  @tbrownleePosted almost 2 years ago

  @igomonteiro thank you for commenting!! I appreciate it.

  I will create the checkboxes as you specified and also implement a way to save the users todo's via localStorage.

  Later, I may implement drag & drop using the methods you recommended. I will look at yours as guidance. I'll also be careful using splice.

  My last question is how do I update the gh-pages file to render new changes? So people can see my updates when they click "Preview site." My regular code will update and will display when I run npm start. Also, I update my github file via the tool in vs code. Is there a command I have to run in order to update gh-pages/ my live site?

  Thanks for your advice!

  0

  

  Igo Brasil Monteiro•150

  @igomonteiroPosted almost 2 years ago

  @tbrownlee I'm not 100% sure because I never used gh-pages, but I guess in gh-pages if you commit and push your modifications, the gh-pages will automatically update your page after the push in your master branch. I use Vercel to deploy my applications, it's very easy to use and very easy to setup your github projects. In Vercel, when u push your modifications to your github, the project is automatically updated, for this reason, I believe that gh-pages works in a similar way, you just need to push your changes and gh does the rest. If you make a lot of visual changes to your project, I suggest clicking the "new screenshot" button here in the mentor frontend after making the changes, but keep in mind that there is a limit of 5 screenshots per month on free accounts.

  1

  

  tbrownlee•350

  @tbrownleePosted almost 2 years ago

  @igomonteiro maybe I should use Vercel!

  I figured it out! If you're not using React, gh-pages does it automatically. But if you're using React, this is the way to update:

  https://github.com/Frnt-End/Update-React-in-GitHub-Pages

  1

  

  Igo Brasil Monteiro•150

  @igomonteiroPosted almost 2 years ago

  @tbrownlee oh nice! I didnt knew it. So that's the difference between vercel and gh-pages haha

  1