Add playing status on profile

locales/en/common.json

@@ -1,5 +1,7 @@
 {
     "footer": "This page is licensed under the MIT License.",
     "source": "Source code",
-    "tos": "yude.jp Terms of Service"
+    "tos": "yude.jp Terms of Service",
+    "yes_playing": "Playing {{playing}}",
+    "no_playing": "Nothing playing"
 }

locales/ja/common.json

@@ -1,5 +1,7 @@
 {
     "footer": "このページは MIT License の下でライセンスされています。",
     "source": "ソースコード",
-    "tos": "yude.jp サービス利用規約"
+    "tos": "yude.jp サービス利用規約",
+    "yes_playing": "{{playing}} をプレイ中",
+    "no_playing": "何もプレイしていません"
 }

pages/components/DiscordPlaying.js

@@ -0,0 +1,27 @@
+import React from "react";
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+
+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})
+  const no_playing = t('no_playing')
+  if (playing){
+  return <p>{yes_playing}</p>
+  }else{
+  return <p>{no_playing}</p>
+  }
+};
+
+export default App;

pages/components/DiscordStatus.js

@@ -1,12 +1,12 @@
 import React from "react";
 
-const url = "https://discordapp.com/api/guilds/550309736214691840/widget.json";
+const url = "https://discord.com/api/guilds/723409709306216498/widget.json";
 const App = () => {
   const [status, setStatus] = React.useState(0);
   React.useEffect(() => {
     fetch(url)
       .then((r) => r.json())
-      .then((j) => setStatus(j.members[15].status))
+      .then((j) => setStatus(j.members[0].status))
   }, []);
     
   if (status === "online") {

pages/profile.js

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