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

Loading chat otomatis

Browse Source
This commit is contained in:
Bagasbanuna02
2024-05-10 16:38:09 +08:00
parent dc41a5f9af
commit c57e495d68
4 changed files with 60 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@ import _ from "lodash";
export default async function Page({ params }: { params: { id: string } }) { export default async function Page({ params }: { params: { id: string } }) {
let roomId = params.id; let roomId = params.id;
const userLoginId = await user_getOneUserId(); const userLoginId = await user_getOneUserId();
let listMsg = await colab_getMessageByRoomId(roomId, 1); let listMsg = await colab_getMessageByRoomId({ page: 1, roomId: roomId });
return ( return (
<> <>

54
src/app_modules/colab/detail/group/index.tsx
View File

@@ -57,36 +57,36 @@ export default function Colab_GroupChatView({
const viewport = useRef<HTMLDivElement>(null); const viewport = useRef<HTMLDivElement>(null);
const next = async (direction: ScrollDirection) => { // const next = async (direction: ScrollDirection) => {
try { // try {
setIsLoading(true); // setIsLoading(true);
await new Promise((a) => setTimeout(a, 500)); // await new Promise((a) => setTimeout(a, 500));
const newData = await colab_getMessageByRoomId({ // const newData = await colab_getMessageByRoomId({
roomId: selectRoom?.id, // roomId: selectRoom?.id,
page: totalPage + 1, // page: totalPage + 1,
}); // });
setTotalPage(totalPage + 1); // setTotalPage(totalPage + 1);
// console.log(newData, "loading baru"); // // console.log(newData, "loading baru");
if (_.isEmpty(newData)) { // if (_.isEmpty(newData)) {
setIsGet(false); // setIsGet(false);
} else { // } else {
const d = // const d =
direction === "down" ? [...data, ...newData] : [...newData, ...data]; // direction === "down" ? [...data, ...newData] : [...newData, ...data];
setData(d); // setData(d);
} // }
} finally { // } finally {
setIsLoading(false); // setIsLoading(false);
} // }
}; // };
const ref = useInfiniteScroll({ // const ref = useInfiniteScroll({
next, // next,
rowCount: data.length, // rowCount: data.length,
hasMore: { up: isGet }, // hasMore: { up: isGet },
}); // });
useShallowEffect(() => { useShallowEffect(() => {
mqtt_client.subscribe(selectRoom.id); mqtt_client.subscribe(selectRoom.id);
@@ -186,7 +186,7 @@ export default function Colab_GroupChatView({
<Box h={"80vh"}> <Box h={"80vh"}>
<Stack justify="flex-end" h={"100%"}> <Stack justify="flex-end" h={"100%"}>
<div <div
ref={ref as any} // ref={ref as any}
style={{ style={{
overflowY: "auto", overflowY: "auto",
}} }}

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

@@ -53,36 +53,35 @@ export default function Colab_DetailGrupDiskusi({
const [data, setData] = useState<any[]>(listMsg as any); const [data, setData] = useState<any[]>(listMsg as any);
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [scroll, scrollTo] = useWindowScroll();
const [isGet, setIsGet] = useState(true); const [isGet, setIsGet] = useState(true);
const next = async (direction: ScrollDirection) => { // const next = async (direction: ScrollDirection) => {
try { // try {
setIsLoading(true); // setIsLoading(true);
await new Promise((a) => setTimeout(a, 100)); // await new Promise((a) => setTimeout(a, 100));
setPage(page + 1); // setPage(page + 1);
const newData = await colab_getMessageByRoomId(roomId, page + 1); // const newData = await colab_getMessageByRoomId(roomId, page + 1);
console.log(newData); // console.log(newData);
if (_.isEmpty(newData)) { // if (_.isEmpty(newData)) {
setIsGet(false); // setIsGet(false);
} else { // } else {
setData((prev) => (direction === "up" ? [...newData, ...prev] : [])); // setData((prev) => (direction === "up" ? [...newData, ...prev] : []));
} // }
} finally { // } finally {
setIsLoading(false); // setIsLoading(false);
} // }
}; // };
const ref = useInfiniteScroll({ // const ref = useInfiniteScroll({
next, // next,
rowCount: data.length, // rowCount: data.length,
hasMore: { up: isGet }, // hasMore: { up: isGet },
scrollThreshold: 0.1, // scrollThreshold: 0.1,
initialScroll: { top: 100 }, // initialScroll: { top: 100 },
}); // });
useShallowEffect(() => { useShallowEffect(() => {
mqtt_client.subscribe(roomId); mqtt_client.subscribe(roomId);
@@ -93,7 +92,9 @@ export default function Colab_DetailGrupDiskusi({
}, [setData]); }, [setData]);
async function onList(setData: any) { async function onList(setData: any) {
await colab_getMessageByRoomId(roomId, page).then((val) => setData(val)); await colab_getMessageByRoomId({ page: page, roomId: roomId }).then((val) =>
setData(val)
);
} }
async function onSend() { async function onSend() {
@@ -107,12 +108,13 @@ export default function Colab_DetailGrupDiskusi({
}); });
} }
return ( return (
<> <>
<Box h={"80vh"} bg={"blue.1"}> <Box h={"80vh"} bg={"blue.1"}>
<Stack justify="flex-end" h={"100%"}> <Stack justify="flex-end" h={"100%"}>
<div <div
ref={ref as any}
style={{ style={{
// overflow: "scroll", // overflow: "scroll",
overflowY: "auto", overflowY: "auto",

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

@@ -41,5 +41,8 @@ export default async function colab_getMessageByRoomId({
}, },
}); });
return getList;
const reverse = _.reverse(getList)
return reverse;
} }