40 Reactions On This Post

Update: I have disabled the Github Workflow so new reactions won't count.

I've been wanting to do this and guess what, I did it. Motivated by various twitter posts, I decided to programatically change the title of this post based on the number of reactions.

In this post, while the title is still changing, I will try to explain in every detail how I came about it.

DEV has a very beta but stable api we can leverage for that. To use the DEV API, you need an API Key. Go to your account settings and scroll down to DEV API Keys and generate a new key to use for authentication with the DEV API.

With our keys in place, we can now take advantage of the DEV API. I'm using JavaScript but you can use any langauge of your choice.

We start with a new empty directory and a new file index.js. Run the command npm init -y in the directory to create a package.json file for the project.

Since we are dealing with an API, we will be making request to servers and we will need an http client. I prefer axios for JavaScript but you can use any client of your choice.

We have to install axios in our current project using npm

npm install axios

With axios installed, we must use it in our index.js.

const axios = require('axios');

Axios supports many http methods but the major ones we will be using are GET method, to get the current reactions count and article id, and the PUT method, to update the current post title with the current reaction count.

We will create 2 main asynchronous functions. getData and updateTitle.

getData will makes a get request to the DEV API and get the current reaction count and id of the article and return it as an object.

// getData
async function getData() {
  // Article Url
  const url = 'https://dev.to/dephraiim/title-loading-fdg-temp-slug-9870259';

  // Get article data
  const article = await axios.get(url);

  // Set the reaction and the id to a data object
  const data = {
    reactionCount: article.data.public_reactions_count,
    id: article.data.id,
  };

  // Return the data object
  return data;
}

updatePost will get the data from getData and make a put request to modify the title with the current post reactions.

// updateTitle
async function updatePost() {
  // Destructure the properties from getData
  const { reactionCount, id } = await getData();

  // New Title for the article
  const body = {
    article: { title: `${reactionCount} Reactions On This Post` },
  };

  // API Key
  const apiKey = {
    'api-key': process.env.dev_api, // Replace with the API Key when running locally.
  };

  // Article url
  const url = `https://dev.to/api/articles/${id}`;

  // PUT Request to update the title
  const update = await axios.put(url, body, {
    headers: apiKey,
  });

  // Log the response to the console.
  console.log(update);
}

updatePost();

That's it. But we need to run it in the terminal using Node.js.

node index.js

We can't run node index.js everytime we want to run the program. That won't make it automatic. Fortunately, we have Github Actions Workflows to automate it for us. This is the workflow I am using with the secrets to store my keys.

name: Update Title

on:
  workflow_dispatch:
  schedule:
    - cron: '*/1 * * * *' # Runs every minute
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
      - name: Install with npm
        run: npm install
      - name: Run bot
        run: node index.js
        env:
          dev_api: ${{ secrets.DEV_API_KEY }}
          # Use the Github Secrets to Store your DEV API Key