listening for backend events

src/components/profile/ProfileAccounts/index.tsx

@@ -15,6 +15,8 @@ const mapStateToProps = (state: IState) => selectAuthProfile(state).socials;
 const mapDispatchToProps = {
   authGetSocials: AUTH_ACTIONS.authGetSocials,
   authDropSocial: AUTH_ACTIONS.authDropSocial,
+  authAttachSocial: AUTH_ACTIONS.authAttachSocial,
+  authSetSocials: AUTH_ACTIONS.authSetSocials,
 };
 
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
@@ -27,21 +29,29 @@ const SOCIAL_ICONS: Record<ISocialProvider, string> = {
 const ProfileAccountsUnconnected: FC<IProps> = ({
   authGetSocials,
   authDropSocial,
+  authAttachSocial,
+  authSetSocials,
   accounts,
   is_loading,
 }) => {
-  const onMessage = useCallback(event => {
-    // TODO: handle errors
-    if (event?.data?.type !== 'oauth_attach' || !event?.data?.payload?.token) return;
+  const onMessage = useCallback(
+    (event: MessageEvent) => {
+      if (!event?.data?.type) return;
 
-    const token = event?.data?.payload?.token;
-
-    console.log('GOT TOKEN!!!', token);
-  }, []);
+      switch (event?.data?.type) {
+        case 'oauth_processed':
+          return authAttachSocial(event?.data?.payload?.token);
+        case 'oauth_error':
+          return authSetSocials({ error: event?.data?.payload?.error || '' });
+        default:
+          return;
+      }
+    },
+    [authAttachSocial, authSetSocials]
+  );
 
   const openOauthWindow = useCallback(
     (provider: ISocialProvider) => () => {
-      console.log(API.USER.OAUTH_WINDOW(provider));
       window.open(API.USER.OAUTH_WINDOW(provider), '', 'width=600,height=400');
     },
     []

src/redux/auth/actions.ts

@@ -121,3 +121,8 @@ export const authSetSocials = (socials: Partial<IAuthState['profile']['socials']
   type: AUTH_USER_ACTIONS.SET_SOCIALS,
   socials,
 });
+
+export const authAttachSocial = (token: string) => ({
+  type: AUTH_USER_ACTIONS.ATTACH_SOCIAL,
+  token,
+});

src/redux/auth/constants.ts

@@ -29,6 +29,7 @@ export const AUTH_USER_ACTIONS = {
   DROP_SOCIAL: 'DROP_SOCIAL',
   ADD_SOCIAL: 'ADD_SOCIAL',
   SET_SOCIALS: 'SET_SOCIALS',
+  ATTACH_SOCIAL: 'ATTACH_SOCIAL',
 };
 
 export const USER_ERRORS = {