Test realtime by mas malik

src/app/makuro/_ui/RealtimePage.tsx

@@ -0,0 +1,34 @@
+"use client";
+import { Button, Group, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useWibuRealtime } from "wibu-realtime";
+
+export function RealtimePage({ token }: { token: string }) {
+  const [data, setData] = useWibuRealtime({
+    project: "hipmi",
+    WIBU_REALTIME_TOKEN: token,
+  });
+
+  useShallowEffect(() => {
+    if (data) {
+      console.log(data);
+    }
+  }, [data]);
+
+  function onKirim() {
+    setData({
+      id: "123",
+      data: Math.random().toString(),
+    });
+  }
+  return (
+    <Stack p={"lg"}>
+      <Group>
+        <Stack>
+          {JSON.stringify(data)}
+          <Button onClick={onKirim}> Tekan Aja</Button>
+        </Stack>
+      </Group>
+    </Stack>
+  );
+}

src/app/makuro/page.tsx

@@ -1,9 +1,14 @@
 import { ServerEnv } from "../lib/server_env";
+import { RealtimePage } from "./_ui/RealtimePage";
+const env = process.env;
+const WIBU_REALTIME_KEY = process.env.WIBU_REALTIME_KEY;
 
 export default function App() {
   return (
     <div>
-      <pre>{JSON.stringify(ServerEnv.value, null, 2)}</pre>
+      {/* <pre>{JSON.stringify(env, null, 2)}</pre>
+      <pre>{JSON.stringify(ServerEnv.value, null, 2)}</pre> */}
+      <RealtimePage token={WIBU_REALTIME_KEY as string} />
     </div>
   );
 }

src/app_modules/home/component/ui_home.tsx

@@ -251,12 +251,12 @@ const listHalamanFooter = [
     link: RouterForum.splash,
   },
 
-  {
-    id: 2,
-    name: "MarketPlace",
-    icon: <IconShoppingBag />,
-    link: "",
-  },
+  // {
+  //   id: 2,
+  //   name: "MarketPlace",
+  //   icon: <IconShoppingBag />,
+  //   link: "",
+  // },
   {
     id: 3,
     name: "Business Maps",
@@ -281,7 +281,7 @@ export function Home_UiFooter({ dataUser }: { dataUser: MODEL_USER }) {
         bottom={0}
         h={"9vh"}
       >
-        <SimpleGrid cols={4}>
+        <SimpleGrid cols={listHalamanFooter.length + 1}>
           {listHalamanFooter.map((e, i) => (
             <Center h={"9vh"} key={e.id}>
               <Stack align="center" spacing={0}>