Delete word done

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

@@ -9,7 +9,7 @@ import AddWordToFirebase from './Firebase Querys/AddWordToFirebase'
 
 const AddWord = () => {
 
-    const [loading, setLoading] = useState(false)
+    const [loading, setLoading] = useState(true)
     const [languageList, setLanguageList] = useState([])
     const [categoryList, setCategoryList] = useState([])
 

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

@@ -1,18 +1,173 @@
-import React from 'react'
+import React, {useState} from 'react'
+import Loading from '../../Loading/Loading'
+import Messages from '../../Messages/Messages'
+import capitalize from '../../Scripts/Capilazate'
+import BringCategories from '../AddWord/Firebase Querys/BringCategories'
+import BringLanguages from '../AddWord/Firebase Querys/BringLanguages'
+import BringTheWordsFromFirebase from './Firebase Querys/BringTheWordsFromFirebase'
+import DeleteWordFromFirebase from './Firebase Querys/DeleteWordFromFirebase'
 
 const DeleteWord = () => {
+
+    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 BringCategories()
+            setCategoryList(categories)
+        }
+
+        const bringLanguagesToThisComponent = async () => {
+
+            const languages = await BringLanguages()
+            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 BringTheWordsFromFirebase(languageSelect, category)
+        
+        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 DeleteWordFromFirebase(languageSelect, categorySelect, wordSelect)
+
+        
+        setLanguageList([])
+        setCategoryList([])
+        setWordsList([])
+        setLanguageSelect('')
+        setCategorySelect('')
+        setWordSelect('')
+        
+        bringData(response)
+    }
+    
+    React.useEffect(() => {
+        
+        bringData()
+
+    }, [])
+
     return (
-        <div className="action-form delete-word">
-            <form>
-                <select>
-                    <option>Select category</option>    
-                </select>
-                <select>
-                    <option>Select word</option>
-                </select>
-                <input type="submit" value="Delete" />
-            </form>
-        </div>
+        <>
+            {
+                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>
+        </>
     )
 }
 

src/components/Admin/Control Panel/Actions/DeleteWord/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/DeleteWord/Firebase Querys/BringLanguages.js

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

src/components/Admin/Control Panel/Actions/DeleteWord/Firebase Querys/BringTheWordsFromFirebase.js

@@ -0,0 +1,20 @@
+import { firestore } from '../../../../../../Firebase/Firebase_Config';
+import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
+
+const BringTheWordsFromFirebase = async (language, category) => {
+
+    try {
+        
+        const db = getFirestore(firestore)
+        const data = await collection(db, `hangman_words/${language}/${category}`)
+        const result = await getDocs(data)
+
+        const words = result.docs.map(doc => doc.id)
+
+        return await words
+    } catch (error) {
+        console.log(error)
+    }
+}
+
+export default BringTheWordsFromFirebase

src/components/Admin/Control Panel/Actions/DeleteWord/Firebase Querys/DeleteWordFromFirebase.js

@@ -0,0 +1,34 @@
+import { firestore } from "../../../../../../Firebase/Firebase_Config";
+import { getFirestore, doc, deleteDoc, getDoc,  collection, getDocs, listDocuments } from "firebase/firestore";
+
+const DeleteWordFromFirebase = async (language, category, word) => {
+    
+    try {
+
+        const db = getFirestore(firestore)
+
+        const categoryRef = doc(db, 'categories', category)
+        const categoryFirebase = await getDoc(categoryRef)
+
+        const categoryLocalizated = categoryFirebase.data()[language]
+        
+        console.log(categoryLocalizated)
+
+        await deleteDoc(doc(db, `hangman_words/${language}/${category}`, word))
+
+        return await {
+            sucess: true,
+            message: `All Right!`
+        }
+        
+    } catch (error) {
+        console.log(error)
+
+        return {
+            sucess: false,
+            message: `There's been an error deleting the word ${word}`
+        }
+    }
+}
+
+export default DeleteWordFromFirebase