feat: confirm change email logic

Author: winverse

src/containers/etc/EmailChange.tsx

@@ -9,6 +9,7 @@ import { useApolloClient } from '@apollo/react-hooks';
 import styled from 'styled-components';
 import { toast } from 'react-toastify';
 import SpinnerBlock from '../../components/common/SpinnerBlock';
+import usePopup from '../../lib/hooks/usePopup';
 
 const mapStateToProps = (state: RootState) => ({});
 const mapDispatchToProps = {};
@@ -26,7 +27,9 @@ const { useEffect, useCallback } = React;
 const EmailChange: React.FC<EmailChangeProps> = ({ location, history }) => {
   const query = qs.parse(location.search, { ignoreQueryPrefix: true });
   const client = useApolloClient();
-  useCallback(async () => {
+  const popup = usePopup();
+
+  const processChangeEmail = useCallback(async () => {
     try {
       await client.mutate({
         mutation: CONFIRM_CHANGE_EMAIL,
@@ -36,19 +39,24 @@ const EmailChange: React.FC<EmailChangeProps> = ({ location, history }) => {
       });
 
       history.replace('/setting');
+      popup.open({
+        title: '성공',
+        message: '이메일 변경이 완료 되었습니다.',
+      });
     } catch (e) {
       toast.error('잘못된 접근입니다.');
       history.replace('/');
     }
-  }, [client, history, query.code]);
+  }, [client, history, popup, query.code]);
 
   useEffect(() => {
     if (!query.code) {
       // TODO: show 404
       toast.error('잘못된 접근입니다.');
       history.replace('/');
     }
-  }, [history, location.search, query.code]);
+    processChangeEmail();
+  }, [history, location.search, processChangeEmail, query.code]);
 
   return (
     <Fullscreen>

src/containers/setting/hooks/useChangeEmail.ts

@@ -2,14 +2,14 @@ import { useMutation } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 import { useCallback } from 'react';
 
-const CHANGE_EMAIL = gql`
-  mutation ChangeEmail($email: String!) {
-    changeEmail(email: $email)
+const TRY_CHANGE_EMAIL = gql`
+  mutation TRY_CHANGE_EMAIL($email: String!) {
+    tryChangeEmail(email: $email)
   }
 `;
 
 export default function useChangeEmail() {
-  const [changeEmail, { called }] = useMutation(CHANGE_EMAIL);
+  const [changeEmail, { called }] = useMutation(TRY_CHANGE_EMAIL);
   const change = useCallback(
     (email: string) => {
       return changeEmail({

src/lib/graphql/user.ts

@@ -171,8 +171,8 @@ export const ACCEPT_INTEGRATION = gql`
 `;
 
 export const CONFIRM_CHANGE_EMAIL = gql`
-  mutation ConfirmChangeEmail($email: String!) {
-    confirm_change_email(email: $email)
+  mutation ConfirmChangeEmail($code: String!) {
+    confirmChangeEmail(code: $code)
   }
 `;