Firestore Chat

Introduction

The Firestore chat package includes components you need to build a functioning chat user experience in React js with support for one to one and group chat. It uses Firebase as the backend service.

The Package takes care of the basic functionality requirements for any chat application. In this project We have used the following Firebase services.

• Firebase Authentication : For authentication user by email and password
• Firebase Firestore Database : It is the db we used for Firestore chat
• Firebase Storage : That's we used to store images and videos

Main features

- One to one chat
- Group chat
- Firebase authentication
- User listing
- User block - unblock
- User search
- Group create
- Group edit
- Group exit
- Message seen - unseen

Installation

To install Firestore chat on your project, follow below steps:

Step 1 - Install Firestore chat

Use the following command to install Firestore chat

$ npm install chatverse --save-exact

Step 2 - Firebase Registration

After a user is registered in the main project we need to register and add that user to firestore chat also, for that purpose, we can use firebaseSignUp function which can be imported from the firestore chat package and this function will return a Firebase uid which can be stored in the database of main project against the particular registered user.

import { RegisterToChat } from 'chatverse';

const [firebaseConfig, setFirebaseConfig] = useState({
    apiKey: ' ',

    authDomain: '',

    databaseURL: '',

    projectId: '',

    storageBucket: '',

    messagingSenderId: '',

    appId: '',

    measurementId: '',
  });

  const email = data.email;
  const password = data.password;
  const displayName = data.name.trim()

const firebaseData = await RegisterToChat(firebaseConfig, email, password ,displayName);

Here in the RegisterToChat function, we need to pass four arguments: firebaseConfig which is the firebase configurations, email, password and displayName which contains details of that person. The function returns the firebase uid of that particular person.

Step 3 - Firebase Login

After a user login into the main project, we need to log in that user to firestore chat also, for that purpose, we can use the LoginToChat function which can be imported from the chatverse package and this function will return a Firebase uid if the firebase login is successful.

import { LoginToChat } from 'chatverse';

const [firebaseConfig, setFirebaseConfig] = useState({
    apiKey: ' ',

    authDomain: '',

    databaseURL: '',

    projectId: '',

    storageBucket: '',

    messagingSenderId: '',

    appId: '',

    measurementId: '',
  });

const firebaseData = await LoginToChat( firebaseConfig, email, password );

Here in the LoginToChat function, we need to pass three arguments: email, password which is the email and password of the user we are trying to login and firebaseConfig which is the firebase configurations. The function returns the firebase uid of that particular person.

Step 4 - Package Loading

After the firebase authentication functions are implemented, finally we can load the chat component of firestore chat in our desired functional component in the main project, we can load the chat component by importing FirestoreChat from the firestore chat package and then render it.

import { FirestoreChat } from 'chatverse';

const [customStyle, setCustomStyle] = useState({
    primaryColor: '#6b5dd3',
    secondaryColor: '#9083e9',
  });
  const [condition, setCondition] = useState(false);
  const [firebaseConfig, setFirebaseConfig] = useState({
    apiKey: '',

    authDomain: '',

    databaseURL: '',

    projectId: '',

    storageBucket: '',

    messagingSenderId: '',

    appId: '',

    measurementId: '',
  });

    <FirestoreChat
        firebaseConfig={firebaseConfig} 
        condition={condition} 
        styles={customStyle}
       />

While loading the Chat component of the firestore chat, we also needed to pass some data as props like firebase configurations and some basic styles like primary color, secondary color.

| prop | description | required | default | |-------------|-------------|-------------|-------------| | firebaseConfig | Firebase configuration details| true | None | | | condition | Conditional listing is used to decide whether the listing of users in firestore chat should conditional based or not. | true | None | | styles | The styles props can be used to set some basic styles of package like primary color, secondary color | true | None |

Styles

| style | description | required | default | |-------------|-------------|-------------|-------------| | primaryColor | Primary color of the firestore chat | true | None | | | secondaryColor | Secondary color of the firestore chat | true | None |

Conditional based user listing

If we want the user's list from which we can chat in firestore chat to be conditional based like we only want to chat with other users who are our followers or friends, then we can use a conditional-based user listing, to activate conditional-based user listing we need to do two things:

• set conditional_listing to true while we load the chat component

  Example -

  const [condition, setCondition] = useState(true);
   <Chat
     firebaseConfig={firebaseConfig}
     condition={condition}
     styles={customStyle}
    />

  • While following or connecting to other users call the AddUserToChat and RemoveUserToChat functions in the firestore chat package and pass the firebase uid's of the following user and followed user.

  Example - Adding Friend or Follower

   import { AddUserToChat } from 'chatverse';

  const [firebaseConfig, setFirebaseConfig] = useState({
    apiKey: ' ',
  
    authDomain: '',
  
    databaseURL: '',
  
   projectId: '',
  
   storageBucket: '',
  
   messagingSenderId: '',
  
   appId: '',
  
   measurementId: '',
  });
  
  const firebaseData = await AddUserToChat(current_user, friend, firebaseConfig);

• Removing Friend or Follower

   import { RemoveUserToChat } from 'chatverse';

  const [firebaseConfig, setFirebaseConfig] = useState({
    apiKey: ' ',
  
    authDomain: '',
  
    databaseURL: '',
  
   projectId: '',
  
   storageBucket: '',
  
   messagingSenderId: '',
  
   appId: '',
  
   measurementId: '',
  });
  

const firebaseData = await RemoveUserToChat(current_user, friend, firebaseConfig);

Here in the function AddUserToChat and  RemoveUserToChat we need to pass three arguments:
- current_user :  firebase uid of the following user
- friend :  firebase uid of the followed user
- firebaseConfig :  firebase configurations