Delete category logicc done

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

@@ -1,16 +1,95 @@
 import React from 'react'
+import Loading from '../../Loading/Loading'
+import Messages from '../../Messages/Messages'
+import capitalize from '../../Scripts/Capilazate'
+import BringCategories from './Firebase Querys/BringCategories'
+import DeleteCategoryFirebase from './Firebase Querys/DeleteCategoryFirebase'
 
 const DeleteCategory = () => {
+
+    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 BringCategories()
+        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) {
+
+            await DeleteCategoryFirebase(categorySelection, setData)
+        }
+
+        categorySelection('')
+        setLoading(false)
+
+        setChangedTheFirebaseCategories(true)
+    }
+
+    React.useEffect(() => {
+
+        if (changedTheFirebaseCategories) {
+   
+            BringCategoriesToThisComponent()
+            setChangedTheFirebaseCategories(false)
+        }
+
+    }, [changedTheFirebaseCategories])
+
     return (
-        <div className="action-form delete-category">
-            <form>
-                <select>
-                    <option>Select an option</option>
-                    <option>AA</option>
-                </select>
-                <input type="submit" value="Delete"/>
-            </form>
-        </div>
+        <>
+            {
+                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>
+            }
+        </>
     )
 }
 

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

@@ -0,0 +1,56 @@
+import { firestore } from "../../../../../../Firebase/Firebase_Config";
+import { getFirestore, doc, deleteDoc, getDoc,  collection, getDocs, listDocuments } from "firebase/firestore";
+
+const DeleteCategoryFirebase = async (category, setData) => {
+    
+    try {
+
+        const db = getFirestore(firestore)
+        
+        // const categoryEnglishRef  = await doc(db, 'categories', category)
+        // const categoryEnglishSnap = await getDoc(categoryEnglishRef)
+        // const categoryEnglish     = categoryEnglishSnap.data()['english'].toLowerCase()
+
+        // const categorySpanishRef  = await doc(db, 'categories', category)
+        // const categorySpanishSnap = await getDoc(categorySpanishRef)
+        // const categorySpanish     = categorySpanishSnap.data()['spanish'].toLowerCase()
+
+        // console.log(categoryEnglish)
+        // console.log(categorySpanish)
+
+        // const collectionWordsCategoryEnglish = await collection(db, `hangman_words/english/${categoryEnglish}`)
+        // const wordsCategoryEnglishRef = await getDocs(collectionWordsCategoryEnglish)
+        // const wordsCategoryEnglish = await wordsCategoryEnglishRef.docs
+
+        // console.log(wordsCategoryEnglish)
+
+        // const deleteWordsCategoryEnglishPromise  = new Promise((resolve, reject) => {
+
+        //     wordsCategoryEnglish.forEach(async (documentInCategory, index) => {
+
+        //         console.log(await documentInCategory.id)
+        //         await deleteDoc(doc(db, `hangman_words/english/${categoryEnglish}`, documentInCategory.id))
+
+        //         if (index === wordsCategoryEnglish.length -1) resolve();
+        //     })
+        // })
+
+        // deleteWordsCategoryEnglishPromise.then(() => {
+        //     deleteDoc(doc(db, `hangman_words/english/`, categoryEnglish))
+        // })
+
+        await deleteDoc(doc(db, 'categories', category))
+        
+    } catch (error) {
+
+        setData({
+            sucess: false,
+            message: `There's been an error deleting the category ${category}`
+        })
+        
+        alert(error)
+        console.log(error)
+    }
+}
+
+export default DeleteCategoryFirebase

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

@@ -9,8 +9,8 @@ const Messages = ({data}) => {
 
         if (data === '') {
 
-            setSucess(true)
-            setMessage('TEST')
+            data['sucess'] = true
+            data['message'] = 'TEST'
         }
 
     }, [])