Migrating to next.js (#461)

.github/workflows/build.yml

@@ -39,4 +39,4 @@ jobs:
           flags: unittests
           token: ${{ secrets.CODECOV_TOKEN }}
       - name: Build UI
-        run: cd ui && npm ci
+        run: cd ui && npm ci --force

.gitignore

@@ -22,3 +22,5 @@ __debug*
 moneyd
 private.key
 session.json
+backup.db
+

README.md

@@ -60,7 +60,7 @@ This project has currently three main components:
 * A simple CLI [`mgo`](./cmd/mgo) which can be used to interact with
   the API.
 * An even simpler [web-based user interface](./ui/), based on
-  [SvelteKit](https://kit.svelte.dev).
+  [Next.js](https://nextjs.org).
 
 
 ## Starting `moneyd`
@@ -71,7 +71,7 @@ out some information, but logging definitely needs to improved.
 
 On startup, an SQLite database named `money.db` will be created (or loaded) in
 the same directory as the started binary. If the database is empty, a new
-portfolio named `mybank/myportfolio` and one example security will be created.
+portfolio named `mybank-myportfolio` and one example security will be created.
 
 As a simple check, one can simply interact with the RPC-API with a normal HTTP
 client, for example to list all portfolios.
@@ -85,7 +85,7 @@ curl \
 This should print something like the following.
 
 ```json
-{"portfolios":[{"name":"bank/myportfolio","displayName":"My Portfolio"}]}
+{"portfolios":[{"name":"mybank-myportfolio","displayName":"My Portfolio"}]}
 ```
 
 ## Using `mgo`
@@ -100,7 +100,7 @@ To add transactions (buy, sell, etc.) to an existing portfolio, the command `mgo
 portfolio transaction create` can be used. The following shows an example for
 the security with the ISIN US0378331005.
 ```zsh
-mgo portfolio transactions create US0378331005 --portfolio-name bank/myportfolio --amount 5 --price 120 --time="2022-01-01 10:00"
+mgo portfolio transactions create US0378331005 --portfolio-name mybank-myportfolio --amount 5 --price 120 --time="2022-01-01 10:00"
 ```
 
 When successful, this should print something like the following.
@@ -117,6 +117,19 @@ supports (basic) shell completion. For details how to activate it, please see
 `mgo completion`.
 
 
+## Using the UI
+
+Navigate to the `ui` folder and then either start a development server using
+`npm run dev` or build a production server like the following:
+```bash
+npm run build
+npm run start
+```
+
+In either case, the UI is available on http://localhost:3000 and currently
+configured to expect the API server at http://localhost:8080. In the future,
+this will be made configurable for real server deployments.
+
 # When is it finished?
 
 Since I am working on this in my spare time, it will probably take a while 😃.

buf.gen.yaml

@@ -1,20 +1,10 @@
 version: v1
-managed:
-  enabled: true
-  go_package_prefix:
-    default: github.com/oxisto/money-gopher/gen
 plugins:
   - plugin: buf.build/connectrpc/go
     out: gen
     opt:
-      - paths=source_relative
+      - paths=source_relative 
   - plugin: buf.build/protocolbuffers/go
     out: gen
     opt:
       - paths=source_relative
-  - plugin: buf.build/connectrpc/es:v1.4.0
-    out: ui/src/lib/gen
-    opt: target=ts
-  - plugin: buf.build/bufbuild/es:v1.7.2
-    out: ui/src/lib/gen
-    opt: target=ts

buf.lock

@@ -1,2 +1,8 @@
 # Generated by buf. DO NOT EDIT.
 version: v1
+deps:
+  - remote: buf.build
+    owner: googleapis
+    repository: googleapis
+    commit: 8bc2c51e08c447cd8886cdea48a73e14
+    digest: shake256:a969155953a5cedc5b2df5b42c368f2bc66ff8ce1804bc96e0f14ff2ee8a893687963058909df844d1643cdbc98ff099d2daa6bc9f9f5b8886c49afdc60e19af

buf.openapi.gen.yaml

@@ -0,0 +1,6 @@
+version: v1
+plugins:
+  - plugin: buf.build/community/google-gnostic-openapi
+    out: .
+    opt:
+      - enum_type=string

buf.yaml

@@ -1,5 +1,7 @@
 version: v1
 name: buf.build/clouditor/api
+deps:
+  - buf.build/googleapis/googleapis
 breaking:
   use:
     - FILE

cli/commands/account.go

@@ -31,7 +31,7 @@ type BankAccountCmd struct {
 }
 
 type CreateBankAccountCmd struct {
-	Name        string `help:"The identifier of the portfolio, e.g. mybank/myportfolio" required:""`
+	Name        string `help:"The identifier of the portfolio, e.g. mybank-myportfolio" required:""`
 	DisplayName string `help:"The display name of the portfolio"`
 }
 

cli/commands/portfolio.go

@@ -92,7 +92,7 @@ func (l *ListPortfolioCmd) Run(s *cli.Session) error {
 }
 
 type CreatePortfolioCmd struct {
-	Name        string `help:"The identifier of the portfolio, e.g. mybank/myportfolio" required:""`
+	Name        string `help:"The identifier of the portfolio, e.g. mybank-myportfolio" required:""`
 	DisplayName string `help:"The display name of the portfolio"`
 }
 
@@ -115,7 +115,7 @@ func (cmd *CreatePortfolioCmd) Run(s *cli.Session) error {
 }
 
 type ShowPortfolioCmd struct {
-	PortfolioName string `help:"The identifier of the portfolio, e.g. mybank/myportfolio" required:"" predictor:"portfolio"`
+	PortfolioName string `help:"The identifier of the portfolio, e.g. mybank-myportfolio" required:"" predictor:"portfolio"`
 }
 
 func (cmd *ShowPortfolioCmd) Run(s *cli.Session) error {

cmd/moneyd/moneyd.go

@@ -30,9 +30,9 @@ import (
 	"github.com/oxisto/money-gopher/persistence"
 	"github.com/oxisto/money-gopher/service/portfolio"
 	"github.com/oxisto/money-gopher/service/securities"
-	"github.com/oxisto/money-gopher/ui"
 
 	"connectrpc.com/connect"
+	"connectrpc.com/vanguard"
 	"github.com/MicahParks/keyfunc/v3"
 	"github.com/alecthomas/kong"
 	"github.com/golang-jwt/jwt/v5"
@@ -51,7 +51,7 @@ var cmd moneydCmd
 type moneydCmd struct {
 	Debug bool `help:"Enable debug mode."`
 
-	EmbeddedOAuth2ServerDashboardCallback string `default:"http://localhost:8080/callback" help:"Specifies the callback URL for the dashboard, if the embedded oauth2 server is used."`
+	EmbeddedOAuth2ServerDashboardCallback string `default:"http://localhost:3000/api/auth/callback/money-gopher" help:"Specifies the callback URL for the dashboard, if the embedded oauth2 server is used."`
 
 	PrivateKeyFile     string `default:"private.key"`
 	PrivateKeyPassword string `default:"moneymoneymoney"`
@@ -107,19 +107,37 @@ func (cmd *moneydCmd) Run() error {
 	)
 	go authSrv.ListenAndServe()
 
-	interceptors := connect.WithInterceptors(NewAuthInterceptor())
+	interceptors := connect.WithInterceptors(
+		NewSimpleLoggingInterceptor(),
+		NewAuthInterceptor(),
+	)
+
+	portfolioService := vanguard.NewService(
+		portfoliov1connect.NewPortfolioServiceHandler(portfolio.NewService(
+			portfolio.Options{
+				DB:               db,
+				SecuritiesClient: portfoliov1connect.NewSecuritiesServiceClient(http.DefaultClient, portfolio.DefaultSecuritiesServiceURL),
+			},
+		), interceptors))
+	securitiesService := vanguard.NewService(
+		portfoliov1connect.NewSecuritiesServiceHandler(securities.NewService(db), interceptors),
+	)
+
+	transcoder, err := vanguard.NewTranscoder([]*vanguard.Service{
+		portfolioService,
+		securitiesService,
+	}, vanguard.WithCodec(func(tr vanguard.TypeResolver) vanguard.Codec {
+		codec := vanguard.NewJSONCodec(tr)
+		codec.MarshalOptions.EmitDefaultValues = true
+		return codec
+	}))
+	if err != nil {
+		slog.Error("transcoder failed", tint.Err(err))
+		return err
+	}
 
 	mux := http.NewServeMux()
-	// The generated constructors return a path and a plain net/http
-	// handler.
-	mux.Handle(portfoliov1connect.NewPortfolioServiceHandler(portfolio.NewService(
-		portfolio.Options{
-			DB:               db,
-			SecuritiesClient: portfoliov1connect.NewSecuritiesServiceClient(http.DefaultClient, portfolio.DefaultSecuritiesServiceURL),
-		},
-	), interceptors))
-	mux.Handle(portfoliov1connect.NewSecuritiesServiceHandler(securities.NewService(db), interceptors))
-	mux.Handle("/", ui.SvelteKitHandler("/"))
+	mux.Handle("/", transcoder)
 
 	err = http.ListenAndServe(
 		":8080",
@@ -155,6 +173,24 @@ func handleCORS(h http.Handler) http.Handler {
 	})
 }
 
+func NewSimpleLoggingInterceptor() connect.UnaryInterceptorFunc {
+	interceptor := func(next connect.UnaryFunc) connect.UnaryFunc {
+		return connect.UnaryFunc(func(
+			ctx context.Context,
+			req connect.AnyRequest,
+		) (connect.AnyResponse, error) {
+			slog.Debug("Handling RPC Request",
+				slog.Group("req",
+					"procedure", req.Spec().Procedure,
+					"httpmethod", req.HTTPMethod(),
+				))
+			return next(ctx, req)
+		})
+	}
+
+	return connect.UnaryInterceptorFunc(interceptor)
+}
+
 func NewAuthInterceptor() connect.UnaryInterceptorFunc {
 	interceptor := func(next connect.UnaryFunc) connect.UnaryFunc {
 		k, err := keyfunc.NewDefault([]string{"http://localhost:8000/certs"})