Message indicators

This commit is contained in:
MeowcaTheoRange 2024-05-09 17:20:16 -05:00
parent a77ee2eb6c
commit 939c0d8784
2 changed files with 41 additions and 3 deletions

View file

@ -91,13 +91,18 @@ export default function Home() {
const [ whoami, _setWhoAmI ] = useState<{[key:string]:any}>({});
const whoamiRef = useRef(whoami);
const setWhoAmI = (x:any) => {whoamiRef.current = x;_setWhoAmI(x);};
const [ channel, setChannel ] = useState("");
const [ channel, _setChannel ] = useState("");
const channelRef = useRef(channel);
const setChannel = (x:any) => {channelRef.current = x;_setChannel(x);};
const [ channels, setChannels ] = useState<{
name: string,
action: () => void,
readable: boolean,
writable: boolean
}[]>([]);
const [ channelIndicators, _setChannelIndicators ] = useState<{[key:string]:boolean}>({});
const channelIndicatorsRef = useRef(channelIndicators);
const setChannelIndicators = (x:any) => {channelIndicatorsRef.current = x;_setChannelIndicators(x);};
const [ users, _setUsers ] = useState<{
id: string,
username: string,
@ -278,6 +283,23 @@ export default function Home() {
if (index < 0) return;
setMessages(messagesRef.current.toSpliced(index, 1));
}
function addChannelIndicator(channel:string) {
const CIs = {
...channelIndicatorsRef.current
};
CIs[channel] = true;
setChannelIndicators(CIs);
}
function removeChannelIndicator(channel:string) {
const CIs = {
...channelIndicatorsRef.current
};
delete CIs[channel];
setChannelIndicators(CIs);
}
function messagesChatRes({ type, spec, data }:Res) {
unsetError();
if (type.includes("ERR")) {
@ -309,7 +331,10 @@ export default function Home() {
socket.off("RES_CHAT_MESSAGE");
socket.on("RES_CHAT_MESSAGE", ({ message }) => {
if (message.channel == channelRef.current)
addMessage(message);
else
addChannelIndicator(message.channel);
});
socket.off("RES_CHAT_RMMESSAGE");
@ -352,6 +377,7 @@ export default function Home() {
} else {
prevscrtop.current = 0;
setChannel(data.channel);
removeChannelIndicator(data.channel);
socket.emit('SIG_CHAT_USERS', {}, usersChatRes);
socket.emit('SIG_CHAT_MESSAGES', {}, messagesChatRes);
}
@ -400,6 +426,7 @@ export default function Home() {
subtitle={error}
props={{
channels,
channelIndicators,
users,
currentChannel: channel,
connected,

View file

@ -26,6 +26,7 @@ export function ChatLayout<PropFormat>({
readable: boolean,
writable: boolean
}[],
channelIndicators: {[key:string]:boolean},
users: {
id: string,
username: string,
@ -66,7 +67,17 @@ export function ChatLayout<PropFormat>({
title={`#${channel.name}`}
>
<div className={`fw ${styles.Main_List_Button}`}>
<span className="icon">tag</span>
<ConditionalNull condition={props.channelIndicators[channel.name]}>
<span className="icon" style={{
position: "absolute",
left: 8
}}>
arrow_right
</span>
</ConditionalNull>
<span className="icon">
tag
</span>
<span>{channel.name}</span>
</div>
</button>))}