5h 58m 49s logged

oh boy!

This devlog was actually supposed to be really short, since I WAS supposed to be implementing ONLY the shortcuts, but one thing led to another and… hey! I’ve got shortcuts AND the edit shortcuts functionality (partially) done!

Before we start..

Let’s start this off by; I STRUGGLED so much with this. From the previous devlog you probably know that I’m still very much a beginner in React, and if I’m being honest this is the BIGGEST project (by scope) I’ve ever tried to make, so you could probably imagine how much hassle I went through xD.

Enough with that, here’s what I implemented!

Shortcuts

This should’ve been very basic stuff, but I (SOMEHOW) struggled with it.

The biggest change I did was converting the hard-coded shortcut into a React State, which is rendered with .map(). This helped SO MUCH, and made state updates A LOT easier.

shortcuts.map((shortcut) => {
  return (
    <Shortcuts
      name={shortcut.name}
      url={shortcut.url}
      editMode={editMode}
      deleteFunc={deleteShortcut}
    />
  );
})

After that ordeal is done, I ran into another problem again; implementing a way to get the destination website’s favicon. I decided to use favicon.im’s API for this one! Honestly this is only included as something I struggled with because I completely did NOT realize that the URL in the shortcut still has the HTTPS protocol and not only the domain

This is what I was literally doing..

src={`https://favicon.im/https://youtube.com?theme=dark&larger=true`}

..Yup. I fixed it by removing the HTTPS protocol from the URL, and then splitting it every “/”, and finally use the [0] index to get the favicon.

Edit Mode

The “Edit Mode” is supposed to be an all-you-can-edit type of feature, but for now it is only implemented for the Shortcuts card, primarily because I wouldn’t really know how to implement it to all components…

Deleting

This was the easiest part of the whole Edit Mode section! Basically, when in Edit Mode, every shortcut will have a delete button underneath them. When you click on it, it will delete said shortcut by using .filter().

Adding

If deleting was the easiest part of the whole Edit Mode section, Adding is the opposite.
Okay, let’s start off with how I had a button inside of another button;

<button
  onClick={() => {
    setModalVisibility(!modalVisibility);
  }}
>
  {editMode && <button>Add Shortcuts</button>}
</button>

Oh, how about when I accidentally force-added https:// to every single URL?

if (!tempUrl.startsWith("https://") || !tempUrl.startsWith("http://")) {
  tempUrl = `https://${url}`;
}

Okay I hope you get the point. I did a LOT of silly little mistakes that could’ve been avoided if I were just a LITTLE bit more careful while coding, but hey, you can’t improve if you don’t fail!

Other miscellaneous changes..

I did some miscellaneous changes too, like;

Changing the background-color
Changing how big the button grows when hovered over, from 10px -> 5px.
Bolded most of the text in the website
Learnt how to use Git’s Interactive Rebase! (This was supposed to be its own section but I fear the devlog is getting too long)
Probably some more that I didn’t remember

Some Last Notes before I close this off

For the next update/devlog, I really wanna keep it simple and do the following changes;

Style the Add Shortcuts Popup box
When in Edit Mode, add the function to Edit already existing Shortcuts instead of having to delete then adding

And with that out of the way, Thank you for reading my devlog! See you next time!