Change of Approach

June 17th, 2020
react

A Different Angle

I was pondering my personal project last night, and realized what I was trying to do just wasn't going to work. I wanted to have a panel of filters on the list that acted as checkboxes. When one of the filters was selected, the list would update to reflect the filter. The problem was going to be rolling back these filters. I could do it explicitly and come up with a predefined array of objects for each filter and then compare the arrays for like values to weed out duplicates, but the code for this seemed completely ridiculous. Otherwise, it just didn't make any sense for deselecting a filter. How would you revert the list back to its state before that filter was selected. I'm sure there's a solution to this problem, but I decided it really wasn't necessary. There was another way to reflect this information that wouldn't involve mutating the list on the homepage. It's not exactly the same, since now you can only select one category at a time, but I turned the filters list into a categories list. When one of these values is selected, it takes the user to a new screen with the list of heroes matching this category. For example, if the user selects the villains category, they are taken to a screen with a title that says "Villains" and has a list that looks just like the one on the home screen of all the villains.

react

I'm a little upset I wasn't able to find a solution to the problem I was having, but I decided it wasn't a huge deal and the different approach worked fine. I was able to hook up all of the categories I had listed already for the filters and get each of them to work efficiently. I created a custom hook to hold some filter functions appropriate for each category type. This custom hooks takes in any array of hero objects, so it could potentially be used elsewhere in some other way if I decided to build out another feature. I've thought about making the list of affiliations on the individual hero page each a link that would take them to a full list of the members of that affiliation. For example, if the user selects Captain America, the Avengers would be listed in his group affiliations. They could click on that link and it would take them to the full list of Avengers. There are a lot of group affiliations, though, and I'm not sure I want to create a page for each of these. It's possible I could make this dynamic, though, and I'm going to think on that. Beyond that, I'm just down to a few styling changes and making the site fully responsive. I'm still on track to finish this up by early next week, maybe even this weekend.

react

I had a pretty successful day at work today, and I think I finally figured out my perils in the world of ScrollViews. I have been struggling with ScrollViews for a solid week, and I now realize that it all depends on how you specify the height or width of the component, depending on which way it scrolls. I was giving almost everything an implicit value, usually something like "100%," or some other percentage depending on the situation. When this is done, the component will stretch to fit the entire area of the component, thus ignoring the scroll. The height or width have to be defined explicitly, but if you are trying to fit something within a screen that varies in size, this is difficult. Well, it was, until I realized you could just create a value that takes in the dimension of the window's width or height. I created a variable for each of these, and set to work on changing as many of the percentages as I could to these new variables. Sometimes I would need a percentage of this width or height, so I just multiplied the value by a decimal pertaining to that percentage. I finally got it to work, and it looks so much better now. I was also given a mockup of the leads search page in full size. Yesterday, I created the mobile version, but everything is different in the full-sized version. This means I have to use the custom hooks that check what size the version is and show certain components accordingly. By the end of the day, I pretty much had everything showing up correctly for the desktop version, but I only got about halfway done with the tablet version. I'll finish it tomorrow, for sure.

Until tomorrow!

Created by Sam Thoyre, © 2019