From 8406afaa2943ced9f96a8b9f673aec8334fbda0d Mon Sep 17 00:00:00 2001
From: yudejp <i@yude.jp>
Date: Sun, 30 May 2021 18:16:55 +0900
Subject: [PATCH] Change data fetching / rendering method

---
 pages/components/DiscordStatus.js | 47 ++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/pages/components/DiscordStatus.js b/pages/components/DiscordStatus.js
index 0519c2a..9e09760 100644
--- a/pages/components/DiscordStatus.js
+++ b/pages/components/DiscordStatus.js
@@ -1,27 +1,36 @@
-import React from "react";
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 
 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[0].status))
+  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 (status === "online") {
-    return <div className="font-bold text-gray-700 rounded-full bg-green-500 flex w-5 h-5 items-center justify-center"></div>
-  }else{
-    if (status === "idle") {
-      return <div className="font-bold text-gray-700 rounded-full bg-yellow-500 flex w-5 h-5 items-center justify-center"></div>
-    }else{
-      if (status === "dnd") {
-        return <div className="font-bold text-gray-700 rounded-full bg-red-500 flex w-5 h-5 items-center justify-center"></div>
-      }else{
-        return <div className="font-bold text-gray-700 rounded-full bg-gray-500 flex w-5 h-5 items-center justify-center"></div>
+  const status = data.members && data.members[0].status;
+  return (
+  <>
+  {
+    (() => {
+      if (status == "online"){
+        return <div className="z-1000 text-green-700 rounded-full bg-green-500 flex w-5 h-5"></div>
+      } else if (status == "idle"){
+        return <div className="z-1000 text-yellow-700 rounded-full bg-green-500 flex w-5 h-5"></div>
+      } else if (status == "dnd"){
+        return <div className="z-1000 text-yellow-700 rounded-full bg-red-500 flex w-5 h-5"></div>
+      } else {
+        return <div className="z-1000 text-gray-700 rounded-full bg-red-500 flex w-5 h-5"></div>
       }
-    }
+    })()
   }
-};
+  </>
+  )
+}
 
 export default App;
\ No newline at end of file