Not Actually Fun

Well, I've taken the first steps in my new project, which is always interesting. It's fun to start something new, and when you first get going, there's always an excitement about it. Then, you get 20 minutes into the process of setup and realize, maybe I just should have fixed up one of my old projects. Nonetheless, I think I've stuck it out through the boring parts, and I'm starting to get some things to work. The idea is to use a superhero API and create some searching and organization functionality around it. On the home screen, I want there to be a search bar that will show the user the results of searching for a superhero, at least by name and maybe more. As it stands right now, when they come to the home page, they are given the full list of superheroes with their superhero name, real name, and an image of the character. I guess this is a good way to do it, and then they can search for whatever character they might want to look for. When they click on one of the cards, it takes them to a page with more details about that superhero coming from the API. I could leave it at that, but I want to add as much functionality to this thing as I possibly can.

Part of the process of creating this site is to use some of the new tools I've acquired. For example, I'm writing the whole thing using TypeScript instead of JavaScript, which has become my preferred way of doing things, anyways. I also want to incorporate some custom hooks, particularly around styling. I don't actually like writing CSS files that much, and we have a really cool system in place for writing the styling in our React Native project at work. Essentially, everything is written as an object with 5 main keys: style, phoneStyle, smTabletStyle, lgTabletStyle, and desktopStyle. These coincide with breakpoints created in a custom hook to recognize what the size of the window object is. If it's a phone sized screen, the phoneStyle will be used. If phoneStyle is omitted from the style object, it falls back to the base style key. We also have TypeScript set up so it understands we are writing styling and gives us appropriate autocompletion in these styling objects. We can write all of the styles in a separate file and then bring them in using another hook, using them in whatever component we want. I love this, but setting it up in this project might be overkill. I would still like to practice using custom hooks and getting really crafty with them, so this might be a good exercise for me to do.

Then there's React Router. React Router gets a lot of use in the React world, and is pretty highly touted. Most everybody seems to enjoy using it, but I'll tell you, I've had my struggles with it. For whatever reason, I'm having a hard time with the mental model of this thing. It just doesn't seem to make as much sense as it should. I was trying to hook up the dynamic routes for each individual hero, and just about gave up on it. Luckily, I found a nice little blog entry and it kind of clicked into making a little more sense. I was able to get it to work, but I'm having to use a separate API call when I get to that page. Given that I'm getting the full list with all of the information I need on the home screen, it doesn't make much sense to have to call it again, and it's not very efficient, either. Enter context. Right now, I'm saving that full list to a local piece of state, but what if I didn't? What if I put it into context and then just looked up the piece of data from the list that I needed? This might be a pretty hefty little higher order function, like a filter on the array, but I think it would be more performant than having to call the API again. I'm going to test this out and see what I can get, but in the meantime, at least it's working.

Until tomorrow!