DEV Community

TheoForger
TheoForger

Posted on

Hacktoberfest! - Week 2

This has been such an eventful week! I stumbled upon this issue while browsing through mattermost's repo. They were looking for help on a bug where ephemeral posts don't go away after a refresh or an app relaunch. I signed up to fix a simple bug, but ended up in a rabbit hole where I jumped around the internet across different projects, and learned a few things I'd never had experience before.

Mattermost

Mattermost's frontpage

In case you don't know. Mattermost is an open-source, self-hostable chat service designed for organizations and companies. It's an open source alternative to Slack or Microsoft Teams. For a long time I've seen their name recommended a lot among open source enthusiasts. It's also a huge project. I thought it would be a nice challenge to get involved and contribute. Speaking of challenges, there were quite a few:

Challenge #1 - The Setup

I thought more bumpy rides will come later, but I never expected the setup process to be a roller-coaster!

I opened up their developer doc and was immediately directed to the dev server setup. I spent a couple of hours there, mostly figuring out dependencies and troubleshooting the go compiler. Once I got the server running, I realized I didn't even need it... Their community server works just as well for testing mobile apps.

Lesson learned - Do some research before diving into a project.

I moved on to the mobile repo and was shocked by the extremely poorly made documentation. The only useful information for me was the setup guide, and even that was filled with outdated texts and screenshots.

So I was pretty much on my own: I spent some time trying out different version of Android SDKs and emulators. I ran into an error during the initial build which took me hours of research, and was eventually solved by installing a different Java version. Then it struck me: I'm not on my own! This is an open source project. Just out of curiosity, I searched on the community server - Yup! There were people who ran into the exact same issues and was given an answer in the contributor's channel.

Lesson learned - Look around the community for solutions. Ask question if necessary.

Challenge #2 - Locating the Files

As I mentioned before, this was a giant project. The app was built with React Native, which I had zero experience with. The code was barely commented, and it certainly didn't help that there was no useful documentation. I panicked just a little.

Search result when I typed

The issue is related to a certain type of posts called "ephemeral posts". I started with searching for files related to "Post" or "ephemeral". Of course, there was way too many of them. I had to look elsewhere.

My first task was related to refreshing a channel, so I did another search on "Refresh". There I was able to quickly locate a function called onRefresh(). I add a log message in this function, launched the debug tool. I pull on the list and the message appeared. Success!

Coding was the easiest part so far. Since the Posts list was already in scope, all I had to do was iterate through them and called the removePost function which already existed:

const removalPromises = posts.
    filter((post) => post.type === PostTypes.EPHEMERAL).
    map((post) => removePost(serverUrl, post));
await Promise.all(removalPromises);
Enter fullscreen mode Exit fullscreen mode

In a similar fashion, I also found the file for the second task related to app launch. This one was a bit trickier since a lot of files had the "launch" or "start" keyword in them. Eventually through a series of console.log(), I was able to figure it out.

Challenge #3 - Asynchronous Code

To be honest, I never truly understood how async code works from school. Initially I didn't give it too much thoughts, since my understanding of async functions was limited to the await keyword.

After I filed my PR, the first comment I received was regarding the async practice in my code. Only there did I realize the importance. I went into research mode, and turned out it wasn't as difficult as I feared. With the experience from the past months, I was able to comfortably understand it and make the requested changes on the PR.

Challenge #4 - Database Indexing & Migration

On my PR, one of the maintainer mentioned that since I created a new function to query the database for post type, I should make another PR to index that column first.

I won't lie. I didn't even know what "database migration" means back then. Yet again, I did some research on this and it seemed like a simple task. I also asked one of the maintainers in the community server. He provided me with a link to a similar PR, which also involved some database changes. I was able to locate the files easily.

This app used WatermelonDB as its database, which I also hadn't heard of before. From their documentation, I quickly learned how to add an index to the schema. However, I also learned that they didn't support adding an index for migration. In fact, they were asking for contribution.

What I also noticed from the same WatermelonDB code is that they provide an "unsafe" function to execute SQL queries directly during migration.

The maintainer's comment on this issue

I once again brought this up in the community server and had a lengthy chat with the maintainers. Eventually, They decide to go with the unsafe function for now, and wait for contribution upstream.

More Challenges to Come?

This is where I left off so far. The maintainer asked me to do some testing before making the second PR, so that's what I'll focus on in the near future. My first PR is in a second round of review right now. Who knows what new problems might come up?

Top comments (0)