FollowersCards.js

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 número total de seguidores
 * @returns Cards dos seguidores do usuário
 */
export default function FollowersCards({ id, count }) {
    const [numberCards, setNumberCards] = useState(0);
    const [followers, setFollowers] = 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}/followers?offset=${numberCards}`, {
                    headers: {
                        'access-token': token,
                        'token-type': 'Bearer',
                        'client': client,
                        'uid': uid,
                        'Expires': expiry
                    }
                });
                setFollowers((prevFollowers) => [...prevFollowers, ...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 (
        <Loading loaded={got}>
            <div className="pt-2 pb-16">

                {count === 0 ? (
                    <NotFound name="seguidores" />
                ) : (
                    <div className="p-3 my-5 rounded-md min-w-[200px] min-h-[180px]">
                        <div className="flex flex-wrap justify-center">
                            {followers.map((item, i) => (
                                item && (
                                    <Fragment key={i}>
                                        <UsersPageCard item={item.follower} />
                                    </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>
    );    
}