Collaboration: Room chat

# feat
- chatting antar user
- lihat info grup
## No issue

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

@@ -11,11 +11,14 @@ export default async function Layout({
   params: { id: string };
 }) {
   let roomId = params.id;
-  // const listAnggota = await colab_getListAnggotaByRoomId(roomId);
+  const dataRoom = await colab_getListAnggotaByRoomId(roomId);
+  
 
   return (
     <>
-      <LayoutColab_DetailGrupDiskusi>{children}</LayoutColab_DetailGrupDiskusi>
+      <LayoutColab_DetailGrupDiskusi dataRoom={dataRoom as any}>
+        {children}
+      </LayoutColab_DetailGrupDiskusi>
     </>
   );
 }

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

@@ -1,15 +1,18 @@
 import { Colab_DetailGrupDiskusi } from "@/app_modules/colab";
 import colab_getMessageByRoomId from "@/app_modules/colab/fun/get/room_chat/get_message_by_room_id";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+import _ from "lodash";
 
 export default async function Page({ params }: { params: { id: string } }) {
   let roomId = params.id;
-  const listMsg = await colab_getMessageByRoomId(roomId);
   const userLoginId = await user_getOneUserId()
+  let listMsg = await colab_getMessageByRoomId(roomId);
+  const reserveMsg = _.reverse(listMsg)
+  
 
   return (
     <>
-      <Colab_DetailGrupDiskusi roomId={roomId} listMsg={listMsg} userLoginId={userLoginId}/>
+      <Colab_DetailGrupDiskusi roomId={roomId} listMsg={reserveMsg} userLoginId={userLoginId}/>
     </>
   );
 }

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

@@ -0,0 +1,14 @@
+import prisma from "@/app/lib/prisma";
+import { Colab_DetailInfoGrup } from "@/app_modules/colab";
+import colab_getListAnggotaByRoomId from "@/app_modules/colab/fun/get/room_chat/get_list_anggota_by_room_id";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  let roomId = params.id;
+  const dataRoom = await colab_getListAnggotaByRoomId(roomId)
+
+  return (
+    <>
+      <Colab_DetailInfoGrup dataRoom={dataRoom as any} />
+    </>
+  );
+}

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

@@ -13,13 +13,14 @@ export default async function Layout({
   const colabId = params.id;
   const dataColab = await colab_getOneCollaborationById(colabId);
   const authorId = dataColab?.Author?.id;
-  const userLoginId = await user_getOneUserId()
-  console.log(authorId)
-  console.log(userLoginId)
+  const userLoginId = await user_getOneUserId();
 
   return (
     <>
-      <LayoutColab_MainDetail colabId={colabId} isAuthor={authorId === userLoginId ? true : false}>
+      <LayoutColab_MainDetail
+        colabId={colabId}
+        isAuthor={authorId === userLoginId ? true : false}
+      >
         {children}
       </LayoutColab_MainDetail>
     </>

src/app/layout.tsx

@@ -1,11 +1,11 @@
-// import MqttLoader from '@/util/mqtt_loader';
+import MqttLoader from '@/util/mqtt_loader';
 import RootStyleRegistry from './emotion';
 
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <RootStyleRegistry>
-      {/* <MqttLoader /> */}
+      <MqttLoader />
       {children}</RootStyleRegistry>
   );
 }

src/app/lib/router_hipmi/router_colab.ts

@@ -21,6 +21,7 @@ export const RouterColab = {
   detail_partisipasi_proyek: "/dev/colab/detail/proyek/partisipasi/",
   detail_proyek_saya: "/dev/colab/detail/proyek/saya/",
   detail_grup: "/dev/colab/detail/grup/",
+  info_grup: "/dev/colab/detail/info-grup/",
 
   // proyek
 };

src/app/makuro/page.tsx

@@ -13,104 +13,89 @@ import {
   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";
-
-// export default function Page() {
-//   const [data1, setData1] = useState("");
-//   const [data2, setData2] = useState("");
-
-//   const [msg, setMsg] = useAtom(gs_coba_chat);
-
-//   return (
-//     <>
-//       <SimpleGrid cols={2} mt={"lg"}>
-//         <Stack align="center" justify="center">
-//           <TextInput
-//             label="User 1"
-//             value={data1}
-//             onChange={(val) => setData1(val.currentTarget.value)}
-//           />
-//           <button
-//             onClick={() => {
-//               mqtt_client.publish("example_hipmi", data1);
-//               setData1("");
-//             }}
-//           >
-//             kirim
-//           </button>
-//         </Stack>
-//         <Stack align="center" justify="center">
-//           <TextInput
-//             label="User 2"
-//             value={data2}
-//             onChange={(val) => setData2(val.currentTarget.value)}
-//           />
-//           <button
-//             onClick={() => {
-//               mqtt_client.publish("example_hipmi", data2);
-//               setData2("");
-//             }}
-//           >
-//             kirim
-//           </button>
-//         </Stack>
-//       </SimpleGrid>
-//       <Stack align="center" justify="center" mt={"xl"}>
-//         <Paper withBorder shadow="lg" p={"lg"}>
-//           {msg}
-//         </Paper>
-//       </Stack>
-//       {/* <ViewMakuro /> */}
-//     </>
-//   );
-// }
+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 { useShallowEffect } from "@mantine/hooks";
 
 export default function Page() {
+  const [pesan, setPesan] = useState("");
+  const [ini, setIni] = useState("");
+
+  useShallowEffect(() => {
+    mqtt_client.subscribe("apa");
+
+    mqtt_client.on("message", (data: any, msg: any) => {
+      console.log( msg.toString());
+      setIni(msg.toString());
+    });
+  }, []);
+
   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>
+    <>
+      <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>
+    </>
   );
 }
+
+// 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>
+//   );
+// }