Refactor to typescript

src/api/firebase.ts

@@ -25,8 +25,8 @@ export type ListPath = {
  * @returns
  */
 export const useShoppingLists = (
-	userId: string | null,
-	userEmail: string | null,
+	userId: string | null | undefined,
+	userEmail: string | null | undefined,
 ): ListPath[] => {
 	// Start with an empty array for our data.
 	const [data, setData] = useState<ListPath[]>([]);
@@ -126,10 +126,12 @@ export const addUserToDatabase = async (user: DocumentData): Promise<void> => {
  * @param {string} listName The name of the new list.
  */
 export const createList = async (
-	userId: string,
-	userEmail: string,
+	userId: string | null | undefined,
+	userEmail: string | null | undefined,
 	listName: string,
-): Promise<string> => {
+): Promise<string | void> => {
+	if (!userId || !userEmail) return;
+
 	const listDocRef = doc(db, userId, listName);
 
 	await setDoc(listDocRef, {

src/api/useAuth.tsx

@@ -2,7 +2,12 @@ import { useEffect, useState } from 'react';
 import { auth } from './config.js';
 import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
 import { addUserToDatabase } from './firebase.js';
-import { User } from '../types/types.js';
+
+export type User = {
+	email: string | null | undefined;
+	displayName: string | null | undefined;
+	uid: string | null | undefined;
+};
 
 /**
  * A button that signs the user in using Google OAuth. When clicked,
@@ -33,7 +38,7 @@ export const SignOutButton = () => (
  * @see https://firebase.google.com/docs/auth/web/start#set_an_authentication_state_observer_and_get_user_data
  */
 export const useAuth = () => {
-	const initialState: User | null = null;
+	const initialState = null;
 	const [user, setUser] = useState<User | null>(initialState);
 
 	useEffect(() => {

src/components/ShareList.tsx

@@ -10,6 +10,8 @@ export function ShareList() {
 	const userEmail = user?.email;
 
 	const shareCurrentList = async (emailData: string) => {
+		if (!userId) return;
+
 		const listShared = await shareList(listPath, userId, emailData);
 
 		if (listShared === '!owner') {

src/index.tsx

@@ -4,9 +4,16 @@ import { App } from './App';
 
 import './index.css';
 
-const root = createRoot(document.getElementById('root'));
-root.render(
-	<StrictMode>
-		<App />
-	</StrictMode>,
-);
+const rootElement = document.getElementById('root');
+try {
+	if (rootElement) {
+		const root = createRoot(rootElement);
+		root.render(
+			<StrictMode>
+				<App />
+			</StrictMode>,
+		);
+	}
+} catch (error) {
+	throw new Error(`Could not get root element. Error: ${error}`);
+}

src/views/Home.tsx

@@ -9,8 +9,8 @@ import TextInputElement from '../components/TextInputElement';
 type Props = {
 	data: DocumentData[];
 	setListPath: Dispatch<string | null>;
-	userId: string;
-	userEmail: string;
+	userId: string | null | undefined;
+	userEmail: string | null | undefined;
 };
 
 export function Home({ data, setListPath, userId, userEmail }: Props) {
@@ -32,7 +32,7 @@ export function Home({ data, setListPath, userId, userEmail }: Props) {
 			}
 
 			const listPath = await createList(userId, userEmail, listName);
-			setListPath(listPath);
+			setListPath(listPath ?? null);
 			console.log(`Setting list path with: ${listPath}`);
 			console.log(
 				`LocalStorage listPath after state update: ${localStorage.getItem('tcl-shopping-list-path')}`,