3h 57m 29s logged

dedededevvvloggg #04: shortcuts and more shortcuts!!!

Perfect-Start now saves to localStorage, and has completed Shortcuts features like adding a new Shortcut, Editing an existing shortcut, and deleting a shortcut!

This was honestly a rollercoaster of emotions because on one hand I’m so happy I got it over with, but on the other there was so much React concepts I had to learn I started to brain-fog when I was working on it lol. I didn’t wanna rush too much so I took a lot of breaks and thus, this update took me 2 days to complete.

Let’s get it over with though!

Shortcuts now save to localStorage!! This is my first time dealing with localStorage, so I’m happy its application is SOMEWHAT simple enough (atleast for this project).
Shortcuts now have their own IDs, so React won’t be screaming at me anymore about keys!!!
Finish Edit Functionality, so you can Add, Edit and Delete Shortcuts!

And that’s the TLDR of this devlog!!
You can continue reading if you want to read myself yapping about the challenges I went through to implement the edit shortcuts functionality though!

storytime :O

Implementing the localStorage feature was actually pretty easy, I just had to use the useEffect() hook for everytime the Shortcut List State changed, and check whether the Shortcut List is available in localStorage or not. If it doesn’t, then it’ll return the default Shortcut List.

Implementing the Edit Shortcuts Function though was a completely different story. I thought it was just going to be a quick and easy change to /src/components/shortcut.tsx and /src/components/modal.tsx but oh boy, I was so wrong…

At first, I rendered the Modal component inside the Shortcuts component, which rendered one Modal per Shortcut.. This was due to the Shortcuts component being rendered with .map(), and my smarty pants forgot about it. Great Start!

I proceeded to write some more code for the Modal component, when I tried to call a function that I had passed in as a prop, but still doesn’t recognize it as a function. This had me inspect and change almost everything inside of the Modal component JUST for the sole purpose of debugging it, but it just… turned out… that I hadn’t… passed in anything in App.tsx… I was so ready to crash out Thank god for git’s amazing version control

After this I decided to get some sleep (pointed out by my git commit lol)

The next day came, and I got so much clarity! (especially after that disastrous session last night xD).

I quickly got to work, and did the following changes:

get rid of modalVisibility state in favor of modalMode, which has three states: “add”, “edit”, and null! this worked miraculously since the modal can now distinguish between popping up the “add shortcut” popup, “edit shortcut” popup, or don’t show any pop up at all.
make the editShortcut() function actually… function properly instead of saying “i am so sleepy” using .map() again!!!

and… that’s about how much i struggled with THIS supposed specific simple feature!

thank you for reading this far!! i hope you have a nice day. peace out!!!!