Fix DiscordPlaying: error handling

pages/components/DiscordPlaying.js

@@ -1,26 +1,29 @@
 import React from "react";
 import useTranslation from 'next-translate/useTranslation'
 import { useRouter } from 'next/router'
+import useRequest from '../lib/useRequest'
 
-const url = "https://discord.com/api/guilds/723409709306216498/widget.json";
 const App = () => {
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("common")
   
-  const [playing, setPlaying] = React.useState(0);
-  React.useEffect(() => {
-    fetch(url)
-      .then((r) => r.json())
-      .then((j) => setPlaying(j.members[0].game.name))
-  }, []);
-
-  const yes_playing = t('yes_playing', {playing: playing})
-  if (playing){
+  const { data } = useRequest({
+    url: 'https://discord.com/api/guilds/723409709306216498/widget.json'
+  })
+  
+  if (data === undefined){
+    console.log("Discord API: データの取得に失敗しました。 / Failed to retrieve data.")
+    return <p></p>
+  }else{
+  const str = JSON.stringify(data)
+  const yes_playing = t('yes_playing', {playing: data.members[0].game.name})
+  if (str.indexOf("game") !== -1){
   return <p>{yes_playing}</p>
   }else{
-  return <p>&#32;</p>
+  return <p></p>
   }
+}
 };
 
 export default App;