Merge pull request #47 from fc5y/huynhnhan.ngo/add/disable-button-whe…

…n-make-api-call Add disable button when api is calling
fc5y · Oct 5, 2020 · d9b3cca · d9b3cca
2 parents 0c258b6 + 8ac4b05
commit d9b3cca
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 26 deletions.
diff --git a/src/api/authentication.js b/src/api/authentication.js
@@ -2,7 +2,6 @@
 import { get, post } from '../utils/fetchUtils';
 
 export function apiLogin({ username, password }) {
-  // TODO: Change this to use primary API
   if (!__USE_BACKUP_API__) {
     return post(
       'https://asia-east2-fyt-code-cup.cloudfunctions.net/api/login',
@@ -16,15 +15,6 @@ export function apiLogin({ username, password }) {
 }
 
 export function apiSignup({ username, password, extra }) {
-  // if (__USE_BACKUP_API__) {
-  //   return post(
-  //     'https://backdoor.freecontest.net/api/v1/signup',
-  //     { username, password, extra: JSON.stringify(extra) },
-  //     {},
-  //     true,
-  //   );
-  // }
-
   try {
     post(
       'https://backdoor.freecontest.net/api/v1/signup',
@@ -36,8 +26,6 @@ export function apiSignup({ username, password, extra }) {
     console.log(err);
   }
 
-  // TODO: Change this to use primary API
-  // return post('', {}, { withCredentials: true });
   return post(
     'https://asia-east2-fyt-code-cup.cloudfunctions.net/api/register',
     {
@@ -57,7 +45,6 @@ export function apiSignup({ username, password, extra }) {
 }
 
 export function apiGetUserInfo(token) {
-  // TODO: Change this to use primary API
   if (!__USE_BACKUP_API__) {
     return get(
       'https://asia-east2-fyt-code-cup.cloudfunctions.net/api/users/me',

diff --git a/src/app/containers/LoginPage/index.js b/src/app/containers/LoginPage/index.js
@@ -11,6 +11,9 @@ import withUserNotLogin from '../../../shared/hoc/withUserNotLogin';
 import PopupFailed from './PopupFailed';
 import InputText from '../../components/InputText';
 
+// Constants
+import { API_PROGRESS } from '../../../shared/constants';
+
 import styles from './login.scss';
 
 class LoginPage extends React.Component {
@@ -20,6 +23,7 @@ class LoginPage extends React.Component {
       username: '',
       password: '',
       showFalsePopup: false,
+      apiProgress: API_PROGRESS.INIT,
     };
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleChange = this.handleChange.bind(this);
@@ -34,11 +38,16 @@ class LoginPage extends React.Component {
     event.preventDefault();
     const { username, password } = this.state;
 
+    if (!username || !password) return;
+
+    this.setState({ apiProgress: API_PROGRESS.REQ });
+
     if (__USE_BACKUP_API__) {
       const { data } = await apiLogin({ username, password });
       if (!data.data || !data.data.token) {
         this.setState({
           showFalsePopup: true,
+          apiProgress: API_PROGRESS.FAILED,
         });
       } else {
         this.context.setUserInfo({ ...this.context.userInfo, token: data.data.token });
@@ -50,6 +59,7 @@ class LoginPage extends React.Component {
       if (!data || !data.token) {
         this.setState({
           showFalsePopup: true,
+          apiProgress: API_PROGRESS.FAILED,
         });
       } else {
         this.context.setUserInfo({ ...this.context.userInfo, token: data.token });
@@ -93,7 +103,11 @@ class LoginPage extends React.Component {
               value={password}
               onChange={this.handleChange}
             />
-            <button className={styles.loginBtn} type="submit">
+            <button
+              className={styles.loginBtn}
+              type="submit"
+              disabled={this.state.apiProgress === API_PROGRESS.REQ}
+            >
               Đăng nhập
             </button>
           </form>

diff --git a/src/app/containers/SignupPage/index.js b/src/app/containers/SignupPage/index.js
@@ -1,17 +1,25 @@
 /* eslint-disable react/prop-types */
 import * as React from 'react';
+
+// HOC
 import { withRouter, Link } from 'react-router-dom';
 import withUserNotLogin from '../../../shared/hoc/withUserNotLogin';
+
+// UI
 import * as MainPanel from '../../common-ui/MainPanel';
 import * as Form from '../../common-ui/Form';
 import LabeledInput from '../../common-ui/LabeledInput';
 import LabeledRadioGroup from '../../common-ui/LabeledRadioGroup';
 import LabeledCheckbox from '../../common-ui/LabeledCheckbox';
 import * as Button from '../../common-ui/Button';
 
+// Constants
+import { API_PROGRESS } from '../../../shared/constants/index';
+
 import { getErrors, sanitize, hasBlockingError, signupWithData } from './utils';
 
 function SignupPage({ history }) {
+  const [apiProgress, setApiProgress] = React.useState(API_PROGRESS.INIT);
   const [data, setData] = React.useState({
     // null: pristine (user has not changed the value)
     // empty string: non-pristine (user has changed the value)
@@ -32,21 +40,24 @@ function SignupPage({ history }) {
     setData({ ...data, [name]: value });
   });
 
-  const submit = React.useCallback(() => {
+  const submit = React.useCallback(async () => {
     const sanitizedData = sanitize(data);
     setData(sanitizedData);
     if (hasBlockingError(getErrors(sanitizedData))) return;
+    setApiProgress(API_PROGRESS.REQ);
     // eslint-disable-next-line no-shadow
-    signupWithData(sanitizedData).then(({ data, error }) => {
-      if (!!error || !data || !data.username) {
-        // TODO: show popup
-        alert(`Đăng ký không thành công\n\n`);
-      } else {
-        // TODO: show popup
-        alert(`Đăng ký thành công!`);
-        !!history && history.push('/login');
-      }
-    });
+    const { data: response, error } = await signupWithData(sanitizedData);
+
+    if (!!error || !response || !response.username) {
+      // TODO: show popup
+      alert(`Đăng ký không thành công\n\n${error}`);
+      setApiProgress(API_PROGRESS.FAILED);
+    } else {
+      // TODO: show popup
+      alert(`Đăng ký thành công!`);
+      setApiProgress(API_PROGRESS.SUCCESS);
+      !!history && history.push('/login');
+    }
   }, [data]);
 
   return (
@@ -166,7 +177,9 @@ function SignupPage({ history }) {
           />
         </Form.FieldSet>
         <Form.ButtonGroup>
-          <Button.Primary onClick={submit}>Tạo tài khoản</Button.Primary>
+          <Button.Primary disabled={apiProgress === API_PROGRESS.REQ} onClick={submit}>
+            Tạo tài khoản
+          </Button.Primary>
         </Form.ButtonGroup>
       </Form.Form>
     </MainPanel.Container>

diff --git a/src/shared/constants/index.js b/src/shared/constants/index.js
@@ -0,0 +1,6 @@
+export const API_PROGRESS = Object.freeze({
+  INIT: 'init',
+  REQ: 'requested',
+  SUCCESS: 'success',
+  FAILED: 'failed',
+});