Cadastro de Produtos

frontend/src/pages/category/index.tsx

@@ -57,6 +57,8 @@ export default function Category() {
 
 
 export const getServerSideProps = canSSRAuthenticated(async (ctx) => {
+
+
     return {
         props: {}
     }

frontend/src/pages/product/index.tsx

@@ -1,15 +1,35 @@
-import { useState, ChangeEvent } from "react";
+import { useState, ChangeEvent, FormEvent } from "react";
 import Head from "next/head";
 import styles from "./styles.module.scss";
 import { Header } from "../../components/Header";
 
 import { canSSRAuthenticated } from "../../utils/canSSRAuthenticated";
 import { FiUpload } from "react-icons/fi";
 
-export default function Product() {
+import { setupAPIClient } from "../../services/api";
+
+import { Toast } from "react-toastify/dist/components";
+import { toast } from "react-toastify";
+
+type ItemProps = {
+    id: string;
+    name: string;
+}
+
+interface CategoryProps {
+    categoryList: ItemProps[];
+}
+
+export default function Product({ categoryList }: CategoryProps) {
+
+    const [name, setName] = useState('');
+    const [price, setPrice] = useState('');
+    const [description, setDescription] = useState('');
 
     const [avatarUrl, setAvatarUrl] = useState('');
     const [imageAvatar, setImageAvatar] = useState(null);
+    const [categories, setCategories] = useState(categoryList || []);
+    const [categorySelected, setCategorySelected] = useState(0);
 
     function handleFile(e: ChangeEvent<HTMLInputElement>) {
         if (!e.target.files) {
@@ -25,9 +45,45 @@ export default function Product() {
 
             setImageAvatar(image);
             setAvatarUrl(URL.createObjectURL(e.target.files[0]));
+        }
+    }
+
+    function handleChangeCategory(e) {
+        setCategorySelected(e.target.value);
+    }
+
+    async function handleRegister(e: FormEvent) {
+        e.preventDefault();
+        try {
+            const data = new FormData();
 
+            if(name === '' || price === '' || description === '' || imageAvatar === null) {
+                toast.error('Preencha todos os campos');
+                return;
+            }
+
+            data.append('name', name);
+            data.append('price', price);
+            data.append('description', description);
+            data.append('category_id', categories[categorySelected].id);
+            data.append('file', imageAvatar)
+
+            const apiClient = setupAPIClient();
+
+            await apiClient.post('/product', data);
+
+            toast.success('Produto cadastrado com sucesso');
+
+        } catch (error) {
+            console.log(error);
+            toast.error('Erro ao cadastrar produto');
         }
 
+        setName('');
+        setPrice('');
+        setDescription('');
+        setImageAvatar(null);
+        setAvatarUrl('');
     }
 
     return (
@@ -41,7 +97,7 @@ export default function Product() {
                 <main className={styles.container}>
                     <h1>Novo Produto</h1>
 
-                    <form className={styles.form}>
+                    <form className={styles.form} onSubmit={handleRegister}>
 
                         <label className={styles.labelAvatar}>
                             <span>
@@ -62,29 +118,36 @@ export default function Product() {
                         </label>
 
 
-                        <select>
-                            <option value="">
-                                Bebidas
-                            </option>
-                            <option value="">
-                                Pizzas
-                            </option>
+                        <select value={categorySelected} onChange={handleChangeCategory}>
+                            {categories.map((item, index) => {
+                                return (
+                                    <option key={item.id} value={index}>{item.name}</option>
+                                )
+                            })}
+
+
                         </select>
                         <input
                             type="text"
                             placeholder="Nome do Produto"
                             className={styles.input}
+                            value={name}
+                            onChange={(e) =>  setName(e.target.value) }
                         />
+
                         <input
                             type="text"
                             placeholder="Preço do Produto"
                             className={styles.input}
-
+                            value={price}
+                            onChange={(e) =>  setPrice(e.target.value) }
                         />
 
                         <textarea
                             placeholder="Descrição do Produto"
                             className={styles.input}
+                            value={description}
+                            onChange={(e) =>  setDescription(e.target.value) }
                         />
 
                         <button className={styles.buttonAdd} type="submit">
@@ -101,7 +164,15 @@ export default function Product() {
 }
 
 export const getServerSideProps = canSSRAuthenticated(async (ctx) => {
+    const apiClient = setupAPIClient(ctx);
+
+    const response = await apiClient.get("/category");
+
+    //console.log(response.data);
+
     return {
-        props: {}
+        props: {
+            categoryList: response.data,
+        }
     }
 });