Add Spotify #NowPlaying

pages/components/Spotify.js

@@ -0,0 +1,30 @@
+import React from "react";
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+import useRequest from '../lib/useRequest'
+
+const App = () => {
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+  const { t, lang } = useTranslation("common")
+  
+  const [isPlaying, setIsPlaying] = React.useState(0);
+  const { data } = useRequest({
+    url: '/api/Spotify'
+  })
+  
+  if (data === undefined){
+    console.log("Spotify Web API: データの取得に失敗しました。 / Failed to retrieve data.")
+    return <p></p>
+  }else{
+  if (data.isPlaying === "true"){
+   const status = data.artist + ' - ' + data.title
+   const listening = t('listening', {listening: status})
+   return <p>{listening}</p>
+  }else{
+   return <p></p>
+  }
+};
+}
+
+export default App;

pages/profile.js

@@ -8,6 +8,7 @@ import Image from 'next/image'
 import DiscordStatus from './components/DiscordStatus'
 import { useRouter } from 'next/router'
 import DiscordPlaying from './components/DiscordPlaying'
+import Spotify from './components/Spotify'
 
 export default function About(props) {
   const router = useRouter()
@@ -55,6 +56,7 @@ export default function About(props) {
         
           <p className="text-4xl subpixel-antialiased">yude</p>
           <DiscordPlaying />
+          <Spotify />
           </div>
         </div>