moved reaction for oauth events to sagas

src/containers/dialogs/LoginDialog/index.tsx

@@ -14,9 +14,9 @@ import * as styles from './styles.scss';
 import * as ACTIONS from '~/redux/auth/actions';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import { ISocialProvider } from '~/redux/auth/types';
-import { Grid } from '~/components/containers/Grid';
 import pick from 'ramda/es/pick';
 import { LoginDialogButtons } from '~/containers/dialogs/LoginDialogButtons';
+import { IOAuthEvent } from '~/redux/types';
 
 const mapStateToProps = state => ({
   ...pick(['error', 'is_registering'], selectAuthLogin(state)),
@@ -27,6 +27,7 @@ const mapDispatchToProps = {
   userSetLoginError: ACTIONS.userSetLoginError,
   authLoginWithSocial: ACTIONS.authLoginWithSocial,
   modalShowDialog: MODAL_ACTIONS.modalShowDialog,
+  authGotOauthEvent: ACTIONS.authGotOauthEvent,
 };
 
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & IDialogProps & {};
@@ -39,6 +40,7 @@ const LoginDialogUnconnected: FC<IProps> = ({
   userSetLoginError,
   authLoginWithSocial,
   modalShowDialog,
+  authGotOauthEvent,
 }) => {
   const [username, setUserName] = useState('');
   const [password, setPassword] = useState('');
@@ -67,21 +69,9 @@ const LoginDialogUnconnected: FC<IProps> = ({
     []
   );
 
-  const onMessage = useCallback(
+  const onMessage = useCallback((event: IOAuthEvent) => authGotOauthEvent(event), [
-    (event: MessageEvent) => {
+    authGotOauthEvent,
-      if (!event?.data?.type) return;
+  ]);
-
-      switch (event?.data?.type) {
-        case 'oauth_processed':
-          return authLoginWithSocial(event?.data?.payload?.token);
-        case 'oauth_error':
-          return userSetLoginError(event?.data?.payload?.error);
-        default:
-          return;
-      }
-    },
-    [authLoginWithSocial, userSetLoginError]
-  );
 
   useEffect(() => {
     if (error) userSetLoginError(null);

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 } from '../types';
+import { IMessage, IOAuthEvent } from '../types';
 
 export const userSendLoginRequest = ({
   username,
@@ -133,3 +133,8 @@ export const authLoginWithSocial = (token: string, username?: string, password?:
   username,
   password,
 });
+
+export const authGotOauthEvent = (event: IOAuthEvent) => ({
+  type: AUTH_USER_ACTIONS.GOT_OAUTH_EVENT,
+  event,
+});

src/redux/auth/constants.ts

@@ -31,6 +31,7 @@ export const AUTH_USER_ACTIONS = {
   SET_SOCIALS: 'SET_SOCIALS',
   ATTACH_SOCIAL: 'ATTACH_SOCIAL',
   LOGIN_WITH_SOCIAL: 'LOGIN_WITH_SOCIAL',
+  GOT_OAUTH_EVENT: 'GOT_OAUTH_EVENT',
 };
 
 export const USER_ERRORS = {

src/redux/auth/sagas.ts

@@ -4,6 +4,7 @@ import {
   authAttachSocial,
   authDropSocial,
   authGetMessages,
+  authGotOauthEvent,
   authLoadProfile,
   authLoggedIn,
   authLoginWithSocial,
@@ -473,6 +474,18 @@ function* loginWithSocial({ token }: ReturnType<typeof authLoginWithSocial>) {
   }
 }
 
+function* gotOauthEvent({ event }: ReturnType<typeof authGotOauthEvent>) {
+  if (!event?.data?.type) return;
+
+  switch (event?.data?.type) {
+    case 'oauth_processed':
+      return put(authLoginWithSocial(event?.data?.payload?.token));
+    case 'oauth_error':
+      return put(userSetLoginError(event?.data?.payload?.error));
+    default:
+      return;
+  }
+}
 function* authSaga() {
   yield takeEvery(REHYDRATE, checkUserSaga);
   yield takeLatest([REHYDRATE, AUTH_USER_ACTIONS.LOGGED_IN], startPollingSaga);
@@ -493,6 +506,7 @@ function* authSaga() {
   yield takeLatest(AUTH_USER_ACTIONS.DROP_SOCIAL, dropSocial);
   yield takeLatest(AUTH_USER_ACTIONS.ATTACH_SOCIAL, attachSocial);
   yield takeLatest(AUTH_USER_ACTIONS.LOGIN_WITH_SOCIAL, loginWithSocial);
+  yield takeEvery(AUTH_USER_ACTIONS.GOT_OAUTH_EVENT, gotOauthEvent);
 }
 
 export default authSaga;

src/redux/types.ts

@@ -206,3 +206,14 @@ export interface IEmbed {
     duration: string;
   };
 }
+
+export type IOAuthEvent = MessageEvent & {
+  data: {
+    type: 'oauth_processed' | 'oauth_error';
+    payload: {
+      token: string;
+      error: string;
+      needs_register: boolean;
+    };
+  };
+};