From 49bccb96c1ac4f581d451232994ca491b5b1de46 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sat, 2 Nov 2019 18:45:58 +0700 Subject: [PATCH] receiving window messages --- src/components/main/Header/index.tsx | 5 +++ src/constants/api.ts | 1 + src/containers/App.tsx | 48 +++++++++++++++------------- src/redux/auth/actions.ts | 22 ++++++++++--- src/redux/auth/constants.ts | 2 ++ src/redux/auth/sagas.ts | 9 ++++++ src/redux/node/constants.ts | 15 ++++----- src/redux/store.ts | 3 ++ 8 files changed, 68 insertions(+), 37 deletions(-) diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx index 89b3aef7..d7c3dc39 100644 --- a/src/components/main/Header/index.tsx +++ b/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 mapDispatchToProps & { const HeaderUnconnected: FC = 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 (
@@ -36,6 +40,7 @@ const HeaderUnconnected: FC = memo(({ user: { username, is_user, photo }
flow + SOCIAL
{is_user && ( diff --git a/src/constants/api.ts b/src/constants/api.ts index 1a6ee4e0..de72ef85 100644 --- a/src/constants/api.ts +++ b/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}`, }, diff --git a/src/containers/App.tsx b/src/containers/App.tsx index fb02ef7b..ed7fa617 100644 --- a/src/containers/App.tsx +++ b/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 & {}; -const Component: FC = ({ modal: { is_shown } }) => ( - -
- - - - - +const Component: FC = ({ modal: { is_shown } }) => { + return ( + +
+ + + + + - - - - - - + + + + + + - - - - + + + + - -
- -); + +
+ + ); +}; export default connect( mapStateToProps, diff --git a/src/redux/auth/actions.ts b/src/redux/auth/actions.ts index cbfea4eb..54b44c51 100644 --- a/src/redux/auth/actions.ts +++ b/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) => ({ 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) => ({ + type: AUTH_USER_ACTIONS.SET_USER, + profile, +}); diff --git a/src/redux/auth/constants.ts b/src/redux/auth/constants.ts index 7df233f1..6cfae639 100644 --- a/src/redux/auth/constants.ts +++ b/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 = { diff --git a/src/redux/auth/sagas.ts b/src/redux/auth/sagas.ts index 1872ef76..e8a2b13d 100644 --- a/src/redux/auth/sagas.ts +++ b/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 { const access = yield select(selectToken); @@ -68,9 +70,16 @@ function* checkUserSaga({ key }: RehydrateAction) { yield put(authSetUser({ ...user, is_user: true })); } +function* gotPostMessageSaga({ message }: ReturnType) { + 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; diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 3e66ccb3..6ee77182 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -87,13 +87,12 @@ export const NODE_INLINES: INodeComponents = { export const EMPTY_COMMENT: IComment = { id: null, text: '', - // files: [], - // temp_ids: [], - // is_private: false, - // user: null, + files: [], + temp_ids: [], + is_private: false, + 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 = { diff --git a/src/redux/store.ts b/src/redux/store.ts index 9bc610ea..18b75554 100644 --- a/src/redux/store.ts +++ b/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; persistor: Persistor } sagaMiddleware.run(flowSaga); sagaMiddleware.run(playerSaga); + window.addEventListener('message', message => store.dispatch(gotPostMessage(message))); + const persistor = persistStore(store); return { store, persistor };