status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix loading messages (#97)

This commit is contained in:
Szymon Szlachtowicz 2021-10-26 09:16:07 +02:00 committed by GitHub
parent 7a289e5eab
commit f957aa76cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react-chat/src/components/Chat.tsx
View File

@ -129,7 +129,7 @@ export function Chat({
showMembers={showMembers} showMembers={showMembers}
community={communityData} community={communityData}
showCommunity={!showChannels} showCommunity={!showChannels}
loadPrevDay={() => loadPrevDay(activeChannel.name)} loadPrevDay={() => loadPrevDay(activeChannel.id)}
onCommunityClick={showModal} onCommunityClick={showModal}
fetchMetadata={fetchMetadata} fetchMetadata={fetchMetadata}
loadingMessages={loadingMessages} loadingMessages={loadingMessages}

9
packages/react-chat/src/components/Chat/ChatMessages.tsx
View File

@ -3,6 +3,7 @@ import styled from "styled-components";
import { ChatMessage } from "../../models/ChatMessage"; import { ChatMessage } from "../../models/ChatMessage";
import { Metadata } from "../../models/Metadata"; import { Metadata } from "../../models/Metadata";
import { equalDate } from "../../utils";
import { LoadingIcon } from "../Icons/LoadingIcon"; import { LoadingIcon } from "../Icons/LoadingIcon";
import { UserIcon } from "../Icons/UserIcon"; import { UserIcon } from "../Icons/UserIcon";
import { LinkModal } from "../Modals/LinkModal"; import { LinkModal } from "../Modals/LinkModal";
@ -26,7 +27,7 @@ export function ChatMessages({
}: ChatMessagesProps) { }: ChatMessagesProps) {
const [scrollOnBot, setScrollOnBot] = useState(true); const [scrollOnBot, setScrollOnBot] = useState(true);
const ref = useRef<HTMLHeadingElement>(null); const ref = useRef<HTMLHeadingElement>(null);
const today = useMemo(() => new Date().getDay(), []); const today = useMemo(() => new Date(), []);
useEffect(() => { useEffect(() => {
if (ref && ref.current && scrollOnBot) { if (ref && ref.current && scrollOnBot) {
ref.current.scrollTop = ref.current.scrollHeight; ref.current.scrollTop = ref.current.scrollHeight;
@ -38,6 +39,7 @@ export function ChatMessages({
if ( if (
(ref?.current?.clientHeight ?? 0) >= (ref?.current?.scrollHeight ?? 0) (ref?.current?.clientHeight ?? 0) >= (ref?.current?.scrollHeight ?? 0)
) { ) {
setScrollOnBot(true);
loadPrevDay(); loadPrevDay();
} }
} }
@ -84,10 +86,9 @@ export function ChatMessages({
return ( return (
<MessageOuterWrapper key={message.date.getTime()}> <MessageOuterWrapper key={message.date.getTime()}>
{(idx === 0 || {(idx === 0 ||
messages[idx - 1].date.getDay() != !equalDate(messages[idx - 1].date, message.date)) && (
messages[idx].date.getDay()) && (
<DateSeparator> <DateSeparator>
{message.date.getDay() === today {equalDate(message.date, today)
? "Today" ? "Today"
: message.date.toLocaleDateString()} : message.date.toLocaleDateString()}
</DateSeparator> </DateSeparator>

7
packages/react-chat/src/utils/equalDate.ts Normal file
View File

@ -0,0 +1,7 @@
export function equalDate(a: Date, b: Date) {
return (
a.getDate() === b.getDate() &&
a.getMonth() === b.getMonth() &&
a.getFullYear() === b.getFullYear()
);
}

1
packages/react-chat/src/utils/index.ts
View File

@ -9,3 +9,4 @@ export {
} from "./identityStorage"; } from "./identityStorage";
export { reduceString } from "./reduceString"; export { reduceString } from "./reduceString";
export { uintToImgUrl } from "./uintToImgUrl"; export { uintToImgUrl } from "./uintToImgUrl";
export { equalDate } from "./equalDate";