From d7ed0cbe54846015ff454d9047dee4bfbb4e2278 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 25 Nov 2019 12:12:51 +0700 Subject: [PATCH] moved history listen to sagas --- src/containers/App.tsx | 1 + .../pages/ErrorNotFound/styles.scss | 6 +- src/redux/auth/actions.ts | 10 ++ src/redux/auth/constants.ts | 3 + src/redux/auth/handlers.ts | 10 ++ src/redux/auth/reducer.ts | 7 ++ src/redux/auth/types.ts | 7 ++ src/redux/modal/sagas.ts | 23 ++++ src/redux/store.ts | 101 ++++++++---------- 9 files changed, 107 insertions(+), 61 deletions(-) create mode 100644 src/redux/modal/sagas.ts diff --git a/src/containers/App.tsx b/src/containers/App.tsx index bcd0a5ba..b98120a3 100644 --- a/src/containers/App.tsx +++ b/src/containers/App.tsx @@ -44,6 +44,7 @@ const Component: FC = ({ modal: { is_shown } }) => { + diff --git a/src/containers/pages/ErrorNotFound/styles.scss b/src/containers/pages/ErrorNotFound/styles.scss index 1577e405..e8930a95 100644 --- a/src/containers/pages/ErrorNotFound/styles.scss +++ b/src/containers/pages/ErrorNotFound/styles.scss @@ -16,12 +16,12 @@ .image { flex: 1 1; - background: red; + // background: red; display: flex; border-radius: 0 $radius $radius 0; } .sign { - font: $font_24_semibold; - font-size: 72px; + // font: $font_24_semibold; + // font-size: 72px; } diff --git a/src/redux/auth/actions.ts b/src/redux/auth/actions.ts index 0c578c05..3b005f42 100644 --- a/src/redux/auth/actions.ts +++ b/src/redux/auth/actions.ts @@ -76,3 +76,13 @@ export const authPatchUser = (user: Partial) => ({ type: AUTH_USER_ACTIONS.PATCH_USER, user, }); + +export const authSetRestore = (restore: Partial) => ({ + type: AUTH_USER_ACTIONS.SET_RESTORE, + restore, +}); + +export const authRestorePassword = (code: string) => ({ + type: AUTH_USER_ACTIONS.RESTORE_PASSWORD, + code, +}); diff --git a/src/redux/auth/constants.ts b/src/redux/auth/constants.ts index 16b7c1d5..c22fedc8 100644 --- a/src/redux/auth/constants.ts +++ b/src/redux/auth/constants.ts @@ -18,6 +18,9 @@ export const AUTH_USER_ACTIONS = { SET_UPDATES: 'SET_UPDATES', SET_LAST_SEEN_MESSAGES: 'SET_LAST_SEEN_MESSAGES', PATCH_USER: 'PATCH_USER', + + SET_RESTORE: 'SET_RESTORE', + RESTORE_PASSWORD: 'RESTORE_PASSWORD', }; export const USER_ERRORS = { diff --git a/src/redux/auth/handlers.ts b/src/redux/auth/handlers.ts index 21c9932e..85f12974 100644 --- a/src/redux/auth/handlers.ts +++ b/src/redux/auth/handlers.ts @@ -1,6 +1,7 @@ import { AUTH_USER_ACTIONS } from '~/redux/auth/constants'; import * as ActionCreators from '~/redux/auth/actions'; import { IAuthState } from '~/redux/auth/types'; +import { Action } from 'history'; interface ActionHandler { (state: IAuthState, payload: T extends (...args: any[]) => infer R ? R : any): IAuthState; @@ -57,6 +58,14 @@ const setLastSeenMessages: ActionHandler = (state, { restore }) => ({ + ...state, + restore: { + ...state.restore, + ...restore, + }, +}); + export const AUTH_USER_HANDLERS = { [AUTH_USER_ACTIONS.SET_LOGIN_ERROR]: setLoginError, [AUTH_USER_ACTIONS.SET_USER]: setUser, @@ -64,4 +73,5 @@ export const AUTH_USER_HANDLERS = { [AUTH_USER_ACTIONS.SET_PROFILE]: setProfile, [AUTH_USER_ACTIONS.SET_UPDATES]: setUpdates, [AUTH_USER_ACTIONS.SET_LAST_SEEN_MESSAGES]: setLastSeenMessages, + [AUTH_USER_ACTIONS.SET_RESTORE]: setRestore, }; diff --git a/src/redux/auth/reducer.ts b/src/redux/auth/reducer.ts index 41bf8463..1c9ba775 100644 --- a/src/redux/auth/reducer.ts +++ b/src/redux/auth/reducer.ts @@ -31,6 +31,13 @@ const INITIAL_STATE: IAuthState = { messages_error: null, patch_errors: {}, }, + + restore: { + code: '', + is_loading: false, + is_succesfull: false, + errors: {}, + }, }; export default createReducer(INITIAL_STATE, HANDLERS); diff --git a/src/redux/auth/types.ts b/src/redux/auth/types.ts index dedec0db..38922761 100644 --- a/src/redux/auth/types.ts +++ b/src/redux/auth/types.ts @@ -49,4 +49,11 @@ export type IAuthState = Readonly<{ patch_errors: Record; }; + + restore: { + code: string; + is_loading: boolean; + is_succesfull: boolean; + errors: Record; + }; }>; diff --git a/src/redux/modal/sagas.ts b/src/redux/modal/sagas.ts new file mode 100644 index 00000000..e3b24d07 --- /dev/null +++ b/src/redux/modal/sagas.ts @@ -0,0 +1,23 @@ +import { takeEvery, put } from 'redux-saga/effects'; +import { LocationChangeAction, LOCATION_CHANGE } from 'connected-react-router'; +import { authOpenProfile, authRestorePassword } from '../auth/actions'; + +function* onPathChange({ + payload: { + location: { pathname }, + }, +}: LocationChangeAction) { + if (pathname.match(/^\/~([\wа-яА-Я]+)/)) { + const [, username] = pathname.match(/^\/~([\wа-яА-Я]+)/); + return yield put(authOpenProfile(username)); + } + + if (pathname.match(/^\/restore\/([\w\-]+)/)) { + const [, code] = pathname.match(/^\/restore\/([\w\-]+)/); + return yield put(authRestorePassword(code)); + } +} + +export function* modalSaga() { + yield takeEvery(LOCATION_CHANGE, onPathChange); +} diff --git a/src/redux/store.ts b/src/redux/store.ts index 6faacade..db90079d 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -1,53 +1,44 @@ -import { - createStore, - applyMiddleware, - combineReducers, - compose, - Store -} from "redux"; +import { createStore, applyMiddleware, combineReducers, compose, Store } from 'redux'; -import { persistStore, persistReducer } from "redux-persist"; -import storage from "redux-persist/lib/storage"; -import createSagaMiddleware from "redux-saga"; -import { - connectRouter, - RouterState, - routerMiddleware -} from "connected-react-router"; -import { createBrowserHistory } from "history"; -import { PersistConfig, Persistor } from "redux-persist/es/types"; +import { persistStore, persistReducer } from 'redux-persist'; +import storage from 'redux-persist/lib/storage'; +import createSagaMiddleware from 'redux-saga'; +import { connectRouter, RouterState, routerMiddleware } from 'connected-react-router'; +import { createBrowserHistory } from 'history'; +import { PersistConfig, Persistor } from 'redux-persist/es/types'; -import authReducer from "~/redux/auth/reducer"; -import authSaga from "~/redux/auth/sagas"; +import authReducer from '~/redux/auth/reducer'; +import authSaga from '~/redux/auth/sagas'; -import nodeReducer, { INodeState } from "~/redux/node/reducer"; -import nodeSaga from "~/redux/node/sagas"; +import nodeReducer, { INodeState } from '~/redux/node/reducer'; +import nodeSaga from '~/redux/node/sagas'; -import flowReducer, { IFlowState } from "~/redux/flow/reducer"; -import flowSaga from "~/redux/flow/sagas"; +import flowReducer, { IFlowState } from '~/redux/flow/reducer'; +import flowSaga from '~/redux/flow/sagas'; -import uploadReducer, { IUploadState } from "~/redux/uploads/reducer"; -import uploadSaga from "~/redux/uploads/sagas"; +import uploadReducer, { IUploadState } from '~/redux/uploads/reducer'; +import uploadSaga from '~/redux/uploads/sagas'; -import playerReducer, { IPlayerState } from "~/redux/player/reducer"; -import playerSaga from "~/redux/player/sagas"; +import playerReducer, { IPlayerState } from '~/redux/player/reducer'; +import playerSaga from '~/redux/player/sagas'; -import { IAuthState } from "~/redux/auth/types"; +import { IAuthState } from '~/redux/auth/types'; -import modalReducer, { IModalState } from "~/redux/modal/reducer"; -import { gotAuthPostMessage, authOpenProfile } from "./auth/actions"; +import modalReducer, { IModalState } from '~/redux/modal/reducer'; +import { gotAuthPostMessage, authOpenProfile } from './auth/actions'; +import { modalSaga } from './modal/sagas'; const authPersistConfig: PersistConfig = { - key: "auth", - whitelist: ["token", "user", "updates"], - storage + key: 'auth', + whitelist: ['token', 'user', 'updates'], + storage, }; const flowPersistConfig: PersistConfig = { - key: "flow", - whitelist: ["nodes", "recent", "updated"], + key: 'flow', + whitelist: ['nodes', 'recent', 'updated'], // whitelist: [], - storage + storage, }; export interface IState { @@ -63,16 +54,19 @@ export interface IState { export const sagaMiddleware = createSagaMiddleware(); export const history = createBrowserHistory(); -history.listen(({ pathname }) => { - if (pathname.match(/~([\wа-яА-Я]+)/)) { - const [, username] = pathname.match(/~([\wа-яА-Я]+)/); - window.postMessage({ type: "username", username }, "*"); - } -}); +// history. +// history.listen(({ pathname }) => { +// if (pathname.match(/~([\wа-яА-Я]+)/)) { +// const [, username] = pathname.match(/~([\wа-яА-Я]+)/); +// window.postMessage({ type: 'username', username }, '*'); +// } + +// console.log({ pathname }); +// // if (pathname.match) +// }); const composeEnhancers = - typeof window === "object" && - (window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ + typeof window === 'object' && (window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? (window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose; @@ -84,7 +78,7 @@ export const store = createStore( node: nodeReducer, uploads: uploadReducer, flow: persistReducer(flowPersistConfig, flowReducer), - player: playerReducer + player: playerReducer, }), composeEnhancers(applyMiddleware(routerMiddleware(history), sagaMiddleware)) ); @@ -98,22 +92,13 @@ export function configureStore(): { sagaMiddleware.run(uploadSaga); sagaMiddleware.run(flowSaga); sagaMiddleware.run(playerSaga); + sagaMiddleware.run(modalSaga); - window.addEventListener("message", message => { - if ( - message && - message.data && - message.data.type === "oauth_login" && - message.data.token - ) + window.addEventListener('message', message => { + if (message && message.data && message.data.type === 'oauth_login' && message.data.token) return store.dispatch(gotAuthPostMessage({ token: message.data.token })); - if ( - message && - message.data && - message.data.type === "username" && - message.data.username - ) + if (message && message.data && message.data.type === 'username' && message.data.username) return store.dispatch(authOpenProfile(message.data.username)); });