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
-
- {favorites.map((channel) => (
- -
-
-
- ))}
-
-
Recent
-
- {recent.map((channel) => (
- -
-
-
- ))}
-
+ {favorites.length > 0 && (
+ <>
+
Favorites
+
+ {favorites.map((channel) => (
+ -
+
+
+ ))}
+
+ >
+ )}
+ {recent.length > 0 && (
+ <>
+
Recent
+
+ {recent.map((channel) => {
+ const recentActions = [
+ {
+ icon: '❤️',
+ label: 'Favorite',
+ onClick: () => {},
+ },
+ {
+ icon: '×',
+ label: 'Close',
+ onClick: () => dispatch(removeRecent(channel)),
+ },
+ ];
+ return (
+ -
+
+
+ );
+ })}
+
+ >
+ )}
);
}
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;
};