Untitled

Updated HomePage

import { useEffect, useRef, useState } from "react";
// ... other imports remain the same

export default function HomePage({ data }: { data: any }) {
  const [category, setCategory] = useState<string>("");
  const [currentTab, setCurrentTab] = useState<string>("all");
  const [tweets, setTweets] = useState<any[]>([]);
  
  // Fetch tweets based on current category and tab
  const fetchTweets = async (page: number, limit: number) => {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_SERVER_URL}/tweet?paginate=true&page=${page}&limit=${limit}&sortBy=${getSortBy(currentTab)}&order=ASC${category ? `&category=${category}` : ""}`
    );
    return await response.json();
  };

  const getSortBy = (tab: string) => {
    switch (tab) {
      case "recent":
        return "created_at";
      case "most_viewed":
        return "views";
      default:
        return "favorites";
    }
  };

  const handleCategoryChange = (id: string) => {
    setCategory(id === category ? "" : id);
    setTweets([]); // Reset tweets when category changes
  };

  useEffect(() => {
    // Fetch tweets when category or tab changes
    const fetchData = async () => {
      const data = await fetchTweets(1, 10);
      setTweets(data.docs);
    };
    fetchData();
  }, [category, currentTab]);

  return (
    <div className=''>
      <div className='max-w-screen-xl m-auto mt-10 sm:p-4 category-slider'>
        <CustomSlider sliderRef={sliderRef} settings={setting} sliderContent={categoryTemplate} />
      </div>
      <div className='my-7 px-4 sm:w-[448px]'>
        <SlidingTabBar setCurrentTab={setCurrentTab} />
      </div>
      <div className='flex justify-center items-center px-4 text-primary-color'>
        <div className='flex flex-col w-full'>
          <div>
            <InfiniteScrollTweets
              tweets={tweets}
              templateData={templateData}
              loadingTemplate={loadingTemplate}
              noDataTemplate='No image found'
            />
          </div>
        </div>
      </div>
      <CustomModal modalState={modalState} setModalState={setModalState} title='' onClose={false}>
        <ModalPostCard item={selectData} />
      </CustomModal>
    </div>
  );
}

Updated InfiniteScrollTweets

Refactor this component to take in tweets as a prop rather than fetching them internally:

javascript

const InfiniteScrollTweets = ({
  tweets,
  templateData,
  loadingTemplate,
  noDataTemplate,
}: {
  tweets: any[];
  templateData: any;
  loadingTemplate: any;
  noDataTemplate: any;
}) => {
  return (
    <>
      <div className='grid grid-cols-2 md:grid-cols-4 gap-4 overflow-hidden'>
        {tweets.length > 0 ? (
          tweets.map(tweet => templateData(tweet))
        ) : (
          <div className='col-span-12 mt-5 text-center'>{noDataTemplate}</div>
        )}
      </div>
      {/* Loading spinner can be shown here if you implement pagination */}
    </>
  );
};

export default InfiniteScrollTweets;


Updated HomePage Component



import Loading from "@/app/_components/Loading";
import { SlidingTabBar } from "@/app/_components/shared/SlidingTabBar";
import CustomSlider from "@/app/_components/ui/CustomSlider";
import CustomModal from "@/app/admin/components/formikContent/CustomModal";
import { useWindowSize } from "@/app/lib/Settings";
import { getMp4Urls } from "@/app/lib/utils";
import Aos from "aos";
import { useEffect, useRef, useState } from "react";
import { FaRegPlayCircle } from "react-icons/fa";
import CategoryCard from "../_components/CategoryCard";
import ImageCard from "../_components/ImageCard";
import InfiniteScrollTweets from "../test/component/InfiniteScroll";
import ModalPostCard from "./ModalPostCard";

const setting = {
  infinite: true,
  speed: 500,
  slidesToScroll: 6,
  slidesToShow: 10,
  autoplay: false,
  arrows: true,
  autoplaySpeed: 3000,
  adaptiveHeight: true,
  dots: false,
  customPaging: (i) => <button>{i + 1}</button>,
  responsive: [
    { breakpoint: 1024, settings: { slidesToShow: 5, slidesToScroll: 4, adaptiveHeight: true, infinite: true } },
    { breakpoint: 768, settings: { slidesToShow: 5, slidesToScroll: 4, adaptiveHeight: true, arrows: false } },
    { breakpoint: 640, settings: { slidesToShow: 3.5, slidesToScroll: 3, adaptiveHeight: true, arrows: false } }
  ]
};

export default function HomePage({ data }) {
  const [category, setCategory] = useState("");
  const [currentTab, setCurrentTab] = useState("all");
  const [tweets, setTweets] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);
  const [modalState, setModalState] = useState(false);
  const [selectData, setSelectData] = useState(null);
  const { width } = useWindowSize();

  const fetchTweets = async (pageNum) => {
    setLoading(true);
    try {
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_SERVER_URL}/tweet?paginate=true&page=${pageNum}&limit=10&sortBy=${getSortBy(currentTab)}&order=ASC${category ? `&category=${category}` : ""}`
      );
      const data = await response.json();
      setTweets((prev) => [...prev, ...data.docs]);
      setHasMore(data.hasNextPage);
    } catch (error) {
      console.error("Error fetching tweets:", error);
    } finally {
      setLoading(false);
    }
  };

  const getSortBy = (tab) => {
    switch (tab) {
      case "recent":
        return "created_at";
      case "most_viewed":
        return "views";
      default:
        return "favorites";
    }
  };

  const handleCategoryChange = (id) => {
    setCategory(id === category ? "" : id);
    setTweets([]); // Reset tweets when category changes
    setPage(1); // Reset page number
    setHasMore(true); // Reset hasMore
  };

  useEffect(() => {
    fetchTweets(page); // Fetch tweets whenever page changes
  }, [page, category, currentTab]);

  useEffect(() => {
    // Reset tweets and page when category or tab changes
    setTweets([]);
    setPage(1);
    setHasMore(true);
  }, [category, currentTab]);

  return (
    <div className="">
      <div className="max-w-screen-xl m-auto mt-10 sm:p-4 category-slider">
        <CustomSlider sliderRef={useRef(null)} settings={setting} sliderContent={data.category.map((item, index) => (
          <div key={index} onClick={() => handleCategoryChange(item.id)}>
            <CategoryCard item={item} imageClass='w-20 h-20 sm:w-24 sm:h-24' active={category === item.id} />
          </div>
        ))} />
      </div>
      <div className="my-7 px-4 sm:w-[448px]">
        <SlidingTabBar setCurrentTab={setCurrentTab} />
      </div>
      <div className="flex justify-center items-center px-4 text-primary-color">
        <div className="flex flex-col w-full">
          <div>
            <InfiniteScrollTweets
              tweets={tweets}
              templateData={(tweet) => (
                <div key={tweet.id} className="cursor-pointer h-[200px] sm:h-[500px] border shadow-sm rounded-md overflow-hidden">
                  {/* Display tweet content */}
                  <ImageCard photo={tweet.media.photo[0]?.media_url_https} name={tweet.tweetid} onClick={() => {
                    setSelectData(tweet);
                    setModalState(true);
                  }} />
                </div>
              )}
              loadingTemplate={loading ? <Loading /> : null}
              noDataTemplate="No image found"
            />
          </div>
        </div>
      </div>
      <CustomModal modalState={modalState} setModalState={setModalState} title='' onClose={false}>
        <ModalPostCard item={selectData} />
      </CustomModal>
    </div>
  );
}

Key Changes Made:



const InfiniteScrollTweets = ({
  tweets,
  templateData,
  loadingTemplate,
  noDataTemplate,
}: {
  tweets: any[];
  templateData: (tweet: any) => JSX.Element;
  loadingTemplate: JSX.Element | null;
  noDataTemplate: string;
}) => {
  return (
    <>
      <div className='grid grid-cols-2 md:grid-cols-4 gap-4 overflow-hidden'>
        {tweets.length > 0 ? (
          tweets.map(tweet => templateData(tweet))
        ) : (
          <div className='col-span-12 mt-5 text-center'>{noDataTemplate}</div>
        )}
      </div>
      {loadingTemplate}
    </>
  );
};

export default InfiniteScrollTweets;


// scroll get mor data


// Updated HomePage Component



import Loading from "@/app/_components/Loading";
import { SlidingTabBar } from "@/app/_components/shared/SlidingTabBar";
import CustomSlider from "@/app/_components/ui/CustomSlider";
import CustomModal from "@/app/admin/components/formikContent/CustomModal";
import { useWindowSize } from "@/app/lib/Settings";
import { getMp4Urls } from "@/app/lib/utils";
import Aos from "aos";
import { useEffect, useRef, useState } from "react";
import { FaRegPlayCircle } from "react-icons/fa";
import CategoryCard from "../_components/CategoryCard";
import ImageCard from "../_components/ImageCard";
import InfiniteScrollTweets from "../test/component/InfiniteScroll";
import ModalPostCard from "./ModalPostCard";

const setting = {
  // ... your slider settings remain the same
};

export default function HomePage({ data }) {
  const [category, setCategory] = useState("");
  const [currentTab, setCurrentTab] = useState("all");
  const [tweets, setTweets] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);
  const [modalState, setModalState] = useState(false);
  const [selectData, setSelectData] = useState(null);

  const fetchTweets = async (pageNum) => {
    setLoading(true);
    try {
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_SERVER_URL}/tweet?paginate=true&page=${pageNum}&limit=10&sortBy=${getSortBy(currentTab)}&order=ASC${category ? `&category=${category}` : ""}`
      );
      const data = await response.json();
      setTweets((prev) => [...prev, ...data.docs]);
      setHasMore(data.hasNextPage);
    } catch (error) {
      console.error("Error fetching tweets:", error);
    } finally {
      setLoading(false);
    }
  };

  const getSortBy = (tab) => {
    switch (tab) {
      case "recent":
        return "created_at";
      case "most_viewed":
        return "views";
      default:
        return "favorites";
    }
  };

  const handleCategoryChange = (id) => {
    setCategory(id === category ? "" : id);
    setTweets([]); // Reset tweets when category changes
    setPage(1); // Reset page number
    setHasMore(true); // Reset hasMore
  };

  useEffect(() => {
    fetchTweets(page); // Fetch tweets whenever page changes
  }, [page, category, currentTab]);

  useEffect(() => {
    // Reset tweets and page when category or tab changes
    setTweets([]);
    setPage(1);
    setHasMore(true);
  }, [category, currentTab]);

  useEffect(() => {
    const handleScroll = () => {
      if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100 && hasMore && !loading) {
        setPage((prev) => prev + 1);
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, [hasMore, loading]);

  return (
    <div className="">
      <div className="max-w-screen-xl m-auto mt-10 sm:p-4 category-slider">
        <CustomSlider sliderRef={useRef(null)} settings={setting} sliderContent={data.category.map((item, index) => (
          <div key={index} onClick={() => handleCategoryChange(item.id)}>
            <CategoryCard item={item} imageClass='w-20 h-20 sm:w-24 sm:h-24' active={category === item.id} />
          </div>
        ))} />
      </div>
      <div className="my-7 px-4 sm:w-[448px]">
        <SlidingTabBar setCurrentTab={setCurrentTab} />
      </div>
      <div className="flex justify-center items-center px-4 text-primary-color">
        <div className="flex flex-col w-full">
          <div>
            <InfiniteScrollTweets
              tweets={tweets}
              templateData={(tweet) => (
                <div key={tweet.id} className="cursor-pointer h-[200px] sm:h-[500px] border shadow-sm rounded-md overflow-hidden">
                  {/* Display tweet content */}
                  <ImageCard photo={tweet.media.photo[0]?.media_url_https} name={tweet.tweetid} onClick={() => {
                    setSelectData(tweet);
                    setModalState(true);
                  }} />
                </div>
              )}
              loadingTemplate={loading ? <Loading /> : null}
              noDataTemplate="No image found"
            />
          </div>
        </div>
      </div>
      <CustomModal modalState={modalState} setModalState={setModalState} title='' onClose={false}>
        <ModalPostCard item={selectData} />
      </CustomModal>
    </div>
  );
}