- Restructure to make the imports seperate for node and react

- Migrate useUsers
- Migrate useRoom
- Migrate useFirebaseUser

Author: surajmandalcell

src/index.ts

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

src/react/index.ts

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

src/types.ts src/react/types.tssrc/types.ts renamed to src/react/types.ts

@@ -2,21 +2,21 @@
  * 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
  * to update your security rules and indexes. */
-export interface FirebaseChatCoreConfig {
+export interface IFirebaseChatCoreConfig {
   roomsCollectionName: string
   usersCollectionName: string
 }
 
 export namespace MessageType {
-  export type Any = Custom | File | Image | Text | Unsupported
+  export type Any = ICustom | IFile | IImage | IText | IUnsupported
   export type PartialAny =
-    | PartialCustom
-    | PartialFile
-    | PartialImage
-    | PartialText
+    | IPartialCustom
+    | IPartialFile
+    | IPartialImage
+    | IPartialText
 
-  interface Base {
-    author: User
+  interface IBase {
+    author: IUser
     createdAt?: number
     id: string
     metadata?: Record<string, any>
@@ -26,16 +26,16 @@ export namespace MessageType {
     updatedAt?: number
   }
 
-  export interface PartialCustom extends Base {
+  export interface IPartialCustom extends IBase {
     metadata?: Record<string, any>
     type: 'custom'
   }
 
-  export interface Custom extends Base, PartialCustom {
+  export interface ICustom extends IBase, IPartialCustom {
     type: 'custom'
   }
 
-  export interface PartialFile {
+  export interface IPartialFile {
     metadata?: Record<string, any>
     mimeType?: string
     name: string
@@ -44,11 +44,11 @@ export namespace MessageType {
     uri: string
   }
 
-  export interface File extends Base, PartialFile {
+  export interface IFile extends IBase, IPartialFile {
     type: 'file'
   }
 
-  export interface PartialImage {
+  export interface IPartialImage {
     height?: number
     metadata?: Record<string, any>
     name: string
@@ -58,40 +58,40 @@ export namespace MessageType {
     width?: number
   }
 
-  export interface Image extends Base, PartialImage {
+  export interface IImage extends IBase, IPartialImage {
     type: 'image'
   }
 
-  export interface PartialText {
+  export interface IPartialText {
     metadata?: Record<string, any>
-    previewData?: PreviewData
+    previewData?: IPreviewData
     text: string
     type: 'text'
   }
 
-  export interface Text extends Base, PartialText {
+  export interface IText extends IBase, IPartialText {
     type: 'text'
   }
 
-  export interface Unsupported extends Base {
+  export interface IUnsupported extends IBase {
     type: 'unsupported'
   }
 }
 
-export interface PreviewData {
+export interface IPreviewData {
   description?: string
-  image?: PreviewDataImage
+  image?: IPreviewDataImage
   link?: string
   title?: string
 }
 
-export interface PreviewDataImage {
+export interface IPreviewDataImage {
   height: number
   url: string
   width: number
 }
 
-export interface Room {
+export interface IRoom {
   createdAt?: number
   id: string
   imageUrl?: string
@@ -100,10 +100,10 @@ export interface Room {
   name?: string
   type: 'channel' | 'direct' | 'group' | 'unsupported'
   updatedAt?: number
-  users: User[]
+  users: IUser[]
 }
 
-export interface User {
+export interface IUser {
   createdAt?: number
   firstName?: string
   id: string

src/useFirebaseUser.ts src/react/useFirebaseUser.tssrc/useFirebaseUser.ts renamed to src/react/useFirebaseUser.ts

@@ -1,13 +1,14 @@
-import auth, { FirebaseAuthTypes } from '@react-native-firebase/auth'
-import * as React from 'react'
+import { getAuth, onAuthStateChanged, User } from 'firebase/auth';
+import React from 'react';
 
 export const useFirebaseUser = () => {
+  const auth = getAuth();
   const [firebaseUser, setFirebaseUser] = React.useState<
-    FirebaseAuthTypes.User | undefined
+    User | undefined
   >()
 
   React.useEffect(() => {
-    return auth().onAuthStateChanged((user) => {
+    return onAuthStateChanged(auth, (user) => {
       setFirebaseUser(user ?? undefined)
     })
   })

src/useMessages.ts src/react/useMessages.tssrc/useMessages.ts renamed to src/react/useMessages.ts

@@ -1,11 +1,11 @@
-import firestore from '@react-native-firebase/firestore'
-import * as React from 'react'
+import firestore from '@react-native-firebase/firestore';
+import * as React from 'react';
 
-import { MessageType, Room } from './types'
-import { useFirebaseUser } from './useFirebaseUser'
+import { IRoom, MessageType } from './types';
+import { useFirebaseUser } from './useFirebaseUser';
 
 /** Returns a stream of messages from Firebase for a given room */
-export const useMessages = (room: Room) => {
+export const useMessages = (room: IRoom) => {
   const [messages, setMessages] = React.useState<MessageType.Any[]>([])
   const { firebaseUser } = useFirebaseUser()
 

src/react/useRoom.ts

@@ -0,0 +1,28 @@
+import { collection, doc, Firestore, onSnapshot } from 'firebase/firestore';
+import React from 'react';
+
+import { ROOMS_COLLECTION_NAME } from '.';
+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) => {
+  const [room, setRoom] = React.useState(initialRoom)
+  const { firebaseUser } = useFirebaseUser()
+
+  React.useEffect(() => {
+    if (!firebaseUser) return
+
+    const _collection = collection(db, ROOMS_COLLECTION_NAME);
+    const _doc = doc(_collection, initialRoom.id);
+    const _onSnapshot = onSnapshot(_doc, async (__doc) => {
+      const newRoom = await processRoomDocument({ _doc: __doc, firebaseUser, db })
+
+      setRoom(newRoom)
+    })
+    return _onSnapshot;
+  }, [firebaseUser, initialRoom.id])
+
+  return { room }
+}

src/useRooms.ts src/react/useRooms.tssrc/useRooms.ts renamed to src/react/useRooms.ts

@@ -1,10 +1,10 @@
-import firestore from '@react-native-firebase/firestore'
-import * as React from 'react'
+import firestore from '@react-native-firebase/firestore';
+import * as React from 'react';
 
-import { ROOMS_COLLECTION_NAME } from '.'
-import { Room, User } from './types'
-import { useFirebaseUser } from './useFirebaseUser'
-import { fetchUser, processRoomsQuery } from './utils'
+import { ROOMS_COLLECTION_NAME } from '.';
+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
@@ -17,7 +17,7 @@ import { fetchUser, processRoomsQuery } from './utils'
  * is `rooms`, field indexed are `userIds` (type Arrays) and `updatedAt`
  * (type Descending), query scope is `Collection` */
 export const useRooms = (orderByUpdatedAt?: boolean) => {
-  const [rooms, setRooms] = React.useState<Room[]>([])
+  const [rooms, setRooms] = React.useState<IRoom[]>([])
   const { firebaseUser } = useFirebaseUser()
 
   React.useEffect(() => {
@@ -28,12 +28,12 @@ export const useRooms = (orderByUpdatedAt?: boolean) => {
 
     const collection = orderByUpdatedAt
       ? firestore()
-          .collection(ROOMS_COLLECTION_NAME)
-          .where('userIds', 'array-contains', firebaseUser.uid)
-          .orderBy('updatedAt', 'desc')
+        .collection(ROOMS_COLLECTION_NAME)
+        .where('userIds', 'array-contains', firebaseUser.uid)
+        .orderBy('updatedAt', 'desc')
       : firestore()
-          .collection(ROOMS_COLLECTION_NAME)
-          .where('userIds', 'array-contains', firebaseUser.uid)
+        .collection(ROOMS_COLLECTION_NAME)
+        .where('userIds', 'array-contains', firebaseUser.uid)
 
     return collection.onSnapshot(async (query) => {
       const newRooms = await processRoomsQuery({ firebaseUser, query })
@@ -55,7 +55,7 @@ export const useRooms = (orderByUpdatedAt?: boolean) => {
     imageUrl?: string
     metadata?: Record<string, any>
     name: string
-    users: User[]
+    users: IUser[]
   }) => {
     if (!firebaseUser) return
 
@@ -86,12 +86,12 @@ export const useRooms = (orderByUpdatedAt?: boolean) => {
       name,
       type: 'group',
       users: roomUsers,
-    } as Room
+    } as IRoom
   }
 
   /** Creates a direct chat for 2 people. Add `metadata` for any additional custom data. */
   const createRoom = async (
-    otherUser: User,
+    otherUser: IUser,
     metadata?: Record<string, any>
   ) => {
     if (!firebaseUser) return
@@ -138,7 +138,7 @@ export const useRooms = (orderByUpdatedAt?: boolean) => {
       metadata,
       type: 'direct',
       users,
-    } as Room
+    } as IRoom
   }
 
   return { createGroupRoom, createRoom, rooms }

src/react/useUsers.ts

@@ -0,0 +1,57 @@
+import { collection, Firestore, onSnapshot } from 'firebase/firestore';
+import React from 'react';
+
+import { USERS_COLLECTION_NAME } from '.';
+import { IUser } from './types';
+import { useFirebaseUser } from './useFirebaseUser';
+
+/** Returns a stream of all users from Firebase */
+export const useUsers = (db: Firestore) => {
+  const [users, setUsers] = React.useState<IUser[]>([])
+  const { firebaseUser } = useFirebaseUser()
+
+  React.useEffect(() => {
+    if (!firebaseUser) {
+      setUsers([])
+      return
+    }
+
+    const _collection = collection(db, USERS_COLLECTION_NAME);
+    const _onSnapshot = onSnapshot(_collection, (query) => {
+      const newUsers: IUser[] = []
+
+      query?.forEach((doc) => {
+        if (firebaseUser.uid === doc.id) return
+
+        const data = doc.data()!
+
+        const user: IUser = {
+          // 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,
+          // type-coverage:ignore-next-line
+          imageUrl: data.imageUrl ?? undefined,
+          // type-coverage:ignore-next-line
+          lastName: data.lastName ?? undefined,
+          // type-coverage:ignore-next-line
+          lastSeen: data.lastSeen?.toMillis() ?? undefined,
+          // type-coverage:ignore-next-line
+          metadata: data.metadata ?? undefined,
+          // type-coverage:ignore-next-line
+          updatedAt: data.updatedAt?.toMillis() ?? undefined,
+        }
+
+        newUsers.push(user)
+      })
+
+      setUsers(newUsers)
+    })
+
+    return _onSnapshot;
+  }, [firebaseUser])
+
+  return { users }
+}