Add Words logic done and solved some bugs from Add Category

public/css/index.css

@@ -493,6 +493,7 @@ header .redirect-button:hover {
   height: 16vw;
   max-height: 250px;
   margin: 0px 3vw;
+  margin-bottom: 5vh;
   font-size: 1.5vw;
   font-weight: bold;
   border: none;
@@ -646,7 +647,14 @@ header .redirect-button:hover {
 .control-panel .action-form.add-word form textarea {
   margin-top: 2vh;
 }
-.control-panel .action-form.add-category form input[type=text] {
+.control-panel .action-form.add-category form .frist-row {
+  margin-bottom: 3vh;
+}
+.control-panel .action-form.add-category form .frist-row, .control-panel .action-form.add-category form .second-row {
+  display: flex;
+  flex-direction: column;
+}
+.control-panel .action-form.add-category form .frist-row input[type=text], .control-panel .action-form.add-category form .second-row input[type=text] {
   margin-bottom: 1vh;
 }
 .control-panel .action-form.delete-word form select {

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/_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"}

public/sass/control-panel/_action-form.scss

@@ -88,9 +88,20 @@
 
         form {
 
-            input[type="text"] {
+            .frist-row {
 
-                margin-bottom: 1vh;
+                margin-bottom: 3vh;
+            }
+
+            .frist-row, .second-row {
+
+                display: flex;
+                flex-direction: column;
+                
+                input[type="text"] {
+                    
+                    margin-bottom: 1vh;
+                }
             }
         }
     }

public/sass/control-panel/_control-panel.scss

@@ -23,6 +23,7 @@
             max-height: 250px;
 
             margin: 0px 3vw;
+            margin-bottom: 5vh;
 
             font-size: 1.5vw;
             font-weight: bold;

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

@@ -8,6 +8,9 @@ const AddCategory = () => {
     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('') 
@@ -17,12 +20,15 @@ const AddCategory = () => {
 
         setLoading(true)
 
-        const result = await AddCategoryToFirebase(categoryEnglish, categorySpanish)
+        const result = await AddCategoryToFirebase(categoryEnglish, categorySpanish, fristWordEnglish, fristWordSpanish)
         setData(result)
 
         setCategoryEnglish('')
         setCategorySpanish('')
 
+        setFristWordEnglish('')
+        setFristWordSpanish('')
+
         setLoading(false)
     }
 
@@ -41,21 +47,43 @@ const AddCategory = () => {
                     <form
                         onSubmit={e => addCategorySubmit(e)}
                     >
-                        
+
-                        <input
+                        <div className="frist-row">
-                            type="text"
+                            <input
-                            placeholder="Add the new category [English]"
+                                type="text"
-                            required
+                                placeholder="Add the new category [English]"
-                            onChange={e => setCategoryEnglish(e.target.value)}
+                                required
-                            value={categoryEnglish}
+                                onChange={e => setCategoryEnglish(e.target.value)}
-                        />
+                                value={categoryEnglish}
-                        <input
+                            />
-                            type="text"
+
-                            placeholder="Add the new category [Spanish]"
+                            <input
-                            required
+                                type="text"
-                            onChange={e => setCategorySpanish(e.target.value)}
+                                placeholder="Add one word to the new category [English]"
-                            value={categorySpanish}
+                                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>

src/components/Admin/Control Panel/Actions/AddCategory/Firebase Querys/AddCategoryToFirebase.js

@@ -1,34 +1,48 @@
 import {firestore} from '../../../../../../Firebase/Firebase_Config'
-import {getFirestore, collection, doc, setDoc } from "firebase/firestore";
+import {getFirestore, collection, doc, setDoc, deleteDoc } from "firebase/firestore";
+import NormalizeFormsInput from '../../Scripts/NormalizeFormsInput';
 
-const AddCategoryToFirebase = async (englishCategory, spanishCategory) => {
+const AddCategoryToFirebase = async (englishCategory, spanishCategory, fristWordEnglish, fristWordSpanish) => {
-    
+
-    let result =
+    englishCategory = NormalizeFormsInput(englishCategory)
-        [
+    spanishCategory = NormalizeFormsInput(spanishCategory)
-            sucess => false,
+
-            message => ''
+    fristWordEnglish = NormalizeFormsInput(fristWordEnglish)
-        ]
+    fristWordSpanish = NormalizeFormsInput(fristWordSpanish)
 
     try {
         
         const db = getFirestore(firestore)
         
+        //! Add categories to 'categories'
         await setDoc(doc(db, 'categories', englishCategory), {
 
             english: englishCategory,
             spanish: spanishCategory
         })
 
-        result['sucess'] = true
+        //! Add category english to hangman_words/english
-        result['message'] = 'Category added to the database'
+        await setDoc(doc(db, `hangman_words/english/${englishCategory}`, fristWordEnglish), {
+            'FRIST_CATEGORY_FIELD': 'FRIST_CATEGORY_VALUE'
+        })
 
-        return await result
+        //! Add category spanish to hangman_words/spanish
+        await setDoc(doc(db, `hangman_words/spanish/${spanishCategory}`, fristWordSpanish), {
+            'FRIST_CATEGORY_FIELD': 'FRIST_CATEGORY_VALUE'
+        })
+
+        return {
+            sucess: true,
+            message: 'Category added to the database'
+        }
 
     } catch (error) {
         console.log(error)
 
-        result['sucess'] = false
+        return {
-        result['message'] = `There's been an error...`
+            sucess: false,
+            message: `There's been an error...`
+        }
     }
 }
 

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

@@ -1,22 +1,164 @@
-import React from 'react'
+import React, {useState} from 'react'
+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 AddWordToFirebase from './Firebase Querys/AddWordToFirebase'
+
 
 const AddWord = () => {
 
-    console.log('word');
+    const [loading, setLoading] = useState(false)
+    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 bringData = async () => {
+
+        const language = await BringLanguages()
+        const category = await BringCategories()
+
+        setLanguageList(language)
+        setCategoryList(category)
+
+        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();
+                       }
+                   }) 
+            }   
+        )
+
+        uploadWordsPromise.then(() => {
+
+            setLanguageSelection('')
+            setCategorySelection('')
+            setWordsToAdd('')
+
+            setLoading(false)
+        })
+
+        //! CREDITS FOR THE PROMISE LOGIC: https://stackoverflow.com/a/38407013
+    }
 
     return (
-        <div className="action-form add-word">
+        <>
-            <form>
+            {
-                <select>
+                data ?
-                    <option>Select language</option>
+                    <Messages data={data} />        
-                </select>
+                : null
-                <select>
+            }
-                    <option>Select category</option>
+            {
-                </select>
+                loading ? 
-                <textarea placeholder="Add the word/words separated by commas" cols="30" rows="10"></textarea>
+                    <Loading />
-                <input type="submit" value="Add Word(s)" />
+                :
-            </form>
+                <div className="action-form add-word">
-        </div>
+                    <form
+                        onSubmit={(e) => submitInformation(e)}
+                    >
+                        <select
+                            onChange={(e) => setLanguageSelection(e.target.value)}
+                            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}
+                        >
+                            <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}
+                        />
+                        <input type="submit" value="Add Word(s)" />
+                    </form>
+                </div>
+            }   
+        </>
     )
 }
 

src/components/Admin/Control Panel/Actions/AddWord/Firebase Querys/AddWordToFirebase.js

@@ -0,0 +1,34 @@
+import {firestore} from '../../../../../../Firebase/Firebase_Config'
+import {getFirestore, collection, doc, setDoc } from "firebase/firestore";
+
+const AddWordToFirebase = async (language, category, word, setData) => {
+    
+        
+    try {
+        const db = await getFirestore(firestore)
+        const result = await setDoc(doc(db,  `hangman_words/${language}/${category}`, word), {
+
+            'WORD_FIELD': 'WORD_VALUE'
+        })
+
+        setData({
+            sucess: true,
+            message: 'All right!'
+        })
+        
+        return true
+
+    } catch (error) {
+
+        console.log(error)
+        setData({
+            sucess: false,
+            message: `There's been an error adding the words`
+        })
+
+        return 'error'
+    }
+};
+
+
+export default AddWordToFirebase

src/components/Admin/Control Panel/Actions/AddWord/Firebase Querys/BringCategories.js

@@ -0,0 +1,22 @@
+import {firestore} from '../../../../../../Firebase/Firebase_Config'
+import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
+
+const BringCategories = async () => {
+    
+    try {
+
+        const db = getFirestore(firestore)
+        const data = await collection(db, 'categories')
+        const result = await getDocs(data)
+                
+        const categories = await result.docs.map(doc => doc.data().english)
+
+        return await categories
+            
+    } catch (error) {
+        console.log(error)
+        alert(error)
+    }
+}
+
+export default BringCategories

src/components/Admin/Control Panel/Actions/AddWord/Firebase Querys/BringLanguages.js

@@ -0,0 +1,6 @@
+const BringLanguages = () => {
+
+    return ['english', 'spanish']
+}
+
+export default BringLanguages

src/components/Admin/Control Panel/Actions/Scripts/NormalizeFormsInput.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const NormalizeFormsInput = (input) => {
+    
+    input = input.trim()
+    input = input.toLowerCase()
+
+    return input
+}
+
+export default NormalizeFormsInput

src/components/Admin/Control Panel/Messages/Messages.jsx

@@ -12,26 +12,20 @@ const Messages = ({data}) => {
             setSucess(true)
             setMessage('TEST')
         }
-        
+
-        else {
-   
-            setSucess(data['sucess'])
-            setMessage(data['message'])
-        }
-            
     }, [])
 
     return (
         <>
             {
 
-                sucess ?
+                data['sucess'] ?
                     <div className="message animate__animated animate__slideInDown sucess">
-                        {message}
+                        {data['message']}
                     </div>
                 :
                     <div className="message animate__animated animate__slideInDown error">
-                        {message}
+                        {data['message']}
                     </div>
             }
         </>

src/components/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