Fix message loading and narrow notifications (#74)

This commit is contained in:
Szymon Szlachtowicz 2021-10-15 13:54:48 +02:00 committed by GitHub
parent 6bd351ed41
commit 1bc239fa71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 69 additions and 77 deletions

View File

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

View File

@ -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 (
<ChannelsWrapper>
<StyledCommunity onClick={onCommunityClick} community={community} />
<ChannelList>
{channels.map((channel) => (
<Channel
key={channel.id}
channel={channel}
isActive={channel.id === activeChannelId}
isMuted={channel.isMuted || false}
notification={
notifications[channel.name] > 0 && !channel.isMuted
? notifications[channel.name]
: undefined
}
onClick={() => {
setActiveChannel(channel);
}}
/>
))}
</ChannelList>
</ChannelsWrapper>
<ChannelList>
{channels.map((channel) => (
<Channel
key={channel.id}
channel={channel}
isActive={channel.id === activeChannelId}
isMuted={channel.isMuted || false}
notification={
notifications[channel.name] > 0 && !channel.isMuted
? notifications[channel.name]
: undefined
}
onClick={() => {
onCommunityClick(channel);
}}
/>
))}
</ChannelList>
);
}
@ -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;

View File

@ -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 && (
<Channels
notifications={notifications}
clearNotifications={clearNotifications}
community={community}
setActiveChannel={setActiveChannel}
activeChannelId={activeChannel.id}
onCommunityClick={showModal}
/>
<ChannelsWrapper>
<StyledCommunity onClick={showModal} community={community} />
<Channels
notifications={notifications}
clearNotifications={clearNotifications}
onCommunityClick={(e) => setActiveChannel(e)}
activeChannelId={activeChannel.id}
/>
</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;
`;

View File

@ -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 && (

View File

@ -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 = () => {

View File

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