Next.js Client Components

Author: 15Dkatz

app/connect/followers.js

@@ -0,0 +1,32 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export default function Followers() {
+  const [goalString, setGoalString] = useState('?/?');
+
+  useEffect(() => {
+    fetch('https://spotify-api-wrapper.appspot.com/artist/david-kando')
+      .then(response => response.json())
+      .then(json => {
+        console.log(`json`, json);
+
+        if (
+          json
+          && json.artists
+          && json.artists.items
+          && json.artists.items.length > 0
+        ) {
+          const followers = json.artists.items[0].followers.total;
+
+          setGoalString(`${followers}/?`);
+        }
+      })
+  }, []);
+
+  return (
+    <div className="ml-[15px] lg:ml-[20px] mt-[5px]">
+      Follower progress: {goalString}
+    </div>
+  )
+}

app/connect/page.js

@@ -1,5 +1,5 @@
 // import Form from './email-list/form';
-// import Followers from './followers';
+import Followers from './followers';
 
 export default function Page() {
   return (
@@ -20,7 +20,7 @@ export default function Page() {
           1. Support me with a follow on{' '}
           <a className="font-bold link" href="https://open.spotify.com/artist/6ep6Hvwexmaa5IqcPxMxqC?si=t24Vsf6LRsKSIy5lV0wvNw" target="_blank">Spotify</a>.
         </div>
-        {/* <Followers /> */}
+        <Followers />
         <br />
         <div>
           2. Follow me on{' '}