Loading Room Chat

# feat
- Loading otomastis scroll chat
## No Isuuee

src/app/dev/colab/detail/grup/[id]/page.tsx

@@ -5,14 +5,16 @@ import _ from "lodash";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let roomId = params.id;
-  const userLoginId = await user_getOneUserId()
-  let listMsg = await colab_getMessageByRoomId(roomId);
-  const reserveMsg = _.reverse(listMsg)
-  
+  const userLoginId = await user_getOneUserId();
+  let listMsg = await colab_getMessageByRoomId(roomId, 1);
 
   return (
     <>
-      <Colab_DetailGrupDiskusi roomId={roomId} listMsg={reserveMsg} userLoginId={userLoginId}/>
+      <Colab_DetailGrupDiskusi
+        roomId={roomId}
+        listMsg={listMsg}
+        userLoginId={userLoginId}
+      />
     </>
   );
 }

src/app/dev/colab/detail/main_detail/[id]/page.tsx

@@ -1,6 +1,6 @@
 import { Colab_MainDetail } from "@/app_modules/colab";
 import colab_funCekPartisipasiById from "@/app_modules/colab/fun/get/cek_partisipasi_by_user_id";
-import colab_getListPartisipanById from "@/app_modules/colab/fun/get/get_list_partisipan_by_id";
+import colab_getListPartisipanByColabId from "@/app_modules/colab/fun/get/get_list_partisipan_by_id";
 import colab_getOneCollaborationById from "@/app_modules/colab/fun/get/get_one_by_id";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
@@ -8,7 +8,7 @@ export default async function Page({ params }: { params: { id: string } }) {
   let colabId = params.id;
   const userLoginId = await user_getOneUserId();
   const dataColab = await colab_getOneCollaborationById(colabId);
-  const listPartisipan = await colab_getListPartisipanById(colabId);
+  const listPartisipan = await colab_getListPartisipanByColabId(colabId);
   const cekPartisipan = await colab_funCekPartisipasiById(colabId);
 
   return (

src/app/dev/colab/detail/proyek/partisipasi/[id]/page.tsx

@@ -1,11 +1,11 @@
 import { Colab_DetailPartisipasiProyek } from "@/app_modules/colab";
-import colab_getListPartisipanById from "@/app_modules/colab/fun/get/get_list_partisipan_by_id";
+import colab_getListPartisipanByColabId from "@/app_modules/colab/fun/get/get_list_partisipan_by_id";
 import colab_getOneCollaborationById from "@/app_modules/colab/fun/get/get_one_by_id";
 
 export default async function Page({params}: {params: {id: string}}) {
   const colabId = params.id
   const dataColab = await colab_getOneCollaborationById(colabId)
-  const listPartisipan = await colab_getListPartisipanById(colabId)
+  const listPartisipan = await colab_getListPartisipanByColabId(colabId)
 
   return (
     <>

src/app/dev/colab/detail/proyek/saya/[id]/page.tsx

@@ -1,11 +1,11 @@
 import { Colab_DetailProyekSaya } from "@/app_modules/colab";
-import colab_getListPartisipanById from "@/app_modules/colab/fun/get/get_list_partisipan_by_id";
+import colab_getListPartisipanByColabId from "@/app_modules/colab/fun/get/get_list_partisipan_by_id";
 import colab_getOneCollaborationById from "@/app_modules/colab/fun/get/get_one_by_id";
 
 export default async function Page({ params }: { params: { id: string } }) {
   const colabId = params.id;
   const dataColab = await colab_getOneCollaborationById(colabId);
-  const listPartisipan = await colab_getListPartisipanById(colabId);
+  const listPartisipan = await colab_getListPartisipanByColabId(colabId);
 
   return (
     <>

src/app/dev/colab/main/proyek/page.tsx

@@ -1,15 +1,15 @@
 import { Colab_Proyek } from "@/app_modules/colab";
-import colab_getListPartisipasiByAuthorId from "@/app_modules/colab/fun/get/get_list_partisipasi_by_author_id";
+import colab_getListPartisipasiProyekByAuthorId from "@/app_modules/colab/fun/get/get_list_partisipasi_proyek_by_author_id";
 import colab_getListAllProyekSayaByAuthorId from "@/app_modules/colab/fun/get/get_list_proyek_saya_by_author_id";
 
 export default async function Page() {
-  const listPartisipasiUser = (await colab_getListPartisipasiByAuthorId()).data;
+  const listPartisipasiProyek = (await colab_getListPartisipasiProyekByAuthorId()).data;
   const listProyekSaya = (await colab_getListAllProyekSayaByAuthorId()).data;
 
   return (
     <>
       <Colab_Proyek
-        listPartisipasiUser={listPartisipasiUser as any}
+        listPartisipasiUser={listPartisipasiProyek as any}
         listProyekSaya={listProyekSaya as any}
       />
     </>

src/app/makuro/_util.ts

@@ -0,0 +1,9 @@
+import { v4 as uuidv4 } from "uuid";
+
+export const createItems = (length = 100): string[] =>
+  Array.from({ length }).map(() => uuidv4());
+
+export const loadMore = async (length = 100): Promise<string[]> => {
+    console.log("Loading more items...");
+  return new Promise((res) => setTimeout(() => res(createItems(length)), 100));
+};

src/app/makuro/page.tsx

@@ -1,101 +1,55 @@
 "use client";
-
-import {
-  Box,
-  Button,
-  Center,
-  Paper,
-  ScrollArea,
-  SimpleGrid,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-} from "@mantine/core";
-import _ from "lodash";
-import ViewMakuro from "./_server/makuro_view";
-import mqtt_client from "@/util/mqtt_client";
 import { useState } from "react";
-import { useAtom } from "jotai";
-import { gs_coba_chat } from "./gs_coba";
+import useInfiniteScroll, {
+  ScrollDirection,
+} from "react-easy-infinite-scroll-hook";
+import { createItems, loadMore } from "./_util";
 import { useShallowEffect } from "@mantine/hooks";
 
-export default function Page() {
-  const [pesan, setPesan] = useState("");
-  const [ini, setIni] = useState("");
+export default function App() {
+  const [data, setData] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   useShallowEffect(() => {
-    mqtt_client.subscribe("apa");
-
-    mqtt_client.on("message", (data: any, msg: any) => {
-      console.log( msg.toString());
-      setIni(msg.toString());
-    });
+    setData(createItems());
   }, []);
 
+  const next = async (direction: ScrollDirection) => {
+    console.log("next", direction);
+    try {
+      setIsLoading(true);
+      const newData = await loadMore();
+
+      const d = direction === "up"? [...newData, ...data]: []
+      setData(d);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const ref = useInfiniteScroll({
+    next,
+    rowCount: data.length,
+    hasMore: { up: true },
+  });
+
   return (
-    <>
-      <Stack align="center" justify="center">
-        {ini}
-        <TextInput
-          label="User 1"
-          value={pesan}
-          onChange={(val) => setPesan(val.currentTarget.value)}
-        />
-        <button
-          onClick={() => {
-            mqtt_client.publish("apa", pesan);
-            setPesan("");
-          }}
-        >
-          kirim
-        </button>
-      </Stack>
-    </>
+    <div>
+      <div
+        ref={ref as any}
+        className="List"
+        style={{
+          height: 500,
+          overflowY: "auto",
+        }}
+      >
+        {data.map((key: any) => (
+          <div className="Row" key={key}>
+            {key}
+          </div>
+        ))}
+      </div>
+      {isLoading && <div>Loading...</div>}
+    </div>
   );
 }
-
-// export default function Page() {
-//   return (
-//     <Box>
-//       <Box
-//         style={{
-//           zIndex: 99,
-//         }}
-//         w={"100%"}
-//         bg={"green"}
-//         pos={"sticky"}
-//         top={0}
-//         h={"10vh"}
-//       >
-//         header
-//       </Box>
-
-//       <Box bg={"red"} pos={"static"} >
-//         <Stack>
-//           {Array.from(new Array(15)).map((v, k) => (
-//             <Title key={k}>Cek halaman {k+1}</Title>
-//           ))}
-//           <Box style={{
-//             height: "10vh"
-//           }}>
-
-//           </Box>
-//         </Stack>
-//       </Box>
-
-//       <Text
-//         style={{
-//           zIndex: 98,
-//         }}
-//         w={"100%"}
-//         bg={"blue"}
-//         pos={"fixed"}
-//         bottom={0}
-//         h={"10vh"}
-//       >
-//         footer
-//       </Text>
-//     </Box>
-//   );
-// }

src/app/zCoba/page.tsx

@@ -1,51 +1,9 @@
-"use client";
-
-import {
-  Box,
-  Center,
-  Group,
-  LoadingOverlay,
-  Paper,
-  Skeleton,
-  Text,
-} from "@mantine/core";
-
-export default function ComponentCobaCoba_LoadingPage() {
-  const listhHuruf = [
-    {
-      huruf: "H",
-    },
-    {
-      huruf: "I",
-    },
-    {
-      huruf: "P",
-    },
-    {
-      huruf: "M",
-    },
-    {
-      huruf: "I",
-    },
-  ];
-  const customLOader = (
-    <Center h={"100vh"}>
-      <Group>
-        {listhHuruf.map((e, i) => (
-          <Center key={i} h={"100%"}>
-            <Skeleton height={50} circle radius={"100%"} />
-            <Text sx={{ position: "absolute" }} c={"gray.4"} fw={"bold"}>
-              {e.huruf}
-            </Text>
-          </Center>
-        ))}
-      </Group>
-    </Center>
-  );
+import Coba_TestLoading from "@/app_modules/zCoba";
 
+export default async function Page() {
   return (
     <>
-      <LoadingOverlay visible overlayBlur={2} loader={customLOader} />
+      <Coba_TestLoading />
     </>
   );
 }