DEV Community: Sirwan Afifi

ts-faker - Generating fake data using TypeScript interfaces

Sirwan Afifi — Thu, 29 Jul 2021 18:51:21 +0000

I recently built a Next.js website that generates fake data. Regularly, I perform routine tasks like this. Rather than manually go through the process, I decided to automate it. You just need to define your schema as TypeScript interfaces, and the test data will be generated automatically. I thought it would be a good idea to share the source code with you so that you can learn something from it. I hope you enjoy it.

source: https://github.com/SirwanAfifi/ts-faker
website: https://ts-faker.vercel.app/

React Tree View using TailwindCSS/TypeScript/Storybook/Context API

Sirwan Afifi — Wed, 20 Jan 2021 08:20:31 +0000

I have built this simple project over the last couple of days. I wanted to build a simple tree view component for one of my projects I thought it might be a good idea to share it on Github so that everyone can have a look/review on it. I hope you like it:

Here's the source code: (https://github.com/SirwanAfifi/tw-tr)

Text processing with awk

Sirwan Afifi — Sat, 16 Jan 2021 10:27:36 +0000

From Wikipedia:

AWK is a domain-specific language designed for text processing and typically used as a data extraction and reporting tool. Like sed and grep, it's a filter, and is a standard feature of most Unix-like operating systems.

We can do all sort of things with awk, for example suppose that we have a CSV file which contains list of cities, Now we want to take this file and turn it into a JSON file, all we need to do is go to terminal and type this command:

awk 'BEGIN { 
  print "{ results: [" }
END {
  print "]}\n"
}
{ gsub(/"/, "", $2) gsub(/"/, "", $3) gsub(/"/, "", $4)
  print "{ id: " $1 ", name: \"" $2 "\", countryCode: \"" $3 "\", district: \"" $4 "\" }"
}' cities.csv

In fact awk is a programming language which means that it if, loop, variable assignments,...:

awk -v date="$(date)" -v title="Report Generated By Sirwan Afifi" -F';' 'BEGIN { 
  SPACE = 50;
  printf("%s \n", title)
  print "{ results: [" }
END {
  print "]}\n"
  for(space = 0; space < SPACE; space++) printf "-";
  printf("\nFound %d results\n", city)
  printf("Report generated at %s\n", date)
  space = 0; do { if (space == 0 || space == 49) 
                      printf "*" 
                  else 
                      printf "-"; space++ 
            } while (space < SPACE);
  print "\n"
}
{ city = city + 1
  gsub(/"/, "", $2) gsub(/"/, "", $3) gsub(/"/, "", $4)
  print "{ id: " $1 ", name: \"" $2 "\", countryCode: \"" $3 "\", district: \"" $4 "\" }"
}' cities.csv

Recoil with React and TypeScript

Sirwan Afifi — Wed, 13 Jan 2021 19:49:47 +0000

Recoil is yet another state management library for React, I just wanted to give it a try so I decided to re-create my other post's sample (MobX with React and TypeScript
) in Recoil.

Recoil has pretty simple API to work with, the functionality is the same as other state management library but the names are different, Recoil seems to be a bit better in terms of code boilerplate. It has two important concepts to know:

Atoms: Atoms are units of state. They're updateable and subscribable: when an atom is updated, each subscribed component is re-rendered with the new value. They can be created at runtime, too. Atoms can be used in place of React local component state. If the same atom is used from multiple components, all those components share their state.
Selector: A selector is a pure function that accepts atoms or other selectors as input. When these upstream atoms or selectors are updated, the selector function will be re-evaluated. Components can subscribe to selectors just like atoms, and will then be re-rendered when the selectors change.

Creating a Simple Todo App with Recoil and React

let's create a simple todo app using React:

mkdit recoil_sample && cd recoil_sample
npx create-react-app . --typescript
yarn add bootstrap --save

Now go to index.tsx and import bootstrap.css:

import "bootstrap/dist/css/bootstrap.css"

Now we'll install the needed dependencies:

yarn add recoil uuid @types/uuid --save

Now let's create a store inside the project

import { atom, selector } from "recoil";

export interface Todo {
  id?: string;
  title: string;
  completed: boolean;
}

export const todosState = atom({
  key: "todos",
  default: [] as Todo[],
});

export const infoValue = selector({
  key: "infoValue",
  get: ({ get }) => ({
    total: get(todosState).length,
    completed: get(todosState).filter((todo) => todo.completed).length,
    notCompleted: get(todosState).filter((todo) => !todo.completed).length,
  }),
});

Now create a new folder called components in the src directory and add TodoAdd.tsx and TodoList.tsx:

TodoAdd

import { useState } from "react";
import { useRecoilState, useRecoilValue } from "recoil";
import { infoValue, todosState } from "../store";
import { v4 } from "uuid";

const AddTodo = () => {
  const [title, setTitle] = useState("");
  const [todos, setTodos] = useRecoilState(todosState);
  const info = useRecoilValue(infoValue);

  return (
    <>
      <div className="alert alert-primary">
        <div className="d-inline col-4">
          Total items: &nbsp;
          <span className="badge badge-info">{info.total}</span>
        </div>
        <div className="d-inline col-4">
          Finished items: &nbsp;
          <span className="badge badge-info">{info.completed}</span>
        </div>
        <div className="d-inline col-4">
          Unfinished items: &nbsp;
          <span className="badge badge-info">{info.notCompleted}</span>
        </div>
      </div>
      <div className="form-group">
        <input
          className="form-control"
          type="text"
          value={title}
          placeholder="Todo title..."
          onChange={(e) => setTitle(e.target.value)}
        />
      </div>
      <div className="form-group">
        <button
          className="btn btn-primary"
          onClick={(_) => {
            setTodos([...todos, { id: v4(), title: title, completed: false }]);
            setTitle("");
          }}
        >
          Add Todo
        </button>
      </div>
    </>
  );
};

export default AddTodo;

TodoList

import { useRecoilState } from "recoil";
import { todosState } from "../store";

const TodoList = () => {
  const [todos, setTodos] = useRecoilState(todosState);

  const toggleTodo = (id: string) =>
    setTodos(
      todos.map((todo) => {
        if (todo.id === id) {
          return {
            ...todo,
            completed: !todo.completed,
          };
        }
        return todo;
      })
    );
  const removeTodo = (id: string) =>
    setTodos(todos.filter((todo) => todo.id !== id));

  return (
    <>
      <div className="row">
        <table className="table table-hover">
          <thead className="thead-light">
            <tr>
              <th>Title</th>
              <th>Completed?</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {todos.map((todo) => (
              <tr key={todo.id}>
                <td>{todo.title}</td>
                <td>{todo.completed ? "✅" : ""}</td>
                <td>
                  <button
                    className="btn btn-sm btn-info"
                    onClick={(_) => toggleTodo(todo.id!)}
                  >
                    Toggle
                  </button>
                  <button
                    className="btn btn-sm btn-danger"
                    onClick={(_) => removeTodo(todo.id!)}
                  >
                    Remove
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
};

export default TodoList;

That's it, now you can run the project and manage your todo items:

Here's the source for the project.

Getting Started With Sequelize

Sirwan Afifi — Sat, 10 Oct 2020 08:26:57 +0000

Sequelize is an Object Relational Mapper (ORM) which enables us to query and manipulate data stored in a relational database. There are several ORM for Node.js out there. Sequelize is one of them and it's pretty popular. In this short tutorial we will have a quick look at Sequelize then we will write a simple Node.js application to connect to a MySQL database.

Setting up the project

To start off, head over to command line and type the following commands to initialise the project:

take sequelize_todo 
yarn init -y
yarn add sequelize mysql2 dotenv ts-node typescript -D

Next, create a file called dbConnection.ts in the root of the project:

import { Sequelize } from "sequelize";

const sequelize = new Sequelize({
    dialect: "mysql",
    username: process.env.DATABASE_USERNAME,
    password: process.env.DATABASE_PASSWORD,
    database: process.env.DATABASE_NAME,
    port: +process.env.DATABASE_PORT || 3306
});

export const database = {
    sequelize
}

As you can see we have constructed an object using Sequelize constructor. This class needs some options which are required to connect to our MySQL database (that's why we have set dialect to "mysql". You can changes that to connect to other relational databases like SQL server, ...). Then we exported the newly created object.

Next, create an index.ts file in the root of the project:

import * as dotenv from "dotenv";
dotenv.config()
import { database } from "./dbConnection"

(async () => {
    await database.sequelize.sync();
})();

The first couple of lines are used to load .env file into process.env. This means that we will need to create another file in the root of the project to define our secret values:

DATABASE_HOST=localhost
DATABASE_USERNAME=root
DATABASE_PASSWORD=PASSWORD
DATABASE_NAME=DBNAME
DATABASE_PORT=3306

NOTE: Make sure you gitignore the .env file before pushing the code into remote repository.

Creating your first entity

Now we need to define our entity which is an abstraction that represents a table in your database. An entity is just a class that extends Model. So let's create a directory called models then create a file called User.ts inside that directory:

import * as Sequelize from "sequelize";

class User extends Sequelize.Model {
    username: string;
    createdAt: Date;
}
export const InitUser = (sequelize: Sequelize.Sequelize) => {
    User.init({
        username: Sequelize.DataTypes.STRING,
        createdAt: Sequelize.DataTypes.DATE
    }, {
        sequelize, tableName: "Users"
    })
};

To define our entity and its properties (Columns) we need to have access to the sequelize object which we exported previously. So let's head over to the dbConnection.ts file and update the file by passing sequelize object to the InitUser (which we have just exported):

export const database = {
    sequelize,
    User: InitUser(sequelize)
}

Now if you run the project ts-node index.ts you will get this error:

(node:11377) UnhandledPromiseRejectionWarning: SequelizeConnectionError: Unknown database 'sequelize_sample'

It's because Sequelize doesn't know how to created the database so it needs a database to start with. So let's create the schema in MySQL:

CREATE SCHEMA `sequelize_sample` ;

Now if you run the project one more time, Sequelize is able to create the table for you:

Executing (default): CREATE TABLE IF NOT EXISTS `Users` (`id` INTEGER NOT NULL auto_increment , `username` VARCHAR(255), `createdAt` DATETIME, `updatedAt` DATETIME NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB;
Executing (default): SHOW FULL COLUMNS FROM `Users`;
Executing (default): SELECT CONSTRAINT_NAME as constraint_name,CONSTRAINT_NAME as constraintName,CONSTRAINT_SCHEMA as constraintSchema,CONSTRAINT_SCHEMA as constraintCatalog,TABLE_NAME as tableName,TABLE_SCHEMA as tableSchema,TABLE_SCHEMA as tableCatalog,COLUMN_NAME as columnName,REFERENCED_TABLE_SCHEMA as referencedTableSchema,REFERENCED_TABLE_SCHEMA as referencedTableCatalog,REFERENCED_TABLE_NAME as referencedTableName,REFERENCED_COLUMN_NAME as referencedColumnName FROM INFORMATION_SCHEMA.KEY_COLUMN_USAGE where TABLE_NAME = 'Users' AND CONSTRAINT_NAME!='PRIMARY' AND CONSTRAINT_SCHEMA='sequelize_sample' AND REFERENCED_TABLE_NAME IS NOT NULL;
Executing (default): ALTER TABLE `Users` CHANGE `username` `username` VARCHAR(255);
Executing (default): ALTER TABLE `Users` CHANGE `createdAt` `createdAt` DATETIME;
Executing (default): ALTER TABLE `Users` CHANGE `updatedAt` `updatedAt` DATETIME NOT NULL;
Executing (default): SHOW INDEX FROM `Users` FROM `sequelize_sample`

In the next blog post I will explain how to query and manipulate data. You can find the code here on GitHub. (https://github.com/SirwanAfifi/sequelize_sample)

Generating HTTP endpoints for MySQL database

Sirwan Afifi — Sun, 03 May 2020 13:11:09 +0000

Here's a simple application I have written to generate HTTP endpoints for a given MySQL database; which is basically a way to expose your MySQL database as a RESTful API. This project is inspired by php-crud-api which does the same thing but in a great and advanced way. I did this as an experiment to learn new things. At the moment it only supports GET requests. Let me know what you think and we can change it accordingly.

https://github.com/SirwanAfifi/node-crud

Please give it a try. I would be glad If you would like to contribute.

MySQLDump.js

Sirwan Afifi — Sat, 25 Apr 2020 19:23:54 +0000

MySQL comes with a built-in program called mysqldump to do logical backups. It generates a SQL script of the database so that you can transfer it to another database server.

I have written a tiny wrapper around mysqldump which can be used in Node.js applications:

https://github.com/SirwanAfifi/sqldumpjs

Please give it a try. I would be glad If you would like to contribute.

WebSocket and React

Sirwan Afifi — Sun, 08 Mar 2020 11:42:40 +0000

Originally posted on my blog

WebSocket is a communication protocol. It's bidirectional in nature which means that either client or server can send data at any time. With WebSocket, we can build applications such as multiplayer games, chat apps, collaboration software that work on the open web. In this blog, I going to show you how to create a WebSocket server both in .NET Core and Node.js. I'll start with the Node.js version as it's a bit easier (boilerplate code for it is just 13 lines of code).

WebSocket Server (Node.js)

To create a WebSocket server in Node.js we need to install a third-party package called socket.io which is pretty popular. So follow these steps to create the server:

mkdir -p websocket/node && cd "$_"
yarn init -y
yarn add express socket.io
touch index.js

Now open index.js and add the following code:

const app = require("express")()
const http = require("http").createServer(app)
const io = require("socket.io")(http)

io.on("connection", socket => {
  socket.on("message", message => {
    socket.broadcast.emit("message", message)
  })
})

http.listen(8080, () => {
  console.log("listening on *:8080")
})

As you can see we have initialized a new instance of socket.io using http. Then we added an event listener for the connection event. This keeps listening to any incoming WebSocket connection so whenever a new WebSocket connection is established from the client, the callback is invoked. Inside the callback again we keep listening to the incoming request from the newly created connection, If the client emits an event called message we broadcast the data to other subscribers. That's it, the backend part is done. Now let's create a frontend for it.

WebSocket Client

I don't want to explain the process of creating a React app as it's pretty easy to scaffold a React application using create-react-app. So let's assume that we have an existing application and want to add chat functionality to it. First, make sure you have installed socket.io-client package. I should also mention that I'm going to use Bootstrap for stylying the components. What we are going to build is this widget:

To create such component I'll break it down into two separate components, one for each single message and the other for the chat widget. So let's go ahead and create them:

Message component

import React from "react"
import user from "../Assets/user.png"
export default ({ userName, message }) => {
  return (
    <>
      <div className="media">
        <img
          className="rounded-circle align-self-start mr-3"
          src={user}
          alt="Avatar"
        />
        <div className="media-body">
          <h5 className="mt-0">{userName}</h5>
          <p>{message}</p>
        </div>
      </div>
      <div className="dropdown-divider"></div>
    </>
  )
}

Chat component

import React, { useState, useEffect } from "react"
import "./Chat.css"
import Message from "./Message"
import socketIOClient from "socket.io-client"
const socket = socketIOClient("http://localhost:8080")

export default () => {
  const [userName, setUserName] = useState("")
  const [message, setMessage] = useState("")
  const [messages, setMessages] = useState([])

  useEffect(() => {
    const uName = prompt("Name?")
    if (uName) {
      setUserName(uName)
    }
  }, [])

  socket.on("message", message => {
    setMessages([...messages, message])
  })

  return (
    <div className="wrapper">
      <div className="card border-primary">
        <h5 className="card-header bg-primary text-white">
          <i className="fas fa-comment"></i> Chat
        </h5>
        <div className="card-body overflow-auto">
          {messages.map((msg, index) => (
            <Message
              key={index}
              userName={msg.userName}
              message={msg.message}
            />
          ))}
        </div>
        <div className="card-footer border-primary p-0">
          <div className="input-group">
            <input
              value={message}
              onChange={e => {
                setMessage(e.target.value)
              }}
              type="text"
              className="form-control input-sm"
              placeholder="Type your message here..."
            />
            <button
              className="btn btn-primary btn-sm"
              onClick={_ => {
                const msg = {
                  id: Math.random() * 10,
                  message,
                  userName: userName,
                }
                setMessages([...messages, msg])
                setMessage("")

                socket.emit("message", msg)
              }}
            >
              Send
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

As you can see we first imported socket.io. Then there are three parts to make it work. The first part is to connect to our WebSocket server:

import socketIOClient from "socket.io-client"
const socket = socketIOClient("http://localhost:8080")

The second part is to listen to incoming messages from the backend. As soon as there is a new message we save it into our local state:

socket.on("message", message => {
  setMessages([...messages, message])
})

The third part is when we click on Send button which is simply emitting a new message to the WebSocket server:

socket.emit("message", msg)

That's it. We just built a simple chat application in just a few minutes. Now let's create the same functionality using .NET Core.

WebSocket Server (.NET Core)

To create a WebSocket server in .NET Core we should use SignalR as it's incredibly simple yet powerful library to create real-time web applications. So let's type in the following commands to create a project:

mkdir -p websocket/dotnet && cd "$_"
dotnet new web

Next we need something called Hub which is a class for listening and emitting data to subscribers. So let's create a Hub called ChatHub:

public class ChatHub : Hub
{
    public async Task Message(MessageModel message)
    {
        await Clients.Others.SendAsync("message", message);
    }
}

public class MessageModel
{
    public string UserName { get; set; }
    public string Message { get; set; }
}

Then we will need to configure the server to respond to WebSocket requests. So let's change Startup.cs as the following:

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
        {
            builder
            .AllowAnyMethod()
            .AllowAnyHeader()
            .WithOrigins("http://localhost:3000");
        }));
        services.AddSignalR();
    }
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseCors("CorsPolicy");


        app.UseRouting();
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapHub<ChatHub>("/chatHub", options =>
            {
                options.Transports = HttpTransportType.WebSockets;
            });
        });
    }
}

It worth mentioning that SignalR includes some built-in transports to keep the underlying connection open. It means that it automatically chooses the most efficient transport type during an initial stage called negotiation. In the code, we have purposely set WebSockets transport by passing in a second argument to MapHub method. This is because the main focus of this blog post. But you can set other supported transports if you want to, If you don't explicitly set the transports, SignalR will use the most efficient type for you as mentioned. That's it. The server is now ready to communicate with the client. Unfortunately, the client part needs a couple of changes as the socket.io-client package doesn't support SignalR for its server as they are different in implementation. It means that we need to change the client code and the way it communicates with the server. First, we need to install an official Microsoft package:

yarn add @microsoft/signalr

Since the component structure is almost the same with one we had in socket.io-client so I'll just add the differences. First we need to import the SignalR package:

import {
  HubConnectionBuilder,
  LogLevel,
  HttpTransportType,
} from "@microsoft/signalr"

Then we need to have a way to initialize and open the connection. We could do that by defining a useEffect hook:

const [connection, setConnection] = useState();

useEffect(
  configSocket();
  // as before
}, []);

const configSocket = async () => {
  const socketConnection = new HubConnectionBuilder()
    .configureLogging(LogLevel.Debug)
    .withUrl("http://localhost:5000/chatHub", {
      skipNegotiation: true,
      transport: HttpTransportType.WebSockets,
    })
    .build();
  await socketConnection.start();
  setConnection(socketConnection);
 };

We only want to initialize connection when the component mounts that's why we provided an empty array as a second argument for the effect hook. Next we need to listen to any incoming message:

connection &&
  connection.on("message", message => {
    setMessages([...messages, message])
  })

As the final step we need a way to emit the messages when a user clicks on Send button:

<button
  className="btn btn-primary btn-sm"
  onClick={_ => {
    // as before

    connection && connection.invoke("message", msg)
  }}
>
  Send
</button>

That's all we need to do to configure SignalR into our React application. Now you can run the project and see the result:

Note: If you want to host the SignalR server on IIS you will have to enable WebSocket on IIS because it's not enabled by default. You can follow this process to enable it:

Source code (https://github.com/SirwanAfifi/realtime)

MobX with React and TypeScript

Sirwan Afifi — Sun, 05 Jan 2020 11:28:49 +0000

MobX is one of the popular state management libraries. One of the great things about MobX is that we can store state in a simple data structure and allow the library to take care of keeping everything up to date. The MobX API is pretty simple; in fact, it has these four simple building blocks at its core:

Observable
Actions
Computed
Reactions

Observable

The idea is that when the data changes, the observable object notifies the observers. To define a property as observable, all we need to do is to use @observable decorator:

class TodoStore {
  @observable todos: Todo[]
}

Now When a new value is assigned to todos array, the notifications will fire, and all the associated observers will be notified.

Actions

Action is a way to change an observable (update the state). To define an action, we decorate methods inside the store with @action:

@action toggleTodo = (id: string) => {
    this.todos = this.todos.map(todo => {
      if (todo.id === id) {
        return {
          ...todo,
          completed: !todo.completed
        };
      }
      return todo;
    });
};

Computed

Computed can be used to derive values from the existing state or other computed values:

@computed get info() {
    return {
      total: this.todos.length,
      completed: this.todos.filter(todo => todo.completed).length,
      notCompleted: this.todos.filter(todo => !todo.completed).length
    };
}

Reactions

Reactions track observables from inside the store itself. In the example below if the action to set todos is called, then it runs the second argument.

class TodoStore {
  constructor() {
    reaction(
      () => this.todos,
      _ => console.log(this.todos.length)
    );
  }

Creating a Simple Todo App with MobX and React

Now that we have talked about the main concepts, let's create a simple todo app using React, MobX and TypeScript:

So go to the terminal, create a directory then CD into it then type in this command to scaffold a new React project:

npx create-react-app . --typescript

For this project, I am using Bootstrap so let's add it as a dependency to the newly created project:

yarn add bootstrap --save

Now go to index.tsx and import bootstrap.css:

import "bootstrap/dist/css/bootstrap.css"

Now we'll install the needed dependencies:

yarn add mobx mobx-react-lite uuid @types/uuid --save

The next thing we have to do is to set experimentalDecorators flag to true in tsconfig.json in order for the MobX decorators to compile properly:

{
  "compilerOptions": {
    // other stuff...

    "experimentalDecorators": true
  }
}

After all the above stuff is done, we have MobX ready to go. Now let's create a store inside the project src/stores/TodoStore.ts. Add the following code to it:

import { observable, action, computed, reaction } from "mobx"
import { createContext } from "react"
import uuidv4 from "uuid/v4"

export interface Todo {
  id?: string;
  title: string;
  completed: boolean;
}

class TodoStore {
  constructor() {
    reaction(() => this.todos, _ => console.log(this.todos.length))
  }

  @observable todos: Todo[] = [
    { id: uuidv4(), title: "Item #1", completed: false },
    { id: uuidv4(), title: "Item #2", completed: false },
    { id: uuidv4(), title: "Item #3", completed: false },
    { id: uuidv4(), title: "Item #4", completed: false },
    { id: uuidv4(), title: "Item #5", completed: true },
    { id: uuidv4(), title: "Item #6", completed: false },
  ]

  @action addTodo = (todo: Todo) => {
    this.todos.push({ ...todo, id: uuidv4() })
  }

  @action toggleTodo = (id: string) => {
    this.todos = this.todos.map(todo => {
      if (todo.id === id) {
        return {
          ...todo,
          completed: !todo.completed,
        }
      }
      return todo
    })
  }

  @action removeTodo = (id: string) => {
    this.todos = this.todos.filter(todo => todo.id !== id)
  }

  @computed get info() {
    return {
      total: this.todos.length,
      completed: this.todos.filter(todo => todo.completed).length,
      notCompleted: this.todos.filter(todo => !todo.completed).length,
    }
  }
}

export default createContext(new TodoStore())

Now create a new folder called components in the src directory and add TodoAdd.tsx and TodoList.tsx.

TodoAdd

import React, { useContext, useState } from "react"
import TodoStore from "../stores/TodoStore"
import { observer } from "mobx-react-lite"

const AddTodo = () => {
  const [title, setTitle] = useState("")
  const todoStore = useContext(TodoStore)
  const { addTodo, info } = todoStore

  return (
    <>
      <div className="alert alert-primary">
        <div className="d-inline col-4">
          Total items: &nbsp;
          <span className="badge badge-info">{info.total}</span>
        </div>
        <div className="d-inline col-4">
          Finished items: &nbsp;
          <span className="badge badge-info">{info.completed}</span>
        </div>
        <div className="d-inline col-4">
          Unfinished items: &nbsp;
          <span className="badge badge-info">{info.notCompleted}</span>
        </div>
      </div>
      <div className="form-group">
        <input
          className="form-control"
          type="text"
          value={title}
          placeholder="Todo title..."
          onChange={e => setTitle(e.target.value)}
        />
      </div>
      <div className="form-group">
        <button
          className="btn btn-primary"
          onClick={_ => {
            addTodo({
              title: title,
              completed: false,
            })
            setTitle("")
          }}
        >
          Add Todo
        </button>
      </div>
    </>
  )
}

export default observer(AddTodo)

TodoList

import React, { useContext } from "react";
import TodoStore from "../stores/TodoStore";
import { observer } from "mobx-react-lite";

const TodoList = () => {
  const todoStore = useContext(TodoStore);
  const { todos, toggleTodo, removeTodo } = todoStore;
  return (
    <>
      <div className="row">
        <table className="table table-hover">
          <thead className="thead-light">
            <tr>
              <th>Title</th>
              <th>Completed?</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {todos.map(todo => (
              <tr key={todo.id}>
                <td>{todo.title}</td>
                <td>{todo.completed ? "✅" : ""}</td>
                <td>
                  <button
                    className="btn btn-sm btn-info"
                    onClick={_ => toggleTodo(todo.id!)}
                  >
                    Toggle
                  </button>
                  <button
                    className="btn btn-sm btn-danger"
                    onClick={_ => removeTodo(todo.id!)}
                  >
                    Remove
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
};

export default observer(TodoList);

Both components use observer which is an HOC to make the components observers of our store. So any changes to any of the observable will cause the React components to re-render.

That’s it 🚀 You’re now up and going with MobX in your React application.

Here's the source for the project.

Originally published at https://sirwan.info/blog

Server-Sent Events and React

Sirwan Afifi — Mon, 23 Dec 2019 08:39:28 +0000

Originally posted on my blog

Server Sents Events are realtime events sent from the server to the client. It's a way to subscribe to a data stream sent by a server. Basically, it is a long-running HTTP connection with a particular mime type. Contrary to WebSocket, Server-Sent Events are unidirectional which clients subscribe to a channel and get data from the server. Updates for the data are pushed to the client in realtime as they occur, so the client doesn't need to initiate any requests. When using SSE, we should consider these:

Requests can be redirected HTTP 301(permanent) & 307(temporary)
Only UTF-8 decoding is supported, no binary data
Protocol supports multiple type of events, default is message
Clients always reconnect (no need to handle)
Server sends HTTP 204 No Content to stop reconnection
Limited amount of global connections per site

Server Implementation:

Implementing it on the server is pretty easy. All we need to do is running an endless loop. Inside the loop, we should set the somespecial HTTP headers and push the data to the response every 2 seconds:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env,
        ILogger<Startup> loggerDebug, Datasource datasource)
{
    app.UseCors("MyPolicy");

    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapGet("/stream", async context =>
        {
            var response = context.Response;
            response.Headers.Add("connection", "keep-alive");
            response.Headers.Add("cach-control", "no-cache");
            response.Headers.Add("content-type", "text/event-stream");

            while (true)
            {
                await response.Body
                    .WriteAsync(Encoding.UTF8.GetBytes($"data: {JsonSerializer.Serialize(datasource.GetData())}\n\n"));

                await response.Body.FlushAsync();
                await Task.Delay(2 * 1000);
            }

        });
    });
}

Here's also a Node.js version of the server:

app.get("/stream", (req, res) => {
  res.set({
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
    Connection: "keep-alive",

    // enabling CORS
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers":
      "Origin, X-Requested-With, Content-Type, Accept",
  })

  setInterval(() => {
    res.write(`data: ${JSON.stringify(getData())}\n\n`)
  }, 2000)
})

As you can see, we are sending the data in a specific format:

data: My message\n\n

Frontend Implementation

Implementing it on the client is fairly easy. All we need to do is making use of EventSource API, which is a standard interface to interact with the Server-Sent Events protocol. It basically opens a persistent connection to our HTTP server. The cool thing about the API is that it keeps the connection open until we call EventSource.close():

import React from "react"

const ProductList = () => {
  const [data, setData] = React.useState([] as any)

  const formatter = new Intl.NumberFormat("en-GB", {
    style: "currency",
    currency: "gbp",
  })

  React.useEffect(() => {
    let eventSource = new EventSource("http://localhost:5000/stream")
    eventSource.onmessage = e => updateProdutList(JSON.parse(e.data))
  }, [])

  const updateProdutList = (product: any) => {
    setData([...product])
  }

  return (
    <table className="table table-hover">
      <thead className="thead-dark">
        <tr>
          <th>Id</th>
          <th>Title</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        {data.map((p: any) => (
          <tr key={p.Id}>
            <td>{p.Id}</td>
            <td>{p.Title}</td>
            <td>{formatter.format(p.Price)}</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

export { ProductList }

Here we have passed in the SSE endpoint URL to the EventSource constructor. It then goes and establishes the communication channel between the React app and the server. Then we added onmessage event handler which is called when new data is received. updateProdutList is responsible for updating the state so once the data is received we update the state with the latest data. The process of subscribing to the endpoint happens once the ProductList component is mounted; that's why we used useEffect inside the component.

You can see the output here
Source code (https://github.com/SirwanAfifi/realtime)