update firebase to 10

package.json

@@ -75,7 +75,7 @@
 		"codemirror": "^5.37.0",
 		"copy-webpack-plugin": "^4.5.1",
 		"esprima": "^4.0.0",
-		"firebase": "^8.10.0",
+		"firebase": "^10.8.0",
 		"jszip": "^3.1.5",
 		"preact": "^10.5.13",
 		"preact-portal": "^1.1.3",

src/auth.js

@@ -1,35 +1,40 @@
 import { trackEvent } from './analytics';
-import firebase from 'firebase/app';
+import { auth } from './firebaseInit';
+import {
+	GithubAuthProvider,
+	TwitterAuthProvider,
+	GoogleAuthProvider,
+	signInWithPopup,
+	signOut
+} from 'firebase/auth';
 import { log } from './utils';
 
-export const auth = {
+export const authh = {
 	logout() {
-		firebase.auth().signOut();
+		signOut();
 	},
 	login(providerName) {
 		var provider;
 		if (providerName === 'facebook') {
-			provider = new firebase.auth.FacebookAuthProvider();
+			provider = new FacebookAuthProvider();
 		} else if (providerName === 'twitter') {
-			provider = new firebase.auth.TwitterAuthProvider();
+			provider = new TwitterAuthProvider();
 		} else if (providerName === 'google') {
-			provider = new firebase.auth.GoogleAuthProvider();
+			provider = new GoogleAuthProvider();
 			provider.addScope('https://www.googleapis.com/auth/userinfo.profile');
 		} else {
-			provider = new firebase.auth.GithubAuthProvider();
+			provider = new GithubAuthProvider();
 		}
 
-		return firebase
-			.auth()
-			.signInWithPopup(provider)
-			.then(function() {
+		return signInWithPopup(auth, provider)
+			.then(function () {
 				trackEvent('fn', 'loggedIn', providerName);
 				// Save to recommend next time
 				window.db.local.set({
 					lastAuthProvider: providerName
 				});
 			})
-			.catch(function(error) {
+			.catch(function (error) {
 				log(error);
 				if (error.code === 'auth/account-exists-with-different-credential') {
 					alert(

src/components/Login.jsx

@@ -1,12 +1,12 @@
 import { h, Component } from 'preact';
 import { trackEvent } from '../analytics';
-import { auth } from '../auth';
+import { authh } from '../auth';
 
 export default class Login extends Component {
 	login(e) {
 		const provider = e.target.dataset.authProvider;
 		trackEvent('ui', 'loginProviderClick', provider);
-		auth.login(provider);
+		authh.login(provider);
 	}
 	componentDidMount() {
 		window.db.local.get(

src/components/app.jsx

@@ -41,10 +41,10 @@ import { modes, HtmlModes, CssModes, JsModes } from '../codeModes';
 import { trackEvent } from '../analytics';
 import { deferred } from '../deferred';
 import { alertsService } from '../notifications';
-import firebase from 'firebase/app';
-import 'firebase/auth';
+import { auth } from '../firebaseInit';
+import { onAuthStateChanged } from 'firebase/auth';
 import { Profile } from './Profile';
-import { auth } from '../auth';
+import { authh } from '../auth';
 import { SupportDeveloperModal } from './SupportDeveloperModal';
 import { KeyboardShortcutsModal } from './KeyboardShortcutsModal';
 import { takeScreenshot } from '../takeScreenshot';
@@ -161,7 +161,7 @@ export default class App extends Component {
 		};
 		this.prefs = {};
 
-		firebase.auth().onAuthStateChanged(user => {
+		onAuthStateChanged(auth, user => {
 			this.setState({ isLoginModalOpen: false });
 			if (user) {
 				log('You are -> ', user);
@@ -1043,7 +1043,7 @@ export default class App extends Component {
 			}
 		}
 		trackEvent('fn', 'loggedOut');
-		auth.logout();
+		authh.logout();
 		this.setState({ isProfileModalOpen: false });
 		alertsService.add('Log out successfull');
 	}

src/db.js

@@ -1,6 +1,7 @@
-import './firebaseInit';
-import firebase from 'firebase/app';
+// import './firebaseInit';
 import 'firebase/firestore';
+import { db } from './firebaseInit';
+import { getDoc, getDocs, doc, updateDoc, setDoc } from 'firebase/firestore';
 import { deferred } from './deferred';
 import { trackEvent } from './analytics';
 import { log } from './utils';
@@ -8,7 +9,7 @@ import { log } from './utils';
 (() => {
 	const FAUX_DELAY = 1;
 
-	var db;
+	// var db;
 	var dbPromise;
 
 	var local = {
@@ -55,13 +56,13 @@ import { log } from './utils';
 			if (db) {
 				return resolve(db);
 			}
-			const firestoreInstance = firebase.firestore();
+			const firestoreInstance = db;
 
 			return firestoreInstance
 				.enablePersistence({ experimentalTabSynchronization: true })
-				.then(function() {
+				.then(function () {
 					// Initialize Cloud Firestore through firebase
-					db = firebase.firestore();
+					// db = firebase.firestore();
 					// const settings = {
 					// 	timestampsInSnapshots: true
 					// };
@@ -69,7 +70,7 @@ import { log } from './utils';
 					log('firebase db ready', db);
 					resolve(db);
 				})
-				.catch(function(err) {
+				.catch(function (err) {
 					reject(err.code);
 					if (err.code === 'failed-precondition') {
 						// Multiple tabs open, persistence can only be enabled
@@ -113,11 +114,11 @@ import { log } from './utils';
 			{
 				lastSeenVersion: version
 			},
-			function() {}
+			function () {}
 		);
 		if (window.user) {
 			const remoteDb = await getDb();
-			remoteDb.doc(`users/${window.user.uid}`).update({
+			updateDoc(doc(remoteDb, `users/${window.user.uid}`), {
 				lastSeenVersion: version
 			});
 		}
@@ -125,21 +126,16 @@ import { log } from './utils';
 
 	async function getUser(userId) {
 		const remoteDb = await getDb();
-		return remoteDb
-			.doc(`users/${userId}`)
-			.get()
-			.then(doc => {
-				if (!doc.exists)
-					return remoteDb.doc(`users/${userId}`).set(
-						{},
-						{
-							merge: true
-						}
-					);
-				const user = doc.data();
-				Object.assign(window.user, user);
-				return user;
-			});
+
+		return getDoc(doc(remoteDb, `users/${userId}`)).then(doc => {
+			if (!doc.exists()) {
+				return setDoc(doc(remoteDb, `users/${userId}`), {}, { merge: true });
+			}
+
+			const user = doc.data();
+			Object.assign(window.user, user);
+			return user;
+		});
 	}
 
 	// Fetch user settings.

src/firebaseInit.js

@@ -1,5 +1,7 @@
-import firebase from 'firebase/app';
-// import 'firebase/firestore';
+import { initializeApp } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+import { getFirestore } from 'firebase/firestore';
+
 const config = {
 	apiKey: 'AIzaSyBl8Dz7ZOE7aP75mipYl2zKdLSRzBU2fFc',
 	authDomain: 'web-maker-app.firebaseapp.com',
@@ -8,4 +10,9 @@ const config = {
 	storageBucket: 'web-maker-app.appspot.com',
 	messagingSenderId: '560473480645'
 };
-firebase.initializeApp(config);
+
+const app = initializeApp(config);
+export { app };
+
+export const auth = getAuth(app);
+export const db = getFirestore(app);

src/itemService.js

@@ -1,16 +1,27 @@
 import { deferred } from './deferred';
-import { log } from 'util';
-import firebase from 'firebase/app';
+import { log } from './utils';
+import {
+	collection,
+	deleteField,
+	where,
+	getDoc,
+	query,
+	setDoc,
+	writeBatch,
+	doc,
+	deleteDoc,
+	updateDoc,
+	getDocs
+} from 'firebase/firestore';
 
 export const itemService = {
 	async getItem(id) {
 		var remoteDb = await window.db.getDb();
-		return remoteDb
-			.doc(`items/${id}`)
-			.get()
+		return getDoc(doc(remoteDb, `items/${id}`))
 			.then(doc => {
 				return doc.data();
-			});
+			})
+			.catch(error => log(error));
 	},
 
 	/**
@@ -48,22 +59,24 @@ export const itemService = {
 
 		if (window.user && !shouldFetchLocally) {
 			var remoteDb = await window.db.getDb();
-			remoteDb
-				.collection('items')
-				.where('createdBy', '==', window.user.uid)
-				.onSnapshot(
-					function(querySnapshot) {
-						querySnapshot.forEach(function(doc) {
-							items.push(doc.data());
-						});
-						log('Items fetched in ', Date.now() - t, 'ms');
+			// console.log(query, window.user.uid);
+			// d.resolve([]);
 
-						d.resolve(items);
-					},
-					function() {
-						d.resolve([]);
-					}
-				);
+			const q = query(
+				collection(remoteDb, 'items'),
+				where('createdBy', '==', window.user.uid)
+			);
+			getDocs(q)
+				.then(querySnapshot => {
+					querySnapshot.forEach(doc => {
+						items.push(doc.data());
+					});
+					log(`${items.length} items fetched in `, Date.now() - t, 'ms');
+					d.resolve(items);
+				})
+				.catch(() => {
+					d.resolve([]);
+				});
 		} else {
 			for (let i = 0; i < itemIds.length; i++) {
 				/* eslint-disable no-loop-func */
@@ -83,7 +96,7 @@ export const itemService = {
 
 	async setUser() {
 		const remoteDb = await window.db.getDb();
-		return remoteDb.doc(`users/${window.user.uid}`).set({
+		return setDoc(doc(remoteDb, `users/${window.user.uid}`), {
 			items: {}
 		});
 	},
@@ -113,14 +126,11 @@ export const itemService = {
 		// LOGGED IN
 		var remoteDb = await window.db.getDb();
 		item.createdBy = window.user.uid;
-		remoteDb
-			.collection('items')
-			.doc(id)
-			.set(item, {
-				merge: true
-			})
-			.then(arg => {
-				log('Document written', arg);
+		setDoc(doc(remoteDb, `items/${id}`), item, {
+			merge: true
+		})
+			.then(() => {
+				log(`Document written`);
 				d.resolve();
 			})
 			.catch(d.reject);
@@ -147,7 +157,7 @@ export const itemService = {
 				{
 					items: {}
 				},
-				function(result) {
+				function (result) {
 					/* eslint-disable guard-for-in */
 					for (var id in items) {
 						result.items[id] = true;
@@ -160,12 +170,15 @@ export const itemService = {
 			);
 		} else {
 			window.db.getDb().then(remoteDb => {
-				const batch = remoteDb.batch();
+				const batch = writeBatch(remoteDb);
 				/* eslint-disable guard-for-in */
 				for (var id in items) {
 					items[id].createdBy = window.user.uid;
-					batch.set(remoteDb.doc(`items/${id}`), items[id]);
-					batch.update(remoteDb.doc(`users/${window.user.uid}`), {
+					batch.set(doc(remoteDb, `items/${id}`), items[id]);
+					batch.update(doc(remoteDb, `users/${window.user.uid}`), {
+						[`items.${id}`]: true
+					});
+					batch.update(doc(remoteDb, `users/${window.user.uid}`), {
 						[`items.${id}`]: true
 					});
 					// Set these items on our cached user object too
@@ -188,12 +201,9 @@ export const itemService = {
 		}
 		const remoteDb = await window.db.getDb();
 		log(`Starting to save item ${id}`);
-		return remoteDb
-			.collection('items')
-			.doc(id)
-			.delete()
-			.then(arg => {
-				log('Document removed', arg);
+		return deleteDoc(doc(remoteDb, `items/${id}`))
+			.then(() => {
+				log('Document removed');
 			})
 			.catch(error => log(error));
 	},
@@ -205,7 +215,7 @@ export const itemService = {
 				{
 					items: {}
 				},
-				function(result) {
+				function (result) {
 					result.items[itemId] = true;
 					window.db.local.set({
 						items: result.items
@@ -214,12 +224,9 @@ export const itemService = {
 			);
 		}
 		const remoteDb = await window.db.getDb();
-		return remoteDb
-			.collection('users')
-			.doc(window.user.uid)
-			.update({
-				[`items.${itemId}`]: true
-			})
+		return updateDoc(doc(remoteDb, `users/${window.user.uid}`), {
+			[`items.${itemId}`]: true
+		})
 			.then(arg => {
 				log(`Item ${itemId} set for user`, arg);
 				window.user.items = window.user.items || {};
@@ -235,7 +242,7 @@ export const itemService = {
 				{
 					items: {}
 				},
-				function(result) {
+				function (result) {
 					delete result.items[itemId];
 					window.db.local.set({
 						items: result.items
@@ -244,15 +251,12 @@ export const itemService = {
 			);
 		}
 		const remoteDb = await window.db.getDb();
-		return remoteDb
-			.collection('users')
-			.doc(window.user.uid)
-			.update({
-				[`items.${itemId}`]: firebase.firestore.FieldValue.delete()
-			})
+		return updateDoc(doc(remoteDb, `users/${window.user.uid}`), {
+			[`items.${itemId}`]: deleteField()
+		})
 			.then(arg => {
-				delete window.user.items[itemId];
 				log(`Item ${itemId} unset for user`, arg);
+				delete window.user.items[itemId];
 			})
 			.catch(error => log(error));
 	},