From 737a4396deeda0b549d5deaa7104dadce5eb8448 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Tue, 8 Sep 2020 10:58:55 +0700 Subject: [PATCH] moved messages to separate reducer --- src/components/profile/MessageForm/index.tsx | 18 ++-- .../profile/ProfileMessages/index.tsx | 33 +++--- src/redux/auth/actions.ts | 18 +--- src/redux/auth/constants.ts | 4 - src/redux/auth/index.ts | 5 +- src/redux/auth/sagas.ts | 100 +----------------- src/redux/auth/types.ts | 6 +- src/redux/messages/actions.ts | 24 +++++ src/redux/messages/constants.ts | 8 ++ src/redux/messages/handlers.ts | 15 +++ src/redux/messages/index.ts | 19 ++++ src/redux/messages/sagas.ts | 98 +++++++++++++++++ src/redux/messages/selectors.ts | 3 + src/redux/store.ts | 14 ++- 14 files changed, 212 insertions(+), 153 deletions(-) create mode 100644 src/redux/messages/actions.ts create mode 100644 src/redux/messages/constants.ts create mode 100644 src/redux/messages/handlers.ts create mode 100644 src/redux/messages/index.ts create mode 100644 src/redux/messages/sagas.ts create mode 100644 src/redux/messages/selectors.ts diff --git a/src/components/profile/MessageForm/index.tsx b/src/components/profile/MessageForm/index.tsx index 86fb7556..c674e6a7 100644 --- a/src/components/profile/MessageForm/index.tsx +++ b/src/components/profile/MessageForm/index.tsx @@ -1,21 +1,21 @@ -import React, { FC, useState, useCallback, KeyboardEventHandler, useMemo } from 'react'; +import React, { FC, KeyboardEventHandler, useCallback, useMemo, useState } from 'react'; import styles from './styles.scss'; import { Textarea } from '~/components/input/Textarea'; import { Filler } from '~/components/containers/Filler'; import { Button } from '~/components/input/Button'; import { Group } from '~/components/containers/Group'; -import { selectAuthProfile } from '~/redux/auth/selectors'; import { connect } from 'react-redux'; import { LoaderCircle } from '~/components/input/LoaderCircle'; -import * as AUTH_ACTIONS from '~/redux/auth/actions'; +import * as MESSAGES_ACTIONS from '~/redux/messages/actions'; import { ERROR_LITERAL } from '~/constants/errors'; +import { selectMessages } from '~/redux/messages/selectors'; const mapStateToProps = state => ({ - profile: selectAuthProfile(state), + messages: selectMessages(state), }); const mapDispatchToProps = { - authSendMessage: AUTH_ACTIONS.authSendMessage, + messagesSendMessage: MESSAGES_ACTIONS.messagesSendMessage, }; type IProps = ReturnType & @@ -26,8 +26,8 @@ type IProps = ReturnType & }; const MessageFormUnconnected: FC = ({ - profile: { is_sending_messages, is_loading_messages, messages_error }, - authSendMessage, + messages: { is_sending_messages, is_loading_messages, messages_error }, + messagesSendMessage, id = 0, text: initialText = '', @@ -45,8 +45,8 @@ const MessageFormUnconnected: FC = ({ }, [setText, isEditing, onCancel]); const onSubmit = useCallback(() => { - authSendMessage({ text, id }, onSuccess); - }, [authSendMessage, text, id, onSuccess]); + messagesSendMessage({ text, id }, onSuccess); + }, [messagesSendMessage, text, id, onSuccess]); const onKeyDown = useCallback>( ({ ctrlKey, key }) => { diff --git a/src/containers/profile/ProfileMessages/index.tsx b/src/containers/profile/ProfileMessages/index.tsx index 810acf71..b91bc89b 100644 --- a/src/containers/profile/ProfileMessages/index.tsx +++ b/src/containers/profile/ProfileMessages/index.tsx @@ -2,57 +2,62 @@ import React, { FC, useCallback, useEffect, useState } from 'react'; import { connect } from 'react-redux'; import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors'; import styles from './styles.scss'; -import * as AUTH_ACTIONS from '~/redux/auth/actions'; +import * as AUTH_ACTIONS from '~/redux/messages/actions'; import { Message } from '~/components/profile/Message'; import { Group } from '~/components/containers/Group'; import pick from 'ramda/es/pick'; import { NodeNoComments } from '~/components/node/NodeNoComments'; +import { selectMessages } from '~/redux/messages/selectors'; const mapStateToProps = state => ({ profile: selectAuthProfile(state), + messages: selectMessages(state), user: pick(['id'], selectAuthUser(state)), }); const mapDispatchToProps = { - authGetMessages: AUTH_ACTIONS.authGetMessages, - authDeleteMessage: AUTH_ACTIONS.authDeleteMessage, + messagesGetMessages: AUTH_ACTIONS.messagesGetMessages, + messagesDeleteMessage: AUTH_ACTIONS.messagesDeleteMessage, }; type IProps = ReturnType & typeof mapDispatchToProps & {}; const ProfileMessagesUnconnected: FC = ({ profile, + messages, user: { id }, - authGetMessages, - authDeleteMessage, + messagesGetMessages, + messagesDeleteMessage, }) => { const [editingMessageId, setEditingMessageId] = useState(0); const onEditMessage = useCallback((id: number) => setEditingMessageId(id), [setEditingMessageId]); const onCancelEdit = useCallback(() => setEditingMessageId(0), [setEditingMessageId]); - const onDeleteMessage = useCallback((id: number) => authDeleteMessage(id), [authDeleteMessage]); + const onDeleteMessage = useCallback((id: number) => messagesDeleteMessage(id), [ + messagesDeleteMessage, + ]); useEffect(() => { if (profile.is_loading || !profile.user || !profile.user.username) return; - authGetMessages(profile.user.username); + messagesGetMessages(profile.user.username); }, [profile.user]); useEffect(() => { - if (profile.is_loading || !profile.user || !profile.user.username || profile.messages_error) + if (profile.is_loading || !profile.user || !profile.user.username || messages.messages_error) return; - const timer = setTimeout(() => authGetMessages(profile.user.username), 20000); + const timer = setTimeout(() => messagesGetMessages(profile.user.username), 20000); return () => clearTimeout(timer); - }, [profile.user, profile.messages]); + }, [profile.user, messages.messages]); - if (!profile.messages.length || profile.is_loading) - return ; + if (!messages.messages.length || profile.is_loading) + return ; return ( - {profile.messages + {messages.messages .filter(message => !!message.text) .map(( message // TODO: show files / memo @@ -68,7 +73,7 @@ const ProfileMessagesUnconnected: FC = ({ /> ))} - {!profile.is_loading_messages && profile.messages.length > 0 && ( + {!messages.is_loading_messages && messages.messages.length > 0 && (
Когда-нибудь здесь будут еще сообщения
)} diff --git a/src/redux/auth/actions.ts b/src/redux/auth/actions.ts index 942eb3f8..9c2dd8c9 100644 --- a/src/redux/auth/actions.ts +++ b/src/redux/auth/actions.ts @@ -1,6 +1,6 @@ import { AUTH_USER_ACTIONS } from '~/redux/auth/constants'; import { IAuthState, ISocialProvider, IUser } from '~/redux/auth/types'; -import { IMessage, IOAuthEvent } from '../types'; +import { IOAuthEvent } from '../types'; export const userSendLoginRequest = ({ username, @@ -54,22 +54,6 @@ export const authSetProfile = (profile: Partial) => ({ profile, }); -export const authGetMessages = (username: string) => ({ - type: AUTH_USER_ACTIONS.GET_MESSAGES, - username, -}); - -export const authSendMessage = (message: Partial, onSuccess) => ({ - type: AUTH_USER_ACTIONS.SEND_MESSAGE, - message, - onSuccess, -}); - -export const authDeleteMessage = (id: IMessage['id']) => ({ - type: AUTH_USER_ACTIONS.DELETE_MESSAGE, - id, -}); - export const authSetUpdates = (updates: Partial) => ({ type: AUTH_USER_ACTIONS.SET_UPDATES, updates, diff --git a/src/redux/auth/constants.ts b/src/redux/auth/constants.ts index 71fd3f90..5c66e845 100644 --- a/src/redux/auth/constants.ts +++ b/src/redux/auth/constants.ts @@ -13,10 +13,6 @@ export const AUTH_USER_ACTIONS = { OPEN_PROFILE: 'OPEN_PROFILE', LOAD_PROFILE: 'LOAD_PROFILE', SET_PROFILE: 'SET_PROFILE', - GET_MESSAGES: 'GET_MESSAGES', - - SEND_MESSAGE: 'SEND_MESSAGE', - DELETE_MESSAGE: 'DELETE_MESSAGE', SET_UPDATES: 'SET_UPDATES', SET_LAST_SEEN_MESSAGES: 'SET_LAST_SEEN_MESSAGES', diff --git a/src/redux/auth/index.ts b/src/redux/auth/index.ts index 88f2de95..008d581f 100644 --- a/src/redux/auth/index.ts +++ b/src/redux/auth/index.ts @@ -26,11 +26,8 @@ const INITIAL_STATE: IAuthState = { profile: { tab: 'profile', is_loading: true, - is_loading_messages: true, - is_sending_messages: false, + user: null, - messages: [], - messages_error: null, patch_errors: {}, socials: { diff --git a/src/redux/auth/sagas.ts b/src/redux/auth/sagas.ts index 8b20c40c..7e4d4da1 100644 --- a/src/redux/auth/sagas.ts +++ b/src/redux/auth/sagas.ts @@ -3,7 +3,6 @@ import { AUTH_USER_ACTIONS, EMPTY_USER, USER_ERRORS, USER_ROLES } from '~/redux/ import { authAttachSocial, authDropSocial, - authGetMessages, authGotOauthLoginEvent, authLoadProfile, authLoggedIn, @@ -12,7 +11,6 @@ import { authPatchUser, authRequestRestoreCode, authRestorePassword, - authSendMessage, authSendRegisterSocial, authSetLastSeenMessages, authSetProfile, @@ -32,9 +30,7 @@ import { apiAttachSocial, apiAuthGetUpdates, apiAuthGetUser, - apiAuthGetUserMessages, apiAuthGetUserProfile, - apiAuthSendMessage, apiCheckRestoreCode, apiDropSocial, apiGetSocials, @@ -54,13 +50,14 @@ import { selectAuthUser, selectToken, } from './selectors'; -import { IMessageNotification, IResultWithStatus, OAUTH_EVENT_TYPES, Unwrap } from '../types'; +import { IResultWithStatus, OAUTH_EVENT_TYPES, Unwrap } from '../types'; import { IAuthState, IUser } from './types'; import { REHYDRATE, RehydrateAction } from 'redux-persist'; import { selectModal } from '~/redux/modal/selectors'; import { IModalState } from '~/redux/modal'; import { DIALOGS } from '~/redux/modal/constants'; import { ERRORS } from '~/constants/errors'; +import { messagesSetMessages } from '~/redux/messages/actions'; export function* reqWrapper(requestAction, props = {}): ReturnType { const access = yield select(selectToken); @@ -157,7 +154,8 @@ function* loadProfile({ username }: ReturnType) { return false; } - yield put(authSetProfile({ is_loading: false, user, messages: [] })); + yield put(authSetProfile({ is_loading: false, user })); + yield put(messagesSetMessages({ messages: [] })); return true; } @@ -172,94 +170,6 @@ function* openProfile({ username, tab = 'profile' }: ReturnType) { - // yield put(modalShowDialog(DIALOGS.PROFILE)); - const { messages } = yield select(selectAuthProfile); - - yield put( - authSetProfile({ - is_loading_messages: true, - messages: - messages && - messages.length > 0 && - (messages[0].to.username === username || messages[0].from.username === username) - ? messages - : [], - }) - ); - - const { - error, - data, - // data: { messages }, - } = yield call(reqWrapper, apiAuthGetUserMessages, { username }); - - if (error || !data.messages) { - return yield put( - authSetProfile({ - is_loading_messages: false, - messages_error: ERRORS.EMPTY_RESPONSE, - }) - ); - } - - yield put(authSetProfile({ is_loading_messages: false, messages: data.messages })); - - const { notifications } = yield select(selectAuthUpdates); - - // clear viewed message from notifcation list - const filtered = notifications.filter( - notification => - notification.type !== 'message' || - (notification as IMessageNotification).content.from.username !== username - ); - - if (filtered.length !== notifications.length) { - yield put(authSetUpdates({ notifications: filtered })); - } -} - -function* sendMessage({ message, onSuccess }: ReturnType) { - const { - user: { username }, - } = yield select(selectAuthProfile); - - if (!username) return; - - yield put(authSetProfile({ is_sending_messages: true, messages_error: null })); - - const { error, data } = yield call(reqWrapper, apiAuthSendMessage, { - username, - message, - }); - - console.log({ error, data }); - - if (error || !data.message) { - return yield put( - authSetProfile({ - is_sending_messages: false, - messages_error: error || ERRORS.EMPTY_RESPONSE, - }) - ); - } - - const { user, messages } = yield select(selectAuthProfile); - - if (user.username !== username) { - return yield put(authSetProfile({ is_sending_messages: false })); - } - - yield put( - authSetProfile({ - is_sending_messages: false, - messages: [data.message, ...messages], - }) - ); - - onSuccess(); -} - function* getUpdates() { const user: ReturnType = yield select(selectAuthUser); @@ -543,8 +453,6 @@ function* authSaga() { yield takeLatest(AUTH_USER_ACTIONS.GOT_AUTH_POST_MESSAGE, gotPostMessageSaga); yield takeLatest(AUTH_USER_ACTIONS.OPEN_PROFILE, openProfile); yield takeLatest(AUTH_USER_ACTIONS.LOAD_PROFILE, loadProfile); - yield takeLatest(AUTH_USER_ACTIONS.GET_MESSAGES, getMessages); - yield takeLatest(AUTH_USER_ACTIONS.SEND_MESSAGE, sendMessage); yield takeLatest(AUTH_USER_ACTIONS.SET_LAST_SEEN_MESSAGES, setLastSeenMessages); yield takeLatest(AUTH_USER_ACTIONS.PATCH_USER, patchUser); yield takeLatest(AUTH_USER_ACTIONS.REQUEST_RESTORE_CODE, requestRestoreCode); diff --git a/src/redux/auth/types.ts b/src/redux/auth/types.ts index d51b7247..52d417d4 100644 --- a/src/redux/auth/types.ts +++ b/src/redux/auth/types.ts @@ -1,4 +1,4 @@ -import { IFile, IMessage, INotification } from '../types'; +import { IFile, INotification } from '../types'; export interface IToken { access: string; @@ -52,12 +52,8 @@ export type IAuthState = Readonly<{ profile: { tab: 'profile' | 'messages' | 'settings'; is_loading: boolean; - is_loading_messages: boolean; - is_sending_messages: boolean; user: IUser; - messages: IMessage[]; - messages_error: string; patch_errors: Record; socials: { diff --git a/src/redux/messages/actions.ts b/src/redux/messages/actions.ts new file mode 100644 index 00000000..471d68aa --- /dev/null +++ b/src/redux/messages/actions.ts @@ -0,0 +1,24 @@ +import { IMessage } from '~/redux/types'; +import { MESSAGES_ACTIONS } from '~/redux/messages/constants'; +import { IMessagesState } from '~/redux/messages'; + +export const messagesGetMessages = (username: string) => ({ + type: MESSAGES_ACTIONS.GET_MESSAGES, + username, +}); + +export const messagesSendMessage = (message: Partial, onSuccess) => ({ + type: MESSAGES_ACTIONS.SEND_MESSAGE, + message, + onSuccess, +}); + +export const messagesDeleteMessage = (id: IMessage['id']) => ({ + type: MESSAGES_ACTIONS.DELETE_MESSAGE, + id, +}); + +export const messagesSetMessages = (messages: Partial) => ({ + type: MESSAGES_ACTIONS.SET_MESSAGES, + messages, +}); diff --git a/src/redux/messages/constants.ts b/src/redux/messages/constants.ts new file mode 100644 index 00000000..5145c23f --- /dev/null +++ b/src/redux/messages/constants.ts @@ -0,0 +1,8 @@ +const p = 'MESSAGES.'; + +export const MESSAGES_ACTIONS = { + SET_MESSAGES: `${p}SET_MESSAGES`, + GET_MESSAGES: `${p}GET_MESSAGES`, + SEND_MESSAGE: `${p}SEND_MESSAGE`, + DELETE_MESSAGE: `${p}DELETE_MESSAGE`, +}; diff --git a/src/redux/messages/handlers.ts b/src/redux/messages/handlers.ts new file mode 100644 index 00000000..c97e2802 --- /dev/null +++ b/src/redux/messages/handlers.ts @@ -0,0 +1,15 @@ +import { MESSAGES_ACTIONS } from '~/redux/messages/constants'; +import { IMessagesState } from '~/redux/messages'; +import { messagesSetMessages } from '~/redux/messages/actions'; + +const setMessages = ( + state: IMessagesState, + { messages }: ReturnType +): IMessagesState => ({ + ...state, + ...messages, +}); + +export const MESSAGE_HANDLERS = { + [MESSAGES_ACTIONS.SET_MESSAGES]: setMessages, +}; diff --git a/src/redux/messages/index.ts b/src/redux/messages/index.ts new file mode 100644 index 00000000..018fd4d6 --- /dev/null +++ b/src/redux/messages/index.ts @@ -0,0 +1,19 @@ +import { createReducer } from '~/utils/reducer'; +import { MESSAGE_HANDLERS } from '~/redux/messages/handlers'; +import { IMessage } from '~/redux/types'; + +export interface IMessagesState { + is_loading_messages: boolean; + is_sending_messages: boolean; + messages: IMessage[]; + messages_error: string; +} + +const INITIAL_STATE: IMessagesState = { + is_loading_messages: true, + is_sending_messages: false, + messages_error: null, + messages: [], +}; + +export default createReducer(INITIAL_STATE, MESSAGE_HANDLERS); diff --git a/src/redux/messages/sagas.ts b/src/redux/messages/sagas.ts new file mode 100644 index 00000000..03e188d4 --- /dev/null +++ b/src/redux/messages/sagas.ts @@ -0,0 +1,98 @@ +import { authSetUpdates } from '~/redux/auth/actions'; +import { call, put, select, takeLatest } from 'redux-saga/effects'; +import { selectAuthProfile, selectAuthUpdates } from '~/redux/auth/selectors'; +import { apiAuthGetUserMessages, apiAuthSendMessage } from '~/redux/auth/api'; +import { ERRORS } from '~/constants/errors'; +import { IMessageNotification } from '~/redux/types'; +import { reqWrapper } from '~/redux/auth/sagas'; +import { messagesGetMessages, messagesSendMessage, messagesSetMessages, } from '~/redux/messages/actions'; +import { MESSAGES_ACTIONS } from '~/redux/messages/constants'; +import { selectMessages } from '~/redux/messages/selectors'; + +function* getMessages({ username }: ReturnType) { + const { messages }: ReturnType = yield select(selectMessages); + + yield put( + messagesSetMessages({ + is_loading_messages: true, + messages: + messages && + messages.length > 0 && + (messages[0].to.username === username || messages[0].from.username === username) + ? messages + : [], + }) + ); + + const { error, data } = yield call(reqWrapper, apiAuthGetUserMessages, { username }); + + if (error || !data.messages) { + return yield put( + messagesSetMessages({ + is_loading_messages: false, + messages_error: ERRORS.EMPTY_RESPONSE, + }) + ); + } + + yield put(messagesSetMessages({ is_loading_messages: false, messages: data.messages })); + + const { notifications } = yield select(selectAuthUpdates); + + // clear viewed message from notifcation list + const filtered = notifications.filter( + notification => + notification.type !== 'message' || + (notification as IMessageNotification).content.from.username !== username + ); + + if (filtered.length !== notifications.length) { + yield put(authSetUpdates({ notifications: filtered })); + } +} + +function* sendMessage({ message, onSuccess }: ReturnType) { + const { + user: { username }, + }: ReturnType = yield select(selectAuthProfile); + + if (!username) return; + + yield put(messagesSetMessages({ is_sending_messages: true, messages_error: null })); + + const { error, data } = yield call(reqWrapper, apiAuthSendMessage, { + username, + message, + }); + + if (error || !data.message) { + return yield put( + messagesSetMessages({ + is_sending_messages: false, + messages_error: error || ERRORS.EMPTY_RESPONSE, + }) + ); + } + + const { user }: ReturnType = yield select(selectAuthProfile); + + if (user.username !== username) { + return yield put(messagesSetMessages({ is_sending_messages: false })); + } + + const { messages }: ReturnType = yield select(selectMessages); + + yield put( + messagesSetMessages({ + is_sending_messages: false, + messages: [data.message, ...messages], + }) + ); + + onSuccess(); +} + +export default function*() { + yield takeLatest(MESSAGES_ACTIONS.GET_MESSAGES, getMessages); + yield takeLatest(MESSAGES_ACTIONS.SEND_MESSAGE, sendMessage); +} diff --git a/src/redux/messages/selectors.ts b/src/redux/messages/selectors.ts new file mode 100644 index 00000000..9ae9cfb1 --- /dev/null +++ b/src/redux/messages/selectors.ts @@ -0,0 +1,3 @@ +import { IState } from '~/redux/store'; + +export const selectMessages = (state: IState) => state.messages; diff --git a/src/redux/store.ts b/src/redux/store.ts index 1af0b57e..523b069a 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -1,9 +1,9 @@ -import { createStore, applyMiddleware, combineReducers, compose, Store } from 'redux'; +import { applyMiddleware, combineReducers, compose, createStore, Store } from 'redux'; -import { persistStore, persistReducer } from 'redux-persist'; +import { persistReducer, persistStore } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; import createSagaMiddleware from 'redux-saga'; -import { connectRouter, RouterState, routerMiddleware } from 'connected-react-router'; +import { connectRouter, routerMiddleware, RouterState } from 'connected-react-router'; import { createBrowserHistory } from 'history'; import { PersistConfig, Persistor } from 'redux-persist/es/types'; @@ -26,11 +26,14 @@ import playerSaga from '~/redux/player/sagas'; import modal, { IModalState } from '~/redux/modal'; import { modalSaga } from './modal/sagas'; -import { gotAuthPostMessage, authOpenProfile } from './auth/actions'; +import { authOpenProfile, gotAuthPostMessage } from './auth/actions'; import boris, { IBorisState } from './boris/reducer'; import borisSaga from './boris/sagas'; +import messages, { IMessagesState } from './messages'; +import messagesSaga from './messages/sagas'; + const authPersistConfig: PersistConfig = { key: 'auth', whitelist: ['token', 'user', 'updates'], @@ -58,6 +61,7 @@ export interface IState { flow: IFlowState; player: IPlayerState; boris: IBorisState; + messages: IMessagesState; } export const sagaMiddleware = createSagaMiddleware(); @@ -78,6 +82,7 @@ export const store = createStore( uploads, flow: persistReducer(flowPersistConfig, flow), player: persistReducer(playerPersistConfig, player), + messages, }), composeEnhancers(applyMiddleware(routerMiddleware(history), sagaMiddleware)) ); @@ -93,6 +98,7 @@ export function configureStore(): { sagaMiddleware.run(playerSaga); sagaMiddleware.run(modalSaga); sagaMiddleware.run(borisSaga); + sagaMiddleware.run(messagesSaga); window.addEventListener('message', message => { if (message && message.data && message.data.type === 'oauth_login' && message.data.token)