Admin place demo look done

public/css/control-panelDemo/admin-header-demo.css

@@ -0,0 +1,28 @@
+header.demo h1 {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+header.demo h1 span.demoSpan {
+  background: -webkit-linear-gradient(118deg, #ffaa3b 0%, #ff6b00 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: flex;
+  align-items: center;
+}
+header.demo h1 span.demoSpan:hover {
+  vertical-align: middle;
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-property: transform;
+  transition-property: transform;
+}
+header.demo h1 span.demoSpan:hover, header.demo h1 span.demoSpan:focus, header.demo h1 span.demoSpan:active {
+  -webkit-transform: rotate(4deg);
+  transform: rotate(4deg);
+}
+
+/*# sourceMappingURL=admin-header-demo.css.map */

public/css/control-panelDemo/admin-header-demo.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../sass/control-panelDemo/admin-header-demo.scss"],"names":[],"mappings":"AAEI;EAEI;EAEA;EACA;;AAEA;EAII;EACA;EACA;EAIA;EACA;;AAEA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA","file":"admin-header-demo.css"}

public/css/index.css

@@ -436,7 +436,6 @@ header .redirect-button:hover {
   transition: ease-in-out 0.4s;
 }
 .form-container form {
-  height: 64vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -457,6 +456,13 @@ header .redirect-button:hover {
   border-bottom: 0;
   border: 1px solid #797979;
 }
+.form-container p.aditional-text {
+  color: #3670c9;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .form-container .loading {
   opacity: 70%;
 }
@@ -779,5 +785,48 @@ header .redirect-button:hover {
     font-size: 12pt;
   }
 }
+.control-panel .demo-message-container {
+  display: flex;
+  justify-content: center;
+  padding-top: 5vh;
+}
+.control-panel .demo-message-container .demo-message {
+  font-family: "Raleway", sans-serif;
+  font-weight: bold;
+  background-color: #f7f7f7;
+  width: 40vw;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  border: 1px solid #c4c4c4;
+  border-radius: 5px;
+}
+
+header.demo h1 {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+header.demo h1 span.demoSpan {
+  background: -webkit-linear-gradient(118deg, #ffaa3b 0%, #ff6b00 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: flex;
+  align-items: center;
+}
+header.demo h1 span.demoSpan:hover {
+  vertical-align: middle;
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-property: transform;
+  transition-property: transform;
+}
+header.demo h1 span.demoSpan:hover, header.demo h1 span.demoSpan:focus, header.demo h1 span.demoSpan:active {
+  -webkit-transform: rotate(4deg);
+  transform: rotate(4deg);
+}
 
 /*# sourceMappingURL=index.css.map */

public/css/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss","../sass/_form.scss","../sass/_message.scss","../sass/control-panel/_control-panel.scss","../sass/control-panel/_action-form.scss","../sass/control-panel/_message.scss"],"names":[],"mappings":"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","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss","../sass/_identify.scss","../sass/_message.scss","../sass/control-panel/_control-panel.scss","../sass/control-panel/_action-form.scss","../sass/control-panel/_message.scss","../sass/control-panelDemo/_demo-message.scss","../sass/control-panelDemo/admin-header-demo.scss"],"names":[],"mappings":"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","file":"index.css"}

public/sass/_identify.scss

@@ -38,7 +38,7 @@
 
     form {
 
-        height: 64vh;
+        //height: 64vh;
 
         display: flex;
         flex-direction: column;
@@ -72,6 +72,17 @@
         }
     }
 
+    p.aditional-text {
+
+        color:rgb(54, 112, 201);
+
+        cursor: pointer;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
     .loading {
         opacity: 70%;
     }

public/sass/control-panelDemo/_demo-message.scss

@@ -0,0 +1,28 @@
+.control-panel {
+
+    .demo-message-container {
+
+        display: flex;
+        justify-content: center;
+
+        padding-top: 5vh;
+        
+        .demo-message {
+            
+            @include titleFont();
+            
+            background-color: rgb(247, 247, 247);
+
+            width: 40vw;
+
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            
+            border: 1px solid rgb(196, 196, 196);
+            
+            border-radius: 5px;
+
+        }
+    }
+}

public/sass/control-panelDemo/admin-header-demo.scss

@@ -0,0 +1,41 @@
+header.demo {
+
+    h1 {
+
+        height: 100%;
+        
+        display: flex;
+        align-items: center;
+
+        span.demoSpan {
+            
+            //color: #ffaa3b;
+
+            background: -webkit-linear-gradient(118deg, rgba(255,170,59,1) 0%, rgba(255,107,0,1) 100%); //!Credits https://cssgradient.io
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            //!Credits https://cssgradient.io/blog/css-gradient-text/
+            //height: 100%;
+
+            display: flex;
+            align-items: center;
+
+            &:hover {
+                //display: inline-block;
+                vertical-align: middle;
+                -webkit-transform: perspective(1px) translateZ(0);
+                transform: perspective(1px) translateZ(0);
+                box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+                -webkit-transition-duration: 0.3s;
+                transition-duration: 0.3s;
+                -webkit-transition-property: transform;
+                transition-property: transform;
+            }
+            
+            &:hover, &:focus, &:active {
+                -webkit-transform: rotate(4deg);
+                transform: rotate(4deg);
+            }
+        }
+    }
+}

public/sass/index.scss

@@ -26,6 +26,8 @@ html, body {
 @import 'loading';
 @import 'letters-registered';
 @import 'letter-input';
-@import 'form';
+@import 'identify';
 @import 'message';
-@import './control-panel/control-panel';
+@import './control-panel/control-panel';
+@import './control-panelDemo/demo-message';
+@import './control-panelDemo/admin-header-demo.scss'

src/App.js

@@ -8,12 +8,13 @@ import {
   Route,
   Link
 } from "react-router-dom";
-import AppHeader from "./components/Game/components/AppHeader/AppHeader";
+//import AppHeader from "./components/Game/components/AppHeader/AppHeader";
-import AdminHeader from "./components/Admin/Header/AdminHeader";
+//import AdminHeader from "./components/Admin/Header/AdminHeader";
 import ControlPanel from "./components/Admin/Control Panel/ControlPanel";
-import Identify from "./components/Admin/AdminIdentify/Identify/Identify";
+//import Identify from "./components/Admin/AdminIdentify/Identify/Identify";
 import Game from "./components/Game/Game";
 import AdminIdentify from "./components/Admin/AdminIdentify/AdminIdentify";
+import DemoControlPanel from "./components/Demo Admin/Control Panel/DemoControlPanel";
 
 function App() {
   return (
@@ -21,6 +22,12 @@ function App() {
       <>
         <Switch>
 
+          <Route path='/demo-admin-place'>
+
+            <DemoControlPanel />
+
+          </Route>
+
           <Route path='/admin-place'>
 
             <ControlPanel />

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import { withRouter } from 'react-router'
+
+const AditionalText = (props) => {
+    
+    return (
+        <p
+            className="aditional-text"
+            onClick={() => props.history.push(props.link)}>
+          {props.text}  
+        </p>
+    )
+}
+
+export default withRouter(AditionalText)

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

@@ -1,5 +1,6 @@
 import React, {useState} from 'react'
 import Loading from '../../../../Game/components/Loading/Loading'
+import AditionalText from './AditionalText/AditionalText'
 import MessageContainer from './MessageContainer'
 import FormActions from './Scripts/FormActions'
 
@@ -130,6 +131,8 @@ const Form = () => {
                     <Loading />
                 : null
             }
+            <AditionalText text={'Admin place demo look'} link={'/demo-admin-place'}/>
+
         </div>
     )
 }

src/components/Admin/Control Panel/Actions/AddCategory/AddCategory.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from 'react'
 import AddCategoryToFirebase from './Firebase Querys/AddCategoryToFirebase'
-import Loading from '../../Loading/Loading'
+import Loading from '../../../../Loading/Loading'
-import Messages from '../../Messages/Messages'
+import Messages from '../../../../Messages/Messages'
 import SendMeEmail from '../../Email/SendMeEmail'
 
 const AddCategory = () => {

src/components/Admin/Control Panel/Actions/AddWord/AddWord.jsx

@@ -1,9 +1,9 @@
 import React, {useState} from 'react'
-import Loading from '../../Loading/Loading'
+import Loading from '../../../../Loading/Loading'
 import BringCategories from './Firebase Querys/BringCategories'
 import BringLanguages from './Firebase Querys/BringLanguages'
 import capitalize from '../../Scripts/Capilazate'
-import Messages from '../../Messages/Messages'
+import Messages from '../../../../Messages/Messages'
 import AddWordToFirebase from './Firebase Querys/AddWordToFirebase'
 import SendMeEmail from '../../Email/SendMeEmail'
 
@@ -39,6 +39,12 @@ const AddWord = () => {
         
     }, [])
 
+    const changeLanguage = (e) => {
+
+        setLanguageSelection(e.target.value)
+        setCategorySelection(false)
+    }
+
     const submitInformation = async (e) => {
         
         e.preventDefault()
@@ -132,7 +138,7 @@ const AddWord = () => {
                         onSubmit={(e) => submitInformation(e)}
                     >
                         <select
-                            onChange={(e) => setLanguageSelection(e.target.value)}
+                            onChange={(e) => changeLanguage(e)}
                             value={languageSelection}
                         >
                             <option value="default">Select language</option>

src/components/Admin/Control Panel/Actions/DeleteCategory/DeleteCategory.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import SendMeEmail from '../../Email/SendMeEmail'
-import Loading from '../../Loading/Loading'
+import Loading from '../../../../Loading/Loading'
-import Messages from '../../Messages/Messages'
+import Messages from '../../../../Messages/Messages'
 import capitalize from '../../Scripts/Capilazate'
 import BringCategories from './Firebase Querys/BringCategories'
 import DeleteCategoryFirebase from './Firebase Querys/DeleteCategoryFirebase'

src/components/Admin/Control Panel/Actions/DeleteWord/DeleteWord.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from 'react'
 import SendMeEmail from '../../Email/SendMeEmail'
-import Loading from '../../Loading/Loading'
+import Loading from '../../../../Loading/Loading'
-import Messages from '../../Messages/Messages'
+import Messages from '../../../../Messages/Messages'
 import capitalize from '../../Scripts/Capilazate'
 import BringCategories from '../AddWord/Firebase Querys/BringCategories'
 import BringLanguages from '../AddWord/Firebase Querys/BringLanguages'

src/components/Admin/Control Panel/Actions/EditWord/EditWord.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from 'react'
 import SendMeEmail from '../../Email/SendMeEmail'
-import Loading from '../../Loading/Loading'
+import Loading from '../../../../Loading/Loading'
-import Messages from '../../Messages/Messages'
+import Messages from '../../../../Messages/Messages'
 import capitalize from '../../Scripts/Capilazate'
 import BringLanguages from '../AddWord/Firebase Querys/BringLanguages'
 import BringCategories from './Firebase Querys/BringCategories'

src/components/Admin/Header/AdminHeader.jsx

@@ -3,8 +3,10 @@ import {withRouter} from 'react-router'
 
 const AdminHeader = (props) => {
     return (
-        <header>
+        <header className={props.demo === true ? 'demo' : null}>
-            <h1>Admin Place</h1>
+            {
+                props.demo === true ? <h1>Admin Place&nbsp;<span className='demoSpan'>Demo!</span></h1> : <h1>Admin Place</h1>
+            }
             <button
                 className="redirect-button"
                 onClick={() => props.history.push('/')}    

src/components/Demo Admin/Control Panel/ActionsDemo/ActionsDemo.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import AddWordDemo from './AddWordDemo/AddWordDemo'
+import AddCategoryDemo from './AddCategoryDemo/AddCategoryDemo'
+import DeleteCategoryDemo from './DeleteCategoryDemo/DeleteCategoryDemo'
+import DeleteWordDemo from './DeleteWordDemo/DeleteWordDemo'
+import EditWordDemo from './EditWordDemo/EditWordDemo'
+
+const ActionsDemo = ({actualAction}) => {
+    return (
+        <>
+            {
+                actualAction === 'Add Word(s)' ?
+                    <AddWordDemo action={actualAction} />
+                : null
+            }
+            {
+                actualAction === 'Add Category' ? 
+                    <AddCategoryDemo action={actualAction} />
+                : null
+            }
+            {
+                actualAction === 'Delete Category' ? 
+                    <DeleteCategoryDemo action={actualAction} />
+                : null
+            }
+            {
+                actualAction === 'Delete Word' ? 
+                    <DeleteWordDemo action={actualAction} />
+                : null
+            }
+            {
+                actualAction === 'Edit Word' ? 
+                    <EditWordDemo action={actualAction} />
+                : null
+            }
+        </>
+    )
+}
+
+export default ActionsDemo

src/components/Demo Admin/Control Panel/ActionsDemo/AddCategoryDemo/AddCategoryDemo.jsx

@@ -0,0 +1,97 @@
+import React, {useState} from 'react'
+import Loading from '../../../../Loading/Loading'
+import Messages from '../../../../Messages/Messages'
+
+const AddCategoryDemo = () => {
+    const [categorySpanish, setCategorySpanish] = useState('')
+    const [categoryEnglish, setCategoryEnglish] = useState('')
+
+    const [fristWordEnglish, setFristWordEnglish] = useState('')
+    const [fristWordSpanish, setFristWordSpanish] = useState('')
+
+    const [loading, setLoading] = useState(false)
+    
+    const [data, setData] = useState('') 
+
+    const addCategorySubmit = async (e) => {
+        e.preventDefault()
+
+        setLoading(true)
+
+        const result = await {
+            sucess: true, 
+            message: 'All Right!'
+        }
+        setData(result)
+
+        setCategoryEnglish('')
+        setCategorySpanish('')
+
+        setFristWordEnglish('')
+        setFristWordSpanish('')
+
+        setLoading(false)
+        ////SendMeEmail('Add Category')
+    }
+
+    return (
+        <>
+            {
+                data !== '' ?
+                    <Messages data={data} />        
+                : null
+            }
+            {
+                loading ?
+                    <Loading />
+                :
+                <div className="action-form add-category">
+                    <form
+                        onSubmit={e => addCategorySubmit(e)}
+                    >
+
+                        <div className="frist-row">
+                            <input
+                                type="text"
+                                placeholder="Add the new category [English]"
+                                required
+                                onChange={e => setCategoryEnglish(e.target.value)}
+                                value={categoryEnglish}
+                            />
+
+                            <input
+                                type="text"
+                                placeholder="Add one word to the new category [English]"
+                                required
+                                onChange={e => setFristWordEnglish(e.target.value)}
+                                value={fristWordEnglish}
+                            />
+                        </div>
+
+                        <div className="second-row">
+                            <input
+                                type="text"
+                                placeholder="Add the new category [Spanish]"
+                                required
+                                onChange={e => setCategorySpanish(e.target.value)}
+                                value={categorySpanish}
+                                />
+
+                            <input
+                                type="text"
+                                placeholder="Add one word to the new category [Spanish]"
+                                required
+                                onChange={e => setFristWordSpanish(e.target.value)}
+                                value={fristWordSpanish}
+                                />
+                        </div>
+
+                        <input type="submit"/>
+                    </form>
+                </div>
+            }
+        </>
+    )
+}
+
+export default AddCategoryDemo

src/components/Demo Admin/Control Panel/ActionsDemo/AddWordDemo/AddWordDemo.jsx

@@ -0,0 +1,181 @@
+import React, {useState} from 'react'
+import capitalize from '../../../../Admin/Control Panel/Scripts/Capilazate'
+import Loading from '../../../../Loading/Loading'
+import Messages from '../../../../Messages/Messages'
+import DemoMessage from '../../DemoMessage/DemoMessage'
+import DemoMessageLogic from '../../DemoMessage/DemoMessageLogic'
+
+const AddWordDemo = () => {
+    const [loading, setLoading] = useState(true)
+    const [languageList, setLanguageList] = useState([])
+    const [categoryList, setCategoryList] = useState([])
+
+    const [languageSelection, setLanguageSelection]  = useState(false)
+    const [categorySelection, setCategorySelection]  = useState(false)
+    const [wordsToAdd, setWordsToAdd] = useState('') 
+
+    const [data, setData] = useState(false)
+
+    const [canceledAddingWords, setCanceledAddingWords] = useState(false)
+
+    const [message, setMessage] = useState(false)
+
+    const bringData = async () => {
+
+        setLanguageList(['english', 'spanish'])
+        setCategoryList(['Category A', 'Category B', 'Category C'])
+
+        setLoading(false)
+    } 
+
+    React.useEffect(() => {
+
+        bringData()
+        
+    }, [])
+
+    const submitInformation = async (e) => {
+        
+        e.preventDefault()
+        setLoading(true)
+
+        setData(false)
+        setCanceledAddingWords(false)
+
+        if (!languageSelection || languageSelection === 'default') {
+
+            setData({
+                sucess: false,
+                message: `Language is not supposed to be empty`
+            })
+            await setLoading(false)
+
+            return
+        }
+
+        if (!categorySelection || categorySelection === 'default') {
+
+            setData({
+                sucess: false,
+                message: `Category is not supposed to be empty`
+            })
+            await setLoading(false)
+
+            return
+        }
+        
+        if (!wordsToAdd || wordsToAdd === '') {
+
+            setData({
+                sucess: false,
+                message: `Words is not supposed to be empty`
+            })
+            await setLoading(false)
+
+            return
+        }
+
+        // // let splitedWords = wordsToAdd.split(',')
+
+        // // splitedWords = splitedWords.map(word => word.trim())
+        // // splitedWords = splitedWords.map(word => word.toLowerCase())
+        // // splitedWords = splitedWords.map(word => capitalize(word))
+
+        // const uploadWordsPromise = new Promise((resolve, reject) => {
+            
+        //         splitedWords.forEach(async (word, index) => {
+                       
+        //                if (!canceledAddingWords) {
+                           
+        //                    if (await AddWordToFirebase(languageSelection, categorySelection, word, setData) === 'error') {
+                               
+        //                        setCanceledAddingWords(true)
+        //                    }
+
+        //                    if (index === splitedWords.length -1) resolve();
+        //                }
+        //            }) 
+        //     }   
+        // )
+
+        setData({
+            sucess: true,
+            message: 'All Right!'
+        })
+
+        setLanguageSelection('')
+        setCategorySelection('')
+        setWordsToAdd('')
+
+        setLoading(false)
+        ////SendMeEmail('Add Word(s)')
+
+        //! CREDITS FOR THE PROMISE LOGIC: https://stackoverflow.com/a/38407013
+
+        setMessage(true)
+    }
+
+    const changeLanguage = (e) => {
+
+        setLanguageSelection(e.target.value)
+        setCategorySelection(false)
+    }
+
+    return (
+        <>
+            {
+                data ?
+                    <Messages data={data} />        
+                : null
+            }
+            {
+                loading ? 
+                    <Loading />
+                :
+                <div className="action-form add-word">
+                    <form
+                        onSubmit={(e) => submitInformation(e)}
+                    >
+                        <select
+                            onChange={(e) => changeLanguage(e)}
+                            value={languageSelection}
+                        >
+                            <option value="default">Select language</option>
+                            {
+                                languageList.map( language => <option key={language} value={language}>{capitalize(language)}</option>)
+                            }
+                        </select>
+                        
+                        <select
+                            onChange={(e) => setCategorySelection(e.target.value)}
+                            value={categorySelection}
+
+                            disabled={languageSelection === false || languageSelection === 'default' ? true : false}
+                        >
+                            <option value="default">Select category</option>
+                            {
+                                categoryList.map( category => <option key={category} value={category}>{capitalize(category)}</option>)
+                            }
+                        </select>
+                        <textarea
+                            placeholder="Add the word/words separated by commas"
+                            cols="30" rows="10"
+                            onChange={(e) => setWordsToAdd(e.target.value)}
+                            value={wordsToAdd}
+
+                            disabled={categorySelection === false || categorySelection === 'default' ? true : false}
+                        />
+                        <input type="submit" value="Add Word(s)" />
+                    </form>
+                </div>
+            }
+            {
+                message ?
+                    <DemoMessage setMessage={setMessage}/>
+                : null
+            }
+        </>
+    )
+}
+
+export default AddWordDemo

src/components/Demo Admin/Control Panel/ActionsDemo/DeleteCategoryDemo/DeleteCategoryDemo.jsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import capitalize from '../../../../Admin/Control Panel/Scripts/Capilazate'
+import Loading from '../../../../Loading/Loading'
+import Messages from '../../../../Messages/Messages'
+
+const DeleteCategoryDemo = () => {
+    const [categoriesList, setCategoriesList] = React.useState([])
+    const [loading, setLoading] = React.useState(true)
+
+    const [categorySelection, setCategorySelection] = React.useState(false)
+    const [data, setData] = React.useState(false)
+
+    const [changedTheFirebaseCategories, setChangedTheFirebaseCategories] = React.useState(true)
+
+    const BringCategoriesToThisComponent = async () => {
+
+        const result = await ['english', 'spanish']
+        setCategoriesList(result)
+        setLoading(false)
+
+    }
+
+    const submitDeleteCategory = async (e) => {
+
+        e.preventDefault()
+        setLoading(true)
+        
+        if (!categorySelection || categorySelection === 'default') {
+
+            setData({
+                sucess: false,
+                message: 'The category is empty'
+            })
+
+            return
+        }
+
+        const answer = window.confirm(`Are you sure?, this is gonna delete all words in ${capitalize(categorySelection)}'s category`) //! CREDITS: https://stackoverflow.com/a/9334679
+
+        if (answer) {
+
+            //
+        }
+
+        categorySelection('')
+        setLoading(false)
+
+        setChangedTheFirebaseCategories(true)
+
+        //SendMeEmail('Delete Category')
+    }
+
+    React.useEffect(() => {
+
+        if (changedTheFirebaseCategories) {
+   
+            BringCategoriesToThisComponent()
+            setChangedTheFirebaseCategories(false)
+        }
+
+    }, [changedTheFirebaseCategories])
+
+    return (
+        <>
+            {
+                data ?
+                    <Messages data={data} />        
+                : null
+            }
+            {
+                loading ?
+                    <Loading />
+                :
+                <div className="action-form delete-category">
+                    <form
+                        onSubmit={(e) => submitDeleteCategory(e)}
+                    >
+                        <select
+                            onChange={e => setCategorySelection(e.target.value)}
+                            value={categorySelection}
+                        >
+                            <option value='default'>Select an option</option>
+                            {
+                                categoriesList.map(category => <option key={category} value={category}>{capitalize(category)}</option>)
+                            }
+                        </select>
+                        <input type="submit" value="Delete"/>
+                    </form>
+                </div>
+            }
+        </>
+    )
+}
+
+export default DeleteCategoryDemo

src/components/Demo Admin/Control Panel/ActionsDemo/DeleteWordDemo/DeleteWordDemo.jsx

@@ -0,0 +1,174 @@
+import React, {useState} from 'react'
+import capitalize from '../../../../Admin/Control Panel/Scripts/Capilazate'
+import Loading from '../../../../Loading/Loading'
+import Messages from '../../../../Messages/Messages'
+
+const DeleteWordDemo = () => {
+    
+    const [loading, setLoading] = useState(true)
+
+    const [languageList, setLanguageList] = useState([])
+    const [categoryList, setCategoryList] = useState([])
+    const [wordsList, setWordsList] = useState([])
+
+    const [languageSelect, setLanguageSelect] = useState('')
+    const [categorySelect, setCategorySelect] = useState('')
+    const [wordSelect, setWordSelect] = useState('')
+
+    const [data, setData] = useState(false)
+
+    const bringData = async (response = false) => {
+
+        const bringCategoriesToThisComponent = async () => {
+
+            const categories = await ['Category A', 'Category B', 'Category C']
+            setCategoryList(categories)
+        }
+
+        const bringLanguagesToThisComponent = async () => {
+
+            const languages = await ['english', 'spanish']
+            setLanguageList(languages)
+        }
+
+        await bringCategoriesToThisComponent()
+        await bringLanguagesToThisComponent()
+
+        if (response) {
+            setData(response)
+
+        } 
+
+        setLoading(false)
+    }
+
+
+    const bringWords = async (category) => {
+
+        setLoading(true)
+        setCategorySelect(category)
+
+        console.log(category);
+        
+        const words = await ['Example 1', 'Example 2', 'Example 3']
+        
+        await setWordsList(words)
+        await setLoading(false)
+
+    }
+
+    const submitForm = async (e) => {
+
+        e.preventDefault()
+        setLoading(true)
+
+        if (languageSelect === '' || languageSelect === 'default') {
+
+            setData({
+                submit: false,
+                message: 'Language empty'
+            })
+            
+            return
+        }
+
+        if (categorySelect === '' || categorySelect === 'default') {
+
+            setData({
+                submit: false,
+                message: 'Category empty'
+            })
+            
+            return
+        }
+
+        if (wordSelect === '' || wordSelect === 'default') {
+
+            setData({
+                submit: false,
+                message: 'No word selected'
+            })
+
+            return
+        }
+
+        const response = await {
+            sucess: true,
+            message: 'All Right!'
+        }
+
+        
+        setLanguageList([])
+        setCategoryList([])
+        setWordsList([])
+        setLanguageSelect('')
+        setCategorySelect('')
+        setWordSelect('')
+        
+        bringData(response)
+        ////SendMeEmail('Delete Word')
+    }
+    
+    React.useEffect(() => {
+        
+        bringData()
+
+    }, [])
+
+    return (
+        <>
+            {
+                data ?
+                   <Messages data={data} />
+                : null
+            }
+            <div className="action-form delete-word">
+                {
+                    loading ?
+                        <Loading />
+                    : null
+                }   
+                <form
+                    onSubmit={(e) => submitForm(e)}
+                >
+
+                    <select
+                        onChange={(e) => {
+                            setLanguageSelect(e.target.value)
+                            setCategorySelect('')
+                        }}
+                    >
+                        <option value="default">Select language</option>
+                        {
+                            languageList.map(language => <option key={language} value={language}>{capitalize(language)}</option>)
+                        }
+                    </select>
+
+                    <select
+                        disabled={languageSelect === '' && !loading ? true : false}
+                        onChange={(e) => bringWords(e.target.value)}
+                        value={categorySelect}
+                    >
+                        <option value="default">Select category</option> 
+                        {
+                            categoryList.map(category => <option key={category} value={category}>{capitalize(category)}</option>)
+                        }   
+                    </select>
+                    <select
+                        disabled={categorySelect === '' && !loading ? true : false}
+                        onChange={(e) => setWordSelect(e.target.value)}
+                        value={wordSelect}
+                    >
+                        <option value="default">Select word</option>
+                        {
+                            wordsList.map(word => <option key={word} value={word}>{capitalize(word)}</option>)
+                        }
+                    </select>
+                    <input type="submit" value="Delete" />
+                </form>
+            </div>
+        </>
+    )
+}
+
+export default DeleteWordDemo

src/components/Demo Admin/Control Panel/ActionsDemo/EditWordDemo/EditWordDemo.jsx

@@ -0,0 +1,220 @@
+import React, {useState} from 'react'
+import capitalize from '../../../../Admin/Control Panel/Scripts/Capilazate'
+import Loading from '../../../../Loading/Loading'
+import Messages from '../../../../Messages/Messages'
+
+const EditWordDemo = () => {
+    
+    const [loading, setLoading] = useState(true)
+
+    const [languageList, setLanguageList] = useState([])
+    const [categoryList, setCategoryList] = useState([])
+    const [wordsList, setWordsList] = useState([])
+
+    const [languageSelection, setLanguageSelection]  = useState('default')
+    const [categorySelection, setCategorySelection]  = useState('default')
+    const [wordSelection, setWordSelection] = useState('default')
+
+    const [newWord, setNewWord] = useState('')
+
+    const [data, setData] = useState(false)
+
+    const bringLanguagesToThisComponent = async () => {
+    
+        const languages = await ['english', 'spanish']
+        setLanguageList(languages)
+
+        setLoading(false)
+    } 
+
+    const applyLanguage = (languageSelected) => {
+
+        if (languageSelected === '' || languageSelected === 'default') {
+
+            setLanguageSelection('default')
+            return
+        }
+
+        setCategorySelection('default')
+        setWordSelection('default')
+
+        setLanguageSelection(languageSelected)
+        bringCategoriesToThisComponent()
+    }
+
+    const bringCategoriesToThisComponent = async () => {
+
+        setLoading(true)
+
+        const category = await ['Category A', 'Category B', 'Category C']
+        
+        await setCategoryList(category)
+
+        setLoading(false)
+    }
+
+    const applyCategory = (categorySelected) => {
+
+        if (categorySelected === '' || categorySelected === 'default') {
+
+            setLanguageSelection('default')
+            return
+        }
+
+        setCategorySelection(categorySelected)
+
+        bringWordsToThisComponent(categorySelected)
+    }
+
+    const bringWordsToThisComponent = async (categorySelected) => {
+
+        setLoading(true)
+
+        const result = await {
+
+            sucess: true,
+            message: 'All Right!'
+        }
+        console.log(result)
+        setWordsList(result)
+
+        setLoading(false)
+    }
+
+    const submitEditWord = async (e) => {
+
+        e.preventDefault()
+
+        setLoading(true)
+
+        if (languageSelection === '' || languageSelection === 'default') {
+
+            setData({
+                sucess: false,
+                message: `Looks like language are empty...`
+            })
+
+            return
+        }
+        
+        if (categorySelection === '' || categorySelection === 'default') {
+
+            setData({
+                sucess: false,
+                message: `Looks like category are empty...`
+            })
+
+            return
+        }
+
+        if (wordSelection === '' || wordSelection === 'default') {
+
+            setData({
+                sucess: false,
+                message: `Looks like the word selected are empty...`
+            })
+
+            return
+        }
+
+        if (newWord === '' || newWord === 'default') {
+
+            setData({
+                sucess: false,
+                message: `Please, introduce a new word`
+            })
+
+            return
+        }
+
+        setData({
+            sucess: true,
+            message: `All Right!`
+        })
+
+        setLanguageSelection('')
+        setCategorySelection('')
+        setWordSelection('')
+        setNewWord('')
+
+        setLoading(false)
+
+        ////SendMeEmail('Edit word')
+    }
+
+    React.useEffect(() => {
+
+        bringLanguagesToThisComponent()
+
+    },[])
+
+    return (
+        <>
+            {
+                data ?
+                    <Messages data={data} />
+                : null
+            }
+            {
+                loading ? 
+                    <Loading />
+                :
+                <div className="action-form edit-word">
+                    <form
+                        onSubmit={e => submitEditWord(e)}
+                    >
+
+                        <select
+                            onChange={e => applyLanguage(e.target.value)}
+                            value={languageSelection}
+                        >
+                            <option value="default">Select language</option>
+                            {
+                                languageList.map(language => 
+                                    <option value={language} key={language}>{capitalize(language)}</option>
+                                )
+                            }    
+                        </select>
+
+                        <select
+                            onChange={e => applyCategory(e.target.value)}
+                            value={categorySelection}
+                            disabled={languageSelection === 'default' && !loading ? true : false}
+                        >
+                            <option value="default">Select category</option>
+                            {
+                                categoryList.map(category => 
+                                    <option value={category} key={category}>{capitalize(category)}</option>    
+                                )
+                            }    
+                        </select>
+
+                        <select
+                            onChange={e => setWordSelection(e.target.value)}
+                            value={wordSelection}
+                            disabled={categorySelection === 'default' && !loading ? true : false}
+                        >
+                            <option value="default">Select word</option>
+                            {
+                                wordsList.map(word => <option key={word} value={word}>{capitalize(word)}</option>)
+                            }
+                        </select>
+
+                        <input
+                            type="text"
+                            placeholder="Place the new word"
+
+                            disabled={wordSelection === 'default' && !loading ? true : false}
+
+                            onChange={e => setNewWord(e.target.value)}
+                            value={newWord}
+                        />
+                        <input type="submit" value="Edit" />
+                    </form>
+                </div>
+            }
+        </>
+    )
+}
+
+export default EditWordDemo

src/components/Demo Admin/Control Panel/DemoControlPanel.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import AdminFunctionButton from '../../Admin/Control Panel/AdminFunctionButton'
+import AdminHeader from '../../Admin/Header/AdminHeader'
+import ActionsDemo from './ActionsDemo/ActionsDemo'
+
+const DemoControlPanel = () => {
+
+    const [actualAction, setActualAction] = React.useState('')
+
+    return (
+        <>
+            <AdminHeader demo={true} />
+
+            <div className="control-panel">     
+                <div 
+                    className={actualAction ? 'buttons-container nav-mode' : 'buttons-container'}>
+                        <AdminFunctionButton action={'Add Word(s)'} actualAction={actualAction} setActualAction={setActualAction}/>
+                        <AdminFunctionButton action={'Add Category'} actualAction={actualAction} setActualAction={setActualAction}/>
+                        <AdminFunctionButton action ={'Delete Category'} actualAction={actualAction} setActualAction={setActualAction}/>
+                        <AdminFunctionButton action ={'Delete Word'} actualAction={actualAction} setActualAction={setActualAction}/>
+                        <AdminFunctionButton action ={'Edit Word'} actualAction={actualAction} setActualAction={setActualAction}/>
+                </div>
+                {
+                    actualAction ?
+                        <ActionsDemo actualAction={actualAction}/>
+                    : null
+                }
+            </div>
+        </>
+    )
+}
+
+export default DemoControlPanel

src/components/Demo Admin/Control Panel/DemoMessage/DemoMessage.jsx

@@ -0,0 +1,34 @@
+import React, {useState} from 'react'
+import DemoMessageLogic from './DemoMessageLogic'
+
+const DemoMessage = ({setMessage}) => {
+
+    const [show, setShow] = useState(true)
+
+    React.useEffect(() => {
+
+        setTimeout(() => {
+
+            setShow(false)
+
+        }, 3000)
+
+        setTimeout(() => {
+
+            setMessage(false)
+
+        }, 3500)
+
+    }, [])
+
+    return (
+        <div className="demo-message-container">
+            <div className={show ? 'demo-message animate__animated animate__backInUp' : 'demo-message animate__animated animate__backOutDown'}>
+                <h2>You aren't logged 🤦‍♂️</h2>
+                <p>Thanks for the interest, but you need log in for modify the database</p>
+            </div>
+        </div>
+    )
+}
+
+export default DemoMessage

src/components/Demo Admin/Control Panel/DemoMessage/DemoMessageLogic.js

@@ -0,0 +1,9 @@
+const DemoMessageLogic = (setMessage) => {
+
+    const message = document.getElementById('demo-message')
+
+    console.log(message)
+    
+}
+
+export default DemoMessageLogic

src/components/Demo Admin/Control Panel/Scripts/Capilazate.js

@@ -0,0 +1,4 @@
+const capitalize = (str, lower = false) =>
+        (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());  /* CREDITS: https://stackoverflow.com/a/7592235*/
+    
+export default capitalize