Add Words logic done and solved some bugs from Add Category

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>
-                    <option>Select language</option>
-                </select>
-                <select>
-                    <option>Select category</option>
-                </select>
-                <textarea placeholder="Add the word/words separated by commas" cols="30" rows="10"></textarea>
-                <input type="submit" value="Add Word(s)" />
-            </form>
-        </div>
+        <>
+            {
+                data ?
+                    <Messages data={data} />        
+                : null
+            }
+            {
+                loading ? 
+                    <Loading />
+                :
+                <div className="action-form add-word">
+                    <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>
+            }   
+        </>
     )
 }