wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Loading Room Chat

Browse Source 
# feat
- Loading otomastis scroll chat
## No Isuuee
This commit is contained in:
Bagasbanuna02
2024-05-01 13:39:06 +08:00
parent 2a4d2951af
commit c34f9a9b75
24 changed files with 610 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -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",

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

@@ -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}
/>
</>
);
}

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

@@ -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 (

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

@@ -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 (
<>

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

@@ -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 (
<>

6
src/app/dev/colab/main/proyek/page.tsx
View File

@@ -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}
/>
</>

9
src/app/makuro/_util.ts Normal file
View File

@@ -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));
};

134
src/app/makuro/page.tsx
View File

@@ -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>
// );
// }

48
src/app/zCoba/page.tsx
View File

@@ -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 />
</>
);
}

6
src/app_modules/colab/component/detail/detail_data.tsx
View File

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

3
src/app_modules/colab/component/detail/header_author_list_partisipan.tsx
View File

@@ -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>
) : (
""

4
src/app_modules/colab/component/detail/list_partisipasi_user.tsx
View File

@@ -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);

407
src/app_modules/colab/detail/grup/index.tsx
View File

@@ -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 [obrolan, setObrolan] = useState<any[]>(listMsg);
const [msg, setMsg] = useState("");
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) {
await colab_getMessageByRoomId(roomId).then((val) =>
setObrolan(_.reverse(val))
);
async function onList(setData: any) {
await colab_getMessageByRoomId(roomId, page).then((val) => setData(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);
setPesan("");
mqtt_client.publish(roomId, msg);
setMsg("");
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
});
}
// if (_.isEmpty(listMsg))
// return <ComponentColab_IsEmptyData text="Belum Ada Pesan" />;
return (
<>
<Box h={"79vh"}>
{/* <pre>{JSON.stringify(listMsg.map((e) => e.createdAt), null,2)}</pre> */}
<ScrollArea h={"79vh"} scrollbarSize={2}>
<Box>
{_.isEmpty(obrolan) ? (
<ComponentColab_IsEmptyData text="Belum Ada Pesan" />
) : (
<Stack>
{obrolan.map((e) => (
<Box key={e.id}>
{e?.User.id === userLoginId ? (
<Group position="right">
<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>
))}
</Stack>
<Box h={"80vh"}>
<Stack justify="flex-end" h={"100%"}>
<div
ref={ref as any}
style={{
overflow: "scroll",
overflowY: "auto",
// height: "100vh",
// justifyContent: "flex-end",
// flexDirection: "column",
// display: "flex",
}}
>
{isLoading && (
<Center>
<Loader size={20} color="gray" />
</Center>
)}
</Box>
</ScrollArea>
{_.isEmpty(data) ? (
<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}
onChange={(val) => setPesan(val.currentTarget.value)}
value={msg}
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>
// </>
// );
}

2
src/app_modules/colab/detail/grup/layout.tsx
View File

@@ -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,

40
src/app_modules/colab/detail/proyek/saya/index.tsx
View File

@@ -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) => (
<Grid key={e.id} align="center">
<Grid.Col span={"content"}>
<Checkbox value={e.User.id} />
</Grid.Col>
<Grid.Col span={"auto"}>
<ComponentColab_AuthorNameOnListPartisipan
isPembatas={true}
author={e.User}
deskripsi={e.deskripsi_diri}
/>
</Grid.Col>
</Grid>
))}
{_.isEmpty(listPartisipan) ? (
<ComponentColab_IsEmptyData text="Tidak Ada Pertisipan" />
) : (
listPartisipan.map((e, i) => (
<Grid key={i} align="center">
<Grid.Col span={"content"}>
<Checkbox value={e?.User?.id} />
</Grid.Col>
<Grid.Col span={"auto"}>
<ComponentColab_AuthorNameOnListPartisipan
isPembatas={true}
author={e?.User}
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();
}}

1
src/app_modules/colab/edit/index.tsx
View File

@@ -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) =>

19
src/app_modules/colab/fun/create/fun_create_room_chat.ts
View File

@@ -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({
// where: {
// id: colabId,
// },
// data: {
// isActive: false,
// },
// });
// PROJECT YANG SUDAH DI CREATE ROOM AKAN DI HIDE AGAR HANYA ADA 1 GRUP UNTUK 1 PROYEK
const hideProyek = await prisma.projectCollaboration.update({
where: {
id: colabId,
},
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" };
}

2
src/app_modules/colab/fun/get/get_list_partisipan_by_id.ts
View File

@@ -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,

2
src/app_modules/colab/fun/get/get_list_partisipasi_by_author_id.ts → src/app_modules/colab/fun/get/get_list_partisipasi_proyek_by_author_id.ts
View File

@@ -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({

14
src/app_modules/colab/fun/get/room_chat/get_message_by_room_id.ts
View File

@@ -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;
}

9
src/app_modules/colab/main/pemberitahuan/index.tsx
View File

@@ -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>
</>
);
}

137
src/app_modules/zCoba/index.tsx Normal file
View File

@@ -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} />
// </>
// );
// }

11
src/app_modules/zCoba/utils.ts Normal file
View File

@@ -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());

5
yarn.lock
View File

@@ -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"