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