Skip to content

Commit 58313ad

Browse files
ieugenieugen
committed
Proper application title, fixed react warnings, added in application instructions
1 parent e02a8ea commit 58313ad

File tree

3 files changed

+101
-43
lines changed

3 files changed

+101
-43
lines changed

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>Assign transactions to accounts</title>
2828
</head>
2929

3030
<body>

‎src/column.jsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -35,36 +35,36 @@ export default class Column extends React.Component {
3535
<div className="row">
3636
{this.props.title === 'Transactions' &&
3737
<div className="col-md-12">
38-
<div class="input-group input-group-sm mb-3">
39-
<div class="input-group-prepend">
40-
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Source Account</button>
41-
<div class="dropdown-menu">
38+
<div className="input-group input-group-sm mb-3">
39+
<div className="input-group-prepend">
40+
<button className="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Source Account</button>
41+
<div className="dropdown-menu">
4242
acounts...
4343
</div>
4444
</div>
45-
<input type="text" class="form-control" aria-label="Text input with dropdown button"></input>
45+
<input type="text" className="form-control" aria-label="Text input with dropdown button"></input>
4646
</div>
4747
</div>
4848
}
4949

5050
<div className="col-md-6">
51-
<div class="input-group input-group-sm mb-3">
52-
<div class="input-group-prepend">
53-
<button class="btn btn-outline-success" type="submit">Search</button>
51+
<div className="input-group input-group-sm mb-3">
52+
<div className="input-group-prepend">
53+
<button className="btn btn-outline-success" type="submit">Search</button>
5454
</div>
55-
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
55+
<input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
5656
</div>
5757
</div>
5858
{this.props.title === 'Transactions' &&
5959
<div className="col-md-6">
60-
<div class="btn-group btn-group-sm">
61-
<button type="button" class="btn btn-outline-secondary">All transactions</button>
62-
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
63-
<span class="sr-only">Toggle Dropdown</span>
60+
<div className="btn-group btn-group-sm">
61+
<button type="button" className="btn btn-outline-secondary">All transactions</button>
62+
<button type="button" className="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
63+
<span className="sr-only">Toggle Dropdown</span>
6464
</button>
65-
<div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
66-
<a class="dropdown-item" href="1">Expences</a>
67-
<a class="dropdown-item" href="2">Incomes</a>
65+
<div className="dropdown-menu" aria-labelledby="dropdownMenuReference">
66+
<a className="dropdown-item" href="1">Expences</a>
67+
<a className="dropdown-item" href="2">Incomes</a>
6868
</div>
6969
</div>
7070
</div>

‎src/index.js‎

Lines changed: 84 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,124 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import '@atlaskit/css-reset';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import "@atlaskit/css-reset";
44

5-
import initialData from './data/2017.json';
6-
import accounts from './data/accounts.json';
7-
import Column from './column';
5+
import initialData from "./data/2017.json";
6+
import accounts from "./data/accounts.json";
7+
import Column from "./column";
88

99
const data = {
1010
transactions: initialData,
11-
accounts: accounts
12-
}
11+
accounts: accounts,
12+
};
13+
14+
const HomeBank = () => <a href="https://homebank.ro">homebank.ro</a>;
1315

1416
class App extends React.Component {
1517
state = data;
1618

1719
render() {
1820
return (
1921
<>
20-
<div className="container-fluid">
21-
<div className="row my-3">
22-
<div className="col-md-12">
23-
<h2>Transactions selector</h2>
24-
</div>
22+
<div className="container-fluid">
23+
<div className="row my-3">
24+
<div className="col-md-12">
25+
<h2>Assign transactions to accounts</h2>
26+
<p>
27+
Simple application to assign transactions exported from ING
28+
HomeBank to accounts. Used by tools like{" "}
29+
<a href="https://hledger.org/">hledger</a> from{" "}
30+
<a href="https://plaintextaccounting.org/">
31+
plaintextaccounting.org
32+
</a>
33+
</p>
34+
<h3>Steps to use the application</h3>
35+
<ul>
36+
<li>
37+
Export transactions from <HomeBank />{" "}
38+
</li>
39+
<li>
40+
Export accounts from <strong>ledger/hledger</strong> using
41+
hledger accounts
42+
</li>
43+
<li>Import both accounts and transcations list here</li>
44+
<li>
45+
Assign each transaction to an account by dragging it over
46+
</li>
47+
<li>Export transactions list</li>
48+
</ul>
2549
</div>
2650
</div>
51+
</div>
2752
<div className="container-fluid">
2853
<div className="row">
2954
<div className="col-md-4">
30-
<textarea className="form-control" rows="5" placeholder="Accounts list:"></textarea>
55+
<textarea
56+
className="form-control"
57+
rows="5"
58+
placeholder="Accounts list:"
59+
></textarea>
3160
</div>
3261
<div className="col-md-4">
33-
<button type="button" className="btn btn-outline-primary btn-block mb-2">Update Accounts list</button>
62+
<button
63+
type="button"
64+
className="btn btn-outline-primary btn-block mb-2"
65+
>
66+
Update Accounts list
67+
</button>
3468
<div className="input-group my-2">
3569
<div className="input-group-prepend">
36-
<button className="btn btn-outline-primary" type="button" id="inputGroupFileAddon03">Import transactions</button>
70+
<button
71+
className="btn btn-outline-primary"
72+
type="button"
73+
id="inputGroupFileAddon03"
74+
>
75+
Import transactions
76+
</button>
3777
</div>
3878
<div className="custom-file">
39-
<input type="file" className="custom-file-input" id="inputGroupFile03" ariaDescribedby="inputGroupFileAddon03" />
40-
<label className="custom-file-label" for="inputGroupFile03">*.csv/Excell file...</label>
79+
<input
80+
type="file"
81+
className="custom-file-input"
82+
id="inputGroupFile03"
83+
aria-describedby="inputGroupFileAddon03"
84+
/>
85+
<label className="custom-file-label" htmlFor="inputGroupFile03">
86+
*.csv export from{" "}
87+
<a href="https://homebank.ro">homebank.ro</a>
88+
</label>
4189
</div>
4290
</div>
43-
<button type="button" className="btn btn-outline-primary btn-block mt-2">Export data</button>
91+
<button
92+
type="button"
93+
className="btn btn-outline-primary btn-block mt-2"
94+
>
95+
Export data
96+
</button>
4497
</div>
4598
<div className="col-md-4"></div>
4699

47100
<div className="col-md-4">
48-
<Column key="accounts-column" title="Accounts" accounts={this.state.accounts} />
101+
<Column
102+
key="accounts-column"
103+
title="Accounts"
104+
accounts={this.state.accounts}
105+
/>
49106
</div>
50107
<div className="col-md-4">
51108
<Column title="Assigned transactions" />
52109
</div>
53110
<div className="col-md-4">
54-
<Column key="transactions-column" title="Transactions" transactions={this.state.transactions} />
111+
<Column
112+
key="transactions-column"
113+
title="Transactions"
114+
transactions={this.state.transactions}
115+
/>
55116
</div>
56117
</div>
57118
</div>
58119
</>
59-
)
120+
);
60121
}
61122
}
62123

63-
ReactDOM.render(
64-
<App />,
65-
document.getElementById('root')
66-
);
124+
ReactDOM.render(<App />, document.getElementById("root"));

0 commit comments

Comments
 (0)