mirror of
https://github.com/FranP-code/Hangman-game-with-React.git
synced 2025-10-13 00:42:32 +00:00
Add Words logic done and solved some bugs from Add Category
This commit is contained in:
@@ -8,6 +8,9 @@ const AddCategory = () => {
|
||||
const [categorySpanish, setCategorySpanish] = useState('')
|
||||
const [categoryEnglish, setCategoryEnglish] = useState('')
|
||||
|
||||
const [fristWordEnglish, setFristWordEnglish] = useState('')
|
||||
const [fristWordSpanish, setFristWordSpanish] = useState('')
|
||||
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const [data, setData] = useState('')
|
||||
@@ -17,12 +20,15 @@ const AddCategory = () => {
|
||||
|
||||
setLoading(true)
|
||||
|
||||
const result = await AddCategoryToFirebase(categoryEnglish, categorySpanish)
|
||||
const result = await AddCategoryToFirebase(categoryEnglish, categorySpanish, fristWordEnglish, fristWordSpanish)
|
||||
setData(result)
|
||||
|
||||
setCategoryEnglish('')
|
||||
setCategorySpanish('')
|
||||
|
||||
setFristWordEnglish('')
|
||||
setFristWordSpanish('')
|
||||
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
@@ -41,21 +47,43 @@ const AddCategory = () => {
|
||||
<form
|
||||
onSubmit={e => addCategorySubmit(e)}
|
||||
>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Add the new category [English]"
|
||||
required
|
||||
onChange={e => setCategoryEnglish(e.target.value)}
|
||||
value={categoryEnglish}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Add the new category [Spanish]"
|
||||
required
|
||||
onChange={e => setCategorySpanish(e.target.value)}
|
||||
value={categorySpanish}
|
||||
/>
|
||||
|
||||
<div className="frist-row">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Add the new category [English]"
|
||||
required
|
||||
onChange={e => setCategoryEnglish(e.target.value)}
|
||||
value={categoryEnglish}
|
||||
/>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Add one word to the new category [English]"
|
||||
required
|
||||
onChange={e => setFristWordEnglish(e.target.value)}
|
||||
value={fristWordEnglish}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="second-row">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Add the new category [Spanish]"
|
||||
required
|
||||
onChange={e => setCategorySpanish(e.target.value)}
|
||||
value={categorySpanish}
|
||||
/>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Add one word to the new category [Spanish]"
|
||||
required
|
||||
onChange={e => setFristWordSpanish(e.target.value)}
|
||||
value={fristWordSpanish}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input type="submit"/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,34 +1,48 @@
|
||||
import {firestore} from '../../../../../../Firebase/Firebase_Config'
|
||||
import {getFirestore, collection, doc, setDoc } from "firebase/firestore";
|
||||
import {getFirestore, collection, doc, setDoc, deleteDoc } from "firebase/firestore";
|
||||
import NormalizeFormsInput from '../../Scripts/NormalizeFormsInput';
|
||||
|
||||
const AddCategoryToFirebase = async (englishCategory, spanishCategory) => {
|
||||
|
||||
let result =
|
||||
[
|
||||
sucess => false,
|
||||
message => ''
|
||||
]
|
||||
const AddCategoryToFirebase = async (englishCategory, spanishCategory, fristWordEnglish, fristWordSpanish) => {
|
||||
|
||||
englishCategory = NormalizeFormsInput(englishCategory)
|
||||
spanishCategory = NormalizeFormsInput(spanishCategory)
|
||||
|
||||
fristWordEnglish = NormalizeFormsInput(fristWordEnglish)
|
||||
fristWordSpanish = NormalizeFormsInput(fristWordSpanish)
|
||||
|
||||
try {
|
||||
|
||||
const db = getFirestore(firestore)
|
||||
|
||||
//! Add categories to 'categories'
|
||||
await setDoc(doc(db, 'categories', englishCategory), {
|
||||
|
||||
english: englishCategory,
|
||||
spanish: spanishCategory
|
||||
})
|
||||
|
||||
result['sucess'] = true
|
||||
result['message'] = 'Category added to the database'
|
||||
//! Add category english to hangman_words/english
|
||||
await setDoc(doc(db, `hangman_words/english/${englishCategory}`, fristWordEnglish), {
|
||||
'FRIST_CATEGORY_FIELD': 'FRIST_CATEGORY_VALUE'
|
||||
})
|
||||
|
||||
return await result
|
||||
//! Add category spanish to hangman_words/spanish
|
||||
await setDoc(doc(db, `hangman_words/spanish/${spanishCategory}`, fristWordSpanish), {
|
||||
'FRIST_CATEGORY_FIELD': 'FRIST_CATEGORY_VALUE'
|
||||
})
|
||||
|
||||
return {
|
||||
sucess: true,
|
||||
message: 'Category added to the database'
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
|
||||
result['sucess'] = false
|
||||
result['message'] = `There's been an error...`
|
||||
return {
|
||||
sucess: false,
|
||||
message: `There's been an error...`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
import {firestore} from '../../../../../../Firebase/Firebase_Config'
|
||||
import {getFirestore, collection, doc, setDoc } from "firebase/firestore";
|
||||
|
||||
const AddWordToFirebase = async (language, category, word, setData) => {
|
||||
|
||||
|
||||
try {
|
||||
const db = await getFirestore(firestore)
|
||||
const result = await setDoc(doc(db, `hangman_words/${language}/${category}`, word), {
|
||||
|
||||
'WORD_FIELD': 'WORD_VALUE'
|
||||
})
|
||||
|
||||
setData({
|
||||
sucess: true,
|
||||
message: 'All right!'
|
||||
})
|
||||
|
||||
return true
|
||||
|
||||
} catch (error) {
|
||||
|
||||
console.log(error)
|
||||
setData({
|
||||
sucess: false,
|
||||
message: `There's been an error adding the words`
|
||||
})
|
||||
|
||||
return 'error'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
export default AddWordToFirebase
|
||||
@@ -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
|
||||
@@ -0,0 +1,6 @@
|
||||
const BringLanguages = () => {
|
||||
|
||||
return ['english', 'spanish']
|
||||
}
|
||||
|
||||
export default BringLanguages
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const NormalizeFormsInput = (input) => {
|
||||
|
||||
input = input.trim()
|
||||
input = input.toLowerCase()
|
||||
|
||||
return input
|
||||
}
|
||||
|
||||
export default NormalizeFormsInput
|
||||
@@ -12,26 +12,20 @@ const Messages = ({data}) => {
|
||||
setSucess(true)
|
||||
setMessage('TEST')
|
||||
}
|
||||
|
||||
else {
|
||||
|
||||
setSucess(data['sucess'])
|
||||
setMessage(data['message'])
|
||||
}
|
||||
|
||||
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
|
||||
sucess ?
|
||||
data['sucess'] ?
|
||||
<div className="message animate__animated animate__slideInDown sucess">
|
||||
{message}
|
||||
{data['message']}
|
||||
</div>
|
||||
:
|
||||
<div className="message animate__animated animate__slideInDown error">
|
||||
{message}
|
||||
{data['message']}
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
|
||||
4
src/components/Admin/Control Panel/Scripts/Capilazate.js
Normal file
4
src/components/Admin/Control Panel/Scripts/Capilazate.js
Normal file
@@ -0,0 +1,4 @@
|
||||
const capitalize = (str, lower = false) =>
|
||||
(lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase()); /* CREDITS: https://stackoverflow.com/a/7592235*/
|
||||
|
||||
export default capitalize
|
||||
Reference in New Issue
Block a user