Merge pull request #7 from alura-challenges/aula04

Aula 04 Finalizada

package.json

@@ -7,6 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "datocms-client": "^3.4.10",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

pages/api/comunidades.js

@@ -0,0 +1,29 @@
+import { SiteClient } from 'datocms-client';
+
+export default async function recebedorDeRequests(request, response) {
+    if(request.method === 'POST') {
+        const TOKEN = '3a9782340b8b4df0d359bb792b880b';
+        const client = new SiteClient(TOKEN);
+
+        // Validar os dados, antes de sair cadastrando
+        const registroCriado = await client.items.create({
+            itemType: "836335", // ID do Model de "Communities" criado pelo Dato
+            ...request.body,
+            // title: "Comunidade de Teste",
+            // imageUrl: "https://github.com/omariosouto.png",
+            // creatorSlug: "omariosouto"
+        })
+
+        console.log(registroCriado);
+
+        response.json({
+            dados: 'Algum dado qualquer',
+            registroCriado: registroCriado,
+        })
+        return;
+    }
+
+    response.status(404).json({
+        message: 'Ainda não temos nada no GET, mas no POST tem!'
+    })
+}

pages/index.js

@@ -46,11 +46,7 @@ function ProfileRelationsBox(propriedades) {
 
 export default function Home() {
   const usuarioAleatorio = 'omariosouto';
-  const [comunidades, setComunidades] = React.useState([{
-    id: '12802378123789378912789789123896123', 
-    title: 'Eu odeio acordar cedo',
-    image: 'https://alurakut.vercel.app/capa-comunidade-01.jpg'
-  }]);
+  const [comunidades, setComunidades] = React.useState([]);
   // const comunidades = comunidades[0];
   // const alteradorDeComunidades/setComunidades = comunidades[1];
   // const comunidades = ['Alurakut'];
@@ -65,13 +61,43 @@ export default function Home() {
   const [seguidores, setSeguidores] = React.useState([]);
   // 0 - Pegar o array de dados do github 
   React.useEffect(function() {
+    // GET
     fetch('https://api.github.com/users/peas/followers')
     .then(function (respostaDoServidor) {
       return respostaDoServidor.json();
     })
     .then(function(respostaCompleta) {
       setSeguidores(respostaCompleta);
     })
+
+
+    // API GraphQL
+    fetch('https://graphql.datocms.com/', {
+      method: 'POST',
+      headers: {
+        'Authorization': '7f7590695431ea76f84616a4b4d32d',
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+      },
+      body: JSON.stringify({ "query": `query {
+        allCommunities {
+          id 
+          title
+          imageUrl
+          creatorSlug
+        }
+      }` })
+    })
+    .then((response) => response.json()) // Pega o retorno do response.json() e já retorna
+    .then((respostaCompleta) => {
+      const comunidadesVindasDoDato = respostaCompleta.data.allCommunities;
+      console.log(comunidadesVindasDoDato)
+      setComunidades(comunidadesVindasDoDato)
+    })
+    // .then(function (response) {
+    //   return response.json()
+    // })
+
   }, [])
 
   console.log('seguidores antes do return', seguidores);
@@ -106,12 +132,25 @@ export default function Home() {
                 console.log('Campo: ', dadosDoForm.get('image'));
 
                 const comunidade = {
-                  id: new Date().toISOString(),
                   title: dadosDoForm.get('title'),
-                  image: dadosDoForm.get('image'),
+                  imageUrl: dadosDoForm.get('image'),
+                  creatorSlug: usuarioAleatorio,
                 }
-                const comunidadesAtualizadas = [...comunidades, comunidade];
-                setComunidades(comunidadesAtualizadas)
+
+                fetch('/api/comunidades', {
+                  method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify(comunidade)
+                })
+                .then(async (response) => {
+                  const dados = await response.json();
+                  console.log(dados.registroCriado);
+                  const comunidade = dados.registroCriado;
+                  const comunidadesAtualizadas = [...comunidades, comunidade];
+                  setComunidades(comunidadesAtualizadas)
+                })
             }}>
               <div>
                 <input
@@ -145,8 +184,8 @@ export default function Home() {
               {comunidades.map((itemAtual) => {
                 return (
                   <li key={itemAtual.id}>
-                    <a href={`/users/${itemAtual.title}`}>
-                      <img src={itemAtual.image} />
+                    <a href={`/communities/${itemAtual.id}`}>
+                      <img src={itemAtual.imageUrl} />
                       <span>{itemAtual.title}</span>
                     </a>
                   </li>