adds routing

yevhey · Jun 23, 2024 · 1dc95e0 · 1dc95e0
1 parent c5fed4a
commit 1dc95e0
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/app/Home.tsx b/app/Home.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
+import Link from 'next/link'
 import logInput from './log-input'
 import { Search } from './Search';
 
@@ -27,16 +28,16 @@ export default function Home() {
   }, [value, setValues, dataRef.current])
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', margin: 24, gap: 16 }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
       <div>
         <Search value={value} onChange={handleChange} />
       </div>
       <div>
         {!isLoading && values.map(({ name }) => (
           <div key={name}>
-            {/*<Link to={name}>*/}
+            <Link href={name}>
               {name}
-            {/*</Link>*/}
+            </Link>
           </div>
         ))}
       </div>

diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx
@@ -0,0 +1,33 @@
+'use client'
+import React, { useState, useEffect, ReactElement } from 'react'
+import Link from 'next/link'
+
+interface Props {
+  params: { slug: string }
+}
+
+export default function PokemonProfile ({ params: { slug } }: Props): ReactElement {
+  const [pokemon, setPokemon] = useState<string[]>([])
+
+  useEffect(function fetchPokemon () {
+    void fetch(`https://pokeapi.co/api/v2/pokemon/${slug}`)
+      .then(async results => await results.json())
+      .then(({ sprites }: { sprites: { back_default: string } }) => {
+        const pokemonAvatars = Object.values(sprites).filter(image => typeof image === 'string').reverse()
+
+        setPokemon(pokemonAvatars)
+      })
+  }, [])
+
+  return (
+   <>
+    <Link href="/">&lt; Back</Link>
+     <br />
+     <br />
+     <div style={{ textTransform: 'capitalize' }}>{slug}</div>
+     {pokemon.map(image => (
+       <img key={image} src={image} alt="pokemon image" />
+     ))}
+   </>
+  )
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -9,7 +9,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body style={{ margin: 0 }}>{children}</body>
+      <body style={{ margin: 24 }}>{children}</body>
     </html>
   )
 }