Understanding “Chat” Functionality

Implementing chat function is always one of the hard tasks in an application. But now you do not have to be scared. Because now you’ll make the chat function in no time in any kind of website application or mobile application.

Implementing Chat function always follows a same concept on different UI’s, you can go and check Whatsapp clone, discord clone, slack clone, tinder clone. You’ll always find same input on your code.

Discord is a channel based chat application which was initially made for gamers. Gamers initially had the facility to talk about games in specific channels and play games together in a “Voice Channel” where they can actually talk to each other, and share their computer screens.

Discord has evolved and now people use Discord even for general purposes, there are a lot of communities on Discord, there are coding communities too!

Discord has grown a lot and their userbase increases by a lot everyday.

We had previously dropped an article on Discord Clone, where we made a complete Discord Clone using React, Redux and Firebase. Today, we are going to look at a specific part of the blog, that is, messaging functionality in the clone.

→ Let’s get started with designing our chat Functionality

We’re going to build the Chat component. In VSC, create a file called Chat.js. In App.js, create a <Chat /> self closing tag. Don’t forget to import Chat.js into App.js, otherwise it won’t work. We are going to style App.css first, so that we can pre-define the space for chat, so add a display of flex to the app class.(see the code below for better understanding.)

Going into Chat.js now, type the magic command “rfce” (if you have extension installed into your VSCode) to get the boilerplate. Add a className of “chat” to the parent div and add the below import statement.

import “./Chat.css”;

After you’ve added the above import statement, create a file named Chat.css. Inside Chat.js, add an h2 saying “Chat”.

Going into Chat.css, let’s add a display of flex, flex-direction of column, flex of 0.75 to take up the remainder of space, height of 100vh.

.chat {  
      display: flex;
      flex-direction: column;  
      flex: 0.75;  
      background-color: #yourChoice;  
      height: 100vh;
 }

Go into Chat.js now, create two new divs one with a class name of “chat__messages” and the other one “chat__input”. Let’s build the input first then we can build the messages part. Inside chat__input, we are going to add a few Material-UI icons, but first we will add a circle icon with the following import statement and self-closing tag.

import AddCircleIcon from "@material-ui/icons/AddCircle";
  <AddCircleIcon fontSize="large" />

Below that, we are going to create a form with an input and the placeholder should be “Message… ”. We are going to create a button with the type being “submit” and inside of it type “Send Message”. We are going to give a class name of chat__inputButton to style it later. We are going to create another div under it called chat__inputIcons and put three icons in there. Don’t forget their import statements.

import CardGiftcardIcon from “@material-ui/icons/CardGiftcard”;
import GifIcon from “@material-ui/icons/Gif”;
import EmojiEmotionsIcon from “@material-ui/icons/EmojiEmotions”;
<CardGiftcardIcon fontSize="large" />
<GifIcon fontSize="large" />
<EmojiEmotionsIcon fontSize="large" />

It is probably looking really bad at the moment but let’s work on looking it better. Let’s go to Chat.css to fix up some of these issues by starting with chat__input. Inside chat__input, the styles that we are going to add are “color: choiice”

display: flex;
align-items:center;
justify-content: space-between ;
padding: 15px;
border-radius: 5px;
margin: 20px;
border-top: 1px solid gray;
background-color: #choice;

Let’s now target the input tag ‘message…’ inside of the form by adding:

padding: 15px;
background: transparent;
border: none;
width: 100%; 
outline-width: 0;
color: white;
font-size: large

We need to take up most of the space, so we need to target the form tag and add a flex of 1.

Now we don’t really want to display the button because as you can see very big known companies like whatsapp, slack, discord doesn’t have a button to send messages. In order to make this change, we have to add styling to the chat__inputButton class which will be “display: none”. The icons are little squished so let’s give them some breathing room by targeting the icons an giving them a padding of 5px. Now we want the rest of the screen to be taken up by the messages and with Flexbox, which is what we are using, we can use flex: 1 to solve this problem. To prevent overflow of your messages, add these lines of code.

.chat__messages {
flex: 1;
overflow: scroll;
}
.chat__messages::-webkit-scrollbar {
display: none;
}
.chat__messages {
-ms-overflow-style: none;
scrollbar-width: none;
}

Your final Chat.css should look like this.

Now we are going to have a Message component to render the messages on the screen. First, you have to add a self-closing tag with “Message” inside of it. Secondly, create a file called Message.js and Message.css.

Inside of Message.js, type rfce and import Message.css. Add a className of “message” to the parent div and add an Avatar tag inside return ,

import { Avatar, IconButton } from “@material-ui/core”;
<Avatar />

After that, create a new div with a className of “message__info” and add an h4 inside of it with some username, however we will fill this in later with Firebase. Inside of the h4 tag, create a span tag with the className of “message__timestamp” and inside of it type “Timestamp”. We will also use Firebase to fill it in with real time. Now create a p tag outside of the h4 tag and type Message inside of it acting as a placeholder. Import Message.js in Chat.js in order to make this appear. Let’s style Message.css in order to make things look a little bit more beautiful.

We are now going to target the message class by adding: “display: flex”, “align-items: center”, “padding: 20px”, and “color: white”. Now let’s target the message__info to get some spacing in between the avatar and title by adding “margin-left: 20px”. We need to change the timestamp up a little so let’s target that class which is “message__timestamp” and add “color: gray”, “margin-left: 20px”, and “font-size: x-small” to make the timestamp smaller than the username. Now you’re blank CSS file should look something like this.

Firebase Setup

Now go to console.firebase.google.com and open your Discord Clone project. Then, click the gear icon on the sidebar and click “Project Settings”.

Once you click on that, scroll down to the bottom and you’ll see something that says “Firebase SDK Snippet”. Select “Config” and copy all of the code inside there.

Go back into Visual Studio Code and make a new file called firebase.js and paste the code from Firebase inside there. Pull up the terminal, and type the below to install Firebase into your local project.

npm i firebase

Inside firebase.js, type “import firebase from firebase;” at the top of the file. Now we need to do some configuration inside of the file. The function initializeApp will create the firebase app and firestore enables you to write to the database. Auth enables the authentication so when a user logs in it adds it to Firebase. Provider enables you to sign in using your Google Account. After that we are going to explicitly export auth and provider and default export db. If you don’t know the difference between explicitly exporting and default exporting, it’s fine because it doesn’t really matter right now. Your firebase.js should look something like this now.

Integration of Firebase in the JS file

And this is it, here we go. You are good to go.

You have a beautiful looking Message functionality in your screen, connected with your database.

Thanks

Raunak Kumar (insta: code.by.fab), and

Atharva Deosthale (insta: atharvadeosthale)