fix: fetch

N0N4T0 · May 7, 2024 · fa8de66 · fa8de66
1 parent 175f148
commit fa8de66
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 8 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,10 +1,10 @@
-import Acesso from '@/components/acesso';
+import ServerFetch from '@/components/server-fetch';
 
 export default function HomePage() {
   return (
     <main>
       <h1>Home</h1>
-      <Acesso />
+      <ServerFetch />
     </main>
   );
 }
diff --git a/src/app/sobre/page.tsx b/src/app/sobre/page.tsx
@@ -1,11 +1,10 @@
-import dynamic from 'next/dynamic';
-const Width = dynamic(() => import('@/components/width'), { ssr: false });
+import ClientFetch from '@/components/client-fetch';
 
 export default function SobrePage() {
   return (
     <main>
       <h1>Sobre</h1>
-      <Width />
+      <ClientFetch />
     </main>
   );
 }
diff --git a/src/components/client-fetch.tsx b/src/components/client-fetch.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import React from 'react';
+
+type Produto = {
+  id: number;
+  nome: string;
+};
+
+export default function ClientFetch() {
+  const [data, setData] = React.useState<Produto[]>([]);
+
+  React.useEffect(() => {
+    async function fetchData() {
+      const response = await fetch('https://api.origamid.online/produtos');
+      const json = (await response.json()) as Produto[];
+      setData(json);
+    }
+    fetchData();
+  }, []);
+
+  return (
+    <ul>
+      {data.map((produto) => (
+        <li key={produto.id}>{produto.nome}</li>
+      ))}
+    </ul>
+  );
+}
diff --git a/src/components/menu.tsx b/src/components/menu.tsx
@@ -9,9 +9,6 @@ export default function Menu() {
       <li>
         <Link href="/sobre">Sobre</Link>
       </li>
-      <li>
-        <Link href="/imc">IMC</Link>
-      </li>
     </ul>
   );
 }
diff --git a/src/components/server-fetch.tsx b/src/components/server-fetch.tsx
@@ -0,0 +1,17 @@
+type Produto = {
+  id: number;
+  nome: string;
+};
+
+export default async function ServerFetch() {
+  const response = await fetch('https://api.origamid.online/produtos');
+  const data = (await response.json()) as Produto[];
+
+  return (
+    <ul>
+      {data.map((produto) => (
+        <li key={produto.id}>{produto.nome}</li>
+      ))}
+    </ul>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,9 +9,6 @@ export default function Menu() { @@
           <li>
             <Link href="/sobre">Sobre</Link>
           </li>
-          <li>
-            <Link href="/imc">IMC</Link>
-          </li>
         </ul>
       );
     }