From b3731095dc378c81a97fdb059f2e8012f3d3e328 Mon Sep 17 00:00:00 2001
From: Leo He <145774471+CaptainHPY@users.noreply.github.com>
Date: Tue, 20 Aug 2024 21:10:28 +0800
Subject: [PATCH] Remove Spotify (#6)

* feat: remove spotify

* docs: to swift
---
 .env.example                      |  6 ---
 src/components/layout/Footer.tsx  |  6 +--
 src/components/layout/Spotify.tsx | 67 -------------------------------
 src/constants/env.ts              |  7 ----
 src/pages/blog/[...slug].tsx      |  2 +-
 5 files changed, 2 insertions(+), 86 deletions(-)
 delete mode 100644 src/components/layout/Spotify.tsx

diff --git a/.env.example b/.env.example
index 9c9600c..ac03c26 100644
--- a/.env.example
+++ b/.env.example
@@ -6,12 +6,6 @@ IP_ADDRESS_SALT=
 # Dev.to Credentials for getting views
 DEVTO_KEY=
 
-# Spotify Credentials
-# used for /api/spotify widget
-SPOTIFY_CLIENT_ID=
-SPOTIFY_CLIENT_SECRET=
-SPOTIFY_REFRESH_TOKEN=
-
 # Dev tools page hidden route
 ADMIN_PASSWORD=admin
 
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 5be89a5..c7d8eab 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -8,20 +8,16 @@ import { trackEvent } from '@/lib/analytics';
 import useCopyToClipboard from '@/hooks/useCopyToClipboard';
 
 import Accent from '@/components/Accent';
-import Spotify from '@/components/layout/Spotify';
 import UnstyledLink from '@/components/links/UnstyledLink';
 import Tooltip from '@/components/Tooltip';
 
-import { feedbackFlag, spotifyFlag } from '@/constants/env';
+import { feedbackFlag } from '@/constants/env';
 
 export default function Footer() {
   return (
     <footer className='mt-4 pb-2'>
       <main className='layout flex flex-col items-center border-t pt-6 dark:border-gray-600'>
         <FooterLinks />
-
-        {spotifyFlag && <Spotify className='mt-8' />}
-
         <p className='mt-12 font-medium text-gray-600 dark:text-gray-300'>
           Reach me out
         </p>
diff --git a/src/components/layout/Spotify.tsx b/src/components/layout/Spotify.tsx
deleted file mode 100644
index f4627e9..0000000
--- a/src/components/layout/Spotify.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import clsx from 'clsx';
-import * as React from 'react';
-import { SiSpotify } from 'react-icons/si';
-import { Tooltip } from 'react-tippy';
-
-import { getSpotifyNowPlaying } from '@/lib/requests/spotify';
-
-import NextImage from '@/components/images/NextImage';
-import UnstyledLink, {
-  UnstyledLinkProps,
-} from '@/components/links/UnstyledLink';
-
-export default function Spotify({
-  className,
-  ...rest
-}: Omit<UnstyledLinkProps, 'href' | 'children'>) {
-  const { data: spotify } = useQuery({
-    queryKey: ['spotify'],
-    queryFn: getSpotifyNowPlaying,
-  });
-
-  return spotify?.isPlaying ? (
-    <figure className={className} data-cy='spotify'>
-      <Tooltip
-        trigger='mouseenter'
-        interactive
-        html={
-          <div className='inline-block rounded-md border bg-white p-2 text-gray-600 shadow-md dark:border-gray-600 dark:bg-dark dark:text-gray-200'>
-            <p>Currently playing on my Spotify</p>
-          </div>
-        }
-      >
-        <UnstyledLink
-          {...rest}
-          href={spotify.songUrl}
-          className={clsx(
-            'relative flex items-center gap-4 p-3',
-            'border dark:border-gray-600',
-            'border-thin w-72 rounded-md',
-            'shadow-sm dark:shadow-none',
-            'focus:outline-none focus-visible:ring focus-visible:ring-primary-300'
-          )}
-        >
-          <NextImage
-            useSkeleton
-            className='w-16 shadow-sm dark:shadow-none'
-            src={spotify.albumImageUrl}
-            alt={spotify.album}
-            width={640}
-            height={640}
-            unoptimized
-          />
-          <div className='flex-1'>
-            <p className='text-sm font-medium'>{spotify.title}</p>
-            <p className='mt-1 text-xs text-gray-600 dark:text-gray-300'>
-              {spotify.artist}
-            </p>
-          </div>
-          <div className='absolute bottom-1.5 right-1.5'>
-            <SiSpotify size={20} color='#1ED760' />
-          </div>
-        </UnstyledLink>
-      </Tooltip>
-    </figure>
-  ) : null;
-}
diff --git a/src/constants/env.ts b/src/constants/env.ts
index 34d482f..d9f1d99 100644
--- a/src/constants/env.ts
+++ b/src/constants/env.ts
@@ -16,13 +16,6 @@ export const contentMetaFlag =
 export const incrementMetaFlag =
   isProd && getFromLocalStorage('incrementMetaFlag') !== 'false';
 
-/**
- * Show Spotify Now Playing on footer
- * @see Footer.tsx
- */
-export const spotifyFlag =
-  isProd || process.env.NEXT_PUBLIC_FLAG_SPOTIFY === 'true';
-
 /**
  * Open API access to newsletter provider (subscribe and view count)
  * @see SubscribeCard.tsx
diff --git a/src/pages/blog/[...slug].tsx b/src/pages/blog/[...slug].tsx
index dc66c2d..e3e7c89 100644
--- a/src/pages/blog/[...slug].tsx
+++ b/src/pages/blog/[...slug].tsx
@@ -128,7 +128,7 @@ export default function SingleBlogPage({
               <p className='mt-2 text-sm text-gray-600 dark:text-gray-300'>
                 Written on{' '}
                 {format(new Date(frontmatter.publishedAt), 'MMMM dd, yyyy')} by
-                Theodorus Clarence.
+                BJUT Swift.
               </p>
               {frontmatter.lastUpdated && (
                 <div className='mt-2 flex flex-wrap gap-2 text-sm text-gray-700 dark:text-gray-200'>