Emoji feature for church app

Photo by Denis Cherkashin on Unsplash

How to make an application more interactive?

I’m making a church app named Namu since I’m in college to help church communities to manage their members’ personal information and weekly donations.

I planned and made an emoji feature on Namu for postings.

Before this feature, Namu was not that interactive app with users. Only approved staff members can post and set events in the announcement section. So, it seems like one-way app from staff to other users.

We wanted to make the application more interactive by adding emoji features.

You can ask us why we did not think about the comment feature with emoji. I think the comment feature has strong pros and cons in society. However, we need to focus on cons when considering features at least if it is about church. Comments can cause church communities to make conflicts recklessly since they tend not to filter what they want to say.

We need to avoid any side-effects that could be caused by any features, while manually limiting options for users just like they cannot know what it is for. Therefore, we decided to add only emoji features, and limit the emoji options to be only five: smile, pray, thumb up, heart, and sad.

emojis

I’m going to explain how I did to add emoji features on the Namu application.

I wanted to make an API named toggle to make sure to update/delete emoji when clicking it. To make it possible, I needed to make a reaction table in Namu database.

This table needs the properties:

• Belong to who? (person)
• Belong to which post? (post)
• Belong to which church? (church)
• What emoji was selected? (emoji)

And then, I needed to make a controller for reactions.

In the controller, I made a toggle API, and then reaction_params API to handle params and use them inside the toggle API.

In the toggle API, I initialized a reaction object first. And then, I checked if the reaction is persisted in the database or not. If persisted, it will be destroyed the reaction from the database. Otherwise, it will be saved the reaction to the database.

After checking whether it is persisted, I send API response as a html format using the template ‘_reaction.html.erb’.

Before I show you my final solution for the emoji features, I want to talk about my trials and how I change my code to reach the final version.

SimulusJs VS. Turbo

First, I wanted to use StimulusJS to update/delete each emoji counter by making a function named toggle and then, use it in the reaction controller.

import { Controller } from 'stimulus';
import Rails from '@rails/ujs';

const emojis = { smile: 0, pray: 1, thumbs_up: 2, heart: 3, sad: 4 };

export default class extends Controller {
  static values = { postId: String, emoji: String };

  toggle() {
    const params = {
      post_id: this.postIdValue,
      emoji: emojis[this.emojiValue],
    };

    const options = {
      method: 'POST',
      credentials: 'same-origin',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-CSRF_Token': Rails.csrfToken(),
      },
      body: JSON.stringify(params),
    };

    fetch('/reactions/toggle', options)
      .then((response) => response.json())
      .then((result) => {
        console.log('Success:', result);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  }
}

Using fetch, I wanted to post toggle API, and then receive response to convert it to be html, not json file.

However, in this part, I wonder…

Is there any better way to handle this function? Do we have to use StimulusJS? Is it necessary?

I found Turbo can make the code more simple.

Turbo uses complementary techniques to dramatically reduce the amount of custom JavaScript that most web applications will need to write

I can take the advantage of Turbo this time for emoji feature: reduce the amount of code.

So, I used turbo-frame in our server-side html reaction template and delete StimulusJS file.

<turbo-frame id="<%= card.id %>_<%= emoji %>">
  <form action="/reactions/toggle" method="post" class="mr-2 mb-2">
    <input type="hidden" name="reaction[emoji]" value="<%= emoji %>">
    <input type="hidden" name="reaction[post_id]" value="<%= card.id %>">
    <% if reactions.blank? %>
      <button type="submit" class="pt-1 flex justify-center items-center cursor-pointer border border-gray-300 px-3 rounded-full">
        <span><%= Reaction::EMOJI_MAPPING[emoji.to_sym] %></span>
      </button>
    <% else %>
      <% if reactions.any? { |reaction| reaction.person_id == current_person.id } %>
        <button type="submit" class="pt-1 flex justify-center items-center bg-lime-200 border border-lime-500 px-3 rounded-full space-x-2 cursor-pointer">
      <% else %>
        <button type="submit" class="pt-1 flex justify-center items-center border border-gray-300 px-3 rounded-full space-x-2 cursor-pointer">
      <% end %>
        <span><%= Reaction::EMOJI_MAPPING[emoji.to_sym] %></span>
        <span class="text-sm"><%= reactions.count %></span>
      </button>
    <% end %>
  </form>
</turbo-frame>

1. Wrap all form tag with turbo-frame tag
2. To detect which emoji will be updated, add id to turbo-frame with card_id and emoji string name
3. As a default html feature, when clicking submit button, input values will be params for POST: card_id and emoji
4. The action is toggle, so it calls toggle API in reaction controller

Namu is now having emoji feature and became more interactive app.