Alterado o cadastro de categoria para salvar no db.json

db.json

@@ -40,6 +40,12 @@
         "text": "Formação de Jogos na Alura",
         "url": "https://www.alura.com.br/cursos-online-front-end"
       }
+    },
+    {
+      "titulo": "Investimentos",
+      "cor": "#11a235",
+      "descricao": "Os melhores vídeos para sobre investimentos",
+      "id": 6
     }
   ],
   "videos": [
@@ -192,6 +198,24 @@
       "url": "https://www.youtube.com/watch?v=rJ8-m-6b8GQ",
       "categoriaId": 2,
       "id": 25
+    },
+    {
+      "titulo": "5 Caminhos POSSÍVEIS pra quem PERDEU O EMPREGO na pandemia! (Não é receita mágica!)",
+      "url": "https://www.youtube.com/watch?v=ucGORMF-Aro",
+      "categoriaId": 6,
+      "id": 26
+    },
+    {
+      "titulo": "DIVIDENDOS DE AÇÕES: AS 5 MELHORES EMPRESAS PARA TER MAIS DINHEIRO NO BOLSO!",
+      "url": "https://www.youtube.com/watch?v=dUouxFQZ1Yc",
+      "categoriaId": 6,
+      "id": 27
+    },
+    {
+      "titulo": "FUNDOS IMOBILIÁRIOS: Uma excelente opção para VIVER DE RENDA!",
+      "url": "https://www.youtube.com/watch?v=6FIDL196-uc",
+      "categoriaId": 6,
+      "id": 28
     }
   ]
 }

src/components/Menu/Menu.css

@@ -65,14 +65,15 @@ body {
 }
 
 @media (max-width: 800px) {
-    a.ButtonLink {
+    div.DivButtons {
         position: fixed;
-        left: 0;
-        right: 0;
+        width: 100%;
         bottom: 0;
+        background: var(--black);
+        text-align: center;
+    }
+    a.ButtonLink {
         background: var(--primary);
-        border-radius: 0;
         border: 0;
-        text-align: center;
     }
 }

src/components/Menu/index.js

@@ -9,8 +9,13 @@ export default () => (
     <Link to="/">
       <img className="Logo" src={Logo} alt="Logo FakeFlix" />
     </Link>
-    <Button as={Link} className="ButtonLink" to="/cadastro/video">
-      Novo vídeo
-    </Button>
+    <div className="DivButtons">
+      <Button as={Link} className="ButtonLink mr-5" to="/cadastro/categoria">
+        Nova categoria
+      </Button>
+      <Button as={Link} className="ButtonLink" to="/cadastro/video">
+        Novo vídeo
+      </Button>
+    </div>
   </nav>
 );

src/index.css

@@ -37,4 +37,8 @@ a {
 
 .error404 h3 {
   text-transform: uppercase;
+}
+
+.mr-5 {
+  margin-right: 5px;
 }

src/pages/cadastro/Categoria/index.js

@@ -1,62 +1,56 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
+import { useHistory } from 'react-router-dom';
 import PageDefault from '../../../components/PageDefault';
 import FormField from '../../../components/FormField';
 import Button from '../../../components/Button';
 import useForm from '../../../hooks/useForm';
+import categoriasRepository from '../../../repositories/categorias';
 
 export default () => {
-  const valoresIniciais = { titulo: '', cor: '', descricao: '' };
-  const [categorias, setCategorias] = useState([]);
-
-  const { valores, handleChange, clearForm } = useForm(valoresIniciais);
+  const history = useHistory();
+  const { valores, handleChange } = useForm({
+    titulo: '',
+    cor: '',
+    descricao: '',
+  });
 
   function handleSubmit(e) {
     e.preventDefault();
 
-    setCategorias([
-      ...categorias,
-      valores,
-    ]);
-
-    clearForm();
-  }
-
-  useEffect(() => {
-    const serverUrl = window.location.hostname.includes('localhost')
-      ? 'http://localhost:3001/categorias'
-      : 'https://felipemjesuss-fakeflix.herokuapp.com/categorias';
-
-    fetch(serverUrl)
-      .then(async (response) => {
-        const responseJson = await response.json();
-        setCategorias([
-          ...responseJson,
-        ]);
+    categoriasRepository.criar(valores)
+      .then(() => {
+        // eslint-disable-next-line no-alert
+        alert('Cadastro realizado com sucesso.');
+        history.push('/');
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-alert
+        alert(error.message);
       });
-  }, []);
+  }
 
   return (
     <PageDefault>
-      <h1>
-        Cadastro de Categoria:
-        {valores.titulo}
-      </h1>
+      <h1>Cadastro de Categoria</h1>
 
       <form onSubmit={handleSubmit}>
+
         <FormField
           label="Cor"
           type="color"
           name="cor"
           value={valores.cor}
           onChange={handleChange}
         />
+
         <FormField
           label="Título"
           type="text"
           name="titulo"
           value={valores.titulo}
           onChange={handleChange}
         />
+
         <FormField
           label="Descrição"
           type="textarea"
@@ -65,24 +59,11 @@ export default () => {
           onChange={handleChange}
         />
 
-        <Button>
+        <Button type="submit">
           Cadastrar
         </Button>
       </form>
 
-      {categorias.length === 0 && (
-        <div>
-          Carregando...
-        </div>
-      )}
-
-      <ul>
-        {categorias.map((categoria) => (
-          <li key={`${categoria.titulo}`}>
-            {categoria.titulo}
-          </li>
-        ))}
-      </ul>
     </PageDefault>
   );
 };

src/pages/cadastro/Video/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import PageDefault from '../../../components/PageDefault';
 import FormField from '../../../components/FormField';
 import Button from '../../../components/Button';
@@ -40,13 +40,12 @@ export default () => {
       .then(() => {
         // eslint-disable-next-line no-alert
         alert('Cadastro realizado com sucesso.');
+        history.push('/');
       })
       .catch((error) => {
         // eslint-disable-next-line no-alert
         alert(error.message);
       });
-
-    history.push('/');
   }
 
   return (
@@ -82,9 +81,6 @@ export default () => {
         </Button>
       </form>
 
-      <Link to="/cadastro/categoria">
-        Cadastar Categoria
-      </Link>
     </PageDefault>
   );
 };

src/repositories/categorias.js

@@ -10,7 +10,12 @@ function getCategorias() {
   return config.requestGet(url);
 }
 
+function criar(categoria) {
+  return config.requestPost(url, categoria);
+}
+
 export default {
   getTodasCategoriasComVideos,
   getCategorias,
+  criar,
 };