migrate utils.ts to firebase 9

Author: surajmandalcell

.prettierrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   jsxSingleQuote: true,
-  semi: false,
   singleQuote: true,
+  trailingComma: 'es2017',
+  semi: false,
 }

package.json

@@ -82,5 +82,8 @@
     "ignoreUnread": true,
     "is": 100,
     "showRelativePath": true
+  },
+  "dependencies": {
+    "firebase": "^9.6.7"
   }
 }

src/index.ts

@@ -1,7 +1,10 @@
+// React 
 export * from './types'
 export * from './useFirebaseUser'
 export * from './useMessages'
 export * from './useRoom'
 export * from './useRooms'
 export * from './useUsers'
 export * from './utils'
+
+// Nodejs

src/types.ts

@@ -1,5 +1,3 @@
-import { ImageURISource } from 'react-native'
-
 /** Interface that represents the chat config. Can be used for setting custom names
  * for rooms and users collections. Call `setConfig` before doing anything else if
  * you want to change the default collection names. When using custom names don't forget
@@ -96,7 +94,7 @@ export interface PreviewDataImage {
 export interface Room {
   createdAt?: number
   id: string
-  imageUrl?: ImageURISource['uri']
+  imageUrl?: string
   lastMessages?: MessageType.Any[]
   metadata?: Record<string, any>
   name?: string
@@ -109,7 +107,7 @@ export interface User {
   createdAt?: number
   firstName?: string
   id: string
-  imageUrl?: ImageURISource['uri']
+  imageUrl?: string
   lastName?: string
   lastSeen?: number
   metadata?: Record<string, any>

src/utils.ts

@@ -1,9 +1,19 @@
-import { FirebaseAuthTypes } from '@react-native-firebase/auth'
-import firestore, {
-  FirebaseFirestoreTypes,
-} from '@react-native-firebase/firestore'
-
-import { FirebaseChatCoreConfig, Room, User } from './types'
+import auth, { UserProfile } from 'firebase/auth';
+import {
+  collection,
+  deleteDoc,
+  doc,
+  DocumentData,
+  DocumentSnapshot,
+  Firestore,
+  getDoc,
+  QueryDocumentSnapshot,
+  QuerySnapshot,
+  serverTimestamp,
+  setDoc,
+} from 'firebase/firestore/lite';
+
+import { FirebaseChatCoreConfig, Room, User } from './types';
 
 export let ROOMS_COLLECTION_NAME = 'rooms'
 export let USERS_COLLECTION_NAME = 'users'
@@ -16,40 +26,43 @@ export const setConfig = (config: FirebaseChatCoreConfig) => {
 }
 
 /** Creates {@link User} in Firebase to store name and avatar used on rooms list */
-export const createUserInFirestore = async (user: User) => {
-  await firestore().collection(USERS_COLLECTION_NAME).doc(user.id).set({
-    createdAt: firestore.FieldValue.serverTimestamp(),
+export const createUserInFirestore = async (user: User, db: Firestore) => {
+  const _collection = collection(db, USERS_COLLECTION_NAME)
+  const _doc = doc(_collection, user.id);
+  await setDoc(_doc, {
+    createdAt: serverTimestamp(),
     firstName: user.firstName,
     imageUrl: user.imageUrl,
     lastName: user.lastName,
     lastSeen: user.lastSeen,
     metadata: user.metadata,
     role: user.role,
-    updatedAt: firestore.FieldValue.serverTimestamp(),
-  })
+    updatedAt: serverTimestamp(),
+  });
 }
 
 /** Removes {@link User} from `users` collection in Firebase */
-export const deleteUserFromFirestore = async (userId: string) => {
-  await firestore().collection(USERS_COLLECTION_NAME).doc(userId).delete()
+export const deleteUserFromFirestore = async (userId: string, db: Firestore) => {
+  const _collection = collection(db, USERS_COLLECTION_NAME)
+  const _doc = doc(_collection, userId)
+  await deleteDoc(_doc);
 }
 
 /** Fetches user from Firebase and returns a promise */
-export const fetchUser = async (userId: string, role?: User['role']) => {
-  const doc = await firestore()
-    .collection(USERS_COLLECTION_NAME)
-    .doc(userId)
-    .get()
+export const fetchUser = async (userId: string, db: Firestore, role?: User['role']) => {
+  const _collection = collection(db, USERS_COLLECTION_NAME)
+  const _doc = doc(_collection, userId);
+  const __doc = await getDoc(_doc);
 
-  const data = doc.data()!
+  const data = __doc.data()!
 
   const user: User = {
     // Ignore types here, not provided by the Firebase library
     // type-coverage:ignore-next-line
     createdAt: data.createdAt?.toMillis() ?? undefined,
     // type-coverage:ignore-next-line
     firstName: data.firstName ?? undefined,
-    id: doc.id,
+    id: __doc.id,
     // type-coverage:ignore-next-line
     imageUrl: data.imageUrl ?? undefined,
     // type-coverage:ignore-next-line
@@ -71,33 +84,37 @@ export const fetchUser = async (userId: string, role?: User['role']) => {
 export const processRoomsQuery = async ({
   firebaseUser,
   query,
+  db
 }: {
-  firebaseUser: FirebaseAuthTypes.User
-  query: FirebaseFirestoreTypes.QuerySnapshot
+  firebaseUser: UserProfile,
+  query: QuerySnapshot
+  db: Firestore
 }) => {
-  const promises = query.docs.map(async (doc) =>
-    processRoomDocument({ doc, firebaseUser })
+  const promises = query.docs.map(async (_doc) =>
+    processRoomDocument({ _doc, firebaseUser, db })
   )
 
   return await Promise.all(promises)
 }
 
 /** Returns a {@link Room} created from Firebase document */
 export const processRoomDocument = async ({
-  doc,
+  _doc,
   firebaseUser,
+  db
 }: {
-  doc:
-    | FirebaseFirestoreTypes.DocumentSnapshot<FirebaseFirestoreTypes.DocumentData>
-    | FirebaseFirestoreTypes.QueryDocumentSnapshot<FirebaseFirestoreTypes.DocumentData>
-  firebaseUser: FirebaseAuthTypes.User
+  _doc:
+  | DocumentSnapshot<DocumentData>
+  | QueryDocumentSnapshot<DocumentData>,
+  firebaseUser: UserProfile,
+  db: Firestore
 }) => {
-  const data = doc.data()!
+  const data = _doc.data()!
 
   // Ignore types here, not provided by the Firebase library
   // type-coverage:ignore-next-line
   const createdAt = data.createdAt?.toMillis() ?? undefined
-  const id = doc.id
+  const id = _doc.id
   // type-coverage:ignore-next-line
   const updatedAt = data.updatedAt?.toMillis() ?? undefined
 
@@ -117,7 +134,7 @@ export const processRoomDocument = async ({
     (data.userRoles as Record<string, User['role']>) ?? undefined
 
   const users = await Promise.all(
-    userIds.map((userId) => fetchUser(userId, userRoles?.[userId]))
+    userIds.map((userId) => fetchUser(userId, db, userRoles?.[userId]))
   )
 
   if (type === 'direct') {

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "declaration": true,
     "esModuleInterop": true,
-    "jsx": "react-native",
+    "jsx": "react",
     "lib": ["ESNext"],
     "module": "CommonJS",
     "noEmitOnError": true,