Admin place demo look done

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