diff --git a/src/client/chat--left.scss b/src/client/chat--left.scss index 1f8ff7c..517b5a3 100644 --- a/src/client/chat--left.scss +++ b/src/client/chat--left.scss @@ -11,7 +11,7 @@ } .left.open { - width: 18em; + width: 25em; } .bar__brandItem .muted { diff --git a/src/client/chat--right.jsx b/src/client/chat--right.jsx index 82b8f70..d71525a 100644 --- a/src/client/chat--right.jsx +++ b/src/client/chat--right.jsx @@ -4,6 +4,7 @@ import classnames from 'classnames'; import React, {useState} from 'react'; import {useSelector} from 'react-redux'; +import {channelUsersSelector} from '~/common/state/chat'; import {blockedSelector} from '~/common/state/user'; import useBreakpoints from '~/client/hooks/useBreakpoints'; @@ -18,16 +19,16 @@ export default function ChatRight() { const [active, setActive] = useState(0); const [isOpen, setIsOpen] = useState(false); const channel = useChannel(); - const ids = useSelector((state) => blockedSelector(state, channel)); + const blockedIds = useSelector((state) => blockedSelector(state, channel)); + const channelUsers = useSelector((state) => channelUsersSelector(state, channel)); const toggleOpen = () => setIsOpen(!isOpen); const showsAsOpen = isOpen || desktop || !tablet; - const buttons = [ - { - icon: '🙃', - label: 'Present', - }, - ] - .concat(ids.length > 0 ? [{icon: '☢️', label: 'Blocked'}] : []); + const buttons = [] + .concat(channelUsers.length > 0 ? [{icon: '🙃', label: 'Present'}] : []) + .concat(blockedIds.length > 0 ? [{icon: '☢️', label: 'Blocked'}] : []); + if (0 === buttons.length) { + return null; + } return (
- {0 === active && } - {1 === active && ids.length > 0 && } + {0 === active && channelUsers.length > 0 && } + {1 === active && blockedIds.length > 0 && }
); } diff --git a/src/client/chat--right.scss b/src/client/chat--right.scss index 8234dea..b4a8b09 100644 --- a/src/client/chat--right.scss +++ b/src/client/chat--right.scss @@ -11,7 +11,7 @@ } .right.open { - width: 18em; + width: 25em; } .right__buttons { diff --git a/src/common/state/chat.js b/src/common/state/chat.js index bd6c9a3..72e0ef7 100644 --- a/src/common/state/chat.js +++ b/src/common/state/chat.js @@ -15,7 +15,7 @@ export const channelSelector = createSelector( export const channelUsersSelector = createSelector( [channelSelector], - ({users}) => users, + (channel) => (channel ? channel.users : []), ); export const messagesSelector = (state) => state.chat.messages;