diff --git a/src/client/chat--leftRooms.jsx b/src/client/chat--leftRooms.jsx index 4d37936..44586f8 100644 --- a/src/client/chat--leftRooms.jsx +++ b/src/client/chat--leftRooms.jsx @@ -1,12 +1,17 @@ import './chat--leftRooms.scss'; import React from 'react'; +import {useDispatch, useSelector} from 'react-redux'; + +import {favoriteChannelsSelector, recentSelector, removeRecent} from '~/common/state/user'; import Channel from './channel'; export default function ChatLeftRooms() { - const favorites = ['reddichat']; - const recent = ['reddichat', 'anonymous'].filter((channel) => -1 === favorites.indexOf(channel)); + const dispatch = useDispatch(); + const favorites = useSelector(favoriteChannelsSelector); + const recent = useSelector(recentSelector) + .filter((channel) => -1 === favorites.indexOf(channel)); const favoritesActions = [ { icon: '💔', @@ -14,18 +19,6 @@ export default function ChatLeftRooms() { onClick: () => {}, }, ]; - const recentActions = [ - { - icon: '❤️', - label: 'Favorite', - onClick: () => {}, - }, - { - icon: '×', - label: 'Close', - onClick: () => {}, - }, - ]; return (
-

Favorites

- -

Recent

- + {favorites.length > 0 && ( + <> +

Favorites

+ + + )} + {recent.length > 0 && ( + <> +

Recent

+ + + )}
); } diff --git a/src/common/state/chat.js b/src/common/state/chat.js index bbcf7e8..b52bd77 100644 --- a/src/common/state/chat.js +++ b/src/common/state/chat.js @@ -30,7 +30,6 @@ const slice = createSlice({ initialState: { channels: {}, messages: {}, - recent: [], ...(hydration('chat') || {}), }, reducers: { @@ -42,9 +41,6 @@ const slice = createSlice({ messages[uuid] = payload; channels[channel].messages.push(uuid); }, - addRecent: ({recent}, {payload: {channel}}) => { - recent.push(channel); - }, confirmMessage: ({channels, messages}, {payload: {previous, current, timestamp}}) => { messages[current] = {...messages[previous], timestamp, uuid: current}; delete messages[previous]; @@ -79,9 +75,6 @@ const slice = createSlice({ const {messages} = state.channels[channel]; messages.splice(messages.indexOf(uuid), 1); }, - removeRecent: ({recent}, {payload: {channel}}) => { - recent.splice(recent.indexOf(channel), 1); - }, submitJoin: () => {}, submitLeave: () => {}, submitMessage: () => {}, @@ -90,7 +83,6 @@ const slice = createSlice({ export const { addMessage, - addRecent, confirmMessage, editMessage, join, @@ -98,7 +90,6 @@ export const { leave, left, removeMessage, - removeRecent, submitJoin, submitLeave, submitMessage, diff --git a/src/common/state/user.js b/src/common/state/user.js index fbe7fc0..1ec92fe 100644 --- a/src/common/state/user.js +++ b/src/common/state/user.js @@ -15,6 +15,26 @@ export const blockedSelector = createSelector( (user) => user.blocked, ); +export const favoritesSelector = createSelector( + [userSelector], + ({favorites}) => favorites, +); + +const createFavoriteSelector = (type) => ( + createSelector( + [favoritesSelector], + (favorites) => ( + favorites + .filter((favorite) => 0 === favorite.indexOf(`/${type}/`)) + .map((favorite) => favorite.substr(3)) + ), + ) +); + +export const favoriteChannelsSelector = createFavoriteSelector('r'); + +export const favoriteUsersSelector = createFavoriteSelector('u'); + export const friendshipSelector = createSelector( userSelector, (user) => user.friendship, @@ -30,6 +50,11 @@ export const pendingFriendshipSelector = createSelector( (friendship) => Object.values(friendship).filter(({state}) => 'pending' === state), ); +export const recentSelector = createSelector( + [userSelector], + ({recent}) => recent, +); + export const redditUsernameSelector = createSelector( userSelector, (user) => user.redditUsername, @@ -54,6 +79,7 @@ const slice = createSlice({ friendship: [], id: 0, isAnonymous: false, + recent: [], redditUsername: 'anonymous', unread: {}, ...(hydration('user') || {isAnonymous: true}), @@ -80,6 +106,9 @@ const slice = createSlice({ (favorite) => favorite.name === name && favorite.type === type, ), 1); }, + removeRecent: ({recent}, {payload: channel}) => { + recent.splice(recent.indexOf(channel), 1); + }, updateFriendshipStatus: (state, {payload: {id, status}}) => { state.friendship.find((friendship) => friendship.id === id).status = status; }, @@ -109,6 +138,7 @@ export const { blockUser, focus, removeFriend, + removeRecent, } = slice.actions; export default slice.reducer; diff --git a/src/server/entry.js b/src/server/entry.js index 977bc11..68ef3f5 100644 --- a/src/server/entry.js +++ b/src/server/entry.js @@ -49,24 +49,27 @@ export const channelState = async (req, channel) => { }; }; -const userState = async ({channel, user}) => ( - user +export const channelsToHydrate = async (req) => ( + (req.channel ? [req.channel] : []).concat(req.user ? await req.user.favorites() : []) +); + +const userState = async (req) => { + const {channel, user} = req; + const toHydrate = await channelsToHydrate(req); + return user ? { favorites: [], focus: channel ? joinChannel(channel) : '', friends: await user.friends(), id: user.id, redditUsername: user.redditUsername, + recent: toHydrate.map(joinChannel).map((channel) => channel.substr(3)), } - : null -); + : null; +}; export const appUserState = async (req) => userState(req); -export const channelsToHydrate = async (req) => ( - (req.channel ? [req.channel] : []).concat(req.user ? await req.user.favorites() : []) -); - const chatUsers = async (req) => { const toHydrate = await channelsToHydrate(req); if (0 === toHydrate.length) { @@ -95,7 +98,6 @@ export const appChatState = async (req) => { const chat = { channels: {}, messages: {}, - recent: [], users: {}, }; for (let i = 0; i < toHydrate.length; i++) { @@ -108,7 +110,6 @@ export const appChatState = async (req) => { messages.forEach((message) => { chat.messages[message.uuid] = message; }); - chat.recent.push(channel); } return chat; };