Loading Room Chat

# feat
- Loading otomastis scroll chat
## No Isuuee

package.json

@@ -55,6 +55,7 @@
     "react": "18.2.0",
     "react-countdown": "^2.3.5",
     "react-dom": "18.2.0",
+    "react-easy-infinite-scroll-hook": "^2.1.4",
     "react-fast-marquee": "^1.6.4",
     "react-icons": "^5.0.1",
     "react-international-phone": "^4.2.6",

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()
+  const userLoginId = await user_getOneUserId();
-  let listMsg = await colab_getMessageByRoomId(roomId);
+  let listMsg = await colab_getMessageByRoomId(roomId, 1);
-  const reserveMsg = _.reverse(listMsg)
-  
 
   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 useInfiniteScroll, {
-import { gs_coba_chat } from "./gs_coba";
+  ScrollDirection,
+} from "react-easy-infinite-scroll-hook";
+import { createItems, loadMore } from "./_util";
 import { useShallowEffect } from "@mantine/hooks";
 
-export default function Page() {
+export default function App() {
-  const [pesan, setPesan] = useState("");
+  const [data, setData] = useState<any[]>([]);
-  const [ini, setIni] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
 
   useShallowEffect(() => {
-    mqtt_client.subscribe("apa");
+    setData(createItems());
-
-    mqtt_client.on("message", (data: any, msg: any) => {
-      console.log( msg.toString());
-      setIni(msg.toString());
-    });
   }, []);
 
+  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 (
-    <>
+    <div>
-      <Stack align="center" justify="center">
+      <div
-        {ini}
+        ref={ref as any}
-        <TextInput
+        className="List"
-          label="User 1"
+        style={{
-          value={pesan}
+          height: 500,
-          onChange={(val) => setPesan(val.currentTarget.value)}
+          overflowY: "auto",
-        />
+        }}
-        <button
+      >
-          onClick={() => {
+        {data.map((key: any) => (
-            mqtt_client.publish("apa", pesan);
+          <div className="Row" key={key}>
-            setPesan("");
+            {key}
-          }}
+          </div>
-        >
+        ))}
-          kirim
+      </div>
-        </button>
+      {isLoading && <div>Loading...</div>}
-      </Stack>
+    </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 Coba_TestLoading from "@/app_modules/zCoba";
-
-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>
-  );
 
+export default async function Page() {
   return (
     <>
-      <LoadingOverlay visible overlayBlur={2} loader={customLOader} />
+      <Coba_TestLoading />
     </>
   );
 }

src/app_modules/colab/component/detail/detail_data.tsx

@@ -59,11 +59,9 @@ export default function ComponentColab_DetailData({
             </Stack>
             <Stack spacing={5}>
               <Text fw={"bold"} fz={"sm"}>
-                Keutungan
+                Keuntungan
-              </Text>
-              <Text fz={"sm"}>
-                {data?.benefit ? data?.benefit : "-"}
               </Text>
+              <Text fz={"sm"}>{data?.benefit ? data?.benefit : "-"}</Text>
             </Stack>
           </Stack>
         </Box>

src/app_modules/colab/component/detail/header_author_list_partisipan.tsx

@@ -21,6 +21,7 @@ import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_gl
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import { IconEyeCheck, IconZoomCheck } from "@tabler/icons-react";
 import { useDisclosure } from "@mantine/hooks";
+import { IconFileCheck } from "@tabler/icons-react";
 
 export default function ComponentColab_AuthorNameOnListPartisipan({
   author,
@@ -95,7 +96,7 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
                   radius={"xl"}
                   variant="transparent"
                 >
-                  <IconZoomCheck />
+                  <IconFileCheck color={opened ? "blue" : "gray"}/>
                 </ActionIcon>
               ) : (
                 ""

src/app_modules/colab/component/detail/list_partisipasi_user.tsx

@@ -22,7 +22,7 @@ import {
 import _ from "lodash";
 import { useState } from "react";
 import colab_funCreatePartisipan from "../../fun/create/fun_create_partisipan_by_user_id";
-import colab_getListPartisipanById from "../../fun/get/get_list_partisipan_by_id";
+import colab_getListPartisipanByColabId from "../../fun/get/get_list_partisipan_by_id";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import { useDisclosure } from "@mantine/hooks";
@@ -53,7 +53,7 @@ export default function ComponentColab_DetailListPartisipasiUser({
       deskripsi
     ).then(async (res) => {
       if (res.status === 201) {
-        await colab_getListPartisipanById(colabId as any).then((val) => {
+        await colab_getListPartisipanByColabId(colabId as any).then((val) => {
           setApply(true);
           close();
           setData(val as any);

src/app_modules/colab/detail/grup/index.tsx

@@ -6,8 +6,11 @@ import {
   Badge,
   Box,
   Button,
+  Center,
+  Flex,
   Grid,
   Group,
+  Loader,
   Paper,
   ScrollArea,
   Stack,
@@ -17,9 +20,13 @@ import {
   Transition,
   rem,
 } from "@mantine/core";
-import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
+import {
+  useScrollIntoView,
+  useShallowEffect,
+  useWindowScroll,
+} from "@mantine/hooks";
 import { useAtom } from "jotai";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { gs_colab_pesan } from "../../global_state";
 import { IconArrowUp, IconCircle, IconSend } from "@tabler/icons-react";
 import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
@@ -28,6 +35,10 @@ import ComponentColab_IsEmptyData from "../../component/is_empty_data";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
 import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
 import mqtt_client from "@/util/mqtt_client";
+import useInfiniteScroll, {
+  ScrollDirection,
+} from "react-easy-infinite-scroll-hook";
+import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
 
 export default function Colab_DetailGrupDiskusi({
   roomId,
@@ -35,109 +46,167 @@ export default function Colab_DetailGrupDiskusi({
   userLoginId,
 }: {
   roomId: string;
-  listMsg: any[];
+  listMsg?: any[];
   userLoginId: string;
 }) {
-  const [pesan, setPesan] = useState("");
+  const [msg, setMsg] = useState("");
-  const [obrolan, setObrolan] = useState<any[]>(listMsg);
+  const [data, setData] = useState<any[]>(listMsg as any);
+  const [page, setPage] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
   const [scroll, scrollTo] = useWindowScroll();
+  const [isGet, setIsGet] = useState(true);
+
+  const next = async (direction: ScrollDirection) => {
+    try {
+      setIsLoading(true);
+      await new Promise((a) => setTimeout(a, 100));
+
+      setPage(page + 1);
+      const newData = await colab_getMessageByRoomId(roomId, page + 1);
+
+      console.log(newData);
+
+      if (_.isEmpty(newData)) {
+        setIsGet(false);
+      } else {
+        setData((prev) => (direction === "up" ? [...newData, ...prev] : []));
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const ref = useInfiniteScroll({
+    next,
+    rowCount: data.length,
+    hasMore: { up: isGet },
+    scrollThreshold: 0.1,
+    initialScroll: { top: 100 },
+    // initialScroll: { top : -1 },
+
+    // onScroll() {
+    //   scrollTo({ y: 100 });
+    // },
+  });
+
+  // const setRef = useCallback((node: any) => {
+  //   if (node) ref.current = node._outerRef
+  // }, [ref]);
 
   useShallowEffect(() => {
     mqtt_client.subscribe(roomId);
 
     mqtt_client.on("message", (data: any, msg: any) => {
-      onList(setObrolan);
+      onList(setData);
     });
-  }, [setObrolan]);
+  }, [setData]);
 
-  async function onList(setObrolan: any) {
+  async function onList(setData: any) {
-    await colab_getMessageByRoomId(roomId).then((val) =>
+    await colab_getMessageByRoomId(roomId, page).then((val) => setData(val));
-      setObrolan(_.reverse(val))
-    );
   }
 
   async function onSend() {
-    await colab_funCreateMessageByUserId(pesan, roomId).then(async (res) => {
+    await colab_funCreateMessageByUserId(msg, roomId).then(async (res) => {
       if (res.status === 200) {
-        mqtt_client.publish(roomId, pesan);
+        mqtt_client.publish(roomId, msg);
-        setPesan("");
+        setMsg("");
       } else {
         ComponentGlobal_NotifikasiGagal(res.message);
       }
     });
   }
 
-  // if (_.isEmpty(listMsg))
-  //   return <ComponentColab_IsEmptyData text="Belum Ada Pesan" />;
-
   return (
     <>
-      <Box h={"79vh"}>
+      <Box h={"80vh"}>
-        {/* <pre>{JSON.stringify(listMsg.map((e) => e.createdAt), null,2)}</pre> */}
+        <Stack justify="flex-end" h={"100%"}>
-        <ScrollArea h={"79vh"} scrollbarSize={2}>
+          <div
-          <Box>
+            ref={ref as any}
-            {_.isEmpty(obrolan) ? (
+            style={{
-              <ComponentColab_IsEmptyData text="Belum Ada Pesan" />
+              overflow: "scroll",
-            ) : (
+              overflowY: "auto",
-              <Stack>
+              // height: "100vh",
-                {obrolan.map((e) => (
+              // justifyContent: "flex-end",
-                  <Box key={e.id}>
+              // flexDirection: "column",
-                    {e?.User.id === userLoginId ? (
+              // display: "flex",
-                      <Group position="right">
+            }}
-                        <Paper key={e.id} bg={"blue.2"} p={"sm"}>
+          >
-                          <Stack spacing={0}>
+            {isLoading && (
-                            <Text lineClamp={1} fw={"bold"} fz={"xs"}>
+              <Center>
-                              {e.User.Profile.name}
+                <Loader size={20} color="gray" />
-                            </Text>
+              </Center>
-                            <Text>{e.message}</Text>
-                            <Group spacing={"xs"}>
-                              <Text fz={7}>
-                                {new Intl.DateTimeFormat("id-ID", {
-                                  timeStyle: "medium",
-                                }).format(e.createdAt)}
-                              </Text>
-                              <IconCircle size={3} />
-                              <Text fz={7}>
-                                {new Intl.DateTimeFormat("id-ID", {
-                                  dateStyle: "medium",
-                                }).format(e.createdAt)}
-                              </Text>
-                            </Group>
-                          </Stack>
-                        </Paper>
-                      </Group>
-                    ) : (
-                      <Group position="left">
-                        <Paper key={e.id} bg={"cyan.2"} p={"sm"} mr={"lg"}>
-                          <Stack spacing={0}>
-                            <Text lineClamp={1} fw={"bold"} fz={10}>
-                              {e.User.Profile.name}
-                            </Text>
-                            <Text>{e.message}</Text>
-                            <Group spacing={"xs"}>
-                              <Text fz={7}>
-                                {new Intl.DateTimeFormat("id-ID", {
-                                  timeStyle: "medium",
-                                }).format(e.createdAt)}
-                              </Text>
-                              <IconCircle size={3} />
-                              <Text fz={7}>
-                                {new Intl.DateTimeFormat("id-ID", {
-                                  dateStyle: "medium",
-                                }).format(e.createdAt)}
-                              </Text>
-                            </Group>
-                          </Stack>
-                        </Paper>
-                      </Group>
-                    )}
-                  </Box>
-                ))}
-              </Stack>
             )}
-          </Box>
+            {_.isEmpty(data) ? (
-        </ScrollArea>
+              <ComponentColab_IsEmptyData text="Belum ada pesan" />
+            ) : (
+              data.map((e, i) => (
+                <Box key={i}>
+                  {userLoginId === e?.User?.id ? (
+                    <Group position="right">
+                      <Paper key={e.id} bg={"blue.2"} p={"sm"} mt={"sm"}>
+                        <Stack spacing={0}>
+                          <Text lineClamp={1} fw={"bold"} fz={"xs"}>
+                            {e.User.Profile.name}
+                          </Text>
+                          <div
+                            dangerouslySetInnerHTML={{ __html: e.message }}
+                          />
+
+                          <Group spacing={"xs"}>
+                            <Text fz={7}>
+                              {new Intl.DateTimeFormat("id-ID", {
+                                timeStyle: "medium",
+                              }).format(e.createdAt)}
+                            </Text>
+                            <IconCircle size={3} />
+                            <Text fz={7}>
+                              {new Intl.DateTimeFormat("id-ID", {
+                                dateStyle: "medium",
+                              }).format(e.createdAt)}
+                            </Text>
+                          </Group>
+                        </Stack>
+                      </Paper>
+                    </Group>
+                  ) : (
+                    <Group>
+                      <Paper key={e.id} bg={"cyan.2"} p={"sm"} mt={"sm"}>
+                        <Stack spacing={0}>
+                          <Text lineClamp={1} fw={"bold"} fz={"xs"}>
+                            {e.User.Profile.name}
+                          </Text>
+                          <div
+                            dangerouslySetInnerHTML={{ __html: e.message }}
+                          />
+                          <Group spacing={"xs"}>
+                            <Text fz={7}>
+                              {new Intl.DateTimeFormat("id-ID", {
+                                timeStyle: "medium",
+                              }).format(e.createdAt)}
+                            </Text>
+                            <IconCircle size={3} />
+                            <Text fz={7}>
+                              {new Intl.DateTimeFormat("id-ID", {
+                                dateStyle: "medium",
+                              }).format(e.createdAt)}
+                            </Text>
+                          </Group>
+                        </Stack>
+                      </Paper>
+                    </Group>
+                  )}
+                </Box>
+              ))
+            )}
+            {/* {isLoading && (
+              <Center>
+                <Loader variant="bars" size={20} color="gray" />
+              </Center>
+            )} */}
+          </div>
+        </Stack>
       </Box>
+      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
 
       <Affix
         bg={"gray.2"}
@@ -154,13 +223,13 @@ export default function Colab_DetailGrupDiskusi({
                 minRows={1}
                 radius={"md"}
                 placeholder="Ketik pesan anda..."
-                value={pesan}
+                value={msg}
-                onChange={(val) => setPesan(val.currentTarget.value)}
+                onChange={(val) => setMsg(val.currentTarget.value)}
               />
             </Grid.Col>
             <Grid.Col span={"content"}>
               <ActionIcon
-                disabled={pesan === "" ? true : false}
+                disabled={msg === "" ? true : false}
                 variant="filled"
                 bg={"cyan"}
                 radius={"xl"}
@@ -177,4 +246,174 @@ export default function Colab_DetailGrupDiskusi({
       </Affix>
     </>
   );
+
+  // const [pesan, setPesan] = useState("");
+  // const [obrolan, setObrolan] = useState<any[]>(listMsg);
+  // const [scroll, scrollTo] = useWindowScroll();
+  // const [isLoading, setIsLoading] = useState(false);
+
+  // const next = async (direction: ScrollDirection) => {
+  //   try {
+  //     setIsLoading(true);
+  //     await new Promise((a) => setTimeout(a, 500));
+  //     const newData = await colab_getMessageByRoomId(roomId);
+
+  //     setObrolan((prev) =>
+  //       direction === "up" ? [...newData, ...prev] : [...prev, ...newData]
+  //     );
+  //   } finally {
+  //     setIsLoading(false);
+  //   }
+  // };
+
+  // const ref = useInfiniteScroll({
+  //   next,
+  //   rowCount: obrolan.length,
+  //   hasMore: { up: true },
+  // });
+
+  // useShallowEffect(() => {
+  //   mqtt_client.subscribe(roomId);
+
+  //   mqtt_client.on("message", (data: any, msg: any) => {
+  //     onList(setObrolan);
+  //   });
+  // }, [setObrolan]);
+
+  // async function onList(setObrolan: any) {
+  //   await colab_getMessageByRoomId(roomId).then((val) => setObrolan(val));
+  // }
+
+  // async function onSend() {
+  //   await colab_funCreateMessageByUserId(pesan, roomId).then(async (res) => {
+  //     if (res.status === 200) {
+  //       mqtt_client.publish(roomId, pesan);
+  //       scrollIntoView();
+  //       setPesan("");
+  //     } else {
+  //       ComponentGlobal_NotifikasiGagal(res.message);
+  //     }
+  //   });
+  // }
+
+  // return (
+  //   <>
+  //     <Box h={"79vh"}>
+  //       {/* <pre>{JSON.stringify(listMsg.map((e) => e.createdAt), null,2)}</pre> */}
+  //       {/* <ScrollArea h={"79vh"} scrollbarSize={2}>
+  //       </ScrollArea> */}
+  //       <Box>
+  //         {_.isEmpty(obrolan) ? (
+  //           <ComponentColab_IsEmptyData text="Belum Ada Pesan" />
+  //         ) : (
+  //           <div
+  //             ref={ref as any}
+  //             style={{
+  //               overflowY: "scroll",
+  //               height: "80vh",
+  //             }}
+  //           >
+  //             {isLoading ? (
+  //               <Center>
+  //                 <Loader color="gray" />
+  //               </Center>
+  //             ) : (
+  //               ""
+  //             )}
+  //             {obrolan.map((e) => (
+  //               <Box key={e.id} pt={"lg"}>
+  //                 {e?.User.id === userLoginId ? (
+  //                   <Group position="right" ref={targetRef as any}>
+  //                     <Paper key={e.id} bg={"blue.2"} p={"sm"}>
+  //                       <Stack spacing={0}>
+  //                         <Text lineClamp={1} fw={"bold"} fz={"xs"}>
+  //                           {e.User.Profile.name}
+  //                         </Text>
+  //                         <Text>{e.message}</Text>
+  //                         <Group spacing={"xs"}>
+  //                           <Text fz={7}>
+  //                             {new Intl.DateTimeFormat("id-ID", {
+  //                               timeStyle: "medium",
+  //                             }).format(e.createdAt)}
+  //                           </Text>
+  //                           <IconCircle size={3} />
+  //                           <Text fz={7}>
+  //                             {new Intl.DateTimeFormat("id-ID", {
+  //                               dateStyle: "medium",
+  //                             }).format(e.createdAt)}
+  //                           </Text>
+  //                         </Group>
+  //                       </Stack>
+  //                     </Paper>
+  //                   </Group>
+  //                 ) : (
+  //                   <Group position="left">
+  //                     <Paper key={e.id} bg={"cyan.2"} p={"sm"} mr={"lg"}>
+  //                       <Stack spacing={0}>
+  //                         <Text lineClamp={1} fw={"bold"} fz={10}>
+  //                           {e.User.Profile.name}
+  //                         </Text>
+  //                         <Text>{e.message}</Text>
+  //                         <Group spacing={"xs"}>
+  //                           <Text fz={7}>
+  //                             {new Intl.DateTimeFormat("id-ID", {
+  //                               timeStyle: "medium",
+  //                             }).format(e.createdAt)}
+  //                           </Text>
+  //                           <IconCircle size={3} />
+  //                           <Text fz={7}>
+  //                             {new Intl.DateTimeFormat("id-ID", {
+  //                               dateStyle: "medium",
+  //                             }).format(e.createdAt)}
+  //                           </Text>
+  //                         </Group>
+  //                       </Stack>
+  //                     </Paper>
+  //                   </Group>
+  //                 )}
+  //               </Box>
+  //             ))}
+  //           </div>
+  //         )}
+  //       </Box>
+  //     </Box>
+
+  //     <Affix
+  //       bg={"gray.2"}
+  //       h={"10vh"}
+  //       position={{ bottom: rem(0) }}
+  //       w={"100%"}
+  //       zIndex={99}
+  //       p={"xs"}
+  //     >
+  //       <Stack justify="center" h={"100%"} px={"sm"}>
+  //         <Grid align="center">
+  //           <Grid.Col span={"auto"}>
+  //             <Textarea
+  //               minRows={1}
+  //               radius={"md"}
+  //               placeholder="Ketik pesan anda..."
+  //               value={pesan}
+  //               onChange={(val) => setPesan(val.currentTarget.value)}
+  //             />
+  //           </Grid.Col>
+  //           <Grid.Col span={"content"}>
+  //             <ActionIcon
+  //               disabled={pesan === "" ? true : false}
+  //               variant="filled"
+  //               bg={"cyan"}
+  //               radius={"xl"}
+  //               size={"xl"}
+  //               onClick={() => {
+  //                 onSend();
+  //               }}
+  //             >
+  //               <IconSend size={20} />
+  //             </ActionIcon>
+  //           </Grid.Col>
+  //         </Grid>
+  //       </Stack>
+  //     </Affix>
+  //   </>
+  // );
 }

src/app_modules/colab/detail/grup/layout.tsx

@@ -116,7 +116,7 @@ export default function LayoutColab_DetailGrupDiskusi({
         </Box>
 
         {/* Children */}
-        <Box p={"sm"} pos={"static"}>
+        <Box py={"xs"} px={"xs"} pos={"static"}>
           <Box
             style={{
               height: 50,

src/app_modules/colab/detail/proyek/saya/index.tsx

@@ -4,6 +4,7 @@ import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
 import ComponentColab_DetailData from "@/app_modules/colab/component/detail/detail_data";
 import ComponentColab_AuthorNameOnListPartisipan from "@/app_modules/colab/component/detail/header_author_list_partisipan";
 import ComponentColab_AuthorNameOnHeader from "@/app_modules/colab/component/header_author_name";
+import ComponentColab_IsEmptyData from "@/app_modules/colab/component/is_empty_data";
 import colab_funCreateRoomChat from "@/app_modules/colab/fun/create/fun_create_room_chat";
 import { gs_colab_hot_menu } from "@/app_modules/colab/global_state";
 import {
@@ -12,6 +13,7 @@ import {
 } from "@/app_modules/colab/model/interface";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
 import {
   Button,
   Checkbox,
@@ -137,20 +139,24 @@ function CheckBoxPartisipan({
             <ScrollArea h={400} offsetScrollbars>
               <Checkbox.Group value={value} onChange={setValue}>
                 <Stack mt="xs">
-                  {listPartisipan.map((e, i) => (
+                  {_.isEmpty(listPartisipan) ? (
-                    <Grid key={e.id} align="center">
+                    <ComponentColab_IsEmptyData text="Tidak Ada Pertisipan" />
-                      <Grid.Col span={"content"}>
+                  ) : (
-                        <Checkbox value={e.User.id} />
+                    listPartisipan.map((e, i) => (
-                      </Grid.Col>
+                      <Grid key={i} align="center">
-                      <Grid.Col span={"auto"}>
+                        <Grid.Col span={"content"}>
-                        <ComponentColab_AuthorNameOnListPartisipan
+                          <Checkbox value={e?.User?.id} />
-                          isPembatas={true}
+                        </Grid.Col>
-                          author={e.User}
+                        <Grid.Col span={"auto"}>
-                          deskripsi={e.deskripsi_diri}
+                          <ComponentColab_AuthorNameOnListPartisipan
-                        />
+                            isPembatas={true}
-                      </Grid.Col>
+                            author={e?.User}
-                    </Grid>
+                            deskripsi={e?.deskripsi_diri}
-                  ))}
+                          />
+                        </Grid.Col>
+                      </Grid>
+                    ))
+                  )}
                 </Stack>
               </Checkbox.Group>
             </ScrollArea>
@@ -176,6 +182,8 @@ function ButtonAction({
   const [loading, setLoading] = useState(false);
 
   async function onSave() {
+    if (nameRoom === "")
+      return ComponentGlobal_NotifikasiPeringatan("Isi Nama Grup");
     await colab_funCreateRoomChat(nameRoom, value, colabId).then((res) => {
       console.log(res);
       if (res.status === 201) {
@@ -185,7 +193,7 @@ function ButtonAction({
         setHotMenu(4);
         router.push(RouterColab.grup_diskusi);
       } else {
-        ComponentGlobal_NotifikasiGagal("Gagal Membuat Grup")
+        ComponentGlobal_NotifikasiGagal("Gagal Membuat Grup");
       }
     });
   }
@@ -194,7 +202,7 @@ function ButtonAction({
     <>
       <Button
         radius={"xl"}
-        // disabled={value.length >= 2 ? false : true}
+        disabled={value.length >= 1 ? false : true}
         onClick={() => {
           open();
         }}

src/app_modules/colab/edit/index.tsx

@@ -114,7 +114,6 @@ export default function Colab_Edit({
         <Textarea
           label="Keuntungan "
           placeholder="Masukan keuntungan dalam proyek"
-          withAsterisk
           minRows={5}
           value={value.benefit}
           onChange={(val) =>

src/app_modules/colab/fun/create/fun_create_room_chat.ts

@@ -45,16 +45,17 @@ export default async function colab_funCreateRoomChat(
   if (!createForAuthor)
     return { status: 400, message: "Gagal Menambahkan Author" };
 
-  // const hideProyek = await prisma.projectCollaboration.update({
+  // PROJECT YANG SUDAH DI CREATE ROOM AKAN DI HIDE AGAR HANYA ADA 1 GRUP UNTUK 1 PROYEK
-  //   where: {
+  const hideProyek = await prisma.projectCollaboration.update({
-  //     id: colabId,
+    where: {
-  //   },
+      id: colabId,
-  //   data: {
+    },
-  //     isActive: false,
+    data: {
-  //   },
+      isActive: false,
-  // });
+    },
+  });
 
-  // if (!hideProyek) return { status: 400, message: "Gagal Menyimpan Proyek" };
+  if (!hideProyek) return { status: 400, message: "Gagal Menyimpan Proyek" };
 
   return { status: 201, message: "Berhasil Membuat Room" };
 }

src/app_modules/colab/fun/get/get_list_partisipan_by_id.ts

@@ -2,7 +2,7 @@
 
 import prisma from "@/app/lib/prisma";
 
-export default async function colab_getListPartisipanById(colabId: string) {
+export default async function colab_getListPartisipanByColabId(colabId: string) {
   const data = await prisma.projectCollaboration_Partisipasi.findMany({
     where: {
       projectCollaborationId: colabId,

src/app_modules/colab/fun/get/get_list_partisipasi_proyek_by_author_id.ts

@@ -3,7 +3,7 @@
 import prisma from "@/app/lib/prisma";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 
-export default async function colab_getListPartisipasiByAuthorId() {
+export default async function colab_getListPartisipasiProyekByAuthorId() {
   const AuthorId = await user_getOneUserId();
 
   const get = await prisma.projectCollaboration_Partisipasi.findMany({

src/app_modules/colab/fun/get/room_chat/get_message_by_room_id.ts

@@ -1,13 +1,21 @@
 "use server";
 
 import prisma from "@/app/lib/prisma";
+import _ from "lodash";
 
-export default async function colab_getMessageByRoomId(roomId: string) {
+export default async function colab_getMessageByRoomId(
+  roomId: string,
+  page: number
+) {
+  // console.log(page)
+  const lewat = page * 5 - 5;
+  const ambil = 5;
   const getList = await prisma.projectCollaboration_Message.findMany({
     orderBy: {
       createdAt: "desc",
     },
-    take : 8,
+    skip: lewat,
+    take: ambil,
     where: {
       projectCollaboration_RoomChatId: roomId,
     },
@@ -31,5 +39,7 @@ export default async function colab_getMessageByRoomId(roomId: string) {
     },
   });
 
+  const dataRevers = _.reverse(getList);
+
   return getList;
 }

src/app_modules/colab/main/pemberitahuan/index.tsx

@@ -1,11 +1,14 @@
-"use client"
+"use client";
 
-import { Text, Title } from "@mantine/core";
+import { Center, Text, Title } from "@mantine/core";
+import ComponentColab_IsEmptyData from "../../component/is_empty_data";
 
 export default function Colab_NotifikasiView() {
   return (
     <>
-      <Text>ini notif</Text>
+      <Center>
+        <ComponentColab_IsEmptyData text="Cooming Soon" />
+      </Center>
     </>
   );
 }

src/app_modules/zCoba/index.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import {
+  Box,
+  Center,
+  Group,
+  LoadingOverlay,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { useState } from "react";
+
+import useInfiniteScroll, {
+  ScrollDirection,
+} from "react-easy-infinite-scroll-hook";
+import { createItems, loadMore } from "./utils";
+import { v4 as uuidv4 } from "uuid";
+import { useShallowEffect } from "@mantine/hooks";
+
+export default function Coba_TestLoading() {
+  const [data, setData] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const next = async (direction: ScrollDirection) => {
+    try {
+      setIsLoading(true);
+      const newData = await loadMore();
+
+      setData((prev) =>
+        direction === "up" ? [...newData, ...prev] : [...prev, ...newData]
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const ref = useInfiniteScroll({
+    next,
+    rowCount: data.length,
+    hasMore: { up: true },
+  });
+
+  useShallowEffect(() => {
+    const d = createItems();
+    setData([...d]);
+  }, []);
+
+  //   const next = async (direction: ScrollDirection) => {
+  // setIsLoading(true);
+  // const ar = Array.from({ length: 100 }).map((v, i) => "baru" + i);
+  // const d = direction === "up" ? [...ar, ...obrolan] : [];
+  // console.log(d);
+  // setObrolan(d);
+  // await new Promise((r) => setTimeout(r, 100));
+  // setIsLoading(false);
+  //   };
+
+  //   const ref = useInfiniteScroll({
+  //     next,
+  //     rowCount: obrolan.length,
+  //     hasMore: { up: true },
+  //   });
+
+  useShallowEffect(() => {
+    // const a = Array.from({ length: 100 }).map((x) => "apa");
+    // setObrolan(a);
+    // mqtt_client.subscribe(roomId);
+    // mqtt_client.on("message", (data: any, msg: any) => {
+    //   onList(setObrolan);
+    // });
+  }, []);
+
+  return (
+    <>
+      <Box p={"lg"}>
+        <div
+          ref={ref as any}
+          style={{
+            height: "90vh",
+            overflowY: "auto",
+          }}
+        >
+          {isLoading && <div>Loading...</div>}
+          <Stack>
+            {data.map((item, index) => (
+              <Paper key={index} p={"md"} bg={"blue.1"}>
+                <Text>{item}</Text>
+              </Paper>
+            ))}
+          </Stack>
+        </div>
+      </Box>
+    </>
+  );
+}
+
+// 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>
+//   );
+
+//   return (
+//     <>
+//       <LoadingOverlay visible overlayBlur={2} loader={customLOader} />
+//     </>
+//   );
+// }

src/app_modules/zCoba/utils.ts

@@ -0,0 +1,11 @@
+import { v4 as uuidv4 } from "uuid";
+
+export const createItems = (length = 10): string[] =>
+  Array.from({ length }).map(() => uuidv4());
+
+export const loadMore = async (length = 10): Promise<string[]> =>
+  new Promise((res) => setTimeout(() => res(createItems(length)), 100));
+
+// export const listData = Array(100)
+//   .fill(0)
+//   .map(() => uuidv4());

yarn.lock

@@ -3862,6 +3862,11 @@ react-dropzone-esm@15.0.1:
   dependencies:
     prop-types "^15.8.1"
 
+react-easy-infinite-scroll-hook@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/react-easy-infinite-scroll-hook/-/react-easy-infinite-scroll-hook-2.1.4.tgz#6b61ba1d9dbf17a28d5b99e7513e281b4b61159f"
+  integrity sha512-sRbQGWh4BjSvCHTUGQwqf6PtMsOJWYl+RQ7h7BagmNpoWRi+Q/X8qwMZJ5WyzZS6U5vi3OrSGAfjLFPKp73jrg==
+
 react-easy-swipe@^0.0.21:
   version "0.0.21"
   resolved "https://registry.yarnpkg.com/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz#ce9384d576f7a8529dc2ca377c1bf03920bac8eb"