moved history listen to sagas

src/containers/App.tsx

@@ -44,6 +44,7 @@ const Component: FC<IProps> = ({ modal: { is_shown } }) => {
               <Route path={URLS.NODE_URL(':id')} component={NodeLayout} />
               <Route path={URLS.BORIS} component={BorisLayout} />
               <Route path={URLS.ERRORS.NOT_FOUND} component={ErrorNotFound} />
+              <Route path="/restore/:code" component={ErrorNotFound} />
 
               <Redirect to="/" />
             </Switch>

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

src/redux/auth/actions.ts

@@ -76,3 +76,13 @@ export const authPatchUser = (user: Partial<IUser>) => ({
   type: AUTH_USER_ACTIONS.PATCH_USER,
   user,
 });
+
+export const authSetRestore = (restore: Partial<IAuthState['restore']>) => ({
+  type: AUTH_USER_ACTIONS.SET_RESTORE,
+  restore,
+});
+
+export const authRestorePassword = (code: string) => ({
+  type: AUTH_USER_ACTIONS.RESTORE_PASSWORD,
+  code,
+});

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 = {

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<T> {
   (state: IAuthState, payload: T extends (...args: any[]) => infer R ? R : any): IAuthState;
@@ -57,6 +58,14 @@ const setLastSeenMessages: ActionHandler<typeof ActionCreators.authSetLastSeenMe
   },
 });
 
+const setRestore: ActionHandler<typeof ActionCreators.authSetRestore> = (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,
 };

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

src/redux/auth/types.ts

@@ -49,4 +49,11 @@ export type IAuthState = Readonly<{
 
     patch_errors: Record<string, string>;
   };
+
+  restore: {
+    code: string;
+    is_loading: boolean;
+    is_succesfull: boolean;
+    errors: Record<string, string>;
+  };
 }>;

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

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" &&
-  (<any>window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+  typeof window === 'object' && (<any>window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
     ? (<any>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));
   });