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";
import UsersPageCard from "./UsersPageCard";
import ShareButton from "./ShareButton";

/**
 * 
 * @param {Object} props
 * @param {Array.<Object>} props.data dados obtidos apartir do get do InfiniteScroll.js
 * @param {string} props.type informa se é recursos ou coleções, caso vazia retorna Collection  
 * @param {Function} props.setNewSize 
 * @param {boolean} props.newSize verifica se a tela teve o tamanho alterado
 * @returns renderixa na tela o conteúdo obtido pelo InfiniteScroll.js
 */
export default function InfiniteScrollCards({ setMecLoading, data, searchClass, setNewSize, newSize }) {
    const [cardsPerRow, setCardsPerRow] = useState(0);
    const [mecCollection, setMecCollection] = useState([]);
    /**
    *pega o tamanho da div de id "contentSize"
    */
    const getWidth = async () => {
        return document.getElementById('contentSize').scrollWidth;
    };

    /**
     * pega o tamanho da tela caso esse seja alterado
    */
    useEffect(() => {
        getWidth().then((res) => {
            setCardsPerRow(Math.floor(res / 273));
            setNewSize(false);
        });
    }, [newSize, setNewSize]);

    /**
     * get das coleções Oficiais do MEC
    */
    useEffect(() => {
    const fetchCollections = async () => {
        try {
            const { data } = await mecredApi
                .get("/users/35342/collections");
            setMecCollection([...data].reverse());
            setMecLoading(false);
        } catch (error) {
            console.error(error);
        }
    };

        fetchCollections();
    }, []);

    /**
     * função que conta o tempo decorrido desde a publicação do recurso
    */
    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="justify-center ml-8">
                      {data?.map((item) => (
                        <div
                          key={item.id}
                          className="bg-white-HC-dark  outline outline-1 outline-ice-HC-white mb-10 pt-6 px-4 rounded-2xl relative"
                        >
                          {/* Cabeçalho com título, autor e botões */}
                          <div className="flex justify-between items-start">
                            {/* Título e autor */}
                            <div className="flex flex-col">
                              <p className="text-2xl font-bold mb-1 text-darkGray-HC-white-underline hover:underline">
                                <Link href={`/colecao/${item.id}`}>{item.name}</Link>
                              </p>
                              <p className="ml-1 text-darkGray-HC-white">
                                por{" "}
                                <Link
                                  className="text-darkGray-HC-white-underline hover:underline"
                                  href={`/perfil/${item.owner.id}`}
                                >
                                  {item.owner.name}
                                </Link>
                              </p>
                            </div>
                
                            {/* Botões */}
                            <div className="flex flex-row gap-2 justify-end">
                              <DownloadButton id={item.id} objects={item.collection_items} />
                              <ShareButton type="colecao" id={item.id} />
                            </div>
                          </div>
                
                          {/* Cartões da coleção abaixo do cabeçalho */}
                          <div className="mt-4">
                            <GroupCardsCollections
                              cardsPerRow={cardsPerRow}
                              data={item.collection_items}
                              collectionId={item.id}
                            />
                          </div>
                        </div>
                      ))}
                    </div>
                );


            case "LearningObject":
                return (
                    <div className="flex max-2xl:gap-4 gap-2 gap-y-4 flex-wrap ml-7 max-md:ml-0 max-md: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["created_at"]}
                            />
                        ))}
                    </div>
                )

            case "MEC":
                return (
                    <div className="justify-center mt-5 ml-8">
                      {mecCollection?.map((item) => (
                        <div
                          key={item.id}
                          className="bg-white-HC-dark  outline outline-1 outline-ice-HC-white mb-10 pt-6 px-4 rounded-2xl relative"
                        >
                          {/* Cabeçalho com título, autor e botões */}
                          <div className="flex justify-between items-start">
                            {/* Título e autor */}
                            <div className="flex flex-col">
                              <p className="text-2xl font-bold mb-1 text-darkGray-HC-white hover:underline">
                                <Link href={`/colecao/${item.id}`}>{item.name}</Link>
                              </p>
                              <p className="ml-1 text-darkGray-HC-white">
                                por {" "}
                                <Link className="hover:underline" href={`/perfil/35342`}>
                                  Ministério da Educação
                                </Link>
                              </p>
                            </div>
                  
                            {/* Botões */}
                            <div className="flex flex-row gap-2 justify-end">
                              <DownloadButton id={item.id} objects={item.collection_items} />
                              <ShareButton type="colecao" id={item.id} />
                            </div>
                          </div>
                  
                          {/* Cartões da coleção abaixo do cabeçalho */}
                          <div className="mt-4">
                            <GroupCardsCollections
                              cardsPerRow={cardsPerRow}
                              data={item.collection_items}
                              collectionId={item.id}
                            />
                          </div>
                        </div>
                      ))}
                    </div>
                  );
                  
            case "User":
                return (
                    <div className="flex flex-wrap justify-center">
                        {data?.map((item, i) => {
                            return (
                                <Fragment key={i}>
                                    <UsersPageCard item={item} />
                                </Fragment>
                            )
                        })}
                    </div>
                )
        }
    }

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