From 1bc239fa71f4b00bcdb11bb039120d28c9e867a2 Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Fri, 15 Oct 2021 13:54:48 +0200
Subject: [PATCH] Fix message loading and narrow notifications (#74)
---
packages/react-chat-example/src/index.tsx | 1 -
.../react-chat/src/components/Channels.tsx | 64 ++++++-------------
packages/react-chat/src/components/Chat.tsx | 34 +++++++---
.../src/components/Chat/ChatBody.tsx | 3 +
.../src/components/Chat/ChatMessages.tsx | 10 ++-
.../components/NarrowMode/NarrowChannels.tsx | 34 ++++------
6 files changed, 69 insertions(+), 77 deletions(-)
diff --git a/packages/react-chat-example/src/index.tsx b/packages/react-chat-example/src/index.tsx
index 5792914b..13c81164 100644
--- a/packages/react-chat-example/src/index.tsx
+++ b/packages/react-chat-example/src/index.tsx
@@ -23,7 +23,6 @@ const fetchMetadata = async (link: string) => {
};
function DragDiv() {
- console.log();
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const [width, setWidth] = useState(window.innerWidth - 50);
diff --git a/packages/react-chat/src/components/Channels.tsx b/packages/react-chat/src/components/Channels.tsx
index 6be9af22..f24d5ea4 100644
--- a/packages/react-chat/src/components/Channels.tsx
+++ b/packages/react-chat/src/components/Channels.tsx
@@ -3,28 +3,22 @@ import styled from "styled-components";
import { useNarrow } from "../contexts/narrowProvider";
import { ChannelData, channels } from "../helpers/channelsMock";
-import { CommunityData } from "../helpers/communityMock";
-import { Community } from "./Community";
import { MutedIcon } from "./Icons/MutedIcon";
import { textMediumStyles } from "./Text";
interface ChannelsProps {
- community: CommunityData;
notifications: { [id: string]: number };
clearNotifications: (id: string) => void;
- onCommunityClick: () => void;
- setActiveChannel: (val: ChannelData) => void;
+ onCommunityClick: (val: ChannelData) => void;
activeChannelId: number;
}
export function Channels({
- community,
notifications,
- setActiveChannel,
+ onCommunityClick,
clearNotifications,
activeChannelId,
- onCommunityClick,
}: ChannelsProps) {
useEffect(() => {
const channel = channels.find((channel) => channel.id === activeChannelId);
@@ -36,27 +30,24 @@ export function Channels({
}, [notifications, activeChannelId]);
return (
-
-
-
- {channels.map((channel) => (
- 0 && !channel.isMuted
- ? notifications[channel.name]
- : undefined
- }
- onClick={() => {
- setActiveChannel(channel);
- }}
- />
- ))}
-
-
+
+ {channels.map((channel) => (
+ 0 && !channel.isMuted
+ ? notifications[channel.name]
+ : undefined
+ }
+ onClick={() => {
+ onCommunityClick(channel);
+ }}
+ />
+ ))}
+
);
}
@@ -127,21 +118,6 @@ export function Channel({
);
}
-const ChannelsWrapper = styled.div`
- width: 21%;
- height: 100%;
- min-width: 196px;
- background-color: ${({ theme }) => theme.sectionBackgroundColor};
- padding: 10px 0.6%;
- display: flex;
- flex-direction: column;
-`;
-
-const StyledCommunity = styled(Community)`
- padding: 0 0 0 10px;
- margin: 0 0 16px;
-`;
-
const ChannelDescription = styled.p`
font-size: 12px;
line-height: 16px;
diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index c1803038..ca23ce39 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@@ -10,6 +10,7 @@ import { Theme } from "../styles/themes";
import { Channels } from "./Channels";
import { ChatBody } from "./Chat/ChatBody";
+import { Community } from "./Community";
import { Members } from "./Members";
import { CommunityModal } from "./Modals/CommunityModal";
@@ -44,14 +45,15 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
return (
{showChannels && !narrow && (
-
+
+
+ setActiveChannel(e)}
+ activeChannelId={activeChannel.id}
+ />
+
)}
{showMembers && !narrow && (
@@ -92,3 +95,18 @@ const ChatWrapper = styled.div`
height: 100%;
display: flex;
`;
+
+const ChannelsWrapper = styled.div`
+ width: 21%;
+ height: 100%;
+ min-width: 196px;
+ background-color: ${({ theme }) => theme.sectionBackgroundColor};
+ padding: 10px 0.6%;
+ display: flex;
+ flex-direction: column;
+`;
+
+const StyledCommunity = styled(Community)`
+ padding: 0 0 0 10px;
+ margin: 0 0 16px;
+`;
diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx
index a9d1ecfe..a642985a 100644
--- a/packages/react-chat/src/components/Chat/ChatBody.tsx
+++ b/packages/react-chat/src/components/Chat/ChatBody.tsx
@@ -36,6 +36,7 @@ interface ChatBodyProps {
onCommunityClick: () => void;
fetchMetadata?: (url: string) => Promise;
loadingMessages: boolean;
+ clearNotifications: (id: string) => void;
}
export function ChatBody({
@@ -55,6 +56,7 @@ export function ChatBody({
onCommunityClick,
fetchMetadata,
loadingMessages,
+ clearNotifications,
}: ChatBodyProps) {
const narrow = useNarrow();
const [showChannelsList, setShowChannelsList] = useState(false);
@@ -140,6 +142,7 @@ export function ChatBody({
setActiveChannel={setActiveChannel}
setShowChannels={setShowChannelsList}
activeChannelId={activeChannelId}
+ clearNotifications={clearNotifications}
/>
)}
{showMembersList && narrow && (
diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx
index 4bf04e05..d4d5eaef 100644
--- a/packages/react-chat/src/components/Chat/ChatMessages.tsx
+++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx
@@ -34,10 +34,14 @@ export function ChatMessages({
}, [messages, messages.length, scrollOnBot]);
useEffect(() => {
- if ((ref?.current?.clientHeight ?? 0) < (ref?.current?.scrollHeight ?? 0)) {
- loadNextDay();
+ if (!loadingMessages) {
+ if (
+ (ref?.current?.clientHeight ?? 0) >= (ref?.current?.scrollHeight ?? 0)
+ ) {
+ loadNextDay();
+ }
}
- }, [messages, messages.length]);
+ }, [messages, messages.length, loadingMessages]);
useEffect(() => {
const setScroll = () => {
diff --git a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
index d7f0b79e..e0fd6684 100644
--- a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
@@ -1,8 +1,8 @@
import React from "react";
import styled from "styled-components";
-import { ChannelData, channels } from "../../helpers/channelsMock";
-import { Channel, ChannelList } from "../Channels";
+import { ChannelData } from "../../helpers/channelsMock";
+import { Channels } from "../Channels";
import { NarrowTopbar } from "./NarrowTopbar";
@@ -12,6 +12,7 @@ interface NarrowChannelsProps {
setActiveChannel: (val: ChannelData) => void;
activeChannelId: number;
setShowChannels: (val: boolean) => void;
+ clearNotifications: (id: string) => void;
}
export function NarrowChannels({
@@ -20,29 +21,20 @@ export function NarrowChannels({
setActiveChannel,
activeChannelId,
setShowChannels,
+ clearNotifications,
}: NarrowChannelsProps) {
return (
-
- {channels.map((channel) => (
- 0 && !channel.isMuted
- ? notifications[channel.name]
- : undefined
- }
- onClick={() => {
- setActiveChannel(channel);
- setShowChannels(false);
- }}
- />
- ))}
-
+ {
+ setActiveChannel(e);
+ setShowChannels(false);
+ }}
+ activeChannelId={activeChannelId}
+ />
);
}