mirror of
https://github.com/spacebarchat/client.git
synced 2024-11-21 18:02:32 +01:00
revert new message list
This commit is contained in:
Puyodead1
parent
a8c91ca7a5
commit
1634a98e03
@ -48,11 +48,11 @@
|
||||
"react": "^18.2.0",
|
||||
"react-advanced-cropper": "^0.19.6",
|
||||
"react-colorful": "^5.6.1",
|
||||
"react-content-loader": "^7.0.2",
|
||||
"react-device-detect": "^2.2.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-fps-stats": "^0.3.1",
|
||||
"react-hook-form": "^7.51.3",
|
||||
"react-infinite-scroll-component": "^6.1.0",
|
||||
"react-loading-skeleton": "^3.4.0",
|
||||
"react-markdown": "^9.0.1",
|
||||
"react-measure": "^2.5.2",
|
||||
@ -71,7 +71,6 @@
|
||||
"reoverlay": "^1.0.3",
|
||||
"styled-components": "5.3.11",
|
||||
"use-resize-observer": "^9.1.0",
|
||||
"virtua": "^0.33.1",
|
||||
"yup": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -137,9 +137,6 @@ dependencies:
|
||||
react-colorful:
|
||||
specifier: ^5.6.1
|
||||
version: 5.6.1(react-dom@18.2.0)(react@18.2.0)
|
||||
react-content-loader:
|
||||
specifier: ^7.0.2
|
||||
version: 7.0.2(react@18.2.0)
|
||||
react-device-detect:
|
||||
specifier: ^2.2.3
|
||||
version: 2.2.3(react-dom@18.2.0)(react@18.2.0)
|
||||
@ -152,6 +149,9 @@ dependencies:
|
||||
react-hook-form:
|
||||
specifier: ^7.51.3
|
||||
version: 7.51.3(react@18.2.0)
|
||||
react-infinite-scroll-component:
|
||||
specifier: ^6.1.0
|
||||
version: 6.1.0(react@18.2.0)
|
||||
react-loading-skeleton:
|
||||
specifier: ^3.4.0
|
||||
version: 3.4.0(react@18.2.0)
|
||||
@ -206,9 +206,6 @@ dependencies:
|
||||
use-resize-observer:
|
||||
specifier: ^9.1.0
|
||||
version: 9.1.0(react-dom@18.2.0)(react@18.2.0)
|
||||
virtua:
|
||||
specifier: ^0.33.1
|
||||
version: 0.33.1(react-dom@18.2.0)(react@18.2.0)
|
||||
yup:
|
||||
specifier: ^1.4.0
|
||||
version: 1.4.0
|
||||
@ -12959,15 +12956,6 @@ packages:
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/react-content-loader@7.0.2(react@18.2.0):
|
||||
resolution: {integrity: sha512-773S98JTyC8VB2nu7LXUhpHx8tZMieGxMcx3qTe7IkohT6Br7d9AXnIXs/wQ6IhlUdKQcw6JLKk1QKigYCWDRA==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
react: '>=16.0.0'
|
||||
dependencies:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/react-dev-utils@12.0.1(eslint@8.57.0)(typescript@5.4.5)(webpack@5.90.3):
|
||||
resolution: {integrity: sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==}
|
||||
engines: {node: '>=14'}
|
||||
@ -13064,6 +13052,15 @@ packages:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/react-infinite-scroll-component@6.1.0(react@18.2.0):
|
||||
resolution: {integrity: sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==}
|
||||
peerDependencies:
|
||||
react: '>=16.0.0'
|
||||
dependencies:
|
||||
react: 18.2.0
|
||||
throttle-debounce: 2.3.0
|
||||
dev: false
|
||||
|
||||
/react-is@16.13.1:
|
||||
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
|
||||
|
||||
@ -14803,6 +14800,11 @@ packages:
|
||||
/throat@6.0.2:
|
||||
resolution: {integrity: sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==}
|
||||
|
||||
/throttle-debounce@2.3.0:
|
||||
resolution: {integrity: sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==}
|
||||
engines: {node: '>=8'}
|
||||
dev: false
|
||||
|
||||
/through2@2.0.5:
|
||||
resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
|
||||
dependencies:
|
||||
@ -15289,30 +15291,6 @@ packages:
|
||||
vfile-message: 4.0.2
|
||||
dev: false
|
||||
|
||||
/virtua@0.33.1(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-xOzF5J+4KN12w1k7rNbocxjLYrWmGP2gXEDXqcHz7zWkf2vrCrsP/N3M/m3RhME/f/bNc5X22cvpIPqQeOP2MA==}
|
||||
peerDependencies:
|
||||
react: '>=16.14.0'
|
||||
react-dom: '>=16.14.0'
|
||||
solid-js: '>=1.0'
|
||||
svelte: '>=4.0'
|
||||
vue: '>=3.2'
|
||||
peerDependenciesMeta:
|
||||
react:
|
||||
optional: true
|
||||
react-dom:
|
||||
optional: true
|
||||
solid-js:
|
||||
optional: true
|
||||
svelte:
|
||||
optional: true
|
||||
vue:
|
||||
optional: true
|
||||
dependencies:
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/vite-plugin-chunk-split@0.5.0(vite@5.2.7):
|
||||
resolution: {integrity: sha512-pasNKLhH+ICjoCF6HoKKvgmZ1LEPSCIKAa8Lz0ZpMyQC9bLmCLT7UxgKMULewsc9SUw89OX0udsGiIQCtr8wLA==}
|
||||
peerDependencies:
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
function SkeletonLoader() {
|
||||
return (
|
||||
<svg
|
||||
role="img"
|
||||
width="560"
|
||||
height="66"
|
||||
aria-labelledby="loading-aria"
|
||||
viewBox="0 0 560 66"
|
||||
preserveAspectRatio="none"
|
||||
fill="#121212"
|
||||
>
|
||||
<title id="loading-aria">Loading...</title>
|
||||
<rect x="0" y="0" width="100%" height="100%" clip-path="url(#clip-path)"></rect>
|
||||
<defs>
|
||||
<clipPath id="clip-path">
|
||||
<circle cx="32" cy="18" r="16" />
|
||||
<rect x="60" y="10" rx="4" ry="4" width="90" height="7" />
|
||||
<rect x="160" y="10" rx="4" ry="4" width="110" height="7" />
|
||||
<rect x="60" y="31" rx="3" ry="3" width="400" height="6" />
|
||||
<rect x="60" y="42" rx="3" ry="3" width="270" height="6" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default SkeletonLoader;
|
||||
@ -18,7 +18,7 @@ function MessageGroup({ group }: Props) {
|
||||
<>
|
||||
{messages.map((message, index) => {
|
||||
if (message.type === MessageType.Default || message.type === MessageType.Reply) {
|
||||
return <Message key={message.id} message={message} header={index === 0} />;
|
||||
return <Message key={message.id} message={message} header={index === messages.length - 1} />;
|
||||
} else return <SystemMessage key={message.id} message={message} />;
|
||||
})}
|
||||
</>
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import { observer } from "mobx-react-lite";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import React from "react";
|
||||
import InfiniteScroll from "react-infinite-scroll-component";
|
||||
import PulseLoader from "react-spinners/PulseLoader";
|
||||
import styled from "styled-components";
|
||||
import useResizeObserver from "use-resize-observer";
|
||||
import { VList, VListHandle } from "virtua";
|
||||
import useLogger from "../../hooks/useLogger";
|
||||
import { useAppStore } from "../../stores/AppStore";
|
||||
import { MessageGroup as MessageGroupType } from "../../stores/MessageStore";
|
||||
@ -10,95 +11,40 @@ import Channel from "../../stores/objects/Channel";
|
||||
import Guild from "../../stores/objects/Guild";
|
||||
import { Permissions } from "../../utils/Permissions";
|
||||
import { HorizontalDivider } from "../Divider";
|
||||
import SkeletonLoader from "../SkeletonLoader.tsx";
|
||||
import MessageGroup from "./MessageGroup";
|
||||
|
||||
export const MessageAreaWidthContext = React.createContext(0);
|
||||
export const MESSAGE_AREA_PADDING = 82;
|
||||
|
||||
const Container = styled.div`
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column-reverse;
|
||||
`;
|
||||
|
||||
const EndMessageContainer = styled.div`
|
||||
margin: 16px 16px 0 16px;
|
||||
`;
|
||||
|
||||
const Spacer = styled.div`
|
||||
height: 20px;
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
guild: Guild;
|
||||
channel: Channel;
|
||||
before?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Main component for rendering the messages list of a channel
|
||||
*/
|
||||
function MessageList({ guild, channel, before }: Props) {
|
||||
function MessageList({ guild, channel }: Props) {
|
||||
const app = useAppStore();
|
||||
const logger = useLogger("MessageList.tsx");
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [canView, setCanView] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [hasMore, setHasMore] = React.useState(true);
|
||||
const [canView, setCanView] = React.useState(false);
|
||||
const messageGroups = channel.messages.groups;
|
||||
const wrapperRef = useRef<HTMLDivElement>(null);
|
||||
const { width } = useResizeObserver<HTMLDivElement>({ ref: wrapperRef });
|
||||
const ref = useRef<VListHandle>(null);
|
||||
const ref = React.useRef<HTMLDivElement>(null);
|
||||
const { width } = useResizeObserver<HTMLDivElement>({ ref });
|
||||
|
||||
useEffect(() => {
|
||||
// if (before) {
|
||||
// // find message group containing the message
|
||||
// const group = messageGroups.find((x) => x.messages.some((y) => y.id === before));
|
||||
// const index = group
|
||||
// ? messageGroups.indexOf(group) +
|
||||
// (hasMore
|
||||
// ? 10
|
||||
// : 0) /** +10 to account for the "skeleton" divs used to add some padding for scrolling */
|
||||
// : -1;
|
||||
// if (index !== -1) {
|
||||
// ref.current?.scrollToIndex(index);
|
||||
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
|
||||
// this is for switching to a channel with cached messages, it ensures that we correctly set hasMore to false if there are messages but its less than 50
|
||||
if (channel.messages.count > 0 && channel.messages.count < 50) setHasMore(false);
|
||||
|
||||
const hasSkeleton = hasMore || loading;
|
||||
ref.current?.scrollToIndex(channel.messages.count + (hasSkeleton ? 30 : 0));
|
||||
}, [messageGroups, hasMore, loading]);
|
||||
|
||||
const fetchMore = React.useCallback(() => {
|
||||
setLoading(true);
|
||||
if (!channel.messages.count) {
|
||||
logger.warn("channel has no messages, aborting!");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
// get last group
|
||||
const lastGroup = messageGroups[messageGroups.length - 1];
|
||||
if (!lastGroup) {
|
||||
logger.warn("No last group found, aborting fetchMore");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
// ignore queued messages
|
||||
if ("status" in lastGroup.messages[0]) return;
|
||||
// get first message in the group to use as before
|
||||
const before = lastGroup.messages[0].id;
|
||||
logger.debug(`Fetching 50 messages before ${before} for channel ${channel.id}`);
|
||||
channel.getMessages(app, false, 50, before).then((r) => {
|
||||
if (r < 50) setHasMore(false);
|
||||
setLoading(false);
|
||||
});
|
||||
}, [channel, messageGroups]);
|
||||
|
||||
useEffect(() => {
|
||||
React.useEffect(() => {
|
||||
const permission = Permissions.getPermission(app.account!.id, guild, channel);
|
||||
const hasPermission = permission.has("READ_MESSAGE_HISTORY");
|
||||
setCanView(hasPermission);
|
||||
@ -109,24 +55,43 @@ function MessageList({ guild, channel, before }: Props) {
|
||||
}
|
||||
|
||||
if (guild && channel && channel.messages.count === 0) {
|
||||
logger.debug(`Fetching 50 messages for channel ${channel.id}`);
|
||||
channel.getMessages(app, true).then((r) => {
|
||||
if (r < 50) setHasMore(false);
|
||||
|
||||
setLoading(false);
|
||||
if (r < 50) {
|
||||
setHasMore(false);
|
||||
}
|
||||
});
|
||||
} else if (channel.messages.count !== 0) {
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
return () => {
|
||||
logger.debug("MessageList unmounted");
|
||||
setLoading(true);
|
||||
setHasMore(true);
|
||||
setCanView(false);
|
||||
};
|
||||
}, [guild, channel]);
|
||||
|
||||
const fetchMore = React.useCallback(() => {
|
||||
if (!channel.messages.count) {
|
||||
logger.warn("channel has no messages, aborting!");
|
||||
return;
|
||||
}
|
||||
// get last group
|
||||
const lastGroup = messageGroups[messageGroups.length - 1];
|
||||
if (!lastGroup) {
|
||||
logger.warn("No last group found, aborting fetchMore");
|
||||
return;
|
||||
}
|
||||
// ignore queued messages
|
||||
if ("status" in lastGroup.messages[0]) return;
|
||||
// get first message in the group to use as before
|
||||
const before = lastGroup.messages[0].id;
|
||||
logger.debug(`Fetching 50 messages before ${before} for channel ${channel.id}`);
|
||||
channel.getMessages(app, false, 50, before).then((r) => {
|
||||
if (r < 50) {
|
||||
setHasMore(false);
|
||||
}
|
||||
});
|
||||
}, [channel, messageGroups]);
|
||||
|
||||
const renderGroup = React.useCallback(
|
||||
(group: MessageGroupType) => (
|
||||
<MessageGroup key={`messageGroup-${group.messages[group.messages.length - 1].id}`} group={group} />
|
||||
@ -136,21 +101,34 @@ function MessageList({ guild, channel, before }: Props) {
|
||||
|
||||
return (
|
||||
<MessageAreaWidthContext.Provider value={(width ?? 0) - MESSAGE_AREA_PADDING}>
|
||||
<Container>
|
||||
<Container id="scrollable-div" ref={ref}>
|
||||
{canView ? (
|
||||
<VList
|
||||
ref={ref}
|
||||
<InfiniteScroll
|
||||
dataLength={messageGroups.length}
|
||||
next={fetchMore}
|
||||
style={{
|
||||
flex: 1,
|
||||
}}
|
||||
reverse
|
||||
>
|
||||
{Array.from({
|
||||
length: hasMore || loading ? 30 : 0,
|
||||
}).map((_, i) => (
|
||||
<SkeletonLoader />
|
||||
))}
|
||||
{!loading && !hasMore && (
|
||||
display: "flex",
|
||||
flexDirection: "column-reverse",
|
||||
marginBottom: 30,
|
||||
overflow: "hidden",
|
||||
}} // to put endMessage and loader to the top.
|
||||
hasMore={hasMore}
|
||||
inverse={true}
|
||||
loader={
|
||||
<PulseLoader
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignContent: "center",
|
||||
margin: 30,
|
||||
}}
|
||||
color="var(--primary)"
|
||||
/>
|
||||
}
|
||||
// FIXME: seems to be broken in react-infinite-scroll-component when using inverse
|
||||
scrollThreshold={0.5}
|
||||
scrollableTarget="scrollable-div"
|
||||
endMessage={
|
||||
<EndMessageContainer>
|
||||
<h1 style={{ fontWeight: 700, margin: "8px 0" }}>Welcome to #{channel.name}!</h1>
|
||||
<p style={{ color: "var(--text-secondary)" }}>
|
||||
@ -158,10 +136,10 @@ function MessageList({ guild, channel, before }: Props) {
|
||||
</p>
|
||||
<HorizontalDivider />
|
||||
</EndMessageContainer>
|
||||
)}
|
||||
{messageGroups.map((group, index) => renderGroup(group))}
|
||||
<Spacer />
|
||||
</VList>
|
||||
}
|
||||
>
|
||||
{messageGroups.map((group) => renderGroup(group))}
|
||||
</InfiniteScroll>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
|
||||
@ -86,7 +86,7 @@ export default class MessageStore {
|
||||
|
||||
const sortedGroups = sortedMessages
|
||||
.slice()
|
||||
.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime())
|
||||
.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
|
||||
.reduce((groups, message) => {
|
||||
const lastGroup = groups[groups.length - 1];
|
||||
const lastMessage = lastGroup?.messages[lastGroup.messages.length - 1];
|
||||
@ -95,7 +95,7 @@ export default class MessageStore {
|
||||
lastMessage.author.id === message.author.id &&
|
||||
lastMessage.type === message.type &&
|
||||
message.type === MessageType.Default &&
|
||||
lastMessage.timestamp.getTime() - message.timestamp.getTime() <= 10 * 60 * 1000
|
||||
message.timestamp.getTime() - lastMessage.timestamp.getTime() <= 10 * 60 * 1000
|
||||
) {
|
||||
// add to last group
|
||||
lastGroup.messages.unshift(message);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user