Image for post
Image for post
The confirm delete message dialog in action

For my fourth and final issue for Hacktoberfest, I chose to work on an issue from the Delta Chat project. This blog post will briefly discuss how I tackled the issue and what I learned in the process.

What is Delta Chat?

Delta Chat is a messaging app like Telegram or Whatsapp but without the tracking or central control.

Delta Chat does not need your phone number but rather lets you use your email address. Therefore they don’t have their own servers but instead, use the existing e-mail server network. They had released a mobile app version for Android and IOS devices earlier and recently made a desktop client too. I chose to contribute to their desktop client.

The Issue Explained

This issue is an enhancement request outlining the need for a delete message confirmation dialog. It is very easy for the user to click the delete message option without having the chance to undo such an operation. The proposed confirm delete message dialog would prompt the user to confirm the delete operation or cancel it.

The Process

To get started, I first read the contribution guidelines and set up my development environment. The dependencies required for this project were Node.js. The app is built using React and Electron. Luckily for me, the project maintainers were helpful in pointing out where some of the dialogs were coded to give me some examples.

I listed the tasks that I would have to do to complete this issue as follows:

  1. Define a dialog box component that would be rendered upon clicking the delete option on a message.
  2. Wire up the dialog box with the already existing delete message logic which would delete the message and reload the message list for the user.
  3. Bind the dialog component to the ‘onClick' property of the delete option.

Fortunately, there was already a generic confirmation dialog component that I could tweak for my issue. This component accepted a display message and a call back function. So I passed the confirmation message and the call back function which would be executed when the user clicked the ‘Yes’ button. This logic was bound to ‘onDelete' function which was passed to the MessageList component in the ‘props’. This replaced the previous delete message logic by adding an additional dialog in between.

I unit tested my code, built the app successfully and ran the tests before submitting a pull request. I received two review comments from another contributor. They were as follows:

  1. Fix the grammar in the message displayed to the user. This one was easy to address.
  2. Put the message in the localization file used by Transifex. For this one, I had to research what Transifex was. Basically, Transifex is a tool providing continuous localization support for many apps. When an app has translated content for different languages that are rendered by the locale, it manages this localization. I added the string to the localization file and referenced it instead of passing the message directly to my dialog box component.

After adding the suggested changes, my pull request was merged and the issue was closed. Hooray!

Learning Outcomes

  1. Revised how to develop apps using React.
  2. Learned a bit about localization in global applications.
  3. Got an overview of how to use the Transifex client.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store