Fix message loading and narrow notifications (#74)
This commit is contained in:
parent
6bd351ed41
commit
1bc239fa71
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
@ -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 && (
|
||||
|
|
|
@ -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 = () => {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue