Skip to content
Snippets Groups Projects
Select Git revision
  • issue/448-resources-off-screen
  • issue/447-search-results-screen
  • issue/271.3-update-routes-new-backend protected
  • develop default protected
4 results

FollowingCards.js

Blame
  • 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 />
                )}
            </>
        );
    }