yude/yude.jp
0
0
Fork 0
mirror of https://github.com/yude-jp/yude.jp synced 2024-12-22 12:10: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 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;