Add category done

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

@@ -1,17 +1,66 @@
-import React from 'react'
+import React, {useState} from 'react'
+import AddCategoryToFirebase from './Firebase Querys/AddCategoryToFirebase'
+import Loading from '../../Loading/Loading'
+import Messages from '../../Messages/Messages'
 
 const AddCategory = () => {
 
-    console.log('category');
+    const [categorySpanish, setCategorySpanish] = useState('')
+    const [categoryEnglish, setCategoryEnglish] = useState('')
+
+    const [loading, setLoading] = useState(false)
+    
+    const [data, setData] = useState('') 
+
+    const addCategorySubmit = async (e) => {
+        e.preventDefault()
+
+        setLoading(true)
+
+        const result = await AddCategoryToFirebase(categoryEnglish, categorySpanish)
+        setData(result)
+
+        setCategoryEnglish('')
+        setCategorySpanish('')
+
+        setLoading(false)
+    }
 
     return (
-        <div className="action-form add-category">
-            <form>
-                <input type="text" placeholder="Add the new category [English]" required/>
-                <input type="text" placeholder="Add the new category [Spanish]" required/>
-                <input type="submit"/>
-            </form>
-        </div>
+        <>
+            {
+                data !== '' ?
+                    <Messages data={data} />        
+                : null
+            }
+            {
+                loading ?
+                    <Loading />
+                :
+                <div className="action-form add-category">
+                    <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}
+                        />
+                        <input type="submit"/>
+                    </form>
+                </div>
+            }
+        </>
     )
 }
 

src/components/Admin/Control Panel/Actions/AddCategory/Firebase Querys/AddCategoryToFirebase.js

@@ -0,0 +1,35 @@
+import {firestore} from '../../../../../../Firebase/Firebase_Config'
+import {getFirestore, collection, doc, setDoc } from "firebase/firestore";
+
+const AddCategoryToFirebase = async (englishCategory, spanishCategory) => {
+    
+    let result =
+        [
+            sucess => false,
+            message => ''
+        ]
+
+    try {
+        
+        const db = getFirestore(firestore)
+        
+        await setDoc(doc(db, 'categories', englishCategory), {
+
+            english: englishCategory,
+            spanish: spanishCategory
+        })
+
+        result['sucess'] = true
+        result['message'] = 'Category added to the database'
+
+        return await result
+
+    } catch (error) {
+        console.log(error)
+
+        result['sucess'] = false
+        result['message'] = `There's been an error...`
+    }
+}
+
+export default AddCategoryToFirebase

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

@@ -25,7 +25,7 @@ const ControlPanel = (props) => {
 
     return (
         <>
-        <AdminHeader />
+            <AdminHeader />
             <div className="control-panel">
                 {
                     userLogged ?

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

@@ -0,0 +1,12 @@
+import React from 'react'
+import loadingGifLightTheme from './loading-light-theme.png'
+
+const Loading = () => {
+    return (
+        <div className='loading'>
+            <img src={loadingGifLightTheme} alt="loading" />
+        </div>
+    )
+}
+
+export default Loading

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

@@ -0,0 +1,41 @@
+import React from 'react'
+
+const Messages = ({data}) => {
+
+    const [sucess, setSucess] = React.useState('')
+    const [message, setMessage] = React.useState('')
+
+    React.useEffect(() => {
+
+        if (data === '') {
+
+            setSucess(true)
+            setMessage('TEST')
+        }
+        
+        else {
+   
+            setSucess(data['sucess'])
+            setMessage(data['message'])
+        }
+            
+    }, [])
+
+    return (
+        <>
+            {
+
+                sucess ?
+                    <div className="message animate__animated animate__slideInDown sucess">
+                        {message}
+                    </div>
+                :
+                    <div className="message animate__animated animate__slideInDown error">
+                        {message}
+                    </div>
+            }
+        </>
+    )
+}
+
+export default Messages