yude/yude.jp
0
0
Fork 0
mirror of https://github.com/yude-jp/yude.jp synced 2025-01-03 10:00:11 +09:00
Code Releases Activity

Change data fetching / rendering method

Browse Source
This commit is contained in:
yude 2021-05-30 18:16:55 +09:00
parent 48fc60bd07
commit 8406afaa29
Signed by: yude
GPG Key ID: EB0FE5D925C4A968
1 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
pages/components/DiscordStatus.js
View File

@ -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 url = "https://discord.com/api/guilds/723409709306216498/widget.json";
const App = () => { const App = () => {
const [status, setStatus] = React.useState(0); const [data, setData] = useState({ hits: [] });
React.useEffect(() => { useEffect(() => {
fetch(url) const fetchData = async () => {
.then((r) => r.json()) const result = await axios(
.then((j) => setStatus(j.members[0].status)) 'https://discord.com/api/guilds/723409709306216498/widget.json',
);
setData(result.data);
};
fetchData();
}, []); }, []);
const status = data.members && data.members[0].status;
if (status === "online") { return (
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> if (status == "online"){
}else{ return <div className="z-1000 text-green-700 rounded-full bg-green-500 flex w-5 h-5"></div>
if (status === "dnd") { } else if (status == "idle"){
return <div className="font-bold text-gray-700 rounded-full bg-red-500 flex w-5 h-5 items-center justify-center"></div> return <div className="z-1000 text-yellow-700 rounded-full bg-green-500 flex w-5 h-5"></div>
}else{ } else if (status == "dnd"){
return <div className="font-bold text-gray-700 rounded-full bg-gray-500 flex w-5 h-5 items-center justify-center"></div> 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; export default App;