Implement email permission togglers

Author: velopert

velog-backend/src/router/me/index.js

@@ -13,5 +13,6 @@ me.post('/unregister', meCtrl.unregister);
 me.get('/email-info', meCtrl.getEmailInfo);
 me.patch('/email', meCtrl.changeEmail);
 me.post('/resend-certmail', meCtrl.resendCertmail);
+me.patch('/email-permissions', meCtrl.updateEmailPermissions);
 
 export default me;

velog-backend/src/router/me/me.ctrl.js

@@ -213,3 +213,32 @@ export const resendCertmail = async (ctx: Context) => {
     ctx.throw(500, e);
   }
 };
+
+export const updateEmailPermissions = async (ctx: Context) => {
+  // validate request body
+  const schema = Joi.object().keys({
+    email_notification: Joi.boolean().required(),
+    email_promotion: Joi.boolean().required(),
+  });
+  const result = Joi.validate(ctx.request.body, schema);
+  if (result.error) {
+    ctx.status = 400;
+    return;
+  }
+  const permissions: {
+    email_notification: boolean,
+    email_promotion: boolean,
+  } = (ctx.request.body: any);
+
+  try {
+    const userMeta = await UserMeta.findOne({
+      where: {
+        fk_user_id: ctx.user.id,
+      },
+    });
+    await userMeta.update(permissions);
+    ctx.status = 204;
+  } catch (e) {
+    ctx.throw(500, e);
+  }
+};

velog-frontend/src/components/common/Toggler/Toggler.js

@@ -0,0 +1,66 @@
+// @flow
+
+import React, { Component } from 'react';
+import cx from 'classnames';
+import './Toggler.scss';
+
+type Props = {
+  name?: string,
+  text: string,
+  value: boolean,
+  onChange: (event: { name: string, value: boolean }) => void,
+  className?: string,
+};
+
+type State = {
+  localValue: boolean,
+};
+
+class Toggler extends Component<Props, State> {
+  state = {
+    localValue: false,
+  };
+
+  constructor(props: Props) {
+    super(props);
+    this.state.localValue = props.value;
+  }
+
+  onToggle = () => {
+    this.setState({
+      localValue: !this.state.localValue,
+    });
+  };
+
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    if (this.state.localValue !== prevState.localValue) {
+      this.props.onChange({
+        name: this.props.name || '',
+        value: this.state.localValue,
+      });
+      return;
+    }
+    if (this.state.localValue !== this.props.value) {
+      this.setState({
+        localValue: this.props.value,
+      });
+    }
+  }
+
+  render() {
+    const { text } = this.props;
+    return (
+      <div className={cx('Toggler', this.props.className)}>
+        <div
+          className={cx('toggle-box', { active: this.state.localValue })}
+          onClick={this.onToggle}
+        >
+          <div className="circle" />
+        </div>
+        <div className="text">{text}</div>
+      </div>
+    );
+  }
+}
+
+export default Toggler;

velog-frontend/src/components/common/Toggler/Toggler.scss

@@ -0,0 +1,42 @@
+@import 'utils';
+
+.Toggler {
+  display: flex;
+  align-items: center;
+  & + .Toggler {
+    margin-top: 0.5rem;
+  }
+
+  .toggle-box {
+    background: $oc-gray-3;
+    height: 32px;
+    width: 56px;
+    border-radius: 16px;
+    position: relative;
+    margin-right: 0.5rem;
+    cursor: pointer;
+    transition: 0.125s ease-in background;
+    .circle {
+      transition: 0.125s ease-in transform;
+      background: white;
+      width: 24px;
+      height: 24px;
+      top: 4px;
+      left: 4px;
+      border-radius: 12px;
+      position: absolute;
+    }
+
+    &.active {
+      background: $oc-violet-6;
+      .circle {
+        transform: translate(24px);
+      }
+    }
+  }
+  .text {
+    font-size: 0.875rem;
+    color: $oc-gray-9;
+    font-weight: 600;
+  }
+}

velog-frontend/src/components/common/Toggler/index.js

@@ -0,0 +1,4 @@
+// @flow
+import Toggler from './Toggler';
+
+export default Toggler;

velog-frontend/src/components/settings/SettingEmail/SettingEmail.js

@@ -2,13 +2,16 @@
 import React, { Component, Fragment } from 'react';
 import type { EmailInfoData } from 'store/modules/settings';
 import WarningIcon from 'react-icons/lib/md/warning';
+import Toggler from 'components/common/Toggler';
 import cx from 'classnames';
 import './SettingEmail.scss';
 
 type Props = {
   emailInfo: EmailInfoData,
+  onSaveEmailPermissions: () => Promise<any>,
   onChangeEmail: (email: string) => Promise<any>,
   onResendCertmail: () => Promise<any>,
+  onUpdateEmailPermission: (payload: { name: string, value: boolean }) => void,
 };
 
 type State = {
@@ -62,8 +65,12 @@ class SettingEmail extends Component<Props, State> {
     });
   };
 
+  onChangeToggler = (event: { name: string, value: boolean }) => {
+    this.props.onUpdateEmailPermission(event);
+  };
+
   render() {
-    const { emailInfo } = this.props;
+    const { emailInfo, onSaveEmailPermissions } = this.props;
     const { edit, email } = this.state;
     return (
       <div className="SettingEmail">
@@ -106,6 +113,27 @@ class SettingEmail extends Component<Props, State> {
             </div>
           </Fragment>
         )}
+        {!edit &&
+          emailInfo.is_certified && (
+            <section>
+              <h5>이메일 수신 설정</h5>
+              <div className="togglers">
+                <Toggler
+                  name="email_notification"
+                  text="댓글 알림"
+                  value={emailInfo.permissions.email_notification}
+                  onChange={this.onChangeToggler}
+                />
+                <Toggler
+                  name="email_promotion"
+                  text="이벤트 및 프로모션"
+                  value={emailInfo.permissions.email_promotion}
+                  onChange={this.onChangeToggler}
+                />
+              </div>
+              <button onClick={onSaveEmailPermissions}>이메일 수신 설정 저장</button>
+            </section>
+          )}
       </div>
     );
   }

velog-frontend/src/components/settings/SettingEmail/SettingEmail.scss

@@ -8,7 +8,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 0.5rem;
+    margin-bottom: 1rem;
     button {
       font-size: 0.875rem;
       border-radius: 4px;
@@ -119,4 +119,24 @@
       font-weight: 600;
     }
   }
+
+  section {
+    h5 {
+      font-size: 1.125rem;
+      margin-bottom: 1rem;
+    }
+    button {
+      border-radius: 4px;
+      border: 1px solid $oc-gray-7;
+      margin-top: 1rem;
+      font-weight: 600;
+      font-size: 0.875rem;
+      padding: 0.5rem;
+      cursor: pointer;
+      &:hover {
+        color: white;
+        background: $oc-gray-7;
+      }
+    }
+  }
 }

velog-frontend/src/containers/settings/SettingEmailContainer.js

@@ -51,13 +51,26 @@ class SettingEmailContainer extends Component<Props> {
     BaseActions.showToast({ type: 'success', message: '이메일이 변경되었습니다.' });
   };
 
+  onUpdateEmailPermission = (payload: { name: string, value: boolean }) => {
+    SettingsActions.updateEmailPermission(payload);
+  };
+
+  onSaveEmailPermissions = async () => {
+    const { emailInfo } = this.props;
+    if (!emailInfo) return;
+    await SettingsActions.saveEmailPermissions(emailInfo.permissions);
+    BaseActions.showToast({ type: 'success', message: '이메일 수신 설정이 저장되었습니다.' });
+  };
+
   render() {
     if (!this.props.emailInfo) return null;
     return (
       <SettingEmail
         emailInfo={this.props.emailInfo}
         onChangeEmail={this.onChangeEmail}
         onResendCertmail={this.onResendCertmail}
+        onUpdateEmailPermission={this.onUpdateEmailPermission}
+        onSaveEmailPermissions={this.onSaveEmailPermissions}
       />
     );
   }

velog-frontend/src/lib/api/me.js

@@ -54,3 +54,10 @@ export const unregister = (unregisterToken: string) =>
 export const getEmailInfo = () => axios.get('/me/email-info');
 export const changeEmail = (email: string) => axios.patch('/me/email', { email });
 export const resendCertmail = () => axios.post('/me/resend-certmail');
+
+export type SaveEmailPermissionsPayload = {
+  email_notification: boolean,
+  email_promotion: boolean,
+};
+export const saveEmailPermissions = (payload: SaveEmailPermissionsPayload) =>
+  axios.patch('/me/email-permissions', payload);

velog-frontend/src/store/modules/settings.js

@@ -11,6 +11,7 @@ import {
   getEmailInfo,
   changeEmail,
   resendCertmail,
+  saveEmailPermissions,
 } from 'lib/api/me';
 import produce from 'immer';
 import { type Profile } from './profile';
@@ -24,6 +25,8 @@ const UNREGISTER = 'settings/UNREGISTER';
 const GET_EMAIL_INFO = 'settings/GET_EMAIL_INFO';
 const CHANGE_EMAIL = 'settings/CHANGE_EMAIL';
 const RESEND_CERTMAIL = 'settings/RESEND_CERTMAIL';
+const UPDATE_EMAIL_PERMISSION = 'settings/UPDATE_EMAIL_PERMISSION';
+const SAVE_EMAIL_PERMISSIONS = 'settings/SAVE_EMAIL_PERMISSIONS';
 
 export const actionCreators = {
   getProfile: createAction(GET_PROFILE, getProfile),
@@ -35,6 +38,11 @@ export const actionCreators = {
   getEmailInfo: createAction(GET_EMAIL_INFO, getEmailInfo),
   changeEmail: createAction(CHANGE_EMAIL, changeEmail),
   resendCertmail: createAction(RESEND_CERTMAIL, resendCertmail),
+  updateEmailPermission: createAction(
+    UPDATE_EMAIL_PERMISSION,
+    (payload: { name: string, value: boolean }) => payload,
+  ),
+  saveEmailPermissions: createAction(SAVE_EMAIL_PERMISSIONS, saveEmailPermissions),
 };
 
 export type UploadInfo = {
@@ -61,6 +69,7 @@ type GenerateUnregisterTokenResponseAction = GenericResponseAction<
   void,
 >;
 type GetMailInfoResponseAction = GenericResponseAction<EmailInfoData, void>;
+type UpdateEmailPermissionAction = ActionType<typeof actionCreators.updateEmailPermission>;
 
 export type SettingsState = {
   profile: ?Profile,
@@ -86,6 +95,12 @@ const reducer = handleActions(
         askUnregister: payload,
       };
     },
+    [UPDATE_EMAIL_PERMISSION]: (state, { payload }: UpdateEmailPermissionAction) => {
+      return produce(state, (draft) => {
+        if (!draft.emailInfo) return;
+        draft.emailInfo.permissions[payload.name] = payload.value;
+      });
+    },
   },
   initialState,
 );