trblackw

const firebaseConfig = {
  apiKey: "xxxxxxxxxx",
  authDomain: "xxxxxxxxxx",
  databaseURL: "xxxxxxxxxx",
  projectId: "xxxxxxxxxx",
  storageBucket: "xxxxxxxxxx",
  messagingSenderId: "xxxxxxxxxx",
  appId: "xxxxxxxxxx",
  measurementId: "xxxxxxxxxx",
}

trblackw

import React from "react"
import { render } from "react-dom"
import "styles/index.css"
import App from "App"
import { firebaseConfig } from "config/firebaseConfig"
import { initializeApp } from "firebase/app"

export default initializeApp(firebaseConfig)

render(<App />, document.getElementById("app"))

trblackw

import firebase from 'firebase/app';
import FirebaseApp from '../index';
import { Firestore } from 'firebaseTypes';

export enum Collections {
  USERS = 'users'
}

export default class FirebaseModel {
  public store: Firestore;

trblackw

import { FirebaseModel } from "../firebaseTypes"
import { User } from "./userTypes"

export default class UserModel extends FirebaseModel {
  public async getCurrentUser(userId: string): Promise<User> {
    const currentUser = await this.store
      .collection(UserModel.userCollection)
      .doc(userId)
      .get()
    return { ...currentUser.data(), id: currentUser.id } as User

trblackw

import FirebaseApp from "./index"

class AuthManager {
  async login({ email, password }: { email: string; password: string }) {
    await FirebaseApp.auth().signInWithEmailAndPassword(email, password)
  }

  async logout() {
    return FirebaseApp.auth().signOut()
  }

trblackw

import React, { createContext, ReactNode, useEffect, useState } from "react"
import { User as FirebaseUser } from "firebase/app"
import { Firestore } from "firebaseTypes"
import FirebaseApp from "../index"
import { User } from "state/users/userTypes"
import UserModel from "state/users/userModel"

type FirestoreContextType = {
  firestore: Firestore | null
  currentUser: User | null

trblackw

import React, { useContext, useEffect, useRef, useState } from 'react';
import { Error } from 'state/firebaseTypes';
import UserModel from 'state/users/userModel';
import { FirestoreContext } from 'context/FirestoreContextProvider';

//would be defined elsewhere
type FetchRequest<T, E = unknown> = { fetching: boolean; data: T; error: E | null };

const Users: React.FC = (): JSX.Element => {
  const [users, setUsers] = useState<FetchRequest<User[], Error>>({ fetching: true, data: [], error: null });

trblackw

import React, { useState } from 'react';

interface FormState {
  email: string;
  password: string;
  passwordConfirm: string;
}

const initialFormState: FormState = {
  email: '',

trblackw

import React, { useState } from 'react';

interface FormState {
  email: string;
  password: string;
  passwordConfirm: string;
}

const initialFormState: FormState = {
  email: '',

trblackw

import React, { useState } from 'react';

const initialFormState = {
  email: '',
  password: '',
  passwordConfirm: ''
}

const Register: React.FC = (): JSX.Element => {
  const [form, setForm] = useState(initialFormState)