receiving window messages

src/components/main/Header/index.tsx

@@ -13,6 +13,7 @@ import { DIALOGS } from '~/redux/modal/constants';
 import { pick } from 'ramda';
 import { Icon } from '~/components/input/Icon';
 import { getURL } from '~/utils/dom';
+import { API } from '~/constants/api';
 
 const mapStateToProps = state => ({
   user: pick(['username', 'is_user', 'photo'])(selectUser(state)),
@@ -27,6 +28,9 @@ type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {
 
 const HeaderUnconnected: FC<IProps> = memo(({ user: { username, is_user, photo }, showDialog }) => {
   const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
+  const onSocialLogin = useCallback(() => {
+    window.open(API.USER.VKONTAKTE_LOGIN, '', 'width=600,height=400');
+  }, []);
 
   return (
     <div className={style.container}>
@@ -36,6 +40,7 @@ const HeaderUnconnected: FC<IProps> = memo(({ user: { username, is_user, photo }
 
       <div className={style.plugs}>
         <Link to="/">flow</Link>
+        <a onClick={onSocialLogin}>SOCIAL</a>
       </div>
 
       {is_user && (

src/constants/api.ts

@@ -4,6 +4,7 @@ export const API = {
   BASE: process.env.API_HOST,
   USER: {
     LOGIN: '/auth/login',
+    VKONTAKTE_LOGIN: `${process.env.API_HOST}/auth/vkontakte`,
     ME: '/auth/', //
     UPLOAD: (target, type) => `/upload/${target}/${type}`,
   },

src/containers/App.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import { ConnectedRouter } from 'connected-react-router';
@@ -25,31 +25,33 @@ const mapDispatchToProps = {};
 
 type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {};
 
-const Component: FC<IProps> = ({ modal: { is_shown } }) => (
+const Component: FC<IProps> = ({ modal: { is_shown } }) => {
-  <ConnectedRouter history={history}>
+  return (
-    <div>
+    <ConnectedRouter history={history}>
-      <BlurWrapper is_blurred={is_shown}>
+      <div>
-        <PageCover />
+        <BlurWrapper is_blurred={is_shown}>
-        <MainLayout>
+          <PageCover />
-          <Modal />
+          <MainLayout>
-          <Sprites />
+            <Modal />
+            <Sprites />
 
-          <Switch>
+            <Switch>
-            <Route exact path={URLS.BASE} component={FlowLayout} />
+              <Route exact path={URLS.BASE} component={FlowLayout} />
-            <Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
+              <Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
-            <Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
+              <Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
-            <Route path="/examples/horizontal" component={HorizontalExample} />
+              <Route path="/examples/horizontal" component={HorizontalExample} />
-            <Route path="/post:id" component={NodeLayout} />
+              <Route path="/post:id" component={NodeLayout} />
 
-            <Redirect to="/" />
+              <Redirect to="/" />
-          </Switch>
+            </Switch>
-        </MainLayout>
+          </MainLayout>
-      </BlurWrapper>
+        </BlurWrapper>
 
-      <BottomContainer />
+        <BottomContainer />
-    </div>
+      </div>
-  </ConnectedRouter>
+    </ConnectedRouter>
-);
+  );
+};
 
 export default connect(
   mapStateToProps,

src/redux/auth/actions.ts

@@ -2,17 +2,29 @@ import { AUTH_USER_ACTIONS } from '~/redux/auth/constants';
 import { IAuthState, IUser } from '~/redux/auth/types';
 
 export const userSendLoginRequest = ({
-  username, password
+  username,
+  password,
 }: {
-  username: string; password: string;
+  username: string;
+  password: string;
 }) => ({ type: AUTH_USER_ACTIONS.SEND_LOGIN_REQUEST, username, password });
 
 export const userSetLoginError = (error: IAuthState['login']['error']) => ({
-  type: AUTH_USER_ACTIONS.SET_LOGIN_ERROR, error
+  type: AUTH_USER_ACTIONS.SET_LOGIN_ERROR,
+  error,
 });
 
 export const authSetToken = (token: IAuthState['token']) => ({
-  type: AUTH_USER_ACTIONS.SET_TOKEN, token,
+  type: AUTH_USER_ACTIONS.SET_TOKEN,
+  token,
 });
 
-export const authSetUser = (profile: Partial<IUser>) => ({ type: AUTH_USER_ACTIONS.SET_USER, profile });
+export const gotPostMessage = (message: MessageEvent) => ({
+  type: AUTH_USER_ACTIONS.GOT_POST_MESSAGE,
+  message,
+});
+
+export const authSetUser = (profile: Partial<IUser>) => ({
+  type: AUTH_USER_ACTIONS.SET_USER,
+  profile,
+});

src/redux/auth/constants.ts

@@ -5,6 +5,8 @@ export const AUTH_USER_ACTIONS = {
   SET_LOGIN_ERROR: 'SET_LOGIN_ERROR',
   SET_USER: 'SET_USER',
   SET_TOKEN: 'SET_TOKEN',
+
+  GOT_POST_MESSAGE: 'GOT_POST_MESSAGE',
 };
 
 export const USER_ERRORS = {

src/redux/auth/sagas.ts

@@ -5,6 +5,7 @@ import {
   userSetLoginError,
   authSetUser,
   userSendLoginRequest,
+  gotPostMessage,
 } from '~/redux/auth/actions';
 import { apiUserLogin, apiAuthGetUser } from '~/redux/auth/api';
 import { modalSetShown } from '~/redux/modal/actions';
@@ -12,6 +13,7 @@ import { selectToken } from './selectors';
 import { IResultWithStatus } from '../types';
 import { IUser } from './types';
 import { REHYDRATE, RehydrateAction } from 'redux-persist';
+import path from 'ramda/es/path';
 
 export function* reqWrapper(requestAction, props = {}): ReturnType<typeof requestAction> {
   const access = yield select(selectToken);
@@ -68,9 +70,16 @@ function* checkUserSaga({ key }: RehydrateAction) {
   yield put(authSetUser({ ...user, is_user: true }));
 }
 
+function* gotPostMessageSaga({ message }: ReturnType<typeof gotPostMessage>) {
+  if (path(['data', 'type'], message) !== 'oauth_login') return;
+
+  console.log({ message });
+}
+
 function* authSaga() {
   yield takeLatest(REHYDRATE, checkUserSaga);
   yield takeLatest(AUTH_USER_ACTIONS.SEND_LOGIN_REQUEST, sendLoginRequestSaga);
+  yield takeLatest(AUTH_USER_ACTIONS.GOT_POST_MESSAGE, gotPostMessageSaga);
 }
 
 export default authSaga;

src/redux/node/constants.ts

@@ -87,13 +87,12 @@ export const NODE_INLINES: INodeComponents = {
 export const EMPTY_COMMENT: IComment = {
   id: null,
   text: '',
-  // files: [],
+  files: [],
-  // temp_ids: [],
+  temp_ids: [],
-  // is_private: false,
+  is_private: false,
-  // user: null,
+  user: null,
 
-  // id: null,
+  /*
-  // text: '',
   files: [
     {
       name: 'screenshot_2019-09-29_21-13-38_502253296-1572589001092.png',
@@ -179,9 +178,7 @@ export const EMPTY_COMMENT: IComment = {
       id: 8713,
     },
   ],
-  temp_ids: [],
+  */
-  is_private: false,
-  user: null,
 };
 
 export const NODE_EDITORS = {

src/redux/store.ts

@@ -25,6 +25,7 @@ import playerSaga from '~/redux/player/sagas';
 import { IAuthState } from '~/redux/auth/types';
 
 import modalReducer, { IModalState } from '~/redux/modal/reducer';
+import { gotPostMessage } from './auth/actions';
 
 const authPersistConfig: PersistConfig = {
   key: 'auth',
@@ -70,6 +71,8 @@ export function configureStore(): { store: Store<IState>; persistor: Persistor }
   sagaMiddleware.run(flowSaga);
   sagaMiddleware.run(playerSaga);
 
+  window.addEventListener('message', message => store.dispatch(gotPostMessage(message)));
+
   const persistor = persistStore(store);
 
   return { store, persistor };