InfiniteScrollCards.js

import React, { useState, useEffect, Fragment } from "react";
import Cards from "./Cards";
import GroupCardsCollections from "./GroupCardsCollections";
import Link from "next/link";
import mecredApi from "@/axiosConfig";
import DownloadButton from "./DownloadButton";

export default function InfiniteScrollCards({ data, type = "Collection", setNewSize, newSize }) {
    const [cardsPerRow, setCardsPerRow] = useState(0);
    const [mecCollection, setMecCollection] = useState([]);


    const getWidth = async () => {
        return document.getElementById('contentSize').scrollWidth;
    };


    useEffect(() => {
        getWidth().then((res) => {
            setCardsPerRow(Math.floor(res / 300));
            setNewSize(false);
        });
    }, [newSize, setNewSize]);

    const fetchCollections = async () => {

        try {
            const { data } = await mecredApi
                .get("/users/35342/collections");
            setMecCollection(data);
        } catch (error) {
            console.log(error);
        }

    };

    useEffect(() => {
        fetchCollections();
    }, []);




    const timeFunction = (updated_time) => {
        let data = new Date(updated_time)
        let dataAtual = new Date();

        let time = dataAtual.getTime() - data.getTime();
        let dia = Math.floor(time / (1000 * 60 * 60 * 24));
        let ano;
        let mes;

        if ((ano = Math.floor(dia / 365)) > 0)
            return <span className="text-xs	">, há {ano} {ano === 1 ? "ano" : "anos"} </span>
        else if (((mes = Math.floor(dia / 31)) > 0))
            return <span className="text-xs	">, há {mes} {mes === 1 ? "mês" : "meses"}</span>

        if (dia === 0)
            return <span className="text-xs	">, hoje</span>
        return <span className="text-xs	">, há {dia} {dia === 1 ? "dia" : "dias"}</span>

    }



    function returnContent(type) {
        switch (type) {
            case "Collection":
                return (

                    <div className="flex flex-col">
                        {data.map((item, index) => (
                            <Fragment key={item['id']} >
                                <div className="bg-white mb-10 pt-6 pl-4 mr-6 rounded-2xl">
                                    <p className="text-2xl max-md:text-center font-bold mb-0 text-text-color mr-2 inline-block">{item['name']}</p>

                                    <div className="flex flex-wrap justify-between mr-8 max-md:flex-col  ">
                                        <p className=" ml-1 max-md:text-center text-gray-500 mb-0">
                                            por  <Link href={"/perfil/" + item["owner"]["id"]}> {item["owner"]["name"]}</Link>{timeFunction(item["updated_at"])}
                                        </p>
                                        <div className="flex max-md:justify-center">
                                            <DownloadButton id={item['id']} objects={item['collection_items']} />
                                        </div>
                                    </div>
                                    <GroupCardsCollections cardsPerRow={cardsPerRow} data={item['collection_items']} />
                                </div>
                            </Fragment>
                        ))}
                    </div>


                )

            case "LearningObject":
                return (
                    <div className="flex flex-wrap justify-center">
                        {data.map((item, index) => (
                            <Cards
                                id={item['id']}
                                key={item['id']}
                                title={item["name"]}
                                author={item["publisher"]["name"]}
                                authorId={item["publisher"]["id"]}
                                avatar={item["publisher"]["avatar"]}
                                image={item["thumbnail"]}
                                type={item["object_type"]}
                                updated_at={item["updated_at"]}
                            />
                        ))}
                    </div>
                )

            case "MEC":
                return (
                    <div className="flex flex-col">

                        <p className="text-2xl max-sm:text-center font-bold mb-0 text-text-color ml-4 inline-block">Coleções Oficiais do MEC</p>
                        <Link href="/perfil/35342">
                            <p className=" ml-5 max-sm:text-center text-gray-500 mb-4" > por Ministério da Educação</p>
                        </Link>

                        {mecCollection.map((item, index) => {
                            return (
                                <Fragment key={item['id']}>
                                    <div className="bg-white mb-10 pt-4 pl-4 mr-8 rounded-2xl">

                                        <div className="flex flex-wrap justify-between mr-8 max-md:justify-center ">
                                            <p className="text-2xl max-sm:text-center font-bold mb-1 text-text-color ml-6 inline-block">{item["name"]}</p>
                                            <DownloadButton id={item['id']} objects={item['collection_items']} />
                                        </div>
                                        <GroupCardsCollections cardsPerRow={cardsPerRow} data={item['collection_items']} />
                                    </div>
                                </Fragment>
                            )
                        })}



                    </div>

                )

        }
    }


    return (
        <div id="contentSize">
            {returnContent(type)}
        </div>
    )
};