Edit word done

This commit is contained in:
2021-10-24 22:04:16 -03:00
parent 8245279999
commit 75244eb2ca
8 changed files with 310 additions and 14 deletions

View File

@@ -673,6 +673,9 @@ header .redirect-button:hover {
.control-panel .action-form.edit-word form select {
margin-bottom: 0.5vh;
}
.control-panel .action-form.edit-word form input[type=text]:disabled {
opacity: 40%;
}
@media (max-width: 991.98px) {
.control-panel .action-form form input[type=submit] {
font-size: 2.4vw;

View File

@@ -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"}

View File

@@ -132,6 +132,14 @@
margin-bottom: 0.5vh;
}
input[type="text"] {
&:disabled {
opacity: 40%;
}
}
}
}

View File

@@ -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>
}
</>
)
}

View File

@@ -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

View File

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

View File

@@ -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

View File

@@ -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