Next.js Discord

Discord Forum

Real time fetch advertisement in queue like google ads not working

Unanswered
Northeast Congo Lion posted this in #help-forum
Open in Discord
Northeast Congo LionOP
I implement this on client side but I want it in real time

import Advertisement from "@/lib/database/models/advertisement.model";
import { connectDB } from "@/lib/database/mongoose";
import { NextResponse } from "next/server";

export async function GET(req: Request) {
  try {
    await connectDB();
    const url = new URL(req.url)
    const limit = parseInt(url.searchParams.get('limit')!) || 100;

    const Ads = await Advertisement.find().limit(limit);

    return NextResponse.json({
      message: "Ads fetched successfully",
      advertisement: Ads,
    });
  } catch (error) {
    console.error("Error in Fetch Ads GET:", error);
  }
}

1 Reply

Northeast Congo LionOP
import { SignedIn, SignedOut, useUser } from '@clerk/nextjs';
import axios from 'axios';
import Image from 'next/image';
import Link from 'next/link';
import React, { useEffect, useState } from 'react';

type AdType = {
  _id: string;
  link: string;
  image: string;
}

const AdBox = () => {

  const [ads, setAds] = useState<AdType[]>([]);
  const [currentAdIndex, setCurrentAdIndex] = useState(0);


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

  const fetchAds = async () => {
      try {
          const response = await axios.get(`/api/advertisement/getAllAds?limit=100`);
          setAds(response.data.advertisement);
          console.log('fetchAds in limit', response)
      } catch (error) {
          console.error("Failed to fetch ads:", error);
      }
  };

  useEffect(() => {
    const interval = setInterval(() => {
        setCurrentAdIndex(prevIndex => (prevIndex + 1) % ads.length);
    }, 10000); 

  }, [ads]); 

  return (
    <> 
    <div className="hidden md:flex max-w-xl w-1/5 mx-2 bg-beige shadow-md border-t border-black bg-gray-50 flex flex-col justify-center items-center ">
    <p>Advertisement</p>
      {ads.length > 0 && (
        <div className="w-full h-full relative" key={ads[currentAdIndex]._id}>
          <a href={ads[currentAdIndex].link} target="_blank" rel="noopener noreferrer" className="absolute inset-0">
            <Image src={ads[currentAdIndex].image} alt="Advertisement Image" layout="fill" objectFit="cover" />
          </a>
        </div>
      )}
    </div>
    </>
  );
};

export default AdBox;