hieptl’s gists

hieptl / chat.js

Created August 21, 2021 08:39

Chat - Uber Clone

	// import useContext.
	import { useContext } from 'react';
	// import Context.
	import Context from '../Context';
	// import cometchat ui.
	import { CometChatMessages } from '../cometchat-pro-react-ui-kit/CometChatWorkspace/src';
	function Chat() {

	const { user, currentRide } = useContext(Context);

hieptl / firebase.js

Created August 28, 2021 14:57

Firebase - Javascript Chat App

	const firebaseConfig = {
	apiKey: `${config.apiKey}`,
	authDomain: `${config.authDomain}`,
	databaseURL: `${config.databaseURL}`,
	projectId: `${config.projectId}`,
	storageBucket: `${config.storageBucket}`,
	messagingSenderId: `${config.messagingSenderId}`,
	appId: `${config.appId}`,
	measurementId: `${config.measurementId}`
	};

hieptl / login.html

Last active September 2, 2021 05:11

Login HTML - Javascript Chat App

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Login</title>
	<link rel="stylesheet" href="/css/styles.css">
	<script defer src="https://widget-js.cometchat.io/v2/cometchatwidget.js"></script>
	</head>

hieptl / auth.js

Last active September 2, 2021 05:12

Auth.js - Javascript Chat App


	window.addEventListener('DOMContentLoaded', function() {
	function shouldRedirectToHomePage(user, isLoginPage) {
	return user && isLoginPage;
	}

	function shouldRedirectToLoginPage(user, isLoginPage) {
	return !user && !isLoginPage;
	}

hieptl / util.js

Last active October 13, 2021 06:55

Util.js - Javascript Chat App

	const loading = document.getElementById('loading');

	function hideLoading() {
	loading.classList.add('loading--hide');
	}

	function showLoading() {
	loading.classList.remove('loading--hide');
	loading.classList.add('loading--active');
	}

hieptl / login.js

Last active September 2, 2021 05:17

Login.js - Creating a New Account - Javascript Chat App

	...
	/**
	* register a new account - register with firebase and cometchat.
	* @param {*} object - user's information that will be used to register.
	*/
	function registerNewAccount({email, password, confirmPassword}) {
	if (validateNewAccount({email, password, confirmPassword})) {
	// show loading indicator.
	showLoading();
	// get user avatar.

hieptl / login.js

Last active September 2, 2021 06:54

Login - Javascript Chat App

	...
	loginBtn.addEventListener('click', function() {
	// show loading indicator.
	showLoading();
	// get input user's credentials.
	const email = emailLoginInputElement ? emailLoginInputElement.value : null;
	const password = passwordLoginInputElement ? passwordLoginInputElement.value : null;
	if(isUserCredentialsValid({email, password})) {
	// if the user's credentials are valid, call Firebase authentication service.
	auth.signInWithEmailAndPassword(email, password).then((userCredential) => {

hieptl / index.html

Last active September 2, 2021 05:18

Index HTML - Javascript Chat App

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Chat App with Vanilla JS</title>
	<link rel="stylesheet" href="/css/styles.css">
	<script defer src="https://widget-js.cometchat.io/v2/cometchatwidget.js"></script>
	</head>

hieptl / index.js

Last active September 2, 2021 05:21

Index.js - Javascript Chat App

	window.addEventListener('DOMContentLoaded', function() {
	// hide loading indicator.
	hideLoading();
	// get authenticated user
	CometChatWidget.init({
	"appID": `${config.CometChatAppId}`,
	"appRegion": `${config.CometChatRegion}`,
	"authKey": `${config.CometChatAuthKey}`
	}).then(response => {
	CometChatWidget.CometChat.getLoggedinUser().then(

hieptl / index.js

Last active September 2, 2021 05:20

Index.js - Lauching CometChat Widget - Javascript Chat App

	...
	CometChatWidget.launch({
	"widgetID": `${config.CometChatWidgetId}`,
	"target": "#cometchat",
	"roundedCorners": "false",
	"height": "100%",
	"width": "100%",
	"defaultID": `${user.uid}`, //default UID (user) or GUID (group) to show,
	"defaultType": 'user' //user or group
	});

Hiep Le hieptl