Merge pull request #5 from SafdarJamal/feature/firebase-v9

SafdarJamal · web-flow · commit 01ed79a221f7 · 2022-03-14T21:56:49.000+05:00
Upgrade to Firebase v9
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,9 +8,9 @@
   },
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.3",
+    "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
-    "firebase": "^8.10.1",
+    "firebase": "^9.6.8",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/src/actions/user.js b/src/actions/user.js
@@ -2,11 +2,11 @@ import { SET_USER, REMOVE_USER } from '../constants/actionTypes';
 
 const setUser = payload => ({
   type: SET_USER,
-  payload
+  payload,
 });
 
 const removeUser = () => ({
-  type: REMOVE_USER
+  type: REMOVE_USER,
 });
 
 export { setUser, removeUser };
diff --git a/src/components/Home/index.js b/src/components/Home/index.js
@@ -16,7 +16,7 @@ const Home = ({ user }) => {
 };
 
 Home.propTypes = {
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
 };
 
 export default Home;
diff --git a/src/components/SignIn/index.js b/src/components/SignIn/index.js
@@ -34,7 +34,7 @@ SignIn.propTypes = {
   password: PropTypes.string.isRequired,
   handleChange: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  error: PropTypes.object
+  error: PropTypes.object,
 };
 
 export default SignIn;
diff --git a/src/components/SignOut/index.js b/src/components/SignOut/index.js
@@ -6,7 +6,7 @@ const SignOut = ({ handleSignOut }) => {
 };
 
 SignOut.propTypes = {
-  handleSignOut: PropTypes.func.isRequired
+  handleSignOut: PropTypes.func.isRequired,
 };
 
 export default SignOut;
diff --git a/src/components/SignUp/index.js b/src/components/SignUp/index.js
@@ -8,7 +8,7 @@ const SignUp = ({
   password,
   handleChange,
   handleSubmit,
-  error
+  error,
 }) => {
   return (
     <div>
@@ -60,7 +60,7 @@ SignUp.propTypes = {
   password: PropTypes.string.isRequired,
   handleChange: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  error: PropTypes.object
+  error: PropTypes.object,
 };
 
 export default SignUp;
diff --git a/src/containers/HomeContainer/index.js b/src/containers/HomeContainer/index.js
@@ -10,7 +10,7 @@ class HomeContainer extends Component {
 }
 
 const mapStateToProps = state => ({
-  user: state.user
+  user: state.user,
 });
 
 export default connect(mapStateToProps)(HomeContainer);
diff --git a/src/containers/SignInContainer/index.js b/src/containers/SignInContainer/index.js
@@ -10,7 +10,7 @@ class SignInContainer extends Component {
   state = {
     email: '',
     password: '',
-    error: null
+    error: null,
   };
 
   handleChange = e => {
diff --git a/src/containers/SignUpContainer/index.js b/src/containers/SignUpContainer/index.js
@@ -12,7 +12,7 @@ class SignUpContainer extends Component {
     lastName: '',
     email: '',
     password: '',
-    error: null
+    error: null,
   };
 
   handleChange = e => {
@@ -31,7 +31,7 @@ class SignUpContainer extends Component {
         firebase.addUser(response.user.uid, {
           firstName,
           lastName,
-          email
+          email,
         })
       )
       .then(() => firebase.getUser(firebase.auth.currentUser.uid))
diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -2,7 +2,7 @@ import { combineReducers } from 'redux';
 import user from './user';
 
 const reducers = combineReducers({
-  user
+  user,
 });
 
 export default reducers;
diff --git a/src/routes/PrivateRoute.js b/src/routes/PrivateRoute.js
@@ -13,7 +13,7 @@ const PrivateRoute = ({ user, component: Component, ...rest }) => (
 );
 
 const mapStateToProps = state => ({
-  user: state.user
+  user: state.user,
 });
 
 export default connect(mapStateToProps)(PrivateRoute);
diff --git a/src/routes/PublicRoute.js b/src/routes/PublicRoute.js
@@ -13,7 +13,7 @@ const PublicRoute = ({ user, component: Component, ...rest }) => (
 );
 
 const mapStateToProps = state => ({
-  user: state.user
+  user: state.user,
 });
 
 export default connect(mapStateToProps)(PublicRoute);
diff --git a/src/services/firebase/config.js b/src/services/firebase/config.js
@@ -5,7 +5,7 @@ const firebaseConfig = {
   projectId: process.env.REACT_APP_PROJECT_ID,
   storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
   messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
-  appId: process.env.REACT_APP_APP_ID
+  appId: process.env.REACT_APP_APP_ID,
 };
 
 export default firebaseConfig;
diff --git a/src/services/firebase/context.js b/src/services/firebase/context.js
@@ -2,11 +2,12 @@ import React from 'react';
 
 const FirebaseContext = React.createContext(null);
 
-const withFirebase = Component => props => (
-  <FirebaseContext.Consumer>
-    {firebase => <Component {...props} firebase={firebase} />}
-  </FirebaseContext.Consumer>
-);
+const withFirebase = Component => props =>
+  (
+    <FirebaseContext.Consumer>
+      {firebase => <Component {...props} firebase={firebase} />}
+    </FirebaseContext.Consumer>
+  );
 
 export { withFirebase };
 export default FirebaseContext;
diff --git a/src/services/firebase/firebase.js b/src/services/firebase/firebase.js
@@ -1,40 +1,45 @@
-import firebase from 'firebase/app';
-
-import 'firebase/auth';
-import 'firebase/firestore';
+import { initializeApp } from 'firebase/app';
+import {
+  getAuth,
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  signOut,
+  sendEmailVerification,
+  sendPasswordResetEmail,
+  updatePassword,
+} from 'firebase/auth';
+import { getFirestore, doc, setDoc, getDoc } from 'firebase/firestore';
 
 import firebaseConfig from './config';
 
 class Firebase {
   constructor() {
-    firebase.initializeApp(firebaseConfig);
-
-    this.auth = firebase.auth();
-    this.firestore = firebase.firestore();
+    this.firebase = initializeApp(firebaseConfig);
 
-    this.usersCollectionRef = this.firestore.collection('users');
+    this.auth = getAuth();
+    this.firestore = getFirestore();
   }
 
   signUp = (email, password) =>
-    this.auth.createUserWithEmailAndPassword(email, password);
+    createUserWithEmailAndPassword(this.auth, email, password);
 
   signIn = (email, password) =>
-    this.auth.signInWithEmailAndPassword(email, password);
+    signInWithEmailAndPassword(this.auth, email, password);
 
-  signOut = () => this.auth.signOut();
+  signOut = () => signOut(this.auth);
 
   sendEmailVerificationLink = () =>
-    this.auth.currentUser.sendEmailVerification({
-      url: process.env.REACT_APP_EMAIL_CONFIRMATION_REDIRECT
+    sendEmailVerification(this.auth.currentUser, {
+      url: process.env.REACT_APP_EMAIL_CONFIRMATION_REDIRECT,
     });
 
-  resetPassword = email => this.auth.sendPasswordResetEmail(email);
+  resetPassword = email => sendPasswordResetEmail(this.auth, email);
 
-  updatePassword = password => this.auth.currentUser.updatePassword(password);
+  updatePassword = password => updatePassword(this.auth.currentUser, password);
 
-  addUser = (uid, data) => this.usersCollectionRef.doc(uid).set(data);
+  addUser = (uid, data) => setDoc(doc(this.firestore, 'users', uid), data);
 
-  getUser = uid => this.usersCollectionRef.doc(uid).get();
+  getUser = uid => getDoc(doc(this.firestore, 'users', uid));
 }
 
 export default Firebase;
diff --git a/src/setupTests.js b/src/setupTests.js
@@ -1,5 +1 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
diff --git a/src/store/index.js b/src/store/index.js
@@ -5,7 +5,7 @@ import reducers from '../reducers';
 
 const persistConfig = {
   key: 'root',
-  storage
+  storage,
 };
 
 const persistedReducer = persistReducer(persistConfig, reducers);

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ class HomeContainer extends Component {`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`const mapStateToProps = state => ({`
`13`		`- user: state.user`
	`13`	`+ user: state.user,`
`14`	`14`	`});`
`15`	`15`
`16`	`16`	`export default connect(mapStateToProps)(HomeContainer);`