Skill Tree Update 4/11/2022
Tags: webdev, productivity, react, redux
Published: 2022-04-12 02:48:45

![app so far](https://i.ibb.co/YRvhHJS/Screen-Shot-2022-04-11-at-10-09-11-PM.png)

## Contents

- [Introduction](#introduction)
- [Two Steps Forward One Step Back](#two-steps-forward-one-step-back)
- [Work and Life Balance with Weekend Wednesdays](#work-and-life-balance-with-weekend-wednesdays)
- [Conclusion](#conclusion)

## [Introduction](#contents)

> "Your greatest enemy is yourself from 10 hours ago."
> -- <cite>[*Factorio*](https://www.factorio.com/) players</cite>

&emsp; One of the goals of this week was to add [statefulness](https://blog.dreamfactory.com/stateful-vs-stateless-web-app-design/) to the skill tree app. Fortunately, [pan and zoom](https://github.com/chrvadala/react-svg-pan-zoom) works perfectly fine out of the box. [Event listeners](https://dev.to/tieje/how-to-listen-to-events-in-reactjs-42a8) for keyboard shortcuts were actually pretty easy to add. One portion that I struggled with was experimenting with [PUT, PATCH, and POST methods](https://stackoverflow.com/questions/31089221/what-is-the-difference-between-put-post-and-patch) using RTK Query on the frontend. Despite understanding how it all works, there's that nagging feeling in the back my head that's like, *there's no way this is going to work*. But it did work. I have CRUD functionality now!

![CRUD functionality](https://i.ibb.co/7zCHgp8/Screen-Shot-2022-04-11-at-10-10-12-PM.png)

![Update](https://i.ibb.co/MMynSmf/Screen-Shot-2022-04-11-at-10-11-49-PM.png)

![Backend](https://i.ibb.co/d6vv61t/Screen-Shot-2022-04-11-at-10-37-42-PM.png)

## [Two Steps Forward One Step Back](#contents)

&emsp; The big mistake I made was using multiple sources of state. There should only be one source of truth in state management. Ultimately, this mistake led to not being able to add a new hexagon on the fly without reloading the window. I could not invalidate the query because I loaded my state from a slice and not from a `useQuery` hook. I needed to implement a `useQuery` hook from RTK Query so that I can invalidate the query and it can grab data from the API. I was using RTK Query incorrectly.

## [Work and Life Balance with Weekend Wednesdays](#contents)

![Weekend Wednesdays](https://static.wixstatic.com/media/cd4386_579573160a8a4c6c8a09d307851397e0~mv2.png/v1/fill/w_1000,h_563,al_c,usm_0.66_1.00_0.01/cd4386_579573160a8a4c6c8a09d307851397e0~mv2.png)

&emsp; [Weekend Wednesday](https://www.youtube.com/watch?v=ALaTm6VzTBw) is making Wednesday a day-off and making Saturday a work-day. Knowledge workers may want to adopt this schedule because our performance diminishes significantly as days go on without a day of rest. This week marks my first weekend Wednesday trial and I already feel significantly more productive and happier than on the old Monday through Friday schedule.

## [Conclusion](#contents)

&emsp; Last week, I learned a lot about working with queries in general. CRUD functionality for hexagons is now complete. This week I'll be moving on to CRUD functionality for paths. Now that I understand queries, I feel like frontend development should be smooth sailing from here on out.