Friday review Week 41

Friday review Week 41

It’s Friday and it’s time to recap a week of coding on my journey to become a developer. I’ve worked on two subjects this week: Java studies and my Hum project.

Java
In the course of my Java studies I’ve published a blog post this week on Inheritance. It covers some of the object oriented principles and how inheritance plays a role in it. I also wrote an assignment on this that I passed. It’s usual that I write a blog post about something that I’m learning in my studies.

Hum
Hum is my civics app where I focus on making policies and the processes around it easy to understand. I’ve made some great progress this week. Just look at all the issues I’ve dealt with!
hum-prog-10.gif 4.69 MB

Granted, I’ve become better at creating an issue. If I see that I need to add or change something I simply create an issue and add it to the Kanban board. It is a way to commit myself to resolving an issue before moving on to another, with the added benefit of getting a way to easily track a week’s progress.

The major steps forward this week has been:
  • Fetching News items
  • Filtering News items according to language
  • Added a News modal, which also switches language on toggle
  • Added responsive behaviour
  • Added React Router
  • Added an About page

An issue that I thought would be difficult to get working was adding React Router to handle different pages. Was it hard? Not at all! The documentation was on point and I had it resolved within 15 minutes. It could have been done in just a minute if I didn't have to refractor my navbar. In the process I removed two components that were no longer needed.

An issue that was harder than expected was how to toggle the news item being displayed in the modal when language is switched. It was pretty straight forward to switch the list of news items, so why would it be more difficult when just switching a single item in a modal?

Let's briefly cover how I resolved the translation issue for a News entity. Each entity has a relation to a language entity. This makes it easy to filter news by language. But how to track a specific translation for a news item? This is resolved by each News entity having a relation to a collection of other entities being a translation of the parent entity. I use a convention where an English news item will b always be a parent, and all other languages will be its child. To get translation for an English news item means that I access its children and filter out the one that is in Swedish. To get the English translation for a Swedish news item means that I simply access its parent. Now onto the problem!

My attempt at switching languages back and forth on the news modal would mean that I tried to recursively recursively access a news items translation. When I have an English news item and switch language I take the English item and look in the object to fetch the correct translation, having found it I add this to the modal and the reducer (app state). Switching language again, I look in the object in app state and get the parent value from it expecting a News object. For this to actually work I need to store many levels of objects within each other, but this is not very efficient. The fact is that I only store two levels of objects! When I look in the Swedish news item trying to get the parent, what I'll get is the IRI (Internationalized Resource Identifier). Seeing that it's like this makes it obvious in hindsight that it would be easy to switch from English to Swedish, but not the other way around.

My first attempt at resolving this was to add the parent to state when switching from English to Swedish. Switching back was as easy as getting the parent from state. There was only one problem with this: what if I open the Swedish version first? The parent won't be accessible from state since it hasn't been added yet!

The solution was that I simply used the parent IRI to filter the array of news items that was initially fetched when the page was loading. This solution is not as pretty as I'd like it but it's only used if a Swedish news item is first opened and the language is then switched to English.

So in conclusion, this wasn't a fun problem to run into. Especially since I solved it two times only to realise that I hadn't. But I'm happy that I can report on my struggle and share it with you. Hopefully you won't have the same issue I had when you're doing something similar.

Here’s Hum at the moment:
hum-prog-09.gif 9.84 MB

This has been my week coding. Now let’s have a nice weekend!