65 lines
1.6 KiB
JavaScript
65 lines
1.6 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { ArtStyle, ArtTitleStyle } from "./toots.style";
|
|
import SkillCard from "./tootCard";
|
|
import { APISDK } from "handlers/sdk";
|
|
import SkillsStyle from "./skills.style";
|
|
import Box from "@mui/material/Box";
|
|
import LinearProgress from "@mui/material/LinearProgress";
|
|
|
|
function Toots () {
|
|
const [skills, setSkills] = useState({});
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
async function requestAPIS() {
|
|
await APISDK.req();
|
|
APISDK.data.logo = {
|
|
masto: `https://cdn.fosstodon.org/accounts/avatars/000/028/400/original/324cba4cb379bd4e.png`,
|
|
};
|
|
setSkills(APISDK.data.masto_status);
|
|
setLoading(false);
|
|
}
|
|
|
|
useEffect(() => {
|
|
requestAPIS();
|
|
}, [loading, APISDK]);
|
|
let image = skills?.logo?.masto;
|
|
if (loading) {
|
|
return (
|
|
<SkillsStyle>
|
|
<Box sx={{ width: "60%" }}>
|
|
<LinearProgress />
|
|
Fetching Toots from Fosstodon...
|
|
</Box>
|
|
<br />
|
|
</SkillsStyle>
|
|
);
|
|
} else {
|
|
|
|
console.log(skills.data);
|
|
return (
|
|
<>
|
|
<ArtTitleStyle>
|
|
<div className="title-bar">
|
|
Fosstodon Status
|
|
</div>
|
|
</ArtTitleStyle>
|
|
<div className="mainboard__container">
|
|
{skills && (
|
|
<ArtStyle>
|
|
{skills?.data?.map((project, index) => {
|
|
project.image = image;
|
|
return (
|
|
<>
|
|
<SkillCard {...project} />
|
|
</>
|
|
);
|
|
})}
|
|
</ArtStyle>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Toots; |