Categories started

src/components/Categories/Categories.jsx

@@ -0,0 +1,35 @@
+import React from "react"
+import Bring_All_Categories from "./Firebase Querys/Bring All Categories"
+
+
+const Categories = ({hidden}) => {
+
+    const [categories, setCategories] = React.useState([])
+
+    React.useEffect (() => {
+
+        Bring_All_Categories(setCategories)
+        
+        console.log(categories)
+    }, [])
+
+    return (
+        
+        <div
+            className={ hidden ? 'categories' : 'categories show'}
+        >
+            {
+                categories.length > 0 ?
+                  
+                    categories.map((categorie) => (
+
+                        <button key={categorie}> { categorie } </button>
+                    ))
+
+                : null
+            }
+        </div>
+    )
+}
+
+export default Categories

src/components/Categories/Firebase Querys/Bring All Categories.js

@@ -0,0 +1,27 @@
+import { firestore } from "../../../Firebase/Firebase_Config"
+import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
+
+const Bring_All_Categories = async (setCategories) => {
+
+    const capitalize = (str, lower = false) =>
+        (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());  /* CREDITS: https://stackoverflow.com/a/7592235*/
+    
+    try {
+
+        const db = getFirestore(firestore)
+        const data = await collection(db, 'categories')
+        const result = await getDocs(data)
+
+        let categories = await result.docs.map(doc => doc.id)
+        
+            categories = categories.map(word => capitalize(word, true))
+
+        console.log(categories)
+        setCategories(await categories)
+        
+    } catch (error) {
+        console.log(error)
+    }
+}
+
+export default Bring_All_Categories

src/components/Header.jsx

@@ -1,19 +1,19 @@
 import React, {useState} from 'react'
 
-const Header = (props) => {
+const Header = ({language, displayCategories, setDisplayCategories}) => {
 
     const [title, setTitle] = useState('')
     const [categoryText, setCategoryText] = useState('')
 
     React.useEffect( () => {
 
-        if (props.language === 'english') {
+        if (language === 'english') {
             
             setTitle('Hangman game')
             setCategoryText('Select category')
         }
 
-        if (props.language === 'spanish') {
+        if (language === 'spanish') {
 
             setTitle('Ahorcado')
             setCategoryText('Seleccionar categoría')
@@ -23,7 +23,11 @@ const Header = (props) => {
     return (
         <header>
             <h1>{title}</h1>
-            <h2>{categoryText}</h2>
+            <h2
+                onClick={() => setDisplayCategories(!displayCategories)}
+            >
+                {categoryText}
+            </h2>
         </header>
     )
 }