Skip to content

Latest commit

 

History

History
60 lines (40 loc) · 1.73 KB

LEARN.md

File metadata and controls

60 lines (40 loc) · 1.73 KB

How to Build Chatvoid 🔧

Before we learn how to build Chatvoid, we must first understand the concept behind it. This single paged application has an input field and two button by it's side for sending and receiving whatever text was kept in the input field. The text would be sent to an object of a selected user created earlier.

Pre Requisite

I expect you to have some knowledge on

Let's Begin

This web app is split into 2 main sections namely

  • Chat List

    This displays all the users created and has an AddNewChat component for creating new users

  • Main Chat

    This displays all the messages for the selected user

Store

Redux has a concept of store where all components that want to interact with a particular data access a single source of truth for the application while avoiding prop drilling. There are two slices (or we can call them sub stores) used here, namely;

  • users
  • util

users

This slice holds the necessary action for creating a new user. It's schema looks like this

users[]: id: string;
         username: string;
         joined: string;
         lastseen: string;
         read: boolean;
         typing: boolean;
         messages[]: day: string;
                     chats[]: id: string;
                              message: string;
                              time: string;
                              type: number;

util

This slice holds the necessary action for other utilities such as deciding which user was selected. It's schema looks like this

util: selectedMessage: number | null