Merge pull request #95 from raduwen/feat/firebase-9

feat: migrate firebase 9.x

Author: raduwen

package.json

@@ -13,16 +13,13 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
-    "firebase": "^8.9.1",
+    "firebase": "^9.1.2",
     "next": "^11.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@firebase/app-types": "^0.7.0",
-    "@firebase/auth-types": "^0.11.0",
-    "@firebase/database-types": "^0.9.1",
     "@types/node": "^16.10.3",
     "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",

src/components/IFrameWidget/editor.tsx

@@ -1,5 +1,6 @@
 import React, { Component, MouseEvent } from 'react';
 import styled from 'styled-components';
+import { ref, set } from '@firebase/database';
 import { db } from '@/lib/firebase';
 import {
   TextField,
@@ -31,7 +32,7 @@ class IFrameWidgetEditor extends Component<Props, IFrameWidgetProps> {
 
   save(e: MouseEvent<HTMLButtonElement>) {
     e.preventDefault();
-    db.ref(`/widgets/${this.props.id}/props`).set(this.state);
+    set(ref(db, `/widgets/${this.props.id}/props`), this.state);
   }
 
   render() {

src/components/TextWidget/editor.tsx

@@ -8,6 +8,7 @@ import {
 } from '@material-ui/core';
 import styled from 'styled-components';
 import { Property } from 'csstype';
+import { ref, set } from '@firebase/database';
 import { db } from '@/lib/firebase';
 import type { TextWidgetProps } from '@/components/TextWidget/types';
 
@@ -90,7 +91,7 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
 
   save(e: MouseEvent<HTMLButtonElement>) {
     e.preventDefault();
-    db.ref(`/widgets/${this.props.id}/props`).set(this.state);
+    set(ref(db, `/widgets/${this.props.id}/props`), this.state);
   }
 
   render() {

src/components/TimeWidget/editor.tsx

@@ -7,6 +7,7 @@ import {
   FormControlLabel,
   Checkbox,
 } from '@material-ui/core';
+import { ref, set } from '@firebase/database';
 import { db } from '@/lib/firebase';
 import type { TimeWidgetProps } from './types';
 
@@ -36,7 +37,7 @@ class TimeWidgetEditor extends Component<Props, TimeWidgetProps> {
 
   save(e: MouseEvent<HTMLButtonElement>) {
     e.preventDefault();
-    db.ref(`/widgets/${this.props.id}/props`).set(this.state);
+    set(ref(db, `/widgets/${this.props.id}/props`), this.state);
   }
 
   render() {

src/components/admin/SignInForm/index.tsx

@@ -1,5 +1,7 @@
-import React, { VFC, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
 import styled from 'styled-components';
+import { signInWithEmailAndPassword } from '@firebase/auth';
 import { TextField, Button } from '@material-ui/core';
 import { auth } from '@/lib/firebase';
 
@@ -19,14 +21,16 @@ type SignInFormProps = {
   redirectTo: string;
 };
 
-const SignInForm: VFC<SignInFormProps> = ({ redirectTo }) => {
+const SignInForm = ({ redirectTo }: SignInFormProps) => {
+  const router = useRouter();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
   const signin = async (e: React.SyntheticEvent) => {
     e.preventDefault();
     try {
-      await auth.signInWithEmailAndPassword(email, password);
+      await signInWithEmailAndPassword(auth, email, password);
+      router.push(redirectTo);
     } catch (err) {
       alert(err.message);
     }

src/lib/AuthProvider.tsx

@@ -1,5 +1,5 @@
-import { User } from '@firebase/auth-types';
-import React, { FC, createContext, useEffect, useState } from 'react';
+import { User, onAuthStateChanged } from '@firebase/auth';
+import { FC, createContext, useEffect, useState } from 'react';
 import { auth } from '@/lib/firebase';
 
 type AuthContextProps = {
@@ -12,7 +12,7 @@ const AuthProvider: FC = ({ children }) => {
   const [currentUser, setCurrentUser] = useState<User | null | undefined>(undefined);
 
   useEffect(() => {
-    auth.onAuthStateChanged((user) => {
+    onAuthStateChanged(auth, (user) => {
       setCurrentUser(user);
     });
   });

src/lib/firebase.ts

@@ -1,6 +1,6 @@
-import 'firebase/auth';
-import 'firebase/database';
-import firebase from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+import { getDatabase } from 'firebase/database';
+import { initializeApp } from 'firebase/app';
 
 const config = {
   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
@@ -12,13 +12,8 @@ const config = {
   appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
 };
 
-let auth;
-let db;
-if (firebase.apps.length === 0) {
-  firebase.initializeApp(config);
-  auth = firebase.app().auth();
-  db = firebase.database();
-}
+const app = initializeApp(config);
+const auth = getAuth(app);
+const db = getDatabase(app);
 
-export default firebase;
-export { auth, db };
+export { app, auth, db };

src/pages/admin/index.tsx

@@ -9,8 +9,8 @@ import {
   Typography,
   Button
 } from '@material-ui/core';
-import { User } from '@firebase/auth-types';
-import { DataSnapshot } from '@firebase/database-types';
+import { User } from '@firebase/auth';
+import { ref, onValue, DataSnapshot } from '@firebase/database';
 
 import { AuthProvider } from '@/lib/AuthProvider';
 import { auth, db } from '@/lib/firebase';
@@ -53,7 +53,8 @@ const Widgets = () => {
   const [widgets, setWidgets] = useState<WidgetList>({});
 
   useEffect(() => {
-    db.ref('/widgets').on('value', (snap: DataSnapshot) => {
+    const widgetsRef = ref(db, '/widgets');
+    onValue(widgetsRef, (snap: DataSnapshot) => {
       if (snap?.val()) {
         setWidgets(snap.val());
       }

src/pages/preview/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { DataSnapshot } from '@firebase/database-types';
+import { ref, onValue, DataSnapshot } from '@firebase/database';
 
 import { db } from '@/lib/firebase';
 import { TextWidget } from '@/components/TextWidget';
@@ -23,7 +23,8 @@ const PreviewPage = () => {
   const [widgets, setWidgets] = useState<WidgetList>({});
 
   useEffect(() => {
-    db.ref('/widgets').on('value', (snap: DataSnapshot) => {
+    const widgetsRef = ref(db, '/widgets');
+    onValue(widgetsRef, (snap: DataSnapshot) => {
       if (snap?.val()) {
         setWidgets(snap.val());
       }