feat: implements email input UI

Author: winverse

.env

@@ -1,4 +1,4 @@
-REACT_APP_API_HOST=http://localhost:5000/
+REACT_APP_API_HOST=http://localhost:5001/
 PUBLIC_URL=/
 REACT_APP_GRAPHQL_HOST=https://v2cdn.velog.io/
 REACT_APP_GRAPHQL_HOST_NOCDN=https://v2.velog.io/

src/components/auth/AuthSocialButton.tsx

@@ -62,7 +62,7 @@ const AuthSocialButton: React.FC<AuthSocialButtonProps> = ({
   const host =
     process.env.NODE_ENV === 'production'
       ? process.env.REACT_APP_API_HOST
-      : 'http://localhost:5000/';
+      : 'http://localhost:5001/';
 
   const redirectTo = `${host}api/v2/auth/social/redirect/${provider}?next=${currentPath}&isIntegrate=${
     isIntegrate ? 1 : 0

src/components/setting/SettingEmailRow.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import SettingRow from './SettingRow';
+import useInput from '../../lib/hooks/useInput';
+import SettingInput from './SettingInput';
+import styled from 'styled-components';
+import Button from '../common/Button';
+
+export type SettingEmailRowProps = {
+  email: string;
+  onUpdateEmail: (email: string) => Promise<void>;
+};
+
+function SettingEmailRow({ email, onUpdateEmail }: SettingEmailRowProps) {
+  const [edit, setEdit] = useState(false);
+  const [value, onChange] = useInput(email);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await onUpdateEmail(value);
+    setEdit(false);
+  };
+
+  return (
+    <SettingRow
+      title="이메일 주소"
+      description="회원 인증 또는 시스템에서 발송하는 이메일을 수신하는 주소입니다."
+      editButton={!edit}
+      onClickEdit={() => setEdit(true)}
+      editButtonText="변경"
+    >
+      {edit ? (
+        <Form onSubmit={onSubmit}>
+          <SettingInput
+            value={value}
+            onChange={onChange}
+            placeholder="이메일"
+          />
+          <Button>변경</Button>
+        </Form>
+      ) : (
+        email
+      )}
+    </SettingRow>
+  );
+}
+
+const Form = styled.form`
+  display: flex;
+  align-items: center;
+  input {
+    flex: 1;
+    margin-right: 1rem;
+  }
+`;
+
+export default SettingEmailRow;

src/components/setting/SettingRow.tsx

@@ -10,6 +10,7 @@ export type SettingRowProps = {
   onClickEdit?: () => void;
   editButton?: boolean;
   description?: string;
+  editButtonText?: string;
 };
 
 function SettingRow({
@@ -18,6 +19,7 @@ function SettingRow({
   editButton,
   description,
   onClickEdit,
+  editButtonText,
 }: SettingRowProps) {
   return (
     <Row>
@@ -29,7 +31,10 @@ function SettingRow({
           <div className="contents">{children}</div>
           {editButton && (
             <div className="edit-wrapper">
-              <SettingEditButton onClick={onClickEdit} />
+              <SettingEditButton
+                onClick={onClickEdit}
+                customText={editButtonText}
+              />
             </div>
           )}
         </div>

src/components/setting/SettingRows.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
 import styled from 'styled-components';
-import SettingRow from './SettingRow';
 import SettingTitleRow from './SettingTitleRow';
 import SettingSocialInfoRow from './SettingSocialInfoRow';
 import SettingEmailRulesRow from './SettingEmailRulesRow';
 import { createFallbackTitle } from '../../lib/utils';
 import { ProfileLinks } from '../../lib/graphql/user';
 import SettingUnregisterRow from './SettingUnregisterRow';
 import media from '../../lib/styles/media';
+import SettingEmailRow from './SettingEmailRow';
 
 export type SettingRowsProps = {
   title: string | null;
   username: string;
   email: string;
   onUpdateTitle: (title: string) => Promise<any>;
+  onUpdateEmail: (email: string) => Promise<any>;
   onUpdateSocialInfo: (profileLinks: ProfileLinks) => Promise<any>;
   onUpdateEmailRules: (params: {
     promotion: boolean;
@@ -41,6 +42,7 @@ function SettingRows({
   userMeta,
   email,
   onUpdateTitle,
+  onUpdateEmail,
   onUpdateSocialInfo,
   onUpdateEmailRules,
   onUnregister,
@@ -52,12 +54,7 @@ function SettingRows({
         onUpdateTitle={onUpdateTitle}
       />
       <SettingSocialInfoRow {...profileLinks} onUpdate={onUpdateSocialInfo} />
-      <SettingRow
-        title="이메일 주소"
-        description="회원 인증 또는 시스템에서 발송하는 이메일을 수신하는 주소입니다."
-      >
-        {email}
-      </SettingRow>
+      <SettingEmailRow email={email} onUpdateEmail={onUpdateEmail} />
       {userMeta && (
         <SettingEmailRulesRow
           notification={userMeta.email_notification}

src/containers/setting/SettingRowsContainer.tsx

@@ -7,6 +7,7 @@ import useUserProfile from './hooks/useUserProfile';
 import useUpdateSocialInfo from './hooks/useUpdateSocialInfo';
 import useUpdateEmailRules from './hooks/useUpdateEmailRules';
 import useUnregister from './hooks/useUnregister';
+import useUpdateEmail from './hooks/useUpdateEmail';
 
 export type SettingRowsContainerProps = {};
 
@@ -16,6 +17,7 @@ function SettingRowsContainer(props: SettingRowsContainerProps) {
   const user = useSelector((state: RootState) => state.core.user);
   const updateSocialInfo = useUpdateSocialInfo();
   const { update: updateEmailRules } = useUpdateEmailRules();
+  const { update: updateEmail } = useUpdateEmail();
   const unregister = useUnregister();
 
   const onUpdateEmailRules = useCallback(
@@ -42,6 +44,7 @@ function SettingRowsContainer(props: SettingRowsContainerProps) {
       username={user.username}
       email={user.email}
       onUpdateTitle={updateTitle}
+      onUpdateEmail={updateEmail}
       profileLinks={profile.profile_links}
       onUpdateSocialInfo={updateSocialInfo.update}
       onUpdateEmailRules={onUpdateEmailRules}

src/containers/setting/hooks/useUpdateEmail.ts

@@ -0,0 +1,30 @@
+import { useMutation } from '@apollo/react-hooks';
+import gql from 'graphql-tag';
+import { useCallback } from 'react';
+
+const UPDATE_USER_EMAIL = gql`
+  mutation UpdateUserEmail($email: String!) {
+    update_user_email(email: $email) {
+      email
+    }
+  }
+`;
+
+export default function useUpdateEmail() {
+  const [updateUserEmail] = useMutation(UPDATE_USER_EMAIL);
+
+  const update = useCallback(
+    (email: string) => {
+      return updateUserEmail({
+        variables: {
+          email,
+        },
+      });
+    },
+    [updateUserEmail],
+  );
+
+  return {
+    update,
+  };
+}

src/index.server.ts

@@ -17,7 +17,7 @@ app.use(
 );
 
 const proxyMiddleware = proxy(
-  process.env.REACT_APP_API_HOST ?? 'http://localhost:5000',
+  process.env.REACT_APP_API_HOST ?? 'http://localhost:5001',
   {},
 );