My account logic done

src/App.js

@@ -16,6 +16,7 @@ import Game from "./components/Game/Game";
 import AdminIdentify from "./components/Admin/AdminIdentify/AdminIdentify";
 import DemoControlPanel from "./components/Demo Admin/Control Panel/DemoControlPanel";
 import PasswordRecovery from "./components/Admin/AdminIdentify/Identify/PasswordRecovery/PasswordRecovery";
+import AccountInfo from "./components/Admin/Account/AccountInfo/AccountInfo";
 
 function App() {
   return (
@@ -23,6 +24,12 @@ function App() {
       <>
         <Switch>
 
+          <Route path="/my-account">
+          
+            <AccountInfo />
+
+          </Route>
+
           <Route path="/password-recovery">
 
             <PasswordRecovery />

src/components/Admin/Account/AccountInfo/AccountInfo.jsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react'
+import { getAuth, onAuthStateChanged } from "firebase/auth"
+
+
+import capitalize from '../../Control Panel/Scripts/Capilazate'
+import bringDataFromFirebase from './Firebase Querys/bringDataFromFirebase'
+import HeaderAccount from './HeaderAccount/HeaderAccount'
+import hideRefferCode from './Scripts/hideRefferCode'
+
+const AccountInfo = () => {
+
+    const [name, setName] = useState('')
+    const [email, setEmail] = useState(false)
+    const [position, setPosition] = useState('')
+
+    const [refferCode, setRefferCode] = useState('')
+    const [refferCodeHide, setRefferCodeHide] = useState(true)
+
+    const [loading, setLoading] = useState(true)
+
+    const closeSession = async () => {
+
+    }
+
+    const applyResult = (result) => {
+
+        setName(result['name'])
+        setPosition(result['position'])
+        setRefferCode(result['refferCode'])
+    }
+
+    const bringData = async (email) => {
+
+        const result = await bringDataFromFirebase(email)
+        
+        await console.log(result);
+        
+        await applyResult(await result)
+
+        setLoading(false)
+    }
+
+    React.useEffect(() => {
+
+
+        const auth = getAuth()
+
+        onAuthStateChanged(auth, (user) => {
+
+            if (user) {
+                setEmail(user.email)
+                bringData(user.email)
+            }
+        })
+    
+        
+
+        
+        
+
+    }, [])
+
+    return (
+        <>
+            <HeaderAccount name={'Fran'} />
+
+            {
+                loading ? 
+                    <h1>aaa</h1>
+                :
+            <div className="info-account">
+                <h2>{name}</h2>
+                <h3>{capitalize(position)}</h3>
+
+                <button
+                    onClick={() => closeSession()}
+                >
+                    Close Session
+                </button>
+
+                <h3>{email}</h3>
+
+                <div className="reffer-code-container">
+
+                    <h3>{refferCodeHide ? hideRefferCode(refferCode) : refferCode}</h3>
+                    <button
+                        onClick={() => setRefferCodeHide(!refferCodeHide)}
+                    >
+                        👁️
+                    </button>
+                </div>
+            </div>
+            }
+
+        </>
+        
+    )
+}
+
+export default AccountInfo

src/components/Admin/Account/AccountInfo/Firebase Querys/bringDataFromFirebase.js

@@ -0,0 +1,24 @@
+import { doc, getFirestore, getDoc } from "firebase/firestore"
+import { firestore } from "../../../../../Firebase/Firebase_Config"
+
+const bringDataFromFirebase = async (email) => {
+
+    const data = {}
+        
+        try {
+
+            console.log(email)
+        
+            const db = getFirestore(firestore)
+            const reference = doc(db, 'users', email)
+            const documentSnap = await getDoc(reference)
+
+            return await documentSnap.data()
+
+    } catch (error) {
+        console.log(error)
+    }
+
+}
+
+export default bringDataFromFirebase

src/components/Admin/Account/AccountInfo/HeaderAccount/HeaderAccount.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { withRouter } from 'react-router'
+
+const HeaderAccount = (props) => {
+    return (
+        <header>
+            <h1>My Account</h1>
+
+            <button
+                className="redirect-button"
+                onClick={() => props.history.push('/admin-place')}    
+            >
+                Back to Admin Place
+            </button>
+        </header>
+    )
+}
+
+export default withRouter(HeaderAccount)

src/components/Admin/Account/AccountInfo/Scripts/hideRefferCode.js

@@ -0,0 +1,12 @@
+const hideRefferCode = (refferCode) => {
+    
+    let hiddenRefferCode = ''
+
+    for (let i = 0; i < refferCode.length; i++) {
+        hiddenRefferCode = hiddenRefferCode + '•'
+    } 
+
+    return hiddenRefferCode
+}
+
+export default hideRefferCode