Loading chat otomatis

This commit is contained in:
2024-05-10 16:38:09 +08:00
parent dc41a5f9af
commit c57e495d68
4 changed files with 60 additions and 55 deletions

View File

@@ -6,7 +6,7 @@ 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, 1);
let listMsg = await colab_getMessageByRoomId({ page: 1, roomId: roomId });
return (
<>

View File

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

View File

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

View File

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