Select Git revision
FollowingCards.js
FollowingCards.js 3.49 KiB
import { useEffect, Fragment, useState } from "react";
import mecredApi from "@/axiosConfig";
import { getStoredValue } from "@/app/handlers/localStorageHandler";
import UsersPageCard from "@/app/components/UsersPageCard";
import { Button } from "@mui/material";
import NotFound from "./NotFound";
import Loading from "@/app/components/Loading";
/**
*
* @param {Object} props
* @param {Number} id id do usuário
* @param {Number} count quantidade total de seguindo
* @returns Cards de usuários seguindo
*/
export default function FollowingCards({ id, count }) {
const [numberCards, setNumberCards] = useState(0);
const [following, setFollowing] = useState([]);
const token = getStoredValue("access_token");
const client = getStoredValue("client");
const uid = getStoredValue("uid");
const expiry = getStoredValue("expiry");
const [got, setGot] = useState(false);
useEffect(() => {
const fetchData = async () => {
try {
const { data } = await mecredApi.get(`/users/${id}/following/User?offset=${numberCards}`, {
headers: {
'access-token': token,
'token-type': 'Bearer',
'client': client,
'uid': uid,
'Expires': expiry
}
});
setFollowing((prevFollowing) => [...prevFollowing, ...data]);
setGot(true);
} catch (error) {
console.error(error);
}
};
fetchData();
// token changes after each request so if we put as dependecy it will keep changing and make more than one request.
// to solve this we probably need useContext.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [id, numberCards, client, uid, expiry]);
const toggleContent = () => {
setNumberCards((prevNumberCards) => prevNumberCards + 12);
};
return (
<>
{got ? (
<div className="pt-2 pb-16">
{count === 0 ? (
<NotFound name="Seguindo" />
) : (
<div className="p-3 my-5 rounded-md min-w-[200px] min-h-[180px]">
<div className="flex flex-wrap justify-center">
{following.map((item, i) => (
item && (
<Fragment key={i}>
<UsersPageCard item={item.followable} />
</Fragment>
)
))}
</div>
</div>
)}
{numberCards + 12 < count && (
<Button
fullWidth
disableElevation
variant="outlined"
className="mb-2 border-hidden hover:bg-transparent rounded-xl normal-case"
onClick={toggleContent}
>
<p className="hover:bg-main px-4 pb-4 text-other-links text-lg rounded-md">
Ver mais...
</p>
</Button>
)}
</div>
) : (
<Loading />
)}
</>
);
}