Fix message loading and narrow notifications (#74)

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);

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;
+  onCommunityClick: (val: ChannelData) => void;
-  setActiveChannel: (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,8 +30,6 @@ export function Channels({
   }, [notifications, activeChannelId]);
 
   return (
-    <ChannelsWrapper>
-      <StyledCommunity onClick={onCommunityClick} community={community} />
     <ChannelList>
       {channels.map((channel) => (
         <Channel
@@ -51,12 +43,11 @@ export function Channels({
               : undefined
           }
           onClick={() => {
-              setActiveChannel(channel);
+            onCommunityClick(channel);
           }}
         />
       ))}
     </ChannelList>
-    </ChannelsWrapper>
   );
 }
 
@@ -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;

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 (
     <ChatWrapper>
       {showChannels && !narrow && (
+        <ChannelsWrapper>
+          <StyledCommunity onClick={showModal} community={community} />
           <Channels
             notifications={notifications}
             clearNotifications={clearNotifications}
-          community={community}
+            onCommunityClick={(e) => setActiveChannel(e)}
-          setActiveChannel={setActiveChannel}
             activeChannelId={activeChannel.id}
-          onCommunityClick={showModal}
           />
+        </ChannelsWrapper>
       )}
       <ChatBody
         theme={theme}
@@ -70,6 +72,7 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
         onCommunityClick={showModal}
         fetchMetadata={fetchMetadata}
         loadingMessages={loadingMessages}
+        clearNotifications={clearNotifications}
       />
       {showMembers && !narrow && (
         <Members community={community} setShowChannels={setShowChannels} />
@@ -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;
+`;

packages/react-chat/src/components/Chat/ChatBody.tsx

@@ -36,6 +36,7 @@ interface ChatBodyProps {
   onCommunityClick: () => void;
   fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
   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 && (

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)) {
+    if (!loadingMessages) {
+      if (
+        (ref?.current?.clientHeight ?? 0) >= (ref?.current?.scrollHeight ?? 0)
+      ) {
         loadNextDay();
       }
-  }, [messages, messages.length]);
+    }
+  }, [messages, messages.length, loadingMessages]);
 
   useEffect(() => {
     const setScroll = () => {

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 { ChannelData } from "../../helpers/channelsMock";
-import { Channel, ChannelList } from "../Channels";
+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 (
     <ListWrapper>
       <NarrowTopbar list="Channels" community={community} />
-      <ChannelList>
+      <Channels
-        {channels.map((channel) => (
+        notifications={notifications}
-          <Channel
+        clearNotifications={clearNotifications}
-            key={channel.id}
+        onCommunityClick={(e) => {
-            channel={channel}
+          setActiveChannel(e);
-            isActive={channel.id === activeChannelId}
-            isMuted={channel.isMuted || false}
-            notification={
-              notifications[channel.name] > 0 && !channel.isMuted
-                ? notifications[channel.name]
-                : undefined
-            }
-            onClick={() => {
-              setActiveChannel(channel);
           setShowChannels(false);
         }}
+        activeChannelId={activeChannelId}
       />
-        ))}
-      </ChannelList>
     </ListWrapper>
   );
 }