fix: collaboration

deskripsi:
- uji coba scroll infinity terbaru

src/app/api/collaboration/[id]/chat/route.ts

@@ -5,6 +5,8 @@ import { NextRequest, NextResponse } from "next/server";
 import prisma from "@/lib/prisma";
 import backendLogger from "@/util/backendLogger";
 
+export const dynamic = "force-dynamic";
+
 export { GET };
 
 async function GET(

src/app/api/collaboration/[id]/message/route.ts

@@ -3,6 +3,8 @@ import { NextRequest, NextResponse } from "next/server";
 import prisma from "@/lib/prisma";
 import backendLogger from "@/util/backendLogger";
 
+export const dynamic = "force-dynamic";
+
 export { GET };
 
 async function GET(

src/app/zCoba/scroll/_comp/ui_scroll.tsx

@@ -0,0 +1,79 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useState, useEffect } from "react";
+
+// Tipe untuk data item (sesuaikan sesuai API kamu)
+interface Item {
+  id: number;
+  name: string;
+}
+
+// Props komponen
+interface InfiniteScrollProps<T> {
+  fetchFunction: (page: number) => Promise<T[]>;
+  renderItem: (item: T) => React.ReactNode;
+  itemsPerPage?: number;
+  threshold?: number; // Jarak dari bawah halaman untuk memicu load
+}
+
+const InfiniteScroll = <T,>({
+  fetchFunction,
+  renderItem,
+  itemsPerPage = 10,
+  threshold = 50,
+}: InfiniteScrollProps<T>) => {
+  const [items, setItems] = useState<T[]>([]);
+  const [hasMore, setHasMore] = useState(true);
+  const [page, setPage] = useState(1);
+
+  // Load data awal
+  useEffect(() => {
+    const loadInitialData = async () => {
+      const data = await fetchFunction(page);
+      if (data.length === 0) setHasMore(false);
+      setItems(data);
+    };
+
+    loadInitialData();
+  }, [fetchFunction, page]);
+
+  // Handle scroll event
+  useEffect(() => {
+    const handleScroll = () => {
+      const isBottom =
+        window.innerHeight + window.scrollY >=
+        document.body.offsetHeight - threshold;
+
+      if (isBottom && hasMore) {
+        loadMoreItems();
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [hasMore, threshold]);
+
+  const loadMoreItems = async () => {
+    const nextPage = page + 1;
+    const newItems = await fetchFunction(nextPage);
+
+    if (newItems.length === 0) {
+      setHasMore(false);
+    }
+
+    setItems((prev) => [...prev, ...newItems]);
+    setPage(nextPage);
+  };
+
+  return (
+    <div >
+      <ul>
+        {items.map((item, index) => (
+          <li key={index}>{renderItem(item)}</li>
+        ))}
+      </ul>
+      {!hasMore && <p>🎉 Semua data telah dimuat.</p>}
+    </div>
+  );
+};
+
+export default InfiniteScroll;

src/app/zCoba/scroll/page.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import React, { useState } from "react";
+import InfiniteScroll from "./_comp/ui_scroll";
+import { apiGetMessageByRoomId } from "@/app_modules/colab/_lib/api_collaboration";
+import { ChatMessage } from "@/app/dev/(user)/colab/_comp/interface";
+
+// Definisikan tipe data
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+
+
+// Komponen App
+function App() {
+    const [data, setData] = useState<ChatMessage[]>([]);
+  // Simulasi API call
+  const fetchUsers = async (page: number): Promise<ChatMessage[]> => {
+    const response = await apiGetMessageByRoomId({
+      id: "cmb5x31dt0001tl7y7vj26pfy",
+    });
+    setData(response.data);
+    return response.data;
+  };
+
+  return (
+    <div style={{ padding: "20px" }}>
+      <h1>Infinite Scroll with TypeScript</h1>
+      <InfiniteScroll<ChatMessage>
+        fetchFunction={fetchUsers}
+        itemsPerPage={10}
+        threshold={100}
+        renderItem={(item) => (
+          <div style={{ marginBottom: "10px" }}>
+            <strong>{item.User?.Profile?.name}</strong> - {item.message}
+          </div>
+        )}
+      />
+    </div>
+  );
+}
+
+export default App;