Move form submission functions back to actions

catarak · catarak · commit 97139d3f6b4e · 2020-12-10T18:02:51.000-05:00
diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js
@@ -4,6 +4,7 @@ import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { setUnsavedChanges, closeNewFolderModal, closeNewFileModal } from './ide';
 import { setProjectSavedTime } from './project';
+import { createError } from './ide';
 
 
 function appendToFilename(filename, string) {
@@ -72,6 +73,29 @@ export function submitFile(formProps, files, parentId, projectId) {
   });
 }
 
+export function handleCreateFile(formProps) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const { files } = state;
+    const { parentId } = state.ide;
+    const projectId = state.project.id;
+    return new Promise((resolve, reject) => {
+      submitFile(formProps, files, parentId, projectId).then((response) => {
+        const { file, updatedAt } = response;
+        dispatch(createFile(file, parentId));
+        if (updatedAt) dispatch(setProjectSavedTime(updatedAt));
+        dispatch(closeNewFileModal());
+        dispatch(setUnsavedChanges(true));
+        resolve();
+      }).catch((error) => {
+        const { response } = error;
+        dispatch(createError(response.data));
+        reject();
+      });
+    });
+  };
+}
+
 export function submitFolder(formProps, files, parentId, projectId) {
   if (projectId) {
     const postParams = {
@@ -103,6 +127,29 @@ export function submitFolder(formProps, files, parentId, projectId) {
   });
 }
 
+export function handleCreateFolder(formProps) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const { files } = state;
+    const { parentId } = state.ide;
+    const projectId = state.project.id;
+    return new Promise((resolve, reject) => {
+      submitFolder(formProps, files, parentId, projectId).then((response) => {
+        const { file, updatedAt } = response;
+        dispatch(createFile(file, parentId));
+        if (updatedAt) dispatch(setProjectSavedTime(updatedAt));
+        dispatch(closeNewFolderModal());
+        dispatch(setUnsavedChanges(true));
+        resolve();
+      }).catch((error) => {
+        const { response } = error;
+        dispatch(createError(response.data));
+        reject();
+      });
+    });
+  };
+}
+
 export function updateFileName(id, name) {
   return (dispatch) => {
     dispatch(setUnsavedChanges(true));
diff --git a/client/modules/IDE/components/NewFileForm.jsx b/client/modules/IDE/components/NewFileForm.jsx
@@ -1,33 +1,19 @@
 import React, { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
-import { useDispatch, useSelector } from 'react-redux';
-import { submitFile, createFile } from '../actions/files';
-import { setProjectSavedTime } from '../actions/project';
-import { closeNewFileModal, setUnsavedChanges, createError } from '../actions/ide';
+import { useDispatch } from 'react-redux';
+import { handleCreateFile } from '../actions/files';
 import { CREATE_FILE_REGEX } from '../../../../server/utils/fileUtils';
 
 import Button from '../../../common/Button';
 
 function NewFileForm() {
   const fileNameInput = useRef(null);
   const { t } = useTranslation();
-  const files = useSelector(state => state.files);
-  const parentId = useSelector(state => state.ide.parentId);
-  const projectId = useSelector(state => state.project.id);
   const dispatch = useDispatch();
 
-  function handleCreateFile(formProps) {
-    submitFile(formProps, files, parentId, projectId).then((response) => {
-      const { file, updatedAt } = response;
-      dispatch(createFile(file, parentId));
-      if (updatedAt) dispatch(setProjectSavedTime(updatedAt));
-      dispatch(closeNewFileModal());
-      dispatch(setUnsavedChanges(true));
-    }).catch((error) => {
-      const { response } = error;
-      dispatch(createError(response.data));
-    });
+  function onSubmit(formProps) {
+    return dispatch(handleCreateFile(formProps));
   }
 
   function validate(formProps) {
@@ -50,7 +36,7 @@ function NewFileForm() {
     <Form
       fields={['name']}
       validate={validate}
-      onSubmit={handleCreateFile}
+      onSubmit={onSubmit}
     >
       {({
         handleSubmit, errors, touched, invalid, submitting
diff --git a/client/modules/IDE/components/NewFolderForm.jsx b/client/modules/IDE/components/NewFolderForm.jsx
@@ -1,11 +1,9 @@
 import React, { useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import Button from '../../../common/Button';
-import { submitFolder, createFile } from '../actions/files';
-import { setProjectSavedTime } from '../actions/project';
-import { closeNewFolderModal, setUnsavedChanges } from '../actions/ide';
+import { handleCreateFolder } from '../actions/files';
 
 function NewFolderForm() {
   const folderNameInput = useRef(null);
@@ -14,9 +12,6 @@ function NewFolderForm() {
   });
   const { t } = useTranslation();
   const dispatch = useDispatch();
-  const files = useSelector(state => state.files);
-  const parentId = useSelector(state => state.ide.parentId);
-  const projectId = useSelector(state => state.project.id);
 
   function validate(formProps) {
     const errors = {};
@@ -30,21 +25,15 @@ function NewFolderForm() {
     return errors;
   }
 
-  function handleCreateFolder(formProps) {
-    submitFolder(formProps, files, parentId, projectId).then((response) => {
-      const { file, updatedAt } = response;
-      dispatch(createFile(file, parentId));
-      if (updatedAt) dispatch(setProjectSavedTime(updatedAt));
-      dispatch(closeNewFolderModal());
-      dispatch(setUnsavedChanges(true));
-    });
+  function onSubmit(formProps) {
+    return dispatch(handleCreateFolder(formProps));
   }
 
   return (
     <Form
       fields={['name']}
       validate={validate}
-      onSubmit={handleCreateFolder}
+      onSubmit={onSubmit}
     >
       {({
         handleSubmit, invalid, submitting, touched, errors
diff --git a/client/modules/User/actions.js b/client/modules/User/actions.js
@@ -48,26 +48,45 @@ export function setPreferences(preferences) {
   };
 }
 
-export function validateAndLoginUser(previousPath, formProps, dispatch) {
-  return new Promise((resolve, reject) => {
-    loginUser(formProps)
-      .then((response) => {
-        dispatch({
-          type: ActionTypes.AUTH_USER,
-          user: response.data
-        });
-        dispatch({
-          type: ActionTypes.SET_PREFERENCES,
-          preferences: response.data.preferences
+export function validateAndLoginUser(formProps) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const { previousPath } = state.ide;
+    return new Promise((resolve, reject) => {
+      loginUser(formProps)
+        .then((response) => {
+          dispatch(loginUserSuccess(response.data));
+          dispatch(setPreferences(response.data.preferences));
+          dispatch(setLanguage(response.data.preferences.language, { persistPreference: false }));
+          dispatch(justOpenedProject());
+          browserHistory.push(previousPath);
+          resolve();
+        })
+        .catch(error =>
+          reject({ password: error.response.data.message, _error: 'Login failed!' })); // eslint-disable-line
+    });
+  };
+}
+
+export function validateAndSignUpUser(formValues) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const { previousPath } = state.ide;
+    return new Promise((resolve, reject) => {
+      signUpUser(formValues)
+        .then((response) => {
+          dispatch(authenticateUser(response.data));
+          dispatch(justOpenedProject());
+          browserHistory.push(previousPath);
+          resolve();
+        })
+        .catch((error) => {
+          const { response } = error;
+          dispatch(authError(response.data.error));
+          reject();
         });
-        setLanguage(response.data.preferences.language, { persistPreference: false });
-        dispatch(justOpenedProject());
-        browserHistory.push(previousPath);
-        resolve();
-      })
-      .catch(error =>
-        reject({ password: error.response.data.message, _error: 'Login failed!' })); // eslint-disable-line
-  });
+    });
+  };
 }
 
 export function getUser() {
@@ -125,22 +144,21 @@ export function logoutUser() {
 }
 
 export function initiateResetPassword(formValues) {
-  return (dispatch) => {
+  return dispatch => new Promise((resolve, reject) => {
     dispatch({
       type: ActionTypes.RESET_PASSWORD_INITIATE
     });
-    apiClient.post('/reset-password', formValues)
-      .then(() => {
-        // do nothing
-      })
+    return apiClient.post('/reset-password', formValues)
+      .then(() => resolve())
       .catch((error) => {
         const { response } = error;
         dispatch({
           type: ActionTypes.ERROR,
           message: response.data
         });
+        reject();
       });
-  };
+  });
 }
 
 export function initiateVerification() {
@@ -228,17 +246,16 @@ export function submitSettings(formValues) {
 
 export function updateSettings(formValues) {
   return dispatch =>
-    apiClient.put('/account', formValues)
-      .then((response) => {
+    new Promise((resolve, reject) =>
+      submitSettings(formValues).then((response) => {
         dispatch(updateSettingsSuccess(response.data));
-        browserHistory.push('/');
         dispatch(showToast(5500));
         dispatch(setToastText('Toast.SettingsSaved'));
-      })
-      .catch((error) => {
+        resolve();
+      }).catch((error) => {
         const { response } = error;
-        Promise.reject(new Error(response.data.error));
-      });
+        reject(response.data.error);
+      }));
 }
 
 export function createApiKeySuccess(user) {
diff --git a/client/modules/User/components/AccountForm.jsx b/client/modules/User/components/AccountForm.jsx
@@ -2,11 +2,9 @@ import React from 'react';
 import { Form, Field } from 'react-final-form';
 import { useSelector, useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { browserHistory } from 'react-router';
 import Button from '../../../common/Button';
 import { validateSettings } from '../../../utils/reduxFormUtils';
-import { submitSettings, initiateVerification, updateSettingsSuccess } from '../actions';
-import { showToast, setToastText } from '../../IDE/actions/toast';
+import { updateSettings, initiateVerification } from '../actions';
 import apiClient from '../../../utils/apiClient';
 
 function asyncValidate(fieldToValidate, value) {
@@ -33,34 +31,25 @@ function AccountForm() {
     dispatch(initiateVerification());
   };
 
-  function validateUsername(username, _, meta) {
+  function validateUsername(username) {
     if (username === user.username) return '';
     return asyncValidate('username', username);
   }
 
-  function validateEmail(email, _, meta) {
+  function validateEmail(email) {
     if (email === user.email) return '';
     return asyncValidate('email', email);
   }
 
-  function updateSettings(formValues) {
-    return submitSettings(formValues).then((response) => {
-      dispatch(updateSettingsSuccess(response.data));
-      // browserHistory.push('/');
-      dispatch(showToast(5500));
-      dispatch(setToastText('Toast.SettingsSaved'));
-    })
-      .catch((error) => {
-        const { response } = error;
-        Promise.reject(new Error(response.data.error));
-      });
+  function onSubmit(formProps) {
+    return dispatch(updateSettings(formProps));
   }
 
   return (
     <Form
       fields={['username', 'email', 'currentPassword', 'newPassword']}
       validate={validateSettings}
-      onSubmit={updateSettings}
+      onSubmit={onSubmit}
     >
       {({
         handleSubmit, submitting, invalid, restart
diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx
@@ -2,38 +2,22 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
-import { browserHistory } from 'react-router';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import Button from '../../../common/Button';
 import { validateLogin } from '../../../utils/reduxFormUtils';
-import { loginUser, loginUserSuccess, setPreferences } from '../actions';
-import { setLanguage } from '../../IDE/actions/preferences';
-import { justOpenedProject } from '../../IDE/actions/ide';
+import { validateAndLoginUser } from '../actions';
 
 function LoginForm(props) {
   const dispatch = useDispatch();
-  const previousPath = useSelector(state => state.ide.previousPath);
-  function validateAndLoginUser(formProps) {
-    return new Promise((resolve, reject) => {
-      loginUser(formProps)
-        .then((response) => {
-          dispatch(loginUserSuccess(response.data));
-          dispatch(setPreferences(response.data.preferences));
-          dispatch(setLanguage(response.data.preferences.language, { persistPreference: false }));
-          dispatch(justOpenedProject());
-          browserHistory.push(previousPath);
-          resolve();
-        })
-        .catch(error =>
-          reject({ password: error.response.data.message, _error: 'Login failed!' })); // eslint-disable-line
-    });
+  function onSubmit(formProps) {
+    return dispatch(validateAndLoginUser(formProps));
   }
 
   return (
     <Form
       fields={['email', 'password']}
       validate={validateLogin}
-      onSubmit={validateAndLoginUser}
+      onSubmit={onSubmit}
     >
       {({
         handleSubmit, pristine, submitting, invalid
diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
