*/}
- {feeds.map((mid, idx) => {
- const curr = messageData[mid];
- if (!curr) return null;
- const isFirst = idx == 0;
- const prev =
- idx == feeds.length - 1 ? null : messageData[feeds[idx + 1]];
- const read = curr?.from_uid == loginUid || mid <= readIndex;
- return renderMessageFragment({
- selectMode: !!selects,
- updateReadIndex: updateReadDebounced,
- read,
- isFirst,
- prev,
- curr,
- contextId: cid,
- context: "channel",
- });
- })}
+ {/* */}
{hasMore ? (
-
+
+
+
+ }
+ contacts={
+ membersVisible ? (
+ <>
+
+ {addVisible && (
+
+
+ ) : null
+ }
+ >
+
+ {/*
+ {/* {unreads != 0 && (
+
+
+ )} */}
+
+
+ );
+}
diff --git a/src/routes/chat/ChannelChat/styled.js b/src/routes/chat/ChannelChat/styled.js
index 0c636961..c5c55970 100644
--- a/src/routes/chat/ChannelChat/styled.js
+++ b/src/routes/chat/ChannelChat/styled.js
@@ -88,14 +88,15 @@ export const StyledChannelChat = styled.article`
height: -webkit-fill-available;
overflow-x: hidden;
overflow-y: auto;
+ /* overflow-anchor: none; */
/* pagination start */
- transform: rotate(180deg);
+ /* transform: rotate(180deg);
direction: rtl;
> div,
> hr {
direction: ltr;
transform: rotate(180deg);
- }
+ } */
/* pagination end */
> .info {
padding-top: 62px;
diff --git a/src/routes/chat/utils.js b/src/routes/chat/utils.js
index ab2b9a83..52394d18 100644
--- a/src/routes/chat/utils.js
+++ b/src/routes/chat/utils.js
@@ -182,6 +182,7 @@ export const renderMessageFragment = ({
console.log("_key", _key, local_id, mid);
return (
+ {divider &&
);
// React.memo(
Welcome to #{name} !
@@ -267,6 +247,25 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) { */}
+ {feeds.map((mid, idx) => {
+ const curr = messageData[mid];
+ if (!curr) return null;
+ const isFirst = idx == 0;
+ const prev = isFirst ? null : messageData[feeds[idx - 1]];
+ const read = curr?.from_uid == loginUid || mid <= readIndex;
+ return renderMessageFragment({
+ selectMode: !!selects,
+ updateReadIndex: updateReadDebounced,
+ read,
+ isFirst,
+ prev,
+ curr,
+ contextId: cid,
+ context: "channel",
+ });
+ })}
+
{/*
*/}
{/* {unreads != 0 && (
diff --git a/src/routes/chat/ChannelChat/index.reverse.pagination.js b/src/routes/chat/ChannelChat/index.reverse.pagination.js
new file mode 100644
index 00000000..dfd99a71
--- /dev/null
+++ b/src/routes/chat/ChannelChat/index.reverse.pagination.js
@@ -0,0 +1,288 @@
+import { useState, useEffect } from "react";
+import { useDebounce } from "rooks";
+import { NavLink, useLocation } from "react-router-dom";
+import Tippy from "@tippyjs/react";
+import { useDispatch, useSelector } from "react-redux";
+// import InfiniteScroll from "react-infinite-scroll-component";
+import PinList from "./PinList";
+import FavList from "../FavList";
+import { useReadMessageMutation } from "../../../app/services/message";
+import { updateRemeberedNavs } from "../../../app/slices/ui";
+// import useChatScroll from "../../../common/hook/useChatScroll";
+import useMessageFeed from "../../../common/hook/useMessageFeed";
+
+import ChannelIcon from "../../../common/component/ChannelIcon";
+import Tooltip from "../../../common/component/Tooltip";
+import Contact from "../../../common/component/Contact";
+import Layout from "../Layout";
+import { renderMessageFragment } from "../utils";
+import EditIcon from "../../../assets/icons/edit.svg";
+// import alertIcon from "../../../assets/icons/alert.svg?url";
+import IconFav from "../../../assets/icons/bookmark.svg";
+import IconPeople from "../../../assets/icons/people.svg";
+import IconPin from "../../../assets/icons/pin.svg";
+// import searchIcon from "../../../assets/icons/search.svg?url";
+import IconHeadphone from "../../../assets/icons/headphone.svg";
+import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
+import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
+import addIcon from "../../../assets/icons/add.svg?url";
+import {
+ // StyledNotification,
+ StyledContacts,
+ StyledChannelChat,
+ StyledHeader,
+} from "./styled";
+import InviteModal from "../../../common/component/InviteModal";
+import LoadMore from "./LoadMore";
+
+export default function ChannelChat({ cid = "", dropFiles = [] }) {
+ const { list: msgIds, prepends, hasMore, pullDown } = useMessageFeed({
+ context: "channel",
+ id: cid,
+ });
+ const [toolVisible, setToolVisible] = useState("");
+ const { pathname } = useLocation();
+ const dispatch = useDispatch();
+ const [updateReadIndex] = useReadMessageMutation();
+ const updateReadDebounced = useDebounce(updateReadIndex, 300);
+ const [membersVisible, setMembersVisible] = useState(true);
+ const [addMemberModalVisible, setAddMemberModalVisible] = useState(false);
+ const {
+ selects,
+ // msgIds,
+ userIds,
+ data,
+ messageData,
+ loginUid,
+ loginUser,
+ footprint,
+ } = useSelector((store) => {
+ return {
+ selects: store.ui.selectMessages[`channel_${cid}`],
+ footprint: store.footprint,
+ loginUser: store.contacts.byId[store.authData.uid],
+ loginUid: store.authData.uid,
+ // msgIds: store.channelMessage[cid] || [],
+ userIds: store.contacts.ids,
+ data: store.channels.byId[cid] || {},
+ messageData: store.message || {},
+ };
+ });
+ // const ref = useChatScroll(msgIds);
+ // const handleClearUnreads = () => {
+ // dispatch(readMessage(msgIds));
+ // };
+ useEffect(() => {
+ dispatch(updateRemeberedNavs());
+ return () => {
+ dispatch(updateRemeberedNavs({ path: pathname }));
+ };
+ }, [pathname]);
+
+ const toggleMembersVisible = () => {
+ setMembersVisible((prev) => !prev);
+ };
+ const toggleAddVisible = () => {
+ setAddMemberModalVisible((prev) => !prev);
+ };
+ if (!data) return null;
+ const { name, description, is_public, members = [], owner } = data;
+ const memberIds = is_public
+ ? userIds
+ : members.slice(0).sort((n) => (n == owner ? -1 : 0));
+ const addVisible = loginUser?.is_admin || owner == loginUid;
+ console.log("channel message list", msgIds);
+ const readIndex = footprint.readChannels[cid];
+ const pinCount = data?.pinned_messages?.length || 0;
+ const feeds = [...prepends, ...msgIds];
+ return (
+ <>
+ {addMemberModalVisible && (
+ -
+
-
+
+ ++
+ - 0 ? "badge" : ""} ${
+ toolVisible == "pin" ? "active" : ""
+ } `}
+ data-count={pinCount}
+ >
+
+
+ -
+
+
+ -
+
+ ++
+
+
-
+
-
+
+ ++
+ -
+
+ ++
+
+
+
+ 
+
+ )}
+ {memberIds.map((uid) => {
+ return (
+ Add members
+ */}
+ {feeds.map((mid, idx) => {
+ const curr = messageData[mid];
+ if (!curr) return null;
+ const isFirst = idx == 0;
+ const prev =
+ idx == feeds.length - 1 ? null : messageData[feeds[idx + 1]];
+ const read = curr?.from_uid == loginUid || mid <= readIndex;
+ return renderMessageFragment({
+ selectMode: !!selects,
+ updateReadIndex: updateReadDebounced,
+ read,
+ isFirst,
+ prev,
+ curr,
+ contextId: cid,
+ context: "channel",
+ });
+ })}
+ {hasMore ? (
+
*/}
+
+
+
+
+ )}
+ {/* Welcome to #{name} !
+This is the start of the #{name} channel.
+
+ {unreads} new messages
+ {msgs.lastAccess
+ ? `since ${dayjs(msgs.lastAccess).format("YYYY-MM-DD h:mm:ss A")}`
+ : ""}
+
+
+