Folder organizing (Discord related components)

pages/components/Discord/DiscordPlaying.js

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import useTranslation from 'next-translate/useTranslation'
+import { useRouter } from 'next/router'
+
+function App (){
+  const router = useRouter()
+  const { locale, locales, defaultLocale, pathname } = router
+  const { t, lang } = useTranslation("common")
+  const [data, setData] = useState({ hits: [] });
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://discord.com/api/guilds/723409709306216498/widget.json',
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  if (data === undefined){
+    console.log("[Discord API] データの取得に失敗しました。 / Failed to retrieve data.")
+    return <p></p>
+  }else{
+  const str = JSON.stringify(data)
+  
+  if (str.indexOf("game") !== -1){
+  const yes_playing = t('yes_playing', {playing: data.members[0].game.name})
+  return <p>{yes_playing}</p>
+  }else{
+  return <p></p>
+  }
+}
+};
+
+export async function getServerSideProps() {
+  // Fetch data from external API
+  const res = await fetch(url)
+  const data = await res.json()
+
+  // Pass data to the page via props
+  return { props: { data } }
+}
+
+export default App;

pages/components/Discord/DiscordStatus.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const App = () => {
+  const [data, setData] = useState({ hits: [] });
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        'https://discord.com/api/guilds/723409709306216498/widget.json',
+      );
+      setData(result.data);
+    };  
+    fetchData();
+  }, []);
+  const str = JSON.stringify(data)
+  let status = 0
+  if (str.indexOf("status") !== -1){
+    status = data.members && data.members[0].status;
+  }
+  return (
+  <>
+  <div className="z-50 w-6 transform translate-y-3/4 -translate-x-full">
+  {
+    (() => {
+      if (status == 0) {
+        return <div className="text-gray-700 rounded-full bg-gray-500 flex w-6 h-6"></div>
+      }else{
+      if (status == "online"){
+        return <div className="text-green-700 rounded-full bg-green-500 flex w-6 h-6"></div>
+      } else if (status == "idle"){
+        return <div className="text-yellow-700 rounded-full bg-green-500 flex w-6 h-6"></div>
+      } else {
+        return <div className="text-yellow-700 rounded-full bg-red-500 flex w-6 h-6"></div>
+      } 
+    }
+    })()
+  }
+  </div>
+  </>
+  )
+}
+
+export default App;