Edit word done

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

@@ -1,19 +1,216 @@
-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 BringLanguages from '../AddWord/Firebase Querys/BringLanguages'
+import BringCategories from './Firebase Querys/BringCategories'
+import BringWordsFromFirebase from './Firebase Querys/BringWordsFromFirebase'
+import modifyWordInFirebase from './Firebase Querys/modifyWordInFirebase'
 
 const EditWord = () => {
+
+    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 BringLanguages()
+        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 BringCategories()
+        
+        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 BringWordsFromFirebase(languageSelection, categorySelected)
+        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
+        }
+
+        const result = await modifyWordInFirebase(languageSelection, categorySelection, wordSelection, newWord)
+        
+        setData(result)
+
+        setLanguageSelection('')
+        setCategorySelection('')
+        setWordSelection('')
+        setNewWord('')
+
+        setLoading(false)
+    }
+
+    React.useEffect(() => {
+
+        bringLanguagesToThisComponent()
+
+    },[])
+
     return (
-        <div className="action-form edit-word">
-            <form>
-                <select>
-                    <option>Select category</option>    
-                </select>
-                <select>
-                    <option>Select word</option>
-                </select>
-                <input type="text" placeholder="Place the new word" />
-                <input type="submit" value="Delete" />
-            </form>
-        </div>
+        <>
+            {
+                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>
+            }
+        </>
     )
 }
 

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

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

src/components/Admin/Control Panel/Actions/EditWord/Firebase Querys/BringWordsFromFirebase.js

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

src/components/Admin/Control Panel/Actions/EditWord/Firebase Querys/modifyWordInFirebase.js

@@ -0,0 +1,34 @@
+import { getFirestore, setDoc, doc, deleteDoc } from "firebase/firestore";
+import { firestore } from "../../../../../../Firebase/Firebase_Config";
+
+const modifyWordInFirebase = async (language, category, word, newWord) => {
+    
+    try {
+
+        const db = getFirestore(firestore)
+        const deleteDocResult = await deleteDoc(doc(db, `hangman_words/${language}/${category}`, word))
+
+        const addDocResult = await setDoc(doc(db, `hangman_words/${language}/${category}`, newWord), {
+
+            'OBLIGATORY_FIELD': 'OBLIGATORY_DATA'
+        })
+
+        return {
+
+            sucess: true,
+            message: `All Right!`
+        }
+        
+    } catch (error) {
+        
+        console.log(error)
+
+        return {
+
+            sucess: false,
+            message: `There's been an error modificating the word`
+        }
+    }
+}
+
+export default modifyWordInFirebase