➕ADD: Twitter api Dashboard, tweets page with fav twts

Author: manuarora700

components/NowPlaying.js

@@ -4,7 +4,6 @@ import fetcher from "@/lib/fetcher";
 
 export default function NowPlaying() {
   const { data } = useSWR("/api/now-playing", fetcher);
-  console.log("DATA", data);
 
   return (
     <div className="flex flex-row-reverse sm:flex-row mb-8 space-x-0 sm:space-x-2 w-full">

components/TopTracks.js

@@ -5,7 +5,6 @@ import Track from "@/components/Track";
 
 export default function TopTracks() {
   const { data } = useSWR("/api/top-tracks", fetcher);
-  console.log("data", data);
 
   if (!data) {
     return null;

components/metrics/TwitterCard.js

@@ -0,0 +1,33 @@
+export default function TwitterCard({ header, link, metric }) {
+  return (
+    <div className="metric-card border border-gray-200 dark:border-gray-800 rounded p-4 max-w-72 w-full">
+      <a
+        aria-label={header}
+        target="_blank"
+        rel="noopener noreferrer"
+        href={link}
+      >
+        <div className="flex items-center text-gray-900 dark:text-gray-100">
+          {header}
+          <svg
+            className="h-4 w-4 ml-1"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+            />
+          </svg>
+        </div>
+      </a>
+      <p className="mt-2 text-3xl font-bold spacing-sm text-black dark:text-white">
+        {metric || "-"}
+      </p>
+    </div>
+  );
+}

components/metrics/TwitterStatistics.js

@@ -0,0 +1,51 @@
+import useSWR from "swr";
+import format from "comma-number";
+
+import fetcher from "@/lib/fetcher";
+import { useEffect } from "react";
+import TwitterCard from "@/components/metrics/TwitterCard";
+
+export default function TwitterStatistics({ type }) {
+  const { data } = useSWR("/api/twitter-user", fetcher);
+
+  if (!data) {
+    return null;
+  }
+  console.log(data);
+
+  //   useEffect(() => {
+  //     return () => {};
+  //   }, [data]);
+
+  let followers = data?.user?.public_metrics?.followers_count;
+  let following = data?.user?.public_metrics?.following_count;
+  let count = data?.user?.public_metrics?.tweet_count;
+  let username = data?.user?.username;
+  console.log(data.user.public_metrics.followers_count);
+  const link = "/tweets";
+
+  return (
+    <>
+      {type == "followers" && (
+        <TwitterCard
+          header="Twitter Followers"
+          link={link}
+          metric={followers}
+        />
+      )}
+      {type == "following" && (
+        <TwitterCard
+          header="Twitter Following"
+          link={link}
+          metric={following}
+        />
+      )}
+      {type == "total_tweets" && (
+        <TwitterCard header="Tweet Count" link={link} metric={count} />
+      )}
+      {type == "username" && (
+        <TwitterCard header="Twitter username" link={link} metric={username} />
+      )}
+    </>
+  );
+}

lib/twitter.js

@@ -16,7 +16,7 @@ export const getTweets = async (ids) => {
     `https://api.twitter.com/2/tweets?${queryParams}`,
     {
       headers: {
-        Authorization: `Bearer ${process.env.TWITTER_API_KEY}`,
+        Authorization: `Bearer ${process.env.TWITTER_BEARER_TOKEN}`,
       },
     }
   );
@@ -57,3 +57,17 @@ export const getTweets = async (ids) => {
     return [tweetWithAuthor, ...allTweets];
   }, []);
 };
+
+export const getUser = async (username) => {
+  const url = `https://api.twitter.com/2/users/by/username/${username}?user.fields=created_at,description,profile_image_url,public_metrics`;
+  const response = await fetch(url, {
+    headers: {
+      Authorization: `Bearer ${process.env.TWITTER_BEARER_TOKEN}`,
+      "Content-Type": "application/x-www-form-urlencoded",
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET",
+    },
+  });
+  const data = await response.json();
+  return data;
+};

next.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  images: {
+    domains: [
+      "i.scdn.co", // Spotify Album Art
+      "pbs.twimg.com", // Twitter Profile Picture
+    ],
+  },
+};

pages/api/github.js

@@ -7,7 +7,6 @@ export default async (_, res) => {
   const user = await userResponse.json();
   const repositories = await userReposResponse.json();
   // If GitHub API limit reached (demo purpose)
-  // console.log(user);
   if (repositories.message) {
     return res.status(200).json({
       followers: null,

pages/api/now-playing.js

@@ -3,7 +3,6 @@
 // export default async (_, res) => {
 //   const response = await getNowPlaying();
 //   const { item } = await response.json();
-//   console.log("item - now-playing", item);
 
 //   if (!item) {
 //     const track = {};
@@ -50,7 +49,6 @@ export default async (_, res) => {
     albumImageUrl,
     songUrl,
   };
-  console.log("track", track);
 
   res.setHeader(
     "Cache-Control",

pages/api/top-tracks.js

@@ -4,8 +4,6 @@ export default async (_, res) => {
   const response = await getTopTracks();
   const { items } = await response.json();
 
-  console.log("items - top-tracks", items);
-
   if (!items) {
     const track = [];
 
@@ -18,10 +16,6 @@ export default async (_, res) => {
     title: track.name,
   }));
 
-  console.log("TRACKS", tracks);
-
-  //   console.log(tracks);
-
   res.setHeader(
     "Cache-Control",
     "public, s-maxage=86400, stale-while-revalidate=43200"

pages/api/twitter-user.js

@@ -0,0 +1,23 @@
+import { getUser } from "@/lib/twitter";
+
+export default async (_, res) => {
+  const response = await getUser("mannupaaji");
+  const { data } = response;
+
+  if (!response) {
+    const user = null;
+
+    return res.status(200).json({ user });
+  }
+
+  const user = {
+    ...data,
+  };
+
+  res.setHeader(
+    "Cache-Control",
+    "public, s-maxage=86400, stale-while-revalidate=43200"
+  );
+
+  return res.status(200).json({ user });
+};