Solved comments

Author: TOPOFGR

src/pages/Login/Login.test.js

@@ -57,7 +57,7 @@ it('should dispatch authFacebook action when the user tries to log in with Faceb
     }
   });
 
-  component.find('#facebook').simulate('click');
+  component.find('.is-facebook').simulate('click');
 
   expect(authActions.authFacebook).toHaveBeenCalled();
 });
@@ -69,7 +69,7 @@ it('should dispatch authGoogle action when the user tries to log in with Google'
     }
   });
 
-  component.find('#google').simulate('click');
+  component.find('.is-google').simulate('click');
 
   expect(authActions.authGoogle).toHaveBeenCalled();
 });
@@ -81,7 +81,7 @@ it('should dispatch authMicrosoft action when the user tries to log in with Micr
     }
   });
 
-  component.find('#microsoft').simulate('click');
+  component.find('.is-microsoft').simulate('click');
 
   expect(authActions.authMicrosoft).toHaveBeenCalled();
 });

src/pages/Login/__snapshots__/Login.test.js.snap

@@ -269,7 +269,6 @@ exports[`<Login /> rendering should render without crashing 1`] = `
                         >
                           <a
                             className="is-facebook socialButton"
-                            id="facebook"
                             onClick={[Function]}
                           >
                             <span
@@ -285,7 +284,6 @@ exports[`<Login /> rendering should render without crashing 1`] = `
                           </a>
                           <a
                             className="is-google socialButton"
-                            id="google"
                             onClick={[Function]}
                           >
                             <span
@@ -301,7 +299,6 @@ exports[`<Login /> rendering should render without crashing 1`] = `
                           </a>
                           <a
                             className="is-microsoft socialButton"
-                            id="microsoft"
                             onClick={[Function]}
                           >
                             <span

src/pages/Login/index.jsx

@@ -1,6 +1,4 @@
-/* eslint-disable no-undef */
-/* eslint-disable no-alert */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { Redirect, Link } from 'react-router-dom';
 import classNames from 'classnames';
@@ -72,17 +70,17 @@ const Login = () => {
 
   const iconsClassName = classNames('icon', classes.icon);
 
-  const onFacebookHandler = () => {
+  const onFacebookHandler = useCallback(() => {
     dispatch(authFacebook());
-  };
+  }, [dispatch, authFacebook]);
 
-  const onGoogleHandler = () => {
+  const onGoogleHandler = useCallback(() => {
     dispatch(authGoogle());
-  };
+  }, [dispatch, authGoogle]);
 
-  const onMicrosoftHandler = () => {
+  const onMicrosoftHandler = useCallback(() => {
     dispatch(authMicrosoft());
-  };
+  }, [dispatch, authMicrosoft]);
 
   const inputs = isEmailLink
     ? inputValidations(authData.email, authData.password, locale)
@@ -224,7 +222,6 @@ const Login = () => {
                         'is-facebook',
                         classes.socialButton
                       )}
-                      id="facebook"
                       onClick={onFacebookHandler}
                     >
                       <span className={iconsClassName}>
@@ -234,7 +231,6 @@ const Login = () => {
                     </a>
                     <a
                       className={classNames('is-google', classes.socialButton)}
-                      id="google"
                       onClick={onGoogleHandler}
                     >
                       <span className={iconsClassName}>
@@ -247,7 +243,6 @@ const Login = () => {
                         'is-microsoft',
                         classes.socialButton
                       )}
-                      id="microsoft"
                       onClick={onMicrosoftHandler}
                     >
                       <span className={iconsClassName}>

src/state/actions/auth.js

@@ -245,15 +245,15 @@ const authWithProvider = provider => {
   return async (dispatch, getState) => {
     dispatch(AUTH_PROVIDER_INIT());
     const { locale } = getState().preferences;
-    let result;
+    let logInData;
 
     try {
-      result = await firebase.auth().signInWithPopup(provider);
+      logInData = await firebase.auth().signInWithPopup(provider);
     } catch (error) {
       const errorMessage = firebaseError(error.code, locale);
       return dispatch(AUTH_PROVIDER_FAIL({ error: errorMessage }));
     }
-    const { user, additionalUserInfo } = result;
+    const { user, additionalUserInfo } = logInData;
 
     const { uid } = firebase.auth().currentUser;
 
@@ -267,12 +267,12 @@ const authWithProvider = provider => {
       name: user.displayName,
       createdAt,
       logoUrl: user.photoURL,
-      location: location ? location.name : null
+      location: location?.name || null
     };
 
-    let userValue;
+    let userFromDb;
     try {
-      userValue = (
+      userFromDb = (
         await firebase
           .database()
           .ref(`users/${uid}`)
@@ -283,7 +283,7 @@ const authWithProvider = provider => {
       return dispatch(AUTH_PROVIDER_FAIL({ error: errorMessage }));
     }
 
-    if (!userValue) {
+    if (!userFromDb) {
       try {
         await firebase
           .database()
@@ -296,15 +296,14 @@ const authWithProvider = provider => {
     }
 
     return dispatch(
-      AUTH_PROVIDER_SUCCESS({ id: uid, ...userData, ...userValue })
+      AUTH_PROVIDER_SUCCESS({ id: uid, ...userData, ...userFromDb })
     );
   };
 };
 
 export const authFacebook = () => {
   const provider = new firebase.auth.FacebookAuthProvider();
   provider.addScope('email');
-  provider.addScope('user_location');
   return authWithProvider(provider);
 };