Move NewFileForm to final-form

Author: catarak

client/modules/IDE/actions/files.js

@@ -36,60 +36,41 @@ export function updateFileContent(id, content) {
   };
 }
 
-export function createFile(formProps) {
-  return (dispatch, getState) => {
-    const state = getState();
-    const { parentId } = state.ide;
-    if (state.project.id) {
-      const postParams = {
-        name: createUniqueName(formProps.name, parentId, state.files),
-        url: formProps.url,
-        content: formProps.content || '',
-        parentId,
-        children: []
-      };
-      apiClient.post(`/projects/${state.project.id}/files`, postParams)
-        .then((response) => {
-          dispatch({
-            type: ActionTypes.CREATE_FILE,
-            ...response.data.updatedFile,
-            parentId
-          });
-          dispatch(setProjectSavedTime(response.data.project.updatedAt));
-          dispatch(closeNewFileModal());
-          dispatch(reset('new-file'));
-          // dispatch({
-          //   type: ActionTypes.HIDE_MODAL
-          // });
-          dispatch(setUnsavedChanges(true));
-        })
-        .catch((error) => {
-          const { response } = error;
-          dispatch({
-            type: ActionTypes.ERROR,
-            error: response.data
-          });
-        });
-    } else {
-      const id = objectID().toHexString();
-      dispatch({
-        type: ActionTypes.CREATE_FILE,
-        name: createUniqueName(formProps.name, parentId, state.files),
-        id,
-        _id: id,
-        url: formProps.url,
-        content: formProps.content || '',
-        parentId,
-        children: []
-      });
-      dispatch(reset('new-file'));
-      // dispatch({
-      //   type: ActionTypes.HIDE_MODAL
-      // });
-      dispatch(setUnsavedChanges(true));
-      dispatch(closeNewFileModal());
-    }
+export function createFile(file, parentId) {
+  return {
+    type: ActionTypes.CREATE_FILE,
+    ...file,
+    parentId
+  };
+}
+
+export function submitFile(formProps, files, parentId, projectId) {
+  if (projectId) {
+    const postParams = {
+      name: createUniqueName(formProps.name, parentId, files),
+      url: formProps.url,
+      content: formProps.content || '',
+      parentId,
+      children: []
+    };
+    return apiClient.post(`/projects/${projectId}/files`, postParams)
+      .then(response => ({
+        file: response.data.updatedFile,
+        updatedAt: response.data.project.updatedAt
+      }));
+  }
+  const id = objectID().toHexString();
+  const file = {
+    name: createUniqueName(formProps.name, parentId, files),
+    id,
+    _id: id,
+    url: formProps.url,
+    content: formProps.content || '',
+    children: []
   };
+  return Promise.resolve({
+    file
+  });
 }
 
 export function createFolder(formProps) {

client/modules/IDE/actions/ide.js

@@ -278,3 +278,10 @@ export function stopSketch() {
     dispatch(stopVisualSketch());
   };
 }
+
+export function createError(error) {
+  return {
+    type: ActionTypes.ERROR,
+    error
+  };
+}

client/modules/IDE/components/NewFileForm.jsx

@@ -1,69 +1,97 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withTranslation } from 'react-i18next';
-import { domOnlyProps } from '../../../utils/reduxFormUtils';
+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 { CREATE_FILE_REGEX } from '../../../../server/utils/fileUtils';
 
 import Button from '../../../common/Button';
 
-class NewFileForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.createFile = this.props.createFile.bind(this);
-  }
+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();
 
-  componentDidMount() {
-    this.fileName.focus();
+  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));
+      // reset form
+    }).catch((error) => {
+      const { response } = error;
+      dispatch(createError(response.data));
+    });
   }
 
-  render() {
-    const {
-      fields: { name },
-      handleSubmit,
-    } = this.props;
-    return (
-      <form
-        className="new-file-form"
-        onSubmit={(data) => {
-          this.props.focusOnModal();
-          handleSubmit(this.createFile)(data);
-        }}
-      >
-        <div className="new-file-form__input-wrapper">
-          <label className="new-file-form__name-label" htmlFor="name">
-            Name:
-          </label>
-          <input
-            className="new-file-form__name-input"
-            id="name"
-            type="text"
-            placeholder={this.props.t('NewFileForm.Placeholder')}
-            maxLength="128"
-            {...domOnlyProps(name)}
-            ref={(element) => {
-              this.fileName = element;
-            }}
-          />
-          <Button
-            type="submit"
-          >{this.props.t('NewFileForm.AddFileSubmit')}
-          </Button>
-        </div>
-        {name.touched && name.error && (
-          <span className="form-error">{name.error}</span>
-        )}
-      </form>
-    );
+  function validate(formProps) {
+    const errors = {};
+
+    if (!formProps.name) {
+      errors.name = t('NewFileModal.EnterName');
+    } else if (!formProps.name.match(CREATE_FILE_REGEX)) {
+      errors.name = t('NewFileModal.InvalidType');
+    }
+
+    return errors;
   }
-}
 
-NewFileForm.propTypes = {
-  fields: PropTypes.shape({
-    name: PropTypes.objectOf(PropTypes.shape()).isRequired
-  }).isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-  createFile: PropTypes.func.isRequired,
-  focusOnModal: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired
-};
+  useEffect(() => {
+    fileNameInput.current.focus();
+  });
+
+  return (
+    <Form
+      fields={['name']}
+      validate={validate}
+      onSubmit={handleCreateFile}
+    >
+      {({
+        handleSubmit, errors, touched, invalid, submitting
+      }) => (
+        <form
+          className="new-file-form"
+          onSubmit={handleSubmit}
+        >
+          <div className="new-file-form__input-wrapper">
+            <Field name="name">
+              {field => (
+                <React.Fragment>
+                  <label className="new-file-form__name-label" htmlFor="name">
+                    Name:
+                  </label>
+                  <input
+                    className="new-file-form__name-input"
+                    id="name"
+                    type="text"
+                    placeholder={t('NewFileForm.Placeholder')}
+                    maxLength="128"
+                    {...field.input}
+                    ref={fileNameInput}
+                  />
+                </React.Fragment>
+              )}
+            </Field>
+            <Button
+              type="submit"
+              disabled={invalid || submitting}
+            >{t('NewFileForm.AddFileSubmit')}
+            </Button>
+          </div>
+          {touched.name && errors.name && (
+            <span className="form-error">{errors.name}</span>
+          )}
+        </form>
+      )}
+    </Form>
+  );
+}
 
-export default withTranslation()(NewFileForm);
+export default NewFileForm;

client/modules/IDE/components/NewFileModal.jsx

@@ -1,15 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
-import { bindActionCreators, compose } from 'redux';
-import { reduxForm } from 'redux-form';
+import { bindActionCreators } from 'redux';
 import { withTranslation } from 'react-i18next';
-import i18n from 'i18next';
 import NewFileForm from './NewFileForm';
 import { closeNewFileModal } from '../actions/ide';
-import { createFile } from '../actions/files';
-import { CREATE_FILE_REGEX } from '../../../../server/utils/fileUtils';
-
 import ExitIcon from '../../../images/exit.svg';
 
 
@@ -59,7 +54,6 @@ class NewFileModal extends React.Component {
           </div>
           <NewFileForm
             focusOnModal={this.focusOnModal}
-            {...this.props}
           />
         </div>
       </section>
@@ -68,36 +62,16 @@ class NewFileModal extends React.Component {
 }
 
 NewFileModal.propTypes = {
-  createFile: PropTypes.func.isRequired,
   closeNewFileModal: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired
 };
 
-function validate(formProps) {
-  const errors = {};
-
-  if (!formProps.name) {
-    errors.name = i18n.t('NewFileModal.EnterName');
-  } else if (!formProps.name.match(CREATE_FILE_REGEX)) {
-    errors.name = i18n.t('NewFileModal.InvalidType');
-  }
-
-  return errors;
-}
-
 function mapStateToProps() {
   return {};
 }
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators({ createFile, closeNewFileModal }, dispatch);
+  return bindActionCreators({ closeNewFileModal }, dispatch);
 }
 
-export default withTranslation()(compose(
-  connect(mapStateToProps, mapDispatchToProps),
-  reduxForm({
-    form: 'new-file',
-    fields: ['name'],
-    validate
-  })
-)(NewFileModal));
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(NewFileModal));

client/modules/User/pages/AccountView.jsx

@@ -20,7 +20,7 @@ function SocialLoginPanel(props) {
   const { user } = props;
   return (
     <React.Fragment>
-      <AccountForm {...props} />
+      <AccountForm />
       {/* eslint-disable-next-line react/prop-types */}
       <h2 className="form-container__divider">{props.t('AccountView.SocialLogin')}</h2>
       <p className="account__social-text">