fix: recent
This commit is contained in:
parent
6f423a2723
commit
f4522fb9da
|
@ -1,12 +1,17 @@
|
||||||
import './chat--leftRooms.scss';
|
import './chat--leftRooms.scss';
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import {useDispatch, useSelector} from 'react-redux';
|
||||||
|
|
||||||
|
import {favoriteChannelsSelector, recentSelector, removeRecent} from '~/common/state/user';
|
||||||
|
|
||||||
import Channel from './channel';
|
import Channel from './channel';
|
||||||
|
|
||||||
export default function ChatLeftRooms() {
|
export default function ChatLeftRooms() {
|
||||||
const favorites = ['reddichat'];
|
const dispatch = useDispatch();
|
||||||
const recent = ['reddichat', 'anonymous'].filter((channel) => -1 === favorites.indexOf(channel));
|
const favorites = useSelector(favoriteChannelsSelector);
|
||||||
|
const recent = useSelector(recentSelector)
|
||||||
|
.filter((channel) => -1 === favorites.indexOf(channel));
|
||||||
const favoritesActions = [
|
const favoritesActions = [
|
||||||
{
|
{
|
||||||
icon: '💔',
|
icon: '💔',
|
||||||
|
@ -14,18 +19,6 @@ export default function ChatLeftRooms() {
|
||||||
onClick: () => {},
|
onClick: () => {},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const recentActions = [
|
|
||||||
{
|
|
||||||
icon: '❤️',
|
|
||||||
label: 'Favorite',
|
|
||||||
onClick: () => {},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: '×',
|
|
||||||
label: 'Close',
|
|
||||||
onClick: () => {},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="chat--leftRooms"
|
className="chat--leftRooms"
|
||||||
|
@ -38,6 +31,8 @@ export default function ChatLeftRooms() {
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</form>
|
</form>
|
||||||
|
{favorites.length > 0 && (
|
||||||
|
<>
|
||||||
<h2 className="channels__chatsTitle">Favorites</h2>
|
<h2 className="channels__chatsTitle">Favorites</h2>
|
||||||
<ul className="channels__chatsList">
|
<ul className="channels__chatsList">
|
||||||
{favorites.map((channel) => (
|
{favorites.map((channel) => (
|
||||||
|
@ -53,9 +48,26 @@ export default function ChatLeftRooms() {
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{recent.length > 0 && (
|
||||||
|
<>
|
||||||
<h2 className="channels__chatsTitle">Recent</h2>
|
<h2 className="channels__chatsTitle">Recent</h2>
|
||||||
<ul className="channels__chatsList">
|
<ul className="channels__chatsList">
|
||||||
{recent.map((channel) => (
|
{recent.map((channel) => {
|
||||||
|
const recentActions = [
|
||||||
|
{
|
||||||
|
icon: '❤️',
|
||||||
|
label: 'Favorite',
|
||||||
|
onClick: () => {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '×',
|
||||||
|
label: 'Close',
|
||||||
|
onClick: () => dispatch(removeRecent(channel)),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return (
|
||||||
<li
|
<li
|
||||||
className="channels__item"
|
className="channels__item"
|
||||||
>
|
>
|
||||||
|
@ -66,8 +78,11 @@ export default function ChatLeftRooms() {
|
||||||
prefix="/r/"
|
prefix="/r/"
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</ul>
|
</ul>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,7 +30,6 @@ const slice = createSlice({
|
||||||
initialState: {
|
initialState: {
|
||||||
channels: {},
|
channels: {},
|
||||||
messages: {},
|
messages: {},
|
||||||
recent: [],
|
|
||||||
...(hydration('chat') || {}),
|
...(hydration('chat') || {}),
|
||||||
},
|
},
|
||||||
reducers: {
|
reducers: {
|
||||||
|
@ -42,9 +41,6 @@ const slice = createSlice({
|
||||||
messages[uuid] = payload;
|
messages[uuid] = payload;
|
||||||
channels[channel].messages.push(uuid);
|
channels[channel].messages.push(uuid);
|
||||||
},
|
},
|
||||||
addRecent: ({recent}, {payload: {channel}}) => {
|
|
||||||
recent.push(channel);
|
|
||||||
},
|
|
||||||
confirmMessage: ({channels, messages}, {payload: {previous, current, timestamp}}) => {
|
confirmMessage: ({channels, messages}, {payload: {previous, current, timestamp}}) => {
|
||||||
messages[current] = {...messages[previous], timestamp, uuid: current};
|
messages[current] = {...messages[previous], timestamp, uuid: current};
|
||||||
delete messages[previous];
|
delete messages[previous];
|
||||||
|
@ -79,9 +75,6 @@ const slice = createSlice({
|
||||||
const {messages} = state.channels[channel];
|
const {messages} = state.channels[channel];
|
||||||
messages.splice(messages.indexOf(uuid), 1);
|
messages.splice(messages.indexOf(uuid), 1);
|
||||||
},
|
},
|
||||||
removeRecent: ({recent}, {payload: {channel}}) => {
|
|
||||||
recent.splice(recent.indexOf(channel), 1);
|
|
||||||
},
|
|
||||||
submitJoin: () => {},
|
submitJoin: () => {},
|
||||||
submitLeave: () => {},
|
submitLeave: () => {},
|
||||||
submitMessage: () => {},
|
submitMessage: () => {},
|
||||||
|
@ -90,7 +83,6 @@ const slice = createSlice({
|
||||||
|
|
||||||
export const {
|
export const {
|
||||||
addMessage,
|
addMessage,
|
||||||
addRecent,
|
|
||||||
confirmMessage,
|
confirmMessage,
|
||||||
editMessage,
|
editMessage,
|
||||||
join,
|
join,
|
||||||
|
@ -98,7 +90,6 @@ export const {
|
||||||
leave,
|
leave,
|
||||||
left,
|
left,
|
||||||
removeMessage,
|
removeMessage,
|
||||||
removeRecent,
|
|
||||||
submitJoin,
|
submitJoin,
|
||||||
submitLeave,
|
submitLeave,
|
||||||
submitMessage,
|
submitMessage,
|
||||||
|
|
|
@ -15,6 +15,26 @@ export const blockedSelector = createSelector(
|
||||||
(user) => user.blocked,
|
(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(
|
export const friendshipSelector = createSelector(
|
||||||
userSelector,
|
userSelector,
|
||||||
(user) => user.friendship,
|
(user) => user.friendship,
|
||||||
|
@ -30,6 +50,11 @@ export const pendingFriendshipSelector = createSelector(
|
||||||
(friendship) => Object.values(friendship).filter(({state}) => 'pending' === state),
|
(friendship) => Object.values(friendship).filter(({state}) => 'pending' === state),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const recentSelector = createSelector(
|
||||||
|
[userSelector],
|
||||||
|
({recent}) => recent,
|
||||||
|
);
|
||||||
|
|
||||||
export const redditUsernameSelector = createSelector(
|
export const redditUsernameSelector = createSelector(
|
||||||
userSelector,
|
userSelector,
|
||||||
(user) => user.redditUsername,
|
(user) => user.redditUsername,
|
||||||
|
@ -54,6 +79,7 @@ const slice = createSlice({
|
||||||
friendship: [],
|
friendship: [],
|
||||||
id: 0,
|
id: 0,
|
||||||
isAnonymous: false,
|
isAnonymous: false,
|
||||||
|
recent: [],
|
||||||
redditUsername: 'anonymous',
|
redditUsername: 'anonymous',
|
||||||
unread: {},
|
unread: {},
|
||||||
...(hydration('user') || {isAnonymous: true}),
|
...(hydration('user') || {isAnonymous: true}),
|
||||||
|
@ -80,6 +106,9 @@ const slice = createSlice({
|
||||||
(favorite) => favorite.name === name && favorite.type === type,
|
(favorite) => favorite.name === name && favorite.type === type,
|
||||||
), 1);
|
), 1);
|
||||||
},
|
},
|
||||||
|
removeRecent: ({recent}, {payload: channel}) => {
|
||||||
|
recent.splice(recent.indexOf(channel), 1);
|
||||||
|
},
|
||||||
updateFriendshipStatus: (state, {payload: {id, status}}) => {
|
updateFriendshipStatus: (state, {payload: {id, status}}) => {
|
||||||
state.friendship.find((friendship) => friendship.id === id).status = status;
|
state.friendship.find((friendship) => friendship.id === id).status = status;
|
||||||
},
|
},
|
||||||
|
@ -109,6 +138,7 @@ export const {
|
||||||
blockUser,
|
blockUser,
|
||||||
focus,
|
focus,
|
||||||
removeFriend,
|
removeFriend,
|
||||||
|
removeRecent,
|
||||||
} = slice.actions;
|
} = slice.actions;
|
||||||
|
|
||||||
export default slice.reducer;
|
export default slice.reducer;
|
||||||
|
|
|
@ -49,24 +49,27 @@ export const channelState = async (req, channel) => {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const userState = async ({channel, user}) => (
|
export const channelsToHydrate = async (req) => (
|
||||||
user
|
(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: [],
|
favorites: [],
|
||||||
focus: channel ? joinChannel(channel) : '',
|
focus: channel ? joinChannel(channel) : '',
|
||||||
friends: await user.friends(),
|
friends: await user.friends(),
|
||||||
id: user.id,
|
id: user.id,
|
||||||
redditUsername: user.redditUsername,
|
redditUsername: user.redditUsername,
|
||||||
|
recent: toHydrate.map(joinChannel).map((channel) => channel.substr(3)),
|
||||||
}
|
}
|
||||||
: null
|
: null;
|
||||||
);
|
};
|
||||||
|
|
||||||
export const appUserState = async (req) => userState(req);
|
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 chatUsers = async (req) => {
|
||||||
const toHydrate = await channelsToHydrate(req);
|
const toHydrate = await channelsToHydrate(req);
|
||||||
if (0 === toHydrate.length) {
|
if (0 === toHydrate.length) {
|
||||||
|
@ -95,7 +98,6 @@ export const appChatState = async (req) => {
|
||||||
const chat = {
|
const chat = {
|
||||||
channels: {},
|
channels: {},
|
||||||
messages: {},
|
messages: {},
|
||||||
recent: [],
|
|
||||||
users: {},
|
users: {},
|
||||||
};
|
};
|
||||||
for (let i = 0; i < toHydrate.length; i++) {
|
for (let i = 0; i < toHydrate.length; i++) {
|
||||||
|
@ -108,7 +110,6 @@ export const appChatState = async (req) => {
|
||||||
messages.forEach((message) => {
|
messages.forEach((message) => {
|
||||||
chat.messages[message.uuid] = message;
|
chat.messages[message.uuid] = message;
|
||||||
});
|
});
|
||||||
chat.recent.push(channel);
|
|
||||||
}
|
}
|
||||||
return chat;
|
return chat;
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue
Block a user