created random name generator

schema.ts

@@ -15,6 +15,11 @@ const collection = {
       },
     },
   },
+  users: {
+    userId: {
+      name: 'Anonymous',
+    },
+  },
 };
 
 // Realtime Database - needed for tracking user presence

src/pages/Home.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
 import { db, timestamp, auth, rtdb } from '../services/firebase';
 import './Home.css';
+import { generateAnonName } from '../services/random';
 
 const Home: React.FC = () => {
   const [loading, setLoading] = useState(true);
@@ -25,12 +26,15 @@ const Home: React.FC = () => {
 
   // Sign in anonymously before showing Create Room button
   useEffect(() => {
-    const authUnsubscribe = auth.onAuthStateChanged((user) => {
+    const authUnsubscribe = auth.onAuthStateChanged(async (user) => {
       if (user) {
         setUserId(user.uid);
         setLoading(false);
       } else {
-        auth.signInAnonymously();
+        const credential = await auth.signInAnonymously();
+        await db.collection('users').doc(credential.user?.uid).set({
+          name: generateAnonName(),
+        });
       }
     });
 

src/pages/Room.tsx

@@ -1,8 +1,9 @@
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
 import React, { useEffect, useState } from 'react';
 import { RouteComponentProps, useHistory } from 'react-router';
-import { auth, db, rtdb, increment, decrement } from '../services/firebase';
 import Chat from '../components/Chat';
+import { auth, db, decrement, increment, rtdb } from '../services/firebase';
+import { generateAnonName } from '../services/random';
 
 const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
   const history = useHistory();
@@ -30,11 +31,14 @@ const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
 
   // Handle logging in
   useEffect(() => {
-    const authUnsubscribe = auth.onAuthStateChanged((user) => {
+    const authUnsubscribe = auth.onAuthStateChanged(async (user) => {
       if (user) {
         setUserId(user.uid);
       } else {
-        auth.signInAnonymously();
+        const credential = await auth.signInAnonymously();
+        await db.collection('users').doc(credential.user?.uid).set({
+          name: generateAnonName(),
+        });
       }
     });
 
@@ -43,13 +47,14 @@ const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
     };
   }, []);
 
-  // Keep track of online user presence in realtime database rooms
+  // Subscribe listeners
   useEffect(() => {
     if (!didConnect && userId !== '' && validRoom) {
       const populateRoom = () => {
         const roomRef = rtdb.ref('/rooms/' + roomId);
         const availableRef = rtdb.ref('/available/');
 
+        // Keep track of online user presence in realtime database rooms
         roomRef.on('value', async (snapshot) => {
           if (!snapshot.hasChild(userId)) {
             // Keep userId in the room as long as a connection from the client exists

src/services/random.ts

@@ -0,0 +1,51 @@
+const adjectives = [
+  'Adamant',
+  'Instinctive',
+  'Actually',
+  'Husky',
+  'Bent',
+  'Fascinated',
+  'Sexual',
+  'Mute',
+  'Silent',
+  'Coherent',
+  'Juvenile',
+  'Naughty',
+  'Foreign',
+  'Earthy',
+  'Diligent',
+  'Anxious',
+  'Adorable',
+  'Quack',
+  'Unequal',
+  'Sharp',
+];
+
+const animals = [
+  'Chimpanzee',
+  'Bison',
+  'Squirrel',
+  'Lemur',
+  'Wolf',
+  'Dingo',
+  'Colt',
+  'Seal',
+  'Cougar',
+  'Ram',
+  'Parakeet',
+  'Goat',
+  'Ape',
+  'Basilisk',
+  'Oryx',
+  'Iguana',
+  'Stallion',
+  'Jackal',
+  'Snake',
+  'Zebra',
+];
+
+export const generateAnonName = (): string => {
+  const adj: string = adjectives[Math.floor(Math.random() * 20)];
+  const animal: string = animals[Math.floor(Math.random() * 20)];
+  return adj + ' ' + animal;
+};