Improve transfers' list and fix transfer creation

api/controllers/transfers.js

@@ -43,4 +43,18 @@ exports.getSingle = async (req, res, next) => {
 };
 
 // Create a new transfer
-exports.create = async (req, res, next) => {};
+exports.create = async (req, res, next) => {
+   const transfer = new Transfer(req.body);
+
+   try {
+      await transfer.save();
+
+      if (!transfer) {
+         throwError('Problems sending a transfer', 422);
+      }
+
+      res.status(201).json({ message: 'Transfer sent' });
+   } catch (err) {
+      passError(err, next);
+   }
+};

api/models/transfer.js

@@ -40,9 +40,10 @@ const transferSchema = new mongoose.Schema(
          ref: 'User'
       },
       recipient: {
-         type: mongoose.Schema.Types.ObjectId,
-         required: true,
-         ref: 'User'
+         type: String,
+         required: true
+         // type: mongoose.Schema.Types.ObjectId,
+         // ref: 'User'
       }
    },
    {

api/models/user.js

@@ -106,7 +106,6 @@ userSchema.pre('remove', async function(next) {
 userSchema.methods.getBasic = async function() {
    const userObj = this.toObject();
 
-   delete userObj._id;
    delete userObj.password;
    delete userObj.updatedAt;
 

web/src/components/Transfers/List/index.js

@@ -13,12 +13,12 @@ class TransfersList extends Component {
       };
    }
 
-   findTransaction = () => {
+   findTransfer = () => {
       this.setState({ search: this.refs.search.value });
    };
 
    render() {
-      // Allow filtering by payee's name or transaction reference
+      // Allow filtering by payee's name or transfer reference
       const searchText = this.state.search.toLowerCase();
       const transfersList = this.props.transfers
          .filter(
@@ -45,7 +45,7 @@ class TransfersList extends Component {
                <input
                   className="form-control"
                   placeholder="Search for (payee/reference)..."
-                  onChange={this.findTransaction}
+                  onChange={this.findTransfer}
                   ref="search"
                />
             </div>

web/src/components/Transfers/ListElement/index.js

@@ -10,7 +10,8 @@ const TransfersListEl = ({ matchUrl, _id, type, payeeName, date, amount, status,
       <Link to={`${matchUrl}/${_id}`} className="list-group-item">
          <h4 className="list-group-item-heading">{type}</h4>
          <p className="list-group-item-text">
-            Payee: {payeeName}, date: {date}, amount: {amount}, status: {status}, ref: {reference}
+            <b>Payee:</b> {payeeName} / <b>date:</b> {date} / <b>amount:</b> {amount} /{' '}
+            <b>status:</b> {status} / <b>ref:</b> {reference}
          </p>
       </Link>
    );
@@ -21,7 +22,7 @@ TransfersListEl.propTypes = {
    _id: PropTypes.string,
    type: PropTypes.string,
    payeeName: PropTypes.string,
-   date: PropTypes.object,
+   date: PropTypes.string,
    amount: PropTypes.number,
    status: PropTypes.string
 };

web/src/components/Transfers/New/Form.js

@@ -11,18 +11,18 @@ const InnerForm = props => {
          <div>
             <div className="form-group">
                <label htmlFor="source-account">Choose your account</label>
-
                <Field
                   component="select"
                   className="form-control"
                   id="source-account"
-                  name="sourceAcc"
+                  name="sourceAccountId"
                   placeholder="Your new email..."
                >
                   {props.userAccountsList}
                </Field>
-
-               {touched.sourceAcc && errors.sourceAcc && <p>{errors.sourceAcc}</p>}
+               {touched.sourceAccountId && errors.sourceAccountId && (
+                  <p>{errors.sourceAccountId}</p>
+               )}
             </div>
 
             <div className="form-group">
@@ -116,10 +116,10 @@ const InnerForm = props => {
 };
 
 // Wrap our form with the using withFormik HoC
-const NewTransactionForm = withFormik({
+const NewTransferForm = withFormik({
    // Transform outer props into form values
    mapPropsToValues: props => ({
-      sourceAcc: props.firstAccId,
+      sourceAccountId: props.firstAccId,
       payeeAccNumber: '',
       payeeSortcode: '',
       payeeName: '',
@@ -132,13 +132,20 @@ const NewTransactionForm = withFormik({
 
    // Submission handler
    handleSubmit: (values, { props, setStatus }) => {
+      // Prepare some data for API
+      const data = {
+         ...values,
+         sender: props.userId,
+         recipient: props.userId
+      };
+
       setStatus('Sending...');
 
       props
-         .addTransfer(values)
+         .addTransfer(data)
          .then(data => setStatus('Transfer done!'))
          .catch(error => setStatus('Problems, try again...'));
    }
 })(InnerForm);
 
-export default NewTransactionForm;
+export default NewTransferForm;

web/src/components/Transfers/New/index.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import * as actions from 'actions';
 import Form from './Form';
 
-class NewTransaction extends Component {
+class NewTransfer extends Component {
    render() {
       const accounts = this.props.accounts;
       const firstAccId = accounts[0]._id;
@@ -20,6 +20,7 @@ class NewTransaction extends Component {
                   <h1>New transfer</h1>
 
                   <Form
+                     userId={this.props.userId}
                      userAccountsList={userAccountsList}
                      firstAccId={firstAccId}
                      addTransfer={this.props.addTransfer}
@@ -33,7 +34,8 @@ class NewTransaction extends Component {
 
 const mapStateToProps = state => {
    return {
-      accounts: state.accounts.data
+      accounts: state.accounts.data,
+      userId: state.profile.data._id
    };
 };
 
@@ -43,7 +45,4 @@ const mapDispatchToProps = dispatch => {
    };
 };
 
-export default connect(
-   mapStateToProps,
-   mapDispatchToProps
-)(NewTransaction);
+export default connect(mapStateToProps, mapDispatchToProps)(NewTransfer);

web/src/components/Transfers/New/validations.js

@@ -1,8 +1,10 @@
 import Yup from 'yup';
 import 'tools/validations/YupCustomValidations';
 
-// New transaction validations
+// New transfer validations
 export default Yup.object().shape({
+   sourceAccountId: Yup.string().required('Please select the account'),
+
    payeeAccNumber: Yup.number()
       .required('Please enter the account number')
       .typeError('Account must be a number')

web/src/containers/Transfers/index.js

@@ -2,16 +2,16 @@ import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import TransfersList from 'components/Transfers/List';
-import SingleTransaction from 'components/Transfers/Single';
-import NewTransaction from 'components/Transfers/New';
+import SingleTransfer from 'components/Transfers/Single';
+import NewTransfer from 'components/Transfers/New';
 
 const Transfers = props => (
    <div className="row panel-content">
       <div className="col-xs-12">
          <Switch>
             <Route exact path="/panel/transfers" component={TransfersList} />
-            <Route path="/panel/transfers/new" component={NewTransaction} />
-            <Route path="/panel/transfers/:transId" component={SingleTransaction} />
+            <Route path="/panel/transfers/new" component={NewTransfer} />
+            <Route path="/panel/transfers/:transId" component={SingleTransfer} />
          </Switch>
       </div>
    </div>