Admin place started

2025-10-13 00:42:32 +00:00 · 2021-10-21 20:40:43 -03:00
parent f4052791f9
commit 2a7b3841ec
7 changed files with 259 additions and 63 deletions
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
    "firebase": "^9.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 import React, {useState} from "react";
 import CurrentScore from "./components/CurrentScore/CurrentScore";
 import Hangman from "./components/Hangman/Hangman";
-import Header from "./components/Header/Header";
+
 //import PuzzleWord from "./components/Hangman/PuzzleWord/PuzzleWord";
 import Victory from "./components/Victory && Defeat/Victory";
 import Defeat from "./components/Victory && Defeat/Defeat";
@@ -27,6 +27,17 @@ import getWidthScreenUser from "./General Scripts/getWidthScreenUser";
 import LetterInput from "./components/Letter Input/LetterInput";
 import introducedLetterSound from './sound/Letter introduced.mp3'

+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
+import AppHeader from "./components/AppHeader/AppHeader";
+import AdminHeader from "./components/Admin/Header/AdminHeader";
+import ControlPanel from "./components/Admin/Identify/Identify";
+import Identify from "./components/Admin/Identify/Identify";
+
 function App() {
  const [displayApp, setDisplayApp] = useState(false)
  const [mobileUser, setMobileUser] = useState(false)
@@ -170,71 +181,86 @@ function App() {
  }

  return (
-   <>
-    <Header
-      language={language}
-
-      category={category}
-
-      displayCategories={displayCategories}
-      setDisplayCategories={setDisplayCategories}
-    />
    
-    <div className="game-container">
-      
-      {
-        languageIsReady ?
+    <Router>
+      <>
        
-        <div className='categories-container'>
-          <Categories currentScore={currentScore} displayCategories={displayCategories} AppLanguage={language} category={category} setCategory={setCategory} categoryIsReady={categoryIsReady} setLanguage={setLanguage}/>
-        </div>

-      :null
-      }
+        <Switch>

-      <div className='column-1'>
-        <Hangman
-          hangmanFrame={hangmanFrame}
-          />
-      </div>
-      
-      <div className='column-2'>
-        <CurrentScore
+          <Route path='/identify'>
+            <AdminHeader />
+            <Identify />
+          </Route>
+        
+          <Route path="/">
+            <AppHeader
+              language={language}

-          currentScore={currentScore}
-          language={language}
+              category={category}

-        />
-
-        <Word
-          selectedWord={selectedWord}
-          correctLetters={correctLetters}
-        />
-
-      </div>
-
-    </div>
-        {
-          mobileUser ?
-            <LetterInput
+              displayCategories={displayCategories}
+              setDisplayCategories={setDisplayCategories}
            />
-          :null
-        }
-        {
-          !displayApp ? <Loading /> : null
-        }

-        {endOfGame === 'Victory' ? <Victory currentScore={currentScore} setCurrentScore={setCurrentScore} language={language}/> : null}
-        {endOfGame === 'Defeat'  ? <Defeat language={language}/> : null}
+            <div className="game-container">
+              
+              {
+                languageIsReady ?
+                
+                <div className='categories-container'>
+                  <Categories currentScore={currentScore} displayCategories={displayCategories} AppLanguage={language} category={category} setCategory={setCategory} categoryIsReady={categoryIsReady} setLanguage={setLanguage}/>
+                </div>

-    <LettersRegistered
-          lettersRegistered={lettersRegistered}
-        />
-        
-      <audio className="letterIntroduced-audio-container">
-        <source src={introducedLetterSound} type="audio/mp3" autoPlay="true"></source>
-      </audio>
-   </>
+              :null
+              }
+
+              <div className='column-1'>
+                <Hangman
+                  hangmanFrame={hangmanFrame}
+                  />
+              </div>
+              
+              <div className='column-2'>
+                <CurrentScore
+
+                  currentScore={currentScore}
+                  language={language}
+
+                />
+
+                <Word
+                  selectedWord={selectedWord}
+                  correctLetters={correctLetters}
+                />
+
+              </div>
+
+            </div>
+                {
+                  mobileUser ?
+                    <LetterInput
+                    />
+                  :null
+                }
+                {
+                  !displayApp ? <Loading /> : null
+                }
+
+                {endOfGame === 'Victory' ? <Victory currentScore={currentScore} setCurrentScore={setCurrentScore} language={language}/> : null}
+                {endOfGame === 'Defeat'  ? <Defeat language={language}/> : null}
+
+                <LettersRegistered
+                  lettersRegistered={lettersRegistered}
+                />
+                
+              <audio className="letterIntroduced-audio-container">
+                <source src={introducedLetterSound} type="audio/mp3" autoPlay="true"></source>
+              </audio>
+            </Route>
+        </Switch>
+      </>
+   </Router>
  );
 }

--- a/src/components/Admin/Header/AdminHeader.jsx
+++ b/src/components/Admin/Header/AdminHeader.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const AdminHeader = () => {
+    return (
+        <header>
+            <h1>Admin Place</h1>
+        </header>
+    )
+}
+
+export default AdminHeader
--- a/src/components/Admin/Identify/Form/Form.jsx
+++ b/src/components/Admin/Identify/Form/Form.jsx
@@ -0,0 +1,41 @@
+import React from 'react'
+
+const Form = () => {
+
+    const [option, setOption] = React.useState('login')
+
+    return (
+        <div className="form-container">
+            <nav className="options-container">
+                <div className={option === 'login' ? "active login" : 'login'} onClick={() => setOption('login')}>
+                    LOGIN
+                </div>
+                <div className={option === 'register' ? "active register" : 'register'} onClick={() => setOption('register')}>
+                    REGISTER
+                </div>
+            </nav>
+
+            {
+                option === 'login' ?
+
+                    <form>
+                        <input type="email" placeholder="Email"/>
+                        <input type="password" placeholder="Password"/>
+                        <input type="submit" value="Login" />
+                    </form>
+
+                : //saasasasasas
+
+                    <form>
+                        <input type="email" placeholder="Email"/>
+                        <input type="password" placeholder="Password"/>
+                        <input type="password" placeholder="Confirm Password" value=""/>
+                        <input type="password" placeholder="Admin Reffer Code"/>
+                        <input type="submit" value="Register"/>
+                    </form>
+            }
+        </div>
+    )
+}
+
+export default Form
--- a/src/components/Admin/Identify/Identify.jsx
+++ b/src/components/Admin/Identify/Identify.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { getAuth, onAuthStateChanged } from "firebase/auth";
+import Form from './Form/Form'
+import {withRouter} from 'react-router'
+
+
+const Identify = (props) => {
+
+    const auth = getAuth()
+
+    onAuthStateChanged(auth, (user) => {
+
+        if (user) {
+            props.history.push('/admin-place')
+        } 
+    })
+
+    return (
+        <Form />
+    )
+}
+
+
+export default withRouter(Identify)
--- a/src/components/AppHeader/AppHeader.jsx
+++ b/src/components/AppHeader/AppHeader.jsx
@@ -1,6 +1,8 @@
 import React, {useState} from 'react'
+import {withRouter} from "react-router-dom"

-const Header = ({language, category, displayCategories, setDisplayCategories}) => {
+
+const AppHeader = ({language, category, displayCategories, setDisplayCategories, history}) => {

    const [title, setTitle] = useState('')
    const [categoryText, setCategoryText] = useState('')
@@ -43,8 +45,11 @@ const Header = ({language, category, displayCategories, setDisplayCategories}) =
            >
                {categoryText}
            </h2>
+            <button className='identify-button' onClick={() => history.push('/identify')}>
+                Admin Place
+            </button>
        </header>
    )
 }

-export default Header
+export default withRouter(AppHeader)
--- a/yarn.lock
+++ b/yarn.lock
@@ -1157,7 +1157,7 @@
  dependencies:
    regenerator-runtime "^0.13.4"

-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
  version "7.15.4"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
  integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@@ -5973,6 +5973,18 @@ hex-color-regex@^1.1.0:
  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==

+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -5982,6 +5994,13 @@ hmac-drbg@^1.0.1:
    minimalistic-assert "^1.0.0"
    minimalistic-crypto-utils "^1.0.1"

+hoist-non-react-statics@^3.1.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -6695,6 +6714,11 @@ is-wsl@^2.1.1, is-wsl@^2.2.0:
  dependencies:
    is-docker "^2.0.0"

+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -7570,7 +7594,7 @@ long@^4.0.0:
  resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
  integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==

-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7776,6 +7800,14 @@ min-indent@^1.0.0:
  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==

+mini-create-react-context@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
+  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    tiny-warning "^1.0.3"
+
 mini-css-extract-plugin@0.11.3:
  version "0.11.3"
  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
@@ -8547,6 +8579,13 @@ path-to-regexp@0.1.7:
  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=

+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
@@ -9423,7 +9462,7 @@ prompts@^2.0.1:
    kleur "^3.0.3"
    sisteransi "^1.0.5"

-prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9657,7 +9696,7 @@ react-error-overlay@^6.0.9:
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
  integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==

-react-is@^16.8.1:
+react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9672,6 +9711,35 @@ react-refresh@^0.8.3:
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
  integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==

+react-router-dom@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363"
+  integrity sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.1"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d"
+  integrity sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-scripts@4.0.3:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"
@@ -9977,6 +10045,11 @@ resolve-from@^5.0.0:
  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==

+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url-loader@^3.1.2:
  version "3.1.4"
  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.4.tgz#3c16caebe0b9faea9c7cc252fa49d2353c412320"
@@ -11100,6 +11173,16 @@ timsort@^0.3.0:
  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=

+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmp@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
@@ -11524,6 +11607,11 @@ validate-npm-package-license@^3.0.1:
    spdx-correct "^3.0.0"
    spdx-expression-parse "^3.0.0"

+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"