From 72b0b0004dd01ccd2bfee124005c32839a76c01d Mon Sep 17 00:00:00 2001 From: Michael Peters Date: Sat, 14 Jan 2023 15:03:16 -0800 Subject: [PATCH] add top-of-channel message --- README.md | 2 +- makefile | 2 +- .../elements-styles/lists/message-list.scss | 16 ++++++++++ .../elements/components/infinite-scroll.tsx | 3 ++ .../webapp/elements/lists/message-list.tsx | 32 +++++++++++-------- ...ssages.ts => insert-500-memes-messages.ts} | 8 ++--- 6 files changed, 43 insertions(+), 20 deletions(-) rename src/server/scripts/{insert-2000-memes-messages.ts => insert-500-memes-messages.ts} (88%) diff --git a/README.md b/README.md index 35f7cc0..8d9af83 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ CorDis is a text and voice chat client with UI based on Discord. [Server Screenshot](data/server.png) -## Build / Run +## Build Install Node Dependencies diff --git a/makefile b/makefile index cee8b56..70cea38 100644 --- a/makefile +++ b/makefile @@ -51,7 +51,7 @@ create-example-roles: node ./dist/server/scripts/example-roles.js create-memes-messages: - node ./dist/server/scripts/insert-2000-memes-messages.js + node ./dist/server/scripts/insert-500-memes-messages.js full-reset: clean build move reset-server create-invite diff --git a/src/client/webapp/elements-styles/lists/message-list.scss b/src/client/webapp/elements-styles/lists/message-list.scss index c2bbe3d..d006621 100644 --- a/src/client/webapp/elements-styles/lists/message-list.scss +++ b/src/client/webapp/elements-styles/lists/message-list.scss @@ -72,6 +72,22 @@ $borderRadius: 8px; padding: 4px 8px; } } + + .top-of-feed { + margin: 8px 16px; + text-align: center; + + .welcome { + color: theme.$header-primary; + font-size: 1.4em; + font-weight: 600; + } + + .start { + color: theme.$header-secondary; + font-size: 0.9em; + } + } } } } diff --git a/src/client/webapp/elements/components/infinite-scroll.tsx b/src/client/webapp/elements/components/infinite-scroll.tsx index a7a2a51..1fe1ba3 100644 --- a/src/client/webapp/elements/components/infinite-scroll.tsx +++ b/src/client/webapp/elements/components/infinite-scroll.tsx @@ -7,6 +7,7 @@ import Retry from './retry'; export interface InfiniteScrollRecoilProps { infiniteScrollRef: MutableRefObject; scrollable: LoadableValueScrolling; + topElement: ReactNode; initialErrorMessage: string; // for if there was a problem loading the initial messages aboveErrorMessage: string; // for if there was a problem loading messages above the list belowErrorMessage: string; // for if there was a problem loading messages below the list @@ -17,6 +18,7 @@ function InfiniteScrollRecoil(props: InfiniteScrollRecoilProps) { const { infiniteScrollRef, scrollable, + topElement, initialErrorMessage, aboveErrorMessage, belowErrorMessage, @@ -56,6 +58,7 @@ function InfiniteScrollRecoil(props: InfiniteScrollRecoilProps) {
+ {scrollable.above?.hasMore === false && topElement} {children} diff --git a/src/client/webapp/elements/lists/message-list.tsx b/src/client/webapp/elements/lists/message-list.tsx index ac928e2..70a1560 100644 --- a/src/client/webapp/elements/lists/message-list.tsx +++ b/src/client/webapp/elements/lists/message-list.tsx @@ -6,7 +6,12 @@ const LOG = Logger.create(__filename, electronConsole); import React, { FC, useEffect, useMemo, useRef } from 'react'; import { Message } from '../../data-types'; import MessageElement from './components/message-element'; -import { currGuildActiveChannelMessagesState, currGuildSelfMemberState, currGuildState } from '../require/atoms'; +import { + currGuildActiveChannelMessagesState, + currGuildActiveChannelState, + currGuildSelfMemberState, + currGuildState, +} from '../require/atoms'; import { useRecoilValue } from 'recoil'; import { isLoaded } from '../require/loadables'; import InfiniteScrollRecoil from '../components/infinite-scroll'; @@ -15,25 +20,13 @@ const MessageList: FC = () => { const infiniteScrollElementRef = useRef(null); const guild = useRecoilValue(currGuildState); + const channel = useRecoilValue(currGuildActiveChannelState); const messages = useRecoilValue(currGuildActiveChannelMessagesState); const selfMember = useRecoilValue(currGuildSelfMemberState); // TODO: Show loading indicators if above/below are pending // TODO: Show nicer retry buttons (and test the retry buttons) - // leaving this in for debugging purposes - // useEffect(() => { - // if (isUnload(messages)) { - // lOG.debug('recoilMessages unloaded'); - // } else if (isPended(messages)) { - // lOG.debug('recoilMessages pended'); - // } else if (isLoaded(messages)) { - // lOG.debug('recoilMessages loaded. length: ' + messages.value.length); - // } else if (isFailed(messages)) { - // lOG.debug('recoilMessages failed'); - // } - // }, [messages]); - useEffect(() => { if (guild === null) return; const onMessages = (messages: Message[]) => { @@ -71,11 +64,22 @@ const MessageList: FC = () => { return result; }, [guild, messages]); + const topOfFeedElement = useMemo(() => { + if (!isLoaded(channel)) return null; // TODO: placeholder/loading message instead + return ( +
+
Welcome to #{channel.value.name}
+
This is the start of #{channel.value.name}
+
+ ); + }, [channel]); + return (
{ const targetGuild = guilds.find(guild => guild.name === 'no chicoms'); const members = await DB.getMembers(targetGuild.id); const targetMember = members.find(member => member.display_name === 'Elipzer'); - if (targetMember === undefined) { - LOG.error('unable to find target member'); - } + if (targetMember === undefined) { + LOG.error('unable to find target member'); + } const channels = await DB.getChannels(targetGuild.id); const targetChannel = channels.find(channel => channel.name === 'memes'); LOG.debug('inserting testing messages...'); - for (let i = 0; i < 2000; ++i) { + for (let i = 0; i < 500; ++i) { await DB.insertMessage(targetGuild.id, targetChannel.id, targetMember.id, 'Test Message #' + i); } LOG.info('inserted testing messages');