urigo / accounter-fullstack

Node ES Modules with TypeScript

Latest Typescript and Node - as bare-bone as possible example app

I wanted to start a simple Node project where I can install the latest things I want and using as little compilation from Typescript as possible.

I remembered Node announced Node 13 support ESModules without experimental flags, checked out the official documentation but couldn't find a simple bare bone example, so maybe that would help someone.

I've committed the dist folder as well to see how the output from Typescript.

Would love suggestions on how to make it better or to point to a better example!

What I've done (so you can tell me what I should have done...)

Node

• type: module: Tell Node that .js files are ES Modules
• --es-module-specifier-resolution=node: By default, Node wants file extensions in import but TypeScript doesn't include file extension in it's output. so this enable automatic extension resolution in Node.

TypeScript

• "module": "esnext": Make Typescript output ES Modules
• "target": "es2020": Highest target (from 3.8.0-beta)

Run app

1. Install latest Node (Notice that I've placed the engines field on package.json so try to make sure you have the exact version or simply delete it from package.json
2. Install dependencies - yarn
3. Compile with tsc -w and run Node with nodemon - yarn dev
4. You can also use yarn compile and yarn start separately

Want to import from a commonjs package?

Here is a branch of the example with including a commonjs pacakge (pg):

https://github.com/Urigo/typescript-node-es-modules-example/commit/98304173e964713955be3a92b4e355a857376dca

The renovate.json file has nothing to do with the project itself. It's a file to activate RenovateBot to automatically PR this repository when a new version of any dependency of that project has been published

accounter-fullstack's Issues

Add uuid to financial_accounts

currently the unique key is account_number (which is bank account number / credit card last 4 digits) - which is not unique as DB will scale, and theoretically can be changed.
we should add id column, to match other table conventions and avoid duplications

string to Date issue

not sure about the dates, I think new Date(09/10/2020) might have month-date mix.
need to double check that

Setup CI

UI: Income/expense chart

UI: Overall money balance graph

cumulative graph of the overall balance of money we have on a time scale

UI: Expenses breakdown chart

overall expenses together with their breakdowns in one chart

Documents Table throw error (Prod DB)

{json: {…}} json: data: {documents: Array(1632)} errors: Array(1) 0: locations: Array(2) 0: column: 5 line: 107 [[Prototype]]: Object 1: column: 5 line: 128 [[Prototype]]: Object length: 2 [[Prototype]]: Array(0) message: "Unexpected error." path: Array(4) 0: "documents" 1: 1092 2: "amount" 3: "raw" length: 4 [[Prototype]]: Array(0) [[Prototype]]: Object length: 1 [[Prototype]]: Array(0) [[Prototype]]: Object [[Prototype]]: Object

All charges UI: enhance date

show event_date if diff from debit_date

Implement user system basics into DB

TABLE users {
  id   guid
  email  text
  auth0_user_id text
}

TABLE permissions {
  user_id references users.id
  resource_type "business" | "bank_account"
  resource_id text
  role "owner" | "writer" | "reader"
}

TABLE bank_accounts {
  id guid
  parent_business_id references business.id | null
}

TABLE business {
  id guid
}

Use `tsup` and `esbuild` for TS build + bundle

Setup CD and deployment (using Pulumi?)

BUG: ledger generation fails

Use migrations for initial DB structure and SQL schema evolution

move mantine notifications to hooks

edit charge fields from UI

the server already supports that.
client has useUpdateCharge and useUpdat
https://github.com/Urigo/accounter-fullstack/blob/edit-ledger/client/src/components/all-charges/cells/category.tsx

migrate to Documents table

• create documents table in the DB
• add triggers to maintain data until migration completion
• update new server logic to use new table
• add logic to use email_invoice table as seed to documents

Switch to `@graphql-codegen/client-preset`

ledger generated with no date

edit ledger fields from UI

Create new UpdateButton, ConfirmButton

the current one uses the temp-server and doesn't match new schema conventions.

after creation, add here (./client/src/components/allCharges/cells/):

• Entity
• Description
• Category
• Vat
• ShareWith

ledger generation from UI

connecting to the open API of banks

https://www.boi.org.il/he/BankingSupervision/Pages/Open-banking.aspx

https://poalimdev.co.il/get-started

https://openbanking.isracardgroup.co.il/

https://tortilla-hq.slack.com/files/UAYN3DZ9T/F03PDM14WDA/_________________________-___________________16032022__1_.pdf

Enhance DB beneficiaries implementation

Rethink and implement better DB structure.

later-
update server resolvers:

• Charge.beneficiaries
• Mutations.updateCharge.beneficiaries

update client:

• edit charge modal
• all-charges view

Figure out documents debtor/creditor

• amount sign
• add uploading_financial_entity column

Apply `explicit-function-return-type` ESLint rule

As a method to enforce ReactElement as a return type for components
it’s important as if the component return undefined there will be a runtime error from react

Uri's view rejections

Issues:

• selection requires touch (add null option, make default) #124

• insert ledger failing #123

• Charge tag suggestions not working on new design #125

• vat is updating (from null to null), should be removed before mutation sent #126

• cannot generate creditcard ledger automatically

• add vat back, add amount to charge, use all_transactions currency for amount, vat, withholdingTax (edited only on amount) #128

• temporary add account number & type to charge #121

• No label for tags #125

• insert/generate buttons are not available if no data #127

• show insert ledger as card under the charge (so you can see charge details) #130

• UI that shows charge data aside for update/insert forms #130

• add credit/debit counterparties to documents table (and to UI insert/update) #131

• unlink document from charge #129

• link documents to charge flow+UI (can use test-server logic) #133

• update email listener (on test-server) to use documents table

• add trigger to update (and link) documents on insert to email_invoices

• deb7012a-fcc5-4dff-9080-cb088996bdf2 move to crisp charge

• slooooooowwww. paginate

• local currency should default to ILS #142

• insert ledger still not working #141

Add Graphql-eslint

Add The Guild eslint configuration

Setup local environment for the DB

• docker compose
• seed script with some data
• migrations #24

use the context of GraphQL

Basically:

1. Define the interface for the GraphQL context type -> it should include anything related to data that you might need in your resolver. Don't put helper function and things like that. Only loaders, DB connection and everything you might need to mock one day as part of testing.
2. Add that to the typescript-resolvers codegen plugin config, it's called contextType.
3. Make sure to build the context object as part of GraphQL Yoga server creation (either by using useExtendContext plugin, or by using the context option of the Yoga server.
4. Replace all direct imports to data sources / loaders and use context.something

UI: Expense categories pie chart

UI: remove old edit buttons

Create document table (DB)

Pensions: collaboration with Mukam

• migrate to Yoga
• generate JSON schemas for data
• enhance Mesh’s SOAP handler to deal with result-only docs

use Account ID in DB

replace all_transactions.account_number with account_id (based on financial_accounts.id)
meaning - use the ID of account as identifier instead of account number - this to prevent future duplications.
also, update the functions feeding the table.

UI: Better all-charges indications

Yellow where no docs / ledger

Add Inspector + clean schema

UI: insert new document

Add `Query.documents` and also UI for it

Add GraphQL-Modules

update suggestedTransaction function

logic should match new schema.
maybe logic should move to server?

after update, add here (./client/src/components/allCharges/cells/):

• Entity
• Description
• Category
• Vat
• ShareWith

schema updates:

docs:

• add uploading_financial_entity attribute
• think about how to represent multiple relevant financial entities for each doc

Documents matcher rejections

Tasks:

• create reversed matcher: on all-charges add match-document function that shows top 3 picks and full list ordered by date #149
• delete document button #161
• show document extended info inputs according to type selection #143
• merge documents table and matcher

misc

• on Israeli transactions, debit date is missing. If no value => (If creditcard + ILS use event_date). solve it on DB/PubSub later #153

Add pagination to all-charges

Bug: edit document

show dates as strings (as saved on DB)

Separate GraphQL schema to be in `.graphql` files

Use fragment masking from `client-preset`

Related:

• #22

UI: Dividend graph

manually add ledger record from UI