This week's task was to work with useEffect to call an API, then use GET- and POST-requests to display and add new thoughts/likes to a list of happy thoughts. Stretch goals were to count amount of likes and message length and add/remove elements based on it.
For this task I decided to try and use my sketchbook to plan my components and states. This was a bit harder than I thought, but I do think it helped me getting started. Thinking about my project afterwards though, made me realize I will continue trying to work like this as I get more knowledge of components and structure.
Getting all functions in place, along with the components needed was kind of easy, and maybe that could explain why I had to spend quite a lot of time later on moving stuff around in my components. My biggest challenge this week was to understand the React waterfall-concept, and where to put different things to be able to access them from all components. Because of these structural problems and the difficulty I had to grasp this, I spent a good amount of time to try to display when a thought was liked.
This project has been very helpful for me to understand the concept of React components, usage of states and sending data through functions and props.
If I'd had more time I would try to work more with animations and loaders, to make the site more visually dynamic, and to learn how to work with for example Lottie animations. I would also give the structure another go, just to make the app.js-component hold all the data and pass it down the waterfall.
Live demo: https://happihappiness.netlify.app/