Add OFX/QFX import to UI

Author: JohnStarich

web/src/Accounts.css

@@ -20,6 +20,11 @@
   text-align: right;
 }
 
-.accounts .add-new {
+.account-actions {
   margin-top: 1.5em;
+  margin-left: 0;
+}
+
+.account-actions .btn {
+  margin-right: 0.5em;
 }

web/src/Accounts.js

@@ -8,6 +8,7 @@ import Button from 'react-bootstrap/Button';
 import Col from 'react-bootstrap/Col';
 import Container from 'react-bootstrap/Container';
 import Crumb from './Breadcrumb';
+import ImportAccounts from './ImportAccounts';
 import Row from 'react-bootstrap/Row';
 
 export default function Accounts({ match }) {
@@ -67,13 +68,17 @@ export default function Accounts({ match }) {
               </Row>
             )}
             <Row>
-              <Col><Link to={`${match.url}/new`} className="btn btn-primary add-new">Add new</Link></Col>
+              <Col className="account-actions">
+                <Link to={`${match.url}/new`} className="btn btn-primary add-new">Add new</Link>
+                <Link to={`${match.url}/import`} className="btn btn-secondary import">Import</Link>
+              </Col>
             </Row>
           </Container>
         </>
       } />
       <Route path={`${match.path}/edit/:id`} component={props => <AccountEditor updated={accountUpdated} {...props} />} />
       <Route path={`${match.path}/new`} component={props => <NewAccount created={accountCreated} {...props} />} />
+      <Route path={`${match.path}/import`} component={Import} />
     </>
   )
 }
@@ -108,3 +113,12 @@ function AccountEditor({ updated, match }) {
     </>
   )
 }
+
+function Import({ match }) {
+  return (
+    <>
+      <Crumb title="Import" match={match} />
+      <ImportAccounts />
+    </>
+  )
+}

web/src/ImportAccounts.js

@@ -0,0 +1,51 @@
+import axios from 'axios';
+import React from 'react';
+import Button from 'react-bootstrap/Button';
+import Col from 'react-bootstrap/Col';
+import Container from 'react-bootstrap/Container';
+import Form from 'react-bootstrap/Form';
+import Row from 'react-bootstrap/Row';
+
+export default function ImportAccounts() {
+  return (
+    <Container>
+      <Row><Col><h2>Import</h2></Col></Row>
+      <Row>
+        <Col>
+          <p>Import OFX or QFX files. Typically, you can download these from your financial institution's "Quicken" or "Microsoft Money" downloads.</p>
+        </Col>
+      </Row>
+      <Form
+        noValidate
+        onSubmit={e => {
+          e.preventDefault()
+          e.stopPropagation()
+          const form = e.currentTarget
+          if (form.checkValidity() !== false) {
+            const formFiles = form.querySelector('[type=file]')
+            const files = formFiles.files;
+            if (files.length !== 1) {
+              throw Error("Must provide one file to import")
+            }
+            axios.post('/api/v1/import', files[0])
+              .then(() => window.location.reload())
+              .catch(e => {
+                if (!e.response.data || !e.response.data.Error) {
+                  throw e
+                }
+                alert(e.response.data.Error)
+              })
+          }
+        }}
+      >
+        <Form.Row>
+          <Form.Control type="file" required />
+        </Form.Row>
+        &nbsp;
+        <Form.Row>
+          <Col><Button type="submit">Import</Button></Col>
+        </Form.Row>
+      </Form>
+    </Container>
+  )
+}