
Cloud Firestore Development (With Typescript)
The purpose of this article is to show you how I added the calls between the React application and Cloud Firestore, and also how I added unit tests to verify the logic.
First, let’s define our Server interface. We are doing this so that when we are using a Server instance in the app, we can hide any methods that should not be used outside of the Server class.
import{DocumentData,DocumentReference}from'@firebase/firestore-types'
exportinterfaceServer
{
save: (data: NapChartData,title: string,description:
string)=>Promise<string>
loadChart: (chartid: string)=>Promise<ChartData>
sendFeedback: (feedback:
string)=>Promise<DocumentReference<DocumentData>>
addEmailToFeedback: (email: any,feedbackId: any)=>Promise<any>
loadChartsForUser: (userId: number)=>Promise<any>
}
Now, here we have our implementation of the Server class.
I know I could use React’s Context API, but I found it simpler to just make a Singleton object. I want it to be a Singleton because I want the Firebase object to be initialized only once, which will happen as soon as we access this class for the first time.
import{Server} from'./Server'
import{DocumentData,DocumentReference} from '@firebase/firestore-types'
import * asfirebase from 'firebase/app'
import{NapChart} from'../components/Editor/napchart'
importApp from'../components/Editor/Editor'
import{FireObject} from '@testing-library/react'
import{FirebaseFirestore,QuerySnapshot} from'@firebase/firestore-types'
import{NapchartData} from 'napchart'
import{AuthProvider} from '../auth/auth_provider'
import{firebaseAuthProvider} from '../auth/firebase_auth_provider'
import{ChartData} from './ChartData'
require('firebase/firestore')
/*This class contains all functionality for interacting with Firebase Firestore.
*/
export interface FirebaseServerProps
{
testApp?: App | any
authProvider: AuthProvider
}
export