Create working PoC of frontend app

web/src/pages/PrepareTransactionsPage/PrepareTransactionsPage.tsx

@@ -0,0 +1,73 @@
+import { useCallback, useMemo } from "react";
+import { useStore } from "../../store/AppStore";
+import TransactionsTable from "./TransactionsTable";
+import { SkippedLines } from "./SkippedLines";
+import ImportBar from "./ImportBar";
+import type { ImportOptions } from "../../types/api";
+import { submitTransactions } from "../../services/api.service";
+
+
+export default function PrepareTransactionsPage() {
+  const { state, dispatch } = useStore();  
+  
+  const desiredTransactions = useMemo(() => state.transactions.filter((_, i) => !state.filteredOut.includes(i)), [state, state.filteredOut]);
+
+  const handleSubmit = useCallback(async (opts: ImportOptions) => {
+    if(!state.server) {
+      return;
+    }
+
+    const response = await submitTransactions(desiredTransactions, state.server, opts);    
+    
+    dispatch({
+      type: 'SET_RESULT',
+      payload: response
+    });
+
+    dispatch({
+      type: 'MOVE_STEP',
+      payload: {
+        offset: 1
+      }
+    });
+  }, [desiredTransactions, state]);
+
+  const filterOut = useCallback((index: number) => dispatch({
+    type: 'FILTER_OUT',
+    payload: { index }
+  }), [dispatch]);
+
+  const removeFilter = useCallback((index: number) => dispatch({
+    type: 'REMOVE_FILTER',
+    payload: { index }
+  }), [dispatch]);
+
+  return (
+    <div className="columns mt-6">
+      <div className="column is-8 is-offset-2">
+        <div className="box">
+          <h2 className="title is-4 has-text-centered">Prepare Transactions</h2> 
+
+          <div className="content">
+            <h3 className="title is-5">Considered transactions ({state.transactions.length})</h3>
+            <TransactionsTable 
+              transactions={state.transactions} 
+              filteredOut={state.filteredOut}
+              filterOut={filterOut}
+              removeFilter={removeFilter} />
+          </div> 
+
+          <div className="content">
+            <h3 className="title is-5">Skipped lines ({state.skipped.length})</h3>
+            <SkippedLines skipped={state.skipped} />
+          </div>
+
+          <div className="content">
+            <ImportBar onSubmit={handleSubmit} />
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+}