fix: recent

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 (
     <div
       className="chat--leftRooms"
@@ -38,36 +31,58 @@ export default function ChatLeftRooms() {
           </span>
         </label>
       </form>
-      <h2 className="channels__chatsTitle">Favorites</h2>
-      <ul className="channels__chatsList">
-        {favorites.map((channel) => (
-          <li
-            className="channels__item"
-          >
-            <Channel
-              actions={favoritesActions}
-              href={`/chat/r/${channel}`}
-              name={channel}
-              prefix="/r/"
-            />
-          </li>
-        ))}
-      </ul>
-      <h2 className="channels__chatsTitle">Recent</h2>
-      <ul className="channels__chatsList">
-        {recent.map((channel) => (
-          <li
-            className="channels__item"
-          >
-            <Channel
-              actions={recentActions}
-              href={`/chat/r/${channel}`}
-              name={channel}
-              prefix="/r/"
-            />
-          </li>
-        ))}
-      </ul>
+      {favorites.length > 0 && (
+        <>
+          <h2 className="channels__chatsTitle">Favorites</h2>
+          <ul className="channels__chatsList">
+            {favorites.map((channel) => (
+              <li
+                className="channels__item"
+              >
+                <Channel
+                  actions={favoritesActions}
+                  href={`/chat/r/${channel}`}
+                  name={channel}
+                  prefix="/r/"
+                />
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+      {recent.length > 0 && (
+        <>
+          <h2 className="channels__chatsTitle">Recent</h2>
+          <ul className="channels__chatsList">
+            {recent.map((channel) => {
+              const recentActions = [
+                {
+                  icon: '❤️',
+                  label: 'Favorite',
+                  onClick: () => {},
+                },
+                {
+                  icon: '×',
+                  label: 'Close',
+                  onClick: () => dispatch(removeRecent(channel)),
+                },
+              ];
+              return (
+                <li
+                  className="channels__item"
+                >
+                  <Channel
+                    actions={recentActions}
+                    href={`/chat/r/${channel}`}
+                    name={channel}
+                    prefix="/r/"
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        </>
+      )}
     </div>
   );
 }

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,

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;

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;
 };