Account preview done

src/components/Admin/Account/AccountPreview/AccountPreview.jsx

@@ -0,0 +1,75 @@
+import React, {useState} from 'react'
+import { getAuth, onAuthStateChanged } from "firebase/auth";
+import bringNameOfEmail from './Firebase Querys/bringNameOfEmail';
+import { withRouter } from 'react-router';
+
+const AccountPreview = (props) => {
+
+    const [login, setLogin] = useState(false)
+
+    const [fullName, setFullName] = useState('')
+    const [initials, setInitials] = useState('')
+
+    const [fullNameDisplay, setFullNameDisplay] = useState(false)
+
+    const defineName = async (email) => {
+
+        let name = await bringNameOfEmail(email)
+            name = name.name
+   
+        if (name) {
+
+            setFullName(name)
+
+            let displayName = await name.split(' ')
+            displayName = await displayName.map(string => string[0])
+            
+            setInitials(displayName)
+        }
+    }
+
+    React.useEffect(() => {
+
+        if (!login) {
+            
+            const auth = getAuth()
+            
+            onAuthStateChanged(auth, (user) => {
+                
+                if (user) {
+                    defineName(user.email)
+                    setLogin(true)
+                } else {
+                    alert('NO USER')
+                }
+            })   
+        }
+    }, [])
+    
+    return (
+        <>
+            {
+                initials ?
+                    <div className="account-preview">
+                        <div
+                            className={initials.length > 2 ? "initials inclusive" : "initials"}
+                            onMouseEnter={() => setFullNameDisplay(true)}
+                            onMouseLeave={() => setFullNameDisplay(false)}
+
+                            onClick={() => props.history.push('/my-account')}
+                        >
+                            <p>{initials}</p>
+                        </div>
+                        <div
+                            className={fullNameDisplay ? "full-name show" : "full-name"}>
+                            <p>{fullName}</p>
+                        </div>
+                    </div>
+                : null
+            }
+        </>
+
+    )
+}
+
+export default withRouter(AccountPreview)

src/components/Admin/Account/AccountPreview/Firebase Querys/bringNameOfEmail.js

@@ -0,0 +1,25 @@
+import { doc, getDoc, getDocs, getFirestore, collection } from "firebase/firestore";
+import { firestore } from "../../../../../Firebase/Firebase_Config"
+
+
+const bringNameOfEmail = async (email) => {
+
+    try {
+
+        const id = email
+        console.log(email)
+
+        const db = getFirestore(firestore)
+        const docRef = doc(db, "users", id);
+        const docSnap = await getDoc(docRef);
+
+
+        console.log(docSnap.data())
+        return await docSnap.data()
+        
+    } catch (error) {
+        console.log(error)
+    }
+}
+
+export default bringNameOfEmail

src/components/Admin/AdminIdentify/Identify/Identify.jsx

@@ -6,15 +6,20 @@ import {withRouter} from 'react-router'
 
 const Identify = (props) => {
 
-    const auth = getAuth()
+    
+    React.useEffect(() => {
 
-    onAuthStateChanged(auth, (user) => {
-
-        if (user) {
-            props.history.push('/admin-place')
-        } 
-    })
+        const auth = getAuth()
+        
+        onAuthStateChanged(auth, (user) => {
+            
+            if (user) {
+                props.history.push('/admin-place')
+            } 
+        })  
 
+    }, [props.history])
+    
     return (
         <Form />
     )

src/components/Admin/Header/AdminHeader.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {withRouter} from 'react-router'
+import AccountPreview from '../Account/AccountPreview/AccountPreview'
 
 const AdminHeader = (props) => {
     return (
@@ -13,6 +14,8 @@ const AdminHeader = (props) => {
             >
                 Back to the Game
             </button>
+
+            <AccountPreview />
         </header>
     )
 }