Mattermost
I recently contributed to the Mattermost project. Mattermost is an open source platform for collaboration across the software development life cycle, and it is written in React and Go. I chose this project because I wanted to work on a big React project with lots of contributors.
The Issue
The issue I chose was about converting a class component to a functional component in React without changing its core functionality, and updating the relevant test cases to reflect the conversion. The issue can be found here. The reason that they wanted to change their components from class to functional was based on React's recommendation and also functional components look to be cleaner, simpler, easier to write and maintain, and there is more support for them through the use of Hooks.
The Process
Setup
The most challenging part of the process for me was setting up the development environment. First, I had to install WSL on my machine which was done through the command wsl --install in Powershell. Then, I needed to install Docker Desktop to run the application. I followed the instructions from this link to install Docker Desktop, however I was getting errors running Docker Desktop and Ubuntu. After doing some research I realized that I had to enable virtualization in bios and enable WSL integration for Docker Desktop. I followed the instructions from this link to enable virtualization on my machine and the picture below shows where to enable WSL integration for Docker Desktop
Afterwards, I installed Go in my WSL environment, increased the number of available file descriptors by using the command ulimit -n 8096, installed "libpng" in the WSL, forked and cloned the project, installed NVM and used nvm install to install the correct version of Node.js for the Mattermost web app. After this I was able to run the server and the webapp.
Changes
First, I had to do a quick review on my React knowledge and the implementation of class components vs functional components, then I familiarized myself with the Jest testing framework. After that I implemented the conversion and updated the test file associated with that component. The changes that I made can be found in the screenshots below:
Finally, I completed the Mattermost's CLA, committed my changes, and created a PR to be reviewed.
What I learned
Like I said the most challenging part for me was setting up the development environment, since I have never worked with WSL and Docker before. I learned how to set up WSL on my machine, use Docker Desktop for containerized applications, and work with Jest framework. This was also a nice review on my React knowledge, which was very needed since I have been focused on working with C# lately.
Top comments (0)