From 8b3a484d088c017e4021f653a8112355acbee21f Mon Sep 17 00:00:00 2001
From: yudejp <i@yude.jp>
Date: Fri, 28 May 2021 11:43:00 +0900
Subject: [PATCH] Fix DiscordPlaying, Spotify

---
 pages/components/DiscordPlaying.js | 15 +++++++++++----
 pages/components/Spotify.js        | 28 +++++++++++++---------------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/pages/components/DiscordPlaying.js b/pages/components/DiscordPlaying.js
index 7791978..ab0f78c 100644
--- a/pages/components/DiscordPlaying.js
+++ b/pages/components/DiscordPlaying.js
@@ -1,13 +1,20 @@
-import React from "react";
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
-const url = 'https://discord.com/api/guilds/723409709306216498/widget.json';
 
-function App ({data}){
+function App (){
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("common")
-  
+  const [data, setData] = useState({ hits: [] });
+  useEffect(async () => {
+    const result = await axios(
+      'https://discord.com/api/guilds/723409709306216498/widget.json',
+    );
+
+    setData(result.data);
+    }, []);
   if (data === undefined){
     console.log("[Discord API] データの取得に失敗しました。 / Failed to retrieve data.")
     return <p></p>
diff --git a/pages/components/Spotify.js b/pages/components/Spotify.js
index 2f1c8b0..87effec 100644
--- a/pages/components/Spotify.js
+++ b/pages/components/Spotify.js
@@ -1,35 +1,33 @@
-import React from "react";
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
-const url = '/api/Spotify';
 
-function App ({data}) {
+function App () {
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("common")  
+  const [data, setData] = useState({ hits: [] });
+  useEffect(async () => {
+    const result = await axios(
+      '/api/Spotify',
+    );
+
+    setData(result.data);
+    }, []);
 
   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
+  if (data.isPlaying){
+   const status = data.artist + ' / ' + data.title
    const listening = t('listening', {listening: status})
    return <p>{listening}</p>
-   console.log("[Spotify Web API] Listening: " + status)
   }else{
    return <p></p>
-   console.log("[Spotify Web API] Nothing listening")
   }
 };
 }
 
-export async function getServerSideProps() {
-    // Fetch data from external API
-    const res = await fetch("/api/Spotify")
-    const data = await res.json()
-    // Pass data to the page via props
-    return { props: { data } }
-  }
-
 export default App;
\ No newline at end of file