- Move utils to common/utils.ts

- Migrate all except useRooms
- Refactor small changes

Author: surajmandalcell

src/common/index.ts

@@ -0,0 +1 @@
+export * from './utils'

src/react/utils.ts src/common/utils.tssrc/react/utils.ts renamed to src/common/utils.ts

@@ -13,7 +13,7 @@ import {
   setDoc,
 } from 'firebase/firestore';
 
-import { IFirebaseChatCoreConfig, IRoom, IUser } from './types';
+import { IFirebaseChatCoreConfig, IRoom, IUser } from '../react/types';
 
 export let ROOMS_COLLECTION_NAME = 'rooms'
 export let USERS_COLLECTION_NAME = 'users'

src/react/index.ts

@@ -3,5 +3,4 @@ export * from './useFirebaseUser'
 export * from './useMessages'
 export * from './useRoom'
 export * from './useRooms'
-export * from './useUsers'
-export * from './utils'
+export * from './useUsers'

src/react/useFirebaseUser.ts

@@ -3,9 +3,7 @@ import React from 'react';
 
 export const useFirebaseUser = () => {
   const auth = getAuth();
-  const [firebaseUser, setFirebaseUser] = React.useState<
-    User | undefined
-  >()
+  const [firebaseUser, setFirebaseUser] = React.useState<User | undefined>()
 
   React.useEffect(() => {
     return onAuthStateChanged(auth, (user) => {

src/react/useMessages.ts

@@ -1,58 +1,69 @@
-import firestore from '@react-native-firebase/firestore';
-import * as React from 'react';
+import {
+  collection,
+  doc,
+  Firestore,
+  onSnapshot,
+  orderBy,
+  query,
+  serverTimestamp,
+  setDoc,
+  updateDoc,
+} from 'firebase/firestore';
+import React from 'react';
 
 import { IRoom, MessageType } from './types';
 import { useFirebaseUser } from './useFirebaseUser';
 
 /** Returns a stream of messages from Firebase for a given room */
-export const useMessages = (room: IRoom) => {
+export const useMessages = (room: IRoom, db: Firestore) => {
   const [messages, setMessages] = React.useState<MessageType.Any[]>([])
   const { firebaseUser } = useFirebaseUser()
 
   React.useEffect(() => {
-    return firestore()
-      .collection(`rooms/${room.id}/messages`)
-      .orderBy('createdAt', 'desc')
-      .onSnapshot((query) => {
-        const newMessages: MessageType.Any[] = []
-
-        query.forEach((doc) => {
-          // Ignore `authorId`, `createdAt` and `updatedAt` types here, not provided by the Firebase library
-          // type-coverage:ignore-next-line
-          const { authorId, createdAt, updatedAt, ...rest } = doc.data()
+    const _collection = collection(db, `rooms/${room.id}/messages`);
+    const _query = query(_collection, orderBy('createdAt', 'desc'));
+    const _onSnapshot = onSnapshot(_query, (query) => {
+      const newMessages: MessageType.Any[] = []
+
+      query.forEach((doc) => {
+        // Ignore `authorId`, `createdAt` and `updatedAt` types here, not provided by the Firebase library
+        // type-coverage:ignore-next-line
+        const { authorId, createdAt, updatedAt, ...rest } = doc.data()
+
+        // type-coverage:ignore-next-line
+        const author = room.users.find((u) => u.id === authorId) ?? {
+          id: authorId as string,
+        }
 
+        newMessages.push({
+          ...rest,
+          author,
           // type-coverage:ignore-next-line
-          const author = room.users.find((u) => u.id === authorId) ?? {
-            id: authorId as string,
-          }
-
-          newMessages.push({
-            ...rest,
-            author,
-            // type-coverage:ignore-next-line
-            createdAt: createdAt?.toMillis() ?? undefined,
-            id: doc.id,
-            // type-coverage:ignore-next-line
-            updatedAt: updatedAt?.toMillis() ?? undefined,
-          } as MessageType.Any)
-        })
-
-        setMessages(newMessages)
+          createdAt: createdAt?.toMillis() ?? undefined,
+          id: doc.id,
+          // type-coverage:ignore-next-line
+          updatedAt: updatedAt?.toMillis() ?? undefined,
+        } as MessageType.Any)
       })
+
+      setMessages(newMessages)
+    })
+
+    return _onSnapshot
   }, [room.id, room.users])
 
   /** Sends a message to the Firestore. Accepts any partial message. */
   const sendMessage = async (message: MessageType.PartialAny) => {
     if (!firebaseUser) return
 
-    await firestore()
-      .collection(`rooms/${room.id}/messages`)
-      .add({
-        ...message,
-        authorId: firebaseUser.uid,
-        createdAt: firestore.FieldValue.serverTimestamp(),
-        updatedAt: firestore.FieldValue.serverTimestamp(),
-      })
+    const _collection = collection(db, `rooms/${room.id}/messages`);
+    const _doc = doc(_collection);
+    await setDoc(_doc, {
+      ...message,
+      authorId: firebaseUser.uid,
+      createdAt: serverTimestamp(),
+      updatedAt: serverTimestamp(),
+    })
   }
 
   /** Updates a message in the Firestore. Accepts any message.
@@ -68,14 +79,14 @@ export const useMessages = (room: IRoom) => {
     delete messageToSend.createdAt
     delete messageToSend.id
 
-    await firestore()
-      .collection(`rooms/${room.id}/messages`)
-      .doc(message.id)
-      .update({
-        ...messageToSend,
-        authorId: message.author.id,
-        updatedAt: firestore.FieldValue.serverTimestamp(),
-      })
+    const _collection = collection(db, `rooms/${room.id}/messages`);
+    const _doc = doc(_collection, message.id);
+
+    await updateDoc(_doc, {
+      ...messageToSend,
+      authorId: message.author.id,
+      updatedAt: serverTimestamp(),
+    })
   }
 
   return { messages, sendMessage, updateMessage }

src/react/useRoom.ts

@@ -1,10 +1,9 @@
 import { collection, doc, Firestore, onSnapshot } from 'firebase/firestore';
 import React from 'react';
 
-import { ROOMS_COLLECTION_NAME } from '.';
+import { processRoomDocument, ROOMS_COLLECTION_NAME } from '../common/utils';
 import { IRoom } from './types';
 import { useFirebaseUser } from './useFirebaseUser';
-import { processRoomDocument } from './utils';
 
 /** Returns a stream of changes in a room from Firebase */
 export const useRoom = (initialRoom: IRoom, db: Firestore) => {

src/react/useRooms.ts

@@ -1,10 +1,8 @@
-import firestore from '@react-native-firebase/firestore';
-import * as React from 'react';
+import React from 'react';
 
-import { ROOMS_COLLECTION_NAME } from '.';
+import { fetchUser, processRoomsQuery, ROOMS_COLLECTION_NAME } from '../common/utils';
 import { IRoom, IUser } from './types';
 import { useFirebaseUser } from './useFirebaseUser';
-import { fetchUser, processRoomsQuery } from './utils';
 
 /** Returns a stream of rooms from Firebase. Only rooms where current
  * logged in user exist are returned. `orderByUpdatedAt` is used in case

src/react/useUsers.ts

@@ -1,7 +1,7 @@
 import { collection, Firestore, onSnapshot } from 'firebase/firestore';
 import React from 'react';
 
-import { USERS_COLLECTION_NAME } from '.';
+import { USERS_COLLECTION_NAME } from '../common/utils';
 import { IUser } from './types';
 import { useFirebaseUser } from './useFirebaseUser';