simplified setup

.eslintrc

@@ -1,19 +1,18 @@
 {
-    "extends": [
+    "extends": "eslint:recommended",
-        "eslint:recommended",
-        "plugin:@sap/cds/recommended"
-    ],
     "env": {
         "browser": true,
-        "es2022": true,
         "node": true,
+        "es6": true,
         "jest": true,
         "mocha": true
     },
+    "parserOptions": {
+        "ecmaVersion": 2018
+    },
     "globals": {
         "SELECT": true,
         "INSERT": true,
-        "UPSERT": true,
         "UPDATE": true,
         "DELETE": true,
         "CREATE": true,
@@ -23,7 +22,6 @@
     "rules": {
         "no-console": "off",
         "require-atomic-updates": "off",
-        "require-await":"warn",
+        "require-await":"warn"
-        "no-unused-vars": ["warn", { "argsIgnorePattern": "_" }]
     }
 }

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: This channel is CLOSED. 
-    about: Use SAP community instead
-    url: https://answers.sap.com/tags/9f13aee1-834c-4105-8e43-ee442775e5ce

.github/ISSUE_TEMPLATE/question--feedback-or-bug-.md

@@ -0,0 +1,10 @@
+---
+name: This channel is CLOSED. 
+about: Use our community at  https://answers.sap.com/tags/9f13aee1-834c-4105-8e43-ee442775e5ce
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+Please use our community on https://answers.sap.com/tags/9f13aee1-834c-4105-8e43-ee442775e5ce

.github/dependabot.yml

@@ -1,8 +0,0 @@
-version: 2
-
-updates:
-- package-ecosystem: npm
-  directory: /
-  versioning-strategy: increase-if-necessary
-  schedule:
-    interval: daily

.github/workflows/node.js.yml

@@ -5,9 +5,9 @@ name: CI
 
 on:
   push:
-    branches: [ main ]
+    branches: [ master ]
   pull_request:
-    branches: [ main ]
+    branches: [ master ]
 
 jobs:
   build:
@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 14.x]
+        node-version: [10.x, 12.x, 14.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -24,6 +24,5 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm i -g npm@8
+    - run: npm install
-    - run: npm ci
     - run: npm test

.gitignore

@@ -12,11 +12,6 @@ target/
 *.mtar
 connection.properties
 default-env.json
-.cdsrc-private.json
 packages/messageBox
 reviews/msg-box
 reviews/db/test.db
-
-*.openapi3.json
-*.sqlite
-*.db

.npmrc

@@ -1,3 +0,0 @@
-# Ensure we always use public packages, i.e. avoid using local registries from ~/.npmrc
-@sap:registry=https://registry.npmjs.org/
-registry=https://registry.npmjs.org/

.registry/.gitignore

@@ -1 +0,0 @@
-*.tgz

.registry/server.js

@@ -1,26 +1,19 @@
 const { exec } = require ('child_process')
-const isWin = process.platform === 'win32'
 const express = require ('express')
 const fs = require ('fs')
 const app = express()
 
 const { PORT=4444 } = process.env
-const [,,port=PORT,scope='@capire'] = process.argv
+const [,,port=PORT] = process.argv
-const cwd = __dirname
-
-// clean up on start (exit handler might not complete on Windows)
-exec(isWin ? 'del *.tgz' : 'rm *.tgz', {cwd})
-
 
 app.use('/-/:tarball', (req,res,next) => {
+  const url = decodeURIComponent(req.url)
   console.debug ('GET', req.params)
   try {
     const { tarball } = req.params
-    const pkgFull = tarball.substring(0, tarball.lastIndexOf('-'))
+    const [, pkg ] = /^capire-(\w+)/.exec(tarball)
-    const [, pkg ] = /^\w+-(.+)/.exec(pkgFull)
     fs.lstat(tarball,(err => {
-      if (err) console.debug (`npm pack ../${pkg}`)
+      if (err) exec(`npm pack ../${pkg}`,next)
-      if (err) exec(`npm pack ../${pkg}`,{cwd},next)
       else next()
     }))
   } catch (e) {
@@ -32,14 +25,12 @@ app.use('/-/:tarball', (req,res,next) => {
 app.use('/-', express.static(__dirname))
 
 app.get('/*', (req,res)=>{
-  const urlRegex = /^\/(@[\w-]+)\/(.+)/
   const url = decodeURIComponent(req.url)
   console.debug ('GET',url)
   try {
-    if (!urlRegex.test(url))  return res.sendStatus(404)
+    const [, capire, pkg ] = /^\/(@capire)\/(\w+)/.exec(url)
-    const [, scpe, pkg ] = urlRegex.exec(url)
+    const package = require (`${capire}/${pkg}/package.json`)
-    const package = require (`${scpe}/${pkg}/package.json`)
+    const tarball = `capire-${pkg}-${package.version}.tgz`
-    const tarball = `${scpe.slice(1)}-${pkg}-${package.version}.tgz`
     // https://github.com/npm/registry/blob/master/docs/responses/package-metadata.md
     res.json({
       "name": package.name,
@@ -51,30 +42,29 @@ app.get('/*', (req,res)=>{
           "name": package.name,
           "version": package.version,
           "dist": {
-            "tarball": `${server.url}/-/${tarball}`
+            "tarball": `http://localhost:${port}/-/${tarball}`
           },
         }
       },
     })
   } catch (e) {
-    if (e.code === 'MODULE_NOT_FOUND')  return res.sendStatus(404)
+    console.error(e)
-    console.error(e);  throw e
+    res.sendStatus(404)
   }
 })
 
-const server = app.listen(port, ()=>{
+app.listen(port, ()=>{
-  const url = server.url = `http://localhost:${server.address().port}`
+  console.log (`npm set @capire:registry=http://localhost:${port}`)
-  console.log (`npm set ${scope}:registry=${url}`)
+  console.log (`@capire registry listening on http://localhost:${port}`)
-  exec(`npm set ${scope}:registry=${url}`)
+  exec(`npm set @capire:registry=http://localhost:${port}`)
-  console.log (`${scope} registry listening on ${url}`)
 })
 
-
 const _exit = ()=>{
-  server.close()
+  console.log ('\nnpm conf rm @capire:registry')
-  exec(`npm conf rm "${scope}:registry"`, ()=> { process.exit() })
+  exec('npm conf rm @capire:registry')
+  exec('rm *.tgz')
+  process.exit()
 }
-
 process.on ('SIGTERM',_exit)
 process.on ('SIGHUP',_exit)
 process.on ('SIGINT',_exit)

.tours/db-native.tour

@@ -1,117 +0,0 @@
-{
-  "$schema": "https://aka.ms/codetour-schema",
-  "title": "Database Functions",
-  "steps": [
-    {
-      "title": "Introduction",
-      "description": "### Database Functions in CDS Models\n\nIn this tour, you'll learn how to add database-specific functions to CDS models in your application."
-    },
-    {
-      "file": "bookshop/db/schema.cds",
-      "description": "#### Basic Schema\n\nWe want to add two fields to the `Authors` entity, one for the author's age and one for the span of years that she or he lived.\n\nThese two fields can be computed out of the existing `dateOfBirth` and `dateOfDeath` fields.",
-      "selection": {
-        "start": {
-          "line": 19,
-          "character": 1
-        },
-        "end": {
-          "line": 21,
-          "character": 1
-        }
-      },
-      "title": "Base fields in Author"
-    },
-    {
-      "file": "bookshop/srv/admin-service.cds",
-      "description": "This is how the `Authors` entity gets exposed in an OData or REST service.\n\nIn the next step, you'll see how we extend this projection.",
-      "selection": {
-        "start": {
-          "line": 4,
-          "character": 1
-        },
-        "end": {
-          "line": 5,
-          "character": 1
-        }
-      },
-      "title": "Authors service"
-    },
-    {
-      "file": "fiori/db/sqlite/index.cds",
-      "description": "#### SQLite Implementation\n\nHere's the first implementation for SQLite.  It computes the two fields `age` and `lifetime` through SQLite's [strftime](https://sqlite.org/lang_datefunc.html) function.\n\nThrough the [`extend projection`](https://cap.cloud.sap/docs/cds/cdl#extend-view) clause you can add additional fields to projection entities.  These are deployed as database views, which is why we can integrate the database functions in the first place.\n",
-      "selection": {
-        "start": {
-          "line": 7,
-          "character": 1
-        },
-        "end": {
-          "line": 11,
-          "character": 1
-        }
-      },
-      "title": "SQLite implementation"
-    },
-    {
-      "file": "fiori/db/hana/index.cds",
-      "description": "#### SAP HANA Implementation\n\nThis is the second implementation for SAP HANA.  It computes the same two fields `age` and `lifetime` through the [YEARS_BETWEEN](https://help.sap.com/viewer/7c78579ce9b14a669c1f3295b0d8ca16/Cloud/en-US/7c0d2c161ea34def86de3f5eadd6a0af.html) and [YEAR](https://help.sap.com/viewer/7c78579ce9b14a669c1f3295b0d8ca16/Cloud/en-US/20f5fac6751910148dabd3c6821f907d.html) functions of SAP HANA.\n\n#### File Layout and Code Structure\n\nNote the path of the `.cds` file we are in: it's in a subfolder of `db`, so that it's _not_ automatically picked up when we start the application.  The same is true for the SQLite implementation: it's in a separate `db/sqlite/` folder as well.  In the next step, you'll see how these files are loaded.\n\nAlso, we choose to implement all of that as an extension of the original bookshop here in the _fiori_ package.  See the first [CAP Samples] code tour for more details on the different packages of this repository.",
-      "selection": {
-        "start": {
-          "line": 7,
-          "character": 1
-        },
-        "end": {
-          "line": 11,
-          "character": 1
-        }
-      },
-      "title": "SAP HANA implementation"
-    },
-    {
-      "file": "fiori/package.json",
-      "description": "#### Configuration\n\nThe `cds.requires` section in `package.json` is a place to configure which of the `db/sqlite` and `db/hana` folders are used for which database.\n\nWe use [Node.js profiles](https://cap.cloud.sap/docs/node.js/cds-env#profiles) to separate the configuration.\nIn the `development` profile, you can see that `db/sqlite` is set as the model, while the `db/hana` folder is configured in the `production` profile.  `db-ext` is a pseudo datasource, its name doesn't matter.\n\nSee [`cds.resolve`](https://cap.cloud.sap/docs/node.js/cds-compile#cds-resolve) to learn more about how models are found.",
-      "selection": {
-        "start": {
-          "line": 41,
-          "character": 1
-        },
-        "end": {
-          "line": 48,
-          "character": 1
-        }
-      },
-      "title": "Configuration"
-    },
-    {
-      "file": "fiori/package.json",
-      "description": "#### Run with SQLite\n\nTo run with `development` and an in-memory SQLite database, you don't need to do anything special, because it's activated by default.  Just run:\n\n>> cds watch fiori\n\nThen open [http://localhost:4004/admin/Authors](http://localhost:4004/admin/Authors) to see the two new fields.\n",
-      "line": 43,
-      "title": "Run with SQLite"
-    },
-    {
-      "file": "fiori/package.json",
-      "description": "#### Deploy the CDS Model to SAP HANA\n\nTo 'activate' SAP HANA through the `production` profile, you can use the global `--production` flag:\n\n>> cd fiori; cds deploy --to hana --production\n\n[Learn more about SAP HANA deployment](https://cap.cloud.sap/docs/guides/databases#get-hana)\n\n#### Run the Application\n\n>> cd fiori; cds watch --production\n\nThe service on [http://localhost:4004/admin/Authors](http://localhost:4004/admin/Authors) is the same as before, but this time the `Authors` entity is backed by a database view with an SAP HANA function.\n\n#### More\n\nIf you don't see data, you can add some in the next step.",
-      "line": 46,
-      "title": "Run with SAP HANA"
-    },
-    {
-      "file": "fiori/test/requests.http",
-      "description": "### Add More Data\n\nOptionally you can add some `Authors` data by clicking on the _Send Request_ link (provided by the [REST client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) extension).",
-      "line": 72,
-      "selection": {
-        "start": {
-          "line": 67,
-          "character": 1
-        },
-        "end": {
-          "line": 73,
-          "character": 1
-        }
-      },
-      "title": "Add Data"
-    },
-    {
-      "title": "Wrap-up",
-      "description": "### Summary\n\nThat's it!  You have seen: \n- How to integrate database-specific functions in a CDS model.\n- How to switch between the two implementations for SQLite and SAP HANA."
-    }
-  ]
-}

.tours/samples.tour

@@ -1,139 +0,0 @@
-{
-  "$schema": "https://aka.ms/codetour-schema",
-  "title": "CAP Samples",
-  "steps": [
-    {
-      "title": "Welcome",
-      "file": "README.md",
-      "description": "### Welcome to CAP Samples!\n\nThis tour leads you through a collection of samples for the [SAP Cloud Application Programming Model (CAP)](https://cap.cloud.sap).\nYou will learn which features of the programming model are demonstrated in which sample.\n\nLet's start!",
-      "line": 2,
-      "selection": {
-        "start": {
-          "line": 1,
-          "character": 1
-        },
-        "end": {
-          "line": 3,
-          "character": 108
-        }
-      }
-    },
-    {
-      "file": "hello/srv/world.cds",
-      "description": "### Hello World!\n\nThis is a simplistic [Hello World](https://cap.cloud.sap/docs/get-started/hello-world) service using [CDS](https://cap.cloud.sap/docs/cds/) and [cds.services](https://cap.cloud.sap/docs/node.js/api#services-api).",
-      "line": 2,
-      "selection": {
-        "start": {
-          "line": 1,
-          "character": 1
-        },
-        "end": {
-          "line": 4,
-          "character": 1
-        }
-      },
-      "title": "Hello World!"
-    },
-    {
-      "file": "bookshop/db/schema.cds",
-      "description": "### A Bookshop!\n\nIntroduces:\n- [Project Setup](https://cap.cloud.sap/docs/get-started/) and [Layouts](https://cap.cloud.sap/docs/get-started/projects)\n- [Domain Modeling](https://cap.cloud.sap/docs/guides/domain-models)\n- [Defining Services](https://cap.cloud.sap/docs/guides/providing-services)\n- [Generic Providers](https://cap.cloud.sap/docs/guides/generic-providers)\n- [Adding Custom Logic](https://cap.cloud.sap/docs/guides/service-impl)\n- [Using Databases](https://cap.cloud.sap/docs/guides/databases)\n",
-      "line": 1,
-      "selection": {
-        "start": {
-          "line": 1,
-          "character": 1
-        },
-        "end": {
-          "line": 32,
-          "character": 1
-        }
-      },
-      "title": "Bookshop"
-    },
-    {
-      "file": "common/index.cds",
-      "description": "### Extend and Reuse\n\nShowcases how to extend [@sap/cds/common](https://cap.cloud.sap/docs/cds/common) thereby covering:\n- Building [extension packages](https://cap.cloud.sap/docs/guides/domain-models#aspects-extensibility)\n- Providing [reuse packages](https://cap.cloud.sap/docs/get-started/projects#sharing-and-reusing-content)\n- [Verticalization](https://cap.cloud.sap/docs/cds/common#adapting-to-your-needs)\n- Using [Aspects](https://cap.cloud.sap/docs/cds/cdl#aspects)\n- Used in the [fiori app sample](#fiori)\n",
-      "line": 1,
-      "selection": {
-        "start": {
-          "line": 1,
-          "character": 1
-        },
-        "end": {
-          "line": 46,
-          "character": 1
-        }
-      },
-      "title": "Common"
-    },
-    {
-      "file": "orders/db/schema.cds",
-      "description": "### Orders - Compositions and Serving Documents\n\nA standalone orders management service, demonstrating:\n- Using [Compositions](https://cap.cloud.sap/docs/cds/cdl#compositions) in [Domain Models](https://cap.cloud.sap/docs/guides/domain-models), along with\n- [Serving deeply nested documents](https://cap.cloud.sap/docs/guides/generic-providers#serving-structured-data)\n",
-      "line": 1,
-      "selection": {
-        "start": {
-          "line": 1,
-          "character": 1
-        },
-        "end": {
-          "line": 27,
-          "character": 1
-        }
-      },
-      "title": "Orders"
-    },
-    {
-      "file": "reviews/db/schema.cds",
-      "description": "### Reviews - More Modularity\n\nShows how to implement a modular service to manage product reviews, including:\n- Consuming other services synchronously and asynchronously\n- Serving requests synchronously\n- Emitting events asynchronously\n- Grow as you go, with:\n- Mocking app services\n- Running service meshes\n- Late-cut Micro Services\n- As well as managed data, input validations, and authorization\n",
-      "line": 1,
-      "selection": {
-        "start": {
-          "line": 1,
-          "character": 1
-        },
-        "end": {
-          "line": 39,
-          "character": 1
-        }
-      },
-      "title": "Reviews"
-    },
-    {
-      "title": "Bookstore",
-      "description": "### Bookstore - Reuse and UI\n\n- A [composite app, reusing and combining](https://cap.cloud.sap/docs/guides/reuse-and-compose) these packages:\n  - [@capire/bookshop](bookshop)\n  - [@capire/reviews](reviews)\n  - [@capire/orders](orders)\n  - [@capire/common](common)\n- [The Vue.js app](bookshop/app/vue) imported from bookshop is served as well\n- [The Vue.js app](reviews/app/vue) imported from reviews is served as well\n- [The Fiori app](orders/app) imported from orders is served as well\n- [OpenAPI export + Swagger UI](https://cap.cloud.sap/docs/advanced/openapi)"
-    },
-    {
-      "file": "fiori/app/services.cds",
-      "description": "### Annotations for SAP Fiori Elements\n\nAdds an SAP Fiori elements application to bookstore, thereby introducing:\n- OData Annotations in `.cds` files\n- Support for Fiori Draft\n- Support for Value Helps\n- Serving SAP Fiori apps locally\n\nSee the [Serving Fiori UIs](https://cap.cloud.sap/docs/advanced/fiori) documentation for more information.",
-      "line": 1,
-      "selection": {
-        "start": {
-          "line": 1,
-          "character": 1
-        },
-        "end": {
-          "line": 13,
-          "character": 1
-        }
-      },
-      "title": "Fiori"
-    },
-    {
-      "file": "package.json",
-      "description": "### All-in-one Monorepo\n\nEach sample sub directory essentially is a standard npm package, some with standard npm dependencies to other samples. The root folder's [package.json](package.json) has local links to the sub folders, such that an `npm install` populates a local `node_modules` folder acts like a local npm registry to the individual sample packages.\n",
-      "selection": {
-        "start": {
-          "line": 8,
-          "character": 1
-        },
-        "end": {
-          "line": 16,
-          "character": 1
-        }
-      },
-      "title": "Packages"
-    }
-  ],
-  "isPrimary": true,
-  "description": "Overview of CAP Samples for Node.js"
-}

.vscode/extensions.json

@@ -4,15 +4,14 @@
 
 	// List of extensions which should be recommended for users of this workspace.
 	"recommendations": [
-		"sapse.vscode-cds",
+		"SAPSE.vscode-cds",
 		"dbaeumer.vscode-eslint",
 		"esbenp.prettier-vscode",
 		"mechatroner.rainbow-csv",
 		"humao.rest-client",
 		"alexcvzz.vscode-sqlite",
 		"hbenl.vscode-mocha-test-adapter",
-		"sdras.night-owl",
+		"sdras.night-owl"
-		"vsls-contrib.codetour"
 	],
 	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
 	"unwantedRecommendations": [

.vscode/launch.json

@@ -5,30 +5,27 @@
   "version": "0.2.0",
   "configurations": [
   {
-      "name": "bookshop",
+    "name": "Attach by Process ID",
-      "command": "npx cds watch bookshop",
+    "processId": "${command:PickProcess}",
-      "type": "node-terminal",
+    "request": "attach",
-      "request": "launch",
     "skipFiles": [
-        "<node_internals>/**",
+      "<node_internals>/**"
-        "**/node_modules/**",
+    ],
-        "**/cds/lib/lazy.js",
+    "type": "pwa-node"
-        "**/cds/lib/req/cls.js",
-        "**/odata-v4/okra/**"
-      ]
   },
     {
-      "name": "Fiori App",
+      "name": "bookshop",
-      "command": "npx cds watch fiori",
+      "command": "cds watch bookshop",
-      "type": "node-terminal",
       "request": "launch",
-      "skipFiles": [
+      "type": "node-terminal",
-        "<node_internals>/**",
+      "skipFiles": ["<node_internals>/**"]
-        "**/node_modules/**",
+    },
-        "**/cds/lib/lazy.js",
+    {
-        "**/cds/lib/req/cls.js",
+      "name": "Fiori app",
-        "**/odata-v4/okra/**"
+      "command": "cds watch fiori",
-      ]
+      "request": "launch",
+      "type": "node-terminal",
+      "skipFiles": ["<node_internals>/**"]
     }
   ],
   "inputs": [
@@ -36,7 +33,7 @@
       "type": "pickString",
       "id": "sample",
       "description": "Which sample do you want to start?",
-      "options": [ "bookshop", "fiori", "reviews", "reviews" ],
+      "options": ["bookshop", "fiori", "reviews", "reviews/test/bookshop"],
       "default": "bookshop"
     }
   ]

.vscode/settings.json

@@ -1,26 +1,6 @@
 {
   "files.exclude": {
-    ".reuse/**": true,
     "**/.gitignore": true,
-    "**/.vscode": true,
+    "**/.vscode": true
-    "LICENSES/**": true
+  }
-  },
-  "debug.javascript.terminalOptions": {
-    "skipFiles": [
-      "<node_internals>/**",
-      "**/node_modules/**",
-      "**/cds/lib/lazy.js",
-      "**/cds/lib/req/cls.js",
-      "**/odata-v4/okra/**"
-    ]
-  },
-  "mochaExplorer.parallel": true,
-  "eslint.validate": [
-    "cds",
-    "csn",
-    "csv",
-    "csv (semicolon)",
-    "tsv",
-    "tab"
-  ]
 }

LICENSE

@@ -1,201 +1,208 @@
 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
 
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+Version 2.0, January 2004
+
+http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION,
+AND DISTRIBUTION
 
    1. Definitions.
 
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
       
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
 
-      "Legal Entity" shall mean the union of the acting entity and all
+"License" shall mean the terms and conditions for use, reproduction, and distribution
-      other entities that control, are controlled by, or are under common
+as defined by Sections 1 through 9 of this document.
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
 
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
       
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
 
-      "Object" form shall mean any form resulting from mechanical
+"Licensor" shall mean the copyright owner or entity authorized by the copyright
-      transformation or translation of a Source form, including but
+owner that is granting the License.
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
 
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
       
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
 
-      "Contribution" shall mean any work of authorship, including
+"Legal Entity" shall mean the union of the acting entity and all other entities
-      the original version of the Work and any modifications or additions
+that control, are controlled by, or are under common control with that entity.
-      to that Work or Derivative Works thereof, that is intentionally
+For the purposes of this definition, "control" means (i) the power, direct
-      submitted to Licensor for inclusion in the Work by the copyright owner
+or indirect, to cause the direction or management of such entity, whether
-      or by an individual or Legal Entity authorized to submit on behalf of
+by contract or otherwise, or (ii) ownership of fifty percent (50%) or more
-      the copyright owner. For the purposes of this definition, "submitted"
+of the outstanding shares, or (iii) beneficial ownership of such entity.
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
 
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
       
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
 
-   3. Grant of Patent License. Subject to the terms and conditions of
+"You" (or "Your") shall mean an individual or Legal Entity exercising permissions
-      this License, each Contributor hereby grants to You a perpetual,
+granted by this License.
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
 
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
       
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
 
-      (b) You must cause any modified files to carry prominent notices
+"Source" form shall mean the preferred form for making modifications, including
-          stating that You changed the files; and
+but not limited to software source code, documentation source, and configuration
+files.
 
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
       
-      (d) If the Work includes a "NOTICE" text file as part of its
+
-          distribution, then any Derivative Works that You distribute must
+"Object" form shall mean any form resulting from mechanical transformation
-          include a readable copy of the attribution notices contained
+or translation of a Source form, including but not limited to compiled object
-          within such NOTICE file, excluding those notices that do not
+code, generated documentation, and conversions to other media types.
-          pertain to any part of the Derivative Works, in at least one
+
-          of the following places: within a NOTICE text file distributed
+      
-          as part of the Derivative Works; within the Source form or
+
-          documentation, if provided along with the Derivative Works; or,
+"Work" shall mean the work of authorship, whether in Source or Object form,
-          within a display generated by the Derivative Works, if and
+made available under the License, as indicated by a copyright notice that
-          wherever such third-party notices normally appear. The contents
+is included in or attached to the work (an example is provided in the Appendix
-          of the NOTICE file are for informational purposes only and
+below).
-          do not modify the License. You may add Your own attribution
+
-          notices within Derivative Works that You distribute, alongside
+      
-          or as an addendum to the NOTICE text from the Work, provided
+
-          that such additional attribution notices cannot be construed
+"Derivative Works" shall mean any work, whether in Source or Object form,
+that is based on (or derived from) the Work and for which the editorial revisions,
+annotations, elaborations, or other modifications represent, as a whole, an
+original work of authorship. For the purposes of this License, Derivative
+Works shall not include works that remain separable from, or merely link (or
+bind by name) to the interfaces of, the Work and Derivative Works thereof.
+
+      
+
+"Contribution" shall mean any work of authorship, including the original version
+of the Work and any modifications or additions to that Work or Derivative
+Works thereof, that is intentionally submitted to Licensor for inclusion in
+the Work by the copyright owner or by an individual or Legal Entity authorized
+to submit on behalf of the copyright owner. For the purposes of this definition,
+"submitted" means any form of electronic, verbal, or written communication
+sent to the Licensor or its representatives, including but not limited to
+communication on electronic mailing lists, source code control systems, and
+issue tracking systems that are managed by, or on behalf of, the Licensor
+for the purpose of discussing and improving the Work, but excluding communication
+that is conspicuously marked or otherwise designated in writing by the copyright
+owner as "Not a Contribution."
+
+      
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf
+of whom a Contribution has been received by Licensor and subsequently incorporated
+within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this
+License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive,
+no-charge, royalty-free, irrevocable copyright license to reproduce, prepare
+Derivative Works of, publicly display, publicly perform, sublicense, and distribute
+the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License,
+each Contributor hereby grants to You a perpetual, worldwide, non-exclusive,
+no-charge, royalty-free, irrevocable (except as stated in this section) patent
+license to make, have made, use, offer to sell, sell, import, and otherwise
+transfer the Work, where such license applies only to those patent claims
+licensable by such Contributor that are necessarily infringed by their Contribution(s)
+alone or by combination of their Contribution(s) with the Work to which such
+Contribution(s) was submitted. If You institute patent litigation against
+any entity (including a cross-claim or counterclaim in a lawsuit) alleging
+that the Work or a Contribution incorporated within the Work constitutes direct
+or contributory patent infringement, then any patent licenses granted to You
+under this License for that Work shall terminate as of the date such litigation
+is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or
+Derivative Works thereof in any medium, with or without modifications, and
+in Source or Object form, provided that You meet the following conditions:
+
+(a) You must give any other recipients of the Work or Derivative Works a copy
+of this License; and
+
+(b) You must cause any modified files to carry prominent notices stating that
+You changed the files; and
+
+(c) You must retain, in the Source form of any Derivative Works that You distribute,
+all copyright, patent, trademark, and attribution notices from the Source
+form of the Work, excluding those notices that do not pertain to any part
+of the Derivative Works; and
+
+(d) If the Work includes a "NOTICE" text file as part of its distribution,
+then any Derivative Works that You distribute must include a readable copy
+of the attribution notices contained within such NOTICE file, excluding those
+notices that do not pertain to any part of the Derivative Works, in at least
+one of the following places: within a NOTICE text file distributed as part
+of the Derivative Works; within the Source form or documentation, if provided
+along with the Derivative Works; or, within a display generated by the Derivative
+Works, if and wherever such third-party notices normally appear. The contents
+of the NOTICE file are for informational purposes only and do not modify the
+License. You may add Your own attribution notices within Derivative Works
+that You distribute, alongside or as an addendum to the NOTICE text from the
+Work, provided that such additional attribution notices cannot be construed
 as modifying the License.
 
-      You may add Your own copyright statement to Your modifications and
+You may add Your own copyright statement to Your modifications and may provide
-      may provide additional or different license terms and conditions
+additional or different license terms and conditions for use, reproduction,
-      for use, reproduction, or distribution of Your modifications, or
+or distribution of Your modifications, or for any such Derivative Works as
-      for any such Derivative Works as a whole, provided Your use,
+a whole, provided Your use, reproduction, and distribution of the Work otherwise
-      reproduction, and distribution of the Work otherwise complies with
+complies with the conditions stated in this License.
-      the conditions stated in this License.
 
-   5. Submission of Contributions. Unless You explicitly state otherwise,
+5. Submission of Contributions. Unless You explicitly state otherwise, any
-      any Contribution intentionally submitted for inclusion in the Work
+Contribution intentionally submitted for inclusion in the Work by You to the
-      by You to the Licensor shall be under the terms and conditions of
+Licensor shall be under the terms and conditions of this License, without
-      this License, without any additional terms or conditions.
+any additional terms or conditions. Notwithstanding the above, nothing herein
-      Notwithstanding the above, nothing herein shall supersede or modify
+shall supersede or modify the terms of any separate license agreement you
-      the terms of any separate license agreement you may have executed
+may have executed with Licensor regarding such Contributions.
-      with Licensor regarding such Contributions.
 
-   6. Trademarks. This License does not grant permission to use the trade
+6. Trademarks. This License does not grant permission to use the trade names,
-      names, trademarks, service marks, or product names of the Licensor,
+trademarks, service marks, or product names of the Licensor, except as required
-      except as required for reasonable and customary use in describing the
+for reasonable and customary use in describing the origin of the Work and
-      origin of the Work and reproducing the content of the NOTICE file.
+reproducing the content of the NOTICE file.
 
-   7. Disclaimer of Warranty. Unless required by applicable law or
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to
-      agreed to in writing, Licensor provides the Work (and each
+in writing, Licensor provides the Work (and each Contributor provides its
-      Contributor provides its Contributions) on an "AS IS" BASIS,
+Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+KIND, either express or implied, including, without limitation, any warranties
-      implied, including, without limitation, any warranties or conditions
+or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness
-      PARTICULAR PURPOSE. You are solely responsible for determining the
+of using or redistributing the Work and assume any risks associated with Your
-      appropriateness of using or redistributing the Work and assume any
+exercise of permissions under this License.
-      risks associated with Your exercise of permissions under this License.
 
-   8. Limitation of Liability. In no event and under no legal theory,
+8. Limitation of Liability. In no event and under no legal theory, whether
-      whether in tort (including negligence), contract, or otherwise,
+in tort (including negligence), contract, or otherwise, unless required by
-      unless required by applicable law (such as deliberate and grossly
+applicable law (such as deliberate and grossly negligent acts) or agreed to
-      negligent acts) or agreed to in writing, shall any Contributor be
+in writing, shall any Contributor be liable to You for damages, including
-      liable to You for damages, including any direct, indirect, special,
+any direct, indirect, special, incidental, or consequential damages of any
-      incidental, or consequential damages of any character arising as a
+character arising as a result of this License or out of the use or inability
-      result of this License or out of the use or inability to use the
+to use the Work (including but not limited to damages for loss of goodwill,
-      Work (including but not limited to damages for loss of goodwill,
+work stoppage, computer failure or malfunction, or any and all other commercial
-      work stoppage, computer failure or malfunction, or any and all
+damages or losses), even if such Contributor has been advised of the possibility
-      other commercial damages or losses), even if such Contributor
+of such damages.
-      has been advised of the possibility of such damages.
 
-   9. Accepting Warranty or Additional Liability. While redistributing
+9. Accepting Warranty or Additional Liability. While redistributing the Work
-      the Work or Derivative Works thereof, You may choose to offer,
+or Derivative Works thereof, You may choose to offer, and charge a fee for,
-      and charge a fee for, acceptance of support, warranty, indemnity,
+acceptance of support, warranty, indemnity, or other liability obligations
-      or other liability obligations and/or rights consistent with this
+and/or rights consistent with this License. However, in accepting such obligations,
-      License. However, in accepting such obligations, You may act only
+You may act only on Your own behalf and on Your sole responsibility, not on
-      on Your own behalf and on Your sole responsibility, not on behalf
+behalf of any other Contributor, and only if You agree to indemnify, defend,
-      of any other Contributor, and only if You agree to indemnify,
+and hold each Contributor harmless for any liability incurred by, or claims
-      defend, and hold each Contributor harmless for any liability
+asserted against, such Contributor by reason of your accepting any such warranty
-      incurred by, or claims asserted against, such Contributor by reason
+or additional liability. END OF TERMS AND CONDITIONS
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
 
 APPENDIX: How to apply the Apache License to your work.
 
-      To apply the Apache License to your work, attach the following
+To apply the Apache License to your work, attach the following boilerplate
-      boilerplate notice, with the fields enclosed by brackets "[]"
+notice, with the fields enclosed by brackets "[]" replaced with your own identifying
-      replaced with your own identifying information. (Don't include
+information. (Don't include the brackets!) The text should be enclosed in
-      the brackets!)  The text should be enclosed in the appropriate
+the appropriate comment syntax for the file format. We also recommend that
-      comment syntax for the file format. We also recommend that a
+a file or class name and description of purpose be included on the same "printed
-      file or class name and description of purpose be included on the
+page" as the copyright notice for easier identification within third-party
-      same "printed page" as the copyright notice for easier
+archives.
-      identification within third-party archives.
 
 Copyright [yyyy] [name of copyright owner]
 
 Licensed under the Apache License, Version 2.0 (the "License");
+
 you may not use this file except in compliance with the License.
+
 You may obtain a copy of the License at
 
 http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
+
 distributed under the License is distributed on an "AS IS" BASIS,
+
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+
 See the License for the specific language governing permissions and
+
 limitations under the License.

LICENSES/Apache-2.0.txt

@@ -1,73 +0,0 @@
-Apache License
-Version 2.0, January 2004
-http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
-
-"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
-
-"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
-
-"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
-
-"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
-
-"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
-
-"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
-
-"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
-
-"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
-
-"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
-
-     (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and
-
-     (b) You must cause any modified files to carry prominent notices stating that You changed the files; and
-
-     (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
-
-     (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
-
-     You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!)  The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.

README.md

@@ -5,20 +5,19 @@ Find here a collection of samples for the [SAP Cloud Application Programming Mod
 ![](https://github.com/SAP-samples/cloud-cap-samples/workflows/CI/badge.svg)
 [![REUSE status](https://api.reuse.software/badge/github.com/SAP-samples/cloud-cap-samples)](https://api.reuse.software/info/github.com/SAP-samples/cloud-cap-samples)
 
+
 ### Preliminaries
 
-1. Ensure you have the latest LTS version of Node.js installed (see [Getting Started](https://cap.cloud.sap/docs/get-started/))
+1. [Install @sap/cds-dk](https://cap.cloud.sap/docs/get-started/) globally as documented in [capire](https://cap.cloud.sap)
-2. Install [**@sap/cds-dk**](https://cap.cloud.sap/docs/get-started/) globally:
-
    ```sh
    npm i -g @sap/cds-dk
    ```
-
+2. _Optional:_ [Use Visual Studio Code](https://cap.cloud.sap/docs/get-started/in-vscode)
-3. _Optional:_ [Use Visual Studio Code](https://cap.cloud.sap/docs/get-started/tools#vscode)
 
 ### Download
 
-If you've [Git](https://git-scm.com/downloads) installed, clone this repo as shown below, otherwise [download as ZIP file](archive/main.zip).
+Clone this repo as shown below, if you have [git](https://git-scm.com/downloads) installed,
+otherwise [download as zip file](archive/master.zip).
 
 ```sh
 git clone https://github.com/sap-samples/cloud-cap-samples samples
@@ -43,12 +42,9 @@ cds watch bookshop
 
 After that open this link in your browser: [http://localhost:4004](http://localhost:4004)
 
-When asked to log in, type `alice` as user and leave the password field blank, which is the [default user](https://cap.cloud.sap/docs/node.js/authentication#mocked).
-
 ### Testing
 
 Run the provided tests with [_jest_](http://jestjs.io) or [_mocha_](http://mochajs.org), for example:
-
 ```sh
 npx jest
 ```
@@ -57,7 +53,7 @@ npx jest
 
 ### Serve `npm` 
 
-We've included a simple npm registry mock, which allows you to do an `npm install @capire/<package>` locally. Use it as follows:
+We've simple npm registry mock included which allows you to do an `npm install @capire/<package>` anywhere locally. Use it as follows:
 
 1. Start the @capire registry:
 ```sh
@@ -65,23 +61,18 @@ npm run registry
 ```
 > While running this will have `@capire:registry=http://localhost:4444` set with npmrc. 
 
-2. Install one of the @capire packages wherever you like, for example:
+2. Install one of the @capire packages wherever you like, e.g.:
-
 ```sh
 npm add @capire/common @capire/bookshop
 ```
 
 
-## Code Tours
-
-Take one of the [guided tours](.tours) in VS Code through our CAP samples and learn which CAP features are showcased by the different parts of the repository. Just install the [CodeTour extension](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour) for VS Code. We'll add more code tours in the future. Stay tuned!
-
 ## Get Support
 
 Check out the documentation at [https://cap.cloud.sap](https://cap.cloud.sap). <br>
-In case you've a question, find a bug, or otherwise need support, use our [community](https://answers.sap.com/tags/9f13aee1-834c-4105-8e43-ee442775e5ce) to get more visibility.
+In case you have a question, find a bug, or otherwise need support, please use our [community](https://answers.sap.com/tags/9f13aee1-834c-4105-8e43-ee442775e5ce).
 
 
 ## License
 
-Copyright (c) 2022 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, version 2.0 except as noted otherwise in the [LICENSE](LICENSE) file.
+Copyright (c) 2020 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, version 2.0 except as noted otherwise in the [LICENSE](LICENSES/Apache-2.0.txt) file.

bookshop/app/index.cds

@@ -0,0 +1,2 @@
+// Incorporate pre-build extensions from...
+using from '@capire/common';

bookshop/app/vue/app.js

@@ -3,15 +3,14 @@ const $ = sel => document.querySelector(sel)
 const GET = (url) => axios.get('/browse'+url)
 const POST = (cmd,data) => axios.post('/browse'+cmd,data)
 
-const books = Vue.createApp ({
+const books = new Vue ({
 
-    data() {
+    el:'#app',
-      return {
+
+    data: {
         list: [],
         book: undefined,
-        order: { quantity:1, succeeded:'', failed:'' },
+        order: { amount:1, succeeded:'', failed:'' }
-        user: undefined
-      }
     },
 
     methods: {
@@ -27,63 +26,23 @@ const books = Vue.createApp ({
             const book = books.book = books.list [eve.currentTarget.rowIndex-1]
             const res = await GET(`/Books/${book.ID}?$select=descr,stock,image`)
             Object.assign (book, res.data)
-            books.order = { quantity:1 }
+            books.order = { amount:1 }
             setTimeout (()=> $('form > input').focus(), 111)
         },
 
         async submitOrder () {
-            const {book,order} = books, quantity = parseInt (order.quantity) || 1 // REVISIT: Okra should be less strict
+            const {book,order} = books, amount = parseInt (order.amount) || 1 // REVISIT: Okra should be less strict
             try {
-                const res = await POST(`/submitOrder`, { quantity, book: book.ID })
+                const res = await POST(`/submitOrder`, { amount, book: book.ID })
                 book.stock = res.data.stock
-                books.order = { quantity, succeeded: `Successfully ordered ${quantity} item(s).` }
+                books.order = { amount, succeeded: `Successfully orderd ${amount} item(s).` }
             } catch (e) {
-                books.order = { quantity, failed: e.response.data.error ? e.response.data.error.message : e.response.data }
+                books.order = { amount, failed: e.response.data.error.message }
             }
-        },
-
-        async login() {
-            try {
-                const { data:user } = await axios.post('/user/login',{})
-                if (user.id !== 'anonymous') books.user = user
-            } catch (err) { books.user = { id: err.message } }
-        },
-
-        async getUserInfo() {
-            try {
-                const { data:user } = await axios.get('/user/me')
-                if (user.id !== 'anonymous') books.user = user
-            } catch (err) { books.user = { id: err.message } }
-        },
         }
-}).mount('#app')
 
-books.getUserInfo()
+    }
-books.fetch() // initially fill list of books
-
-document.addEventListener('keydown', (event) => {
-    // hide user info on request
-    if (event.key === 'u')  books.user = undefined
 })
 
-axios.interceptors.request.use(csrfToken)
+// initially fill list of books
-function csrfToken (request) {
+books.fetch()
-    if (request.method === 'head' || request.method === 'get') return request
-    if ('csrfToken' in document) {
-        request.headers['x-csrf-token'] = document.csrfToken
-        return request
-    }
-    return fetchToken().then(token => {
-        document.csrfToken = token
-        request.headers['x-csrf-token'] = document.csrfToken
-        return request
-    }).catch(_ => {
-        document.csrfToken = null // set mark to not try again
-        return request
-    })
-
-    function fetchToken() {
-        return axios.get('/', { headers: { 'x-csrf-token': 'fetch' } })
-        .then(res => res.headers['x-csrf-token'])
-    }
-}

bookshop/app/vue/index.html

@@ -5,32 +5,19 @@
     <title> Capire Books </title>
     <link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css">
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
     <style>
         .hovering tr:hover td { color:cyan; background: #123; cursor: pointer; }
         .rating-stars { color:teal }
         .succeeded { color:teal }
         .failed { color:red }
-        .user {text-align: end; color: grey;}
     </style>
 </head>
 
 <body class="small-container", style="margin-top: 70px;">
 <div id='app'>
 
-    <form class="user" @submit.prevent="login">
+    <h1> {{ document.title }} </h1>
-        <div v-if="user">
-            <div v-if="user.tenant">Tenant: {{ user.tenant }}</div>
-            <div> User: {{ user.id }}</div>
-            <div>Locale: {{ user.locale }}</div>
-        </div>
-        <div v-else>
-            <input type="submit" value="Login" class="muted-button">
-            <!-- <a href="/user/login()">Login</a> -->
-        </div>
-    </form>
-
-    <h1> Capire Books </h1>
 
     <input type="text" placeholder="Search..." @input="search">
 
@@ -47,9 +34,9 @@
             <td>{{ book.author }}</td>
             <td>{{ book.genre.name }}</td>
             <td class="rating-stars">
-                {{ ('★'.repeat(Math.round(book.rating))+'☆☆☆☆☆').slice(0,5) }} ({{ book.numberOfReviews }})
+                {{ ('★'.repeat(Math.round(book.rating))+'☆☆☆☆☆').slice(0,5) }}
             </td>
-            <td>{{ book.currency && book.currency.symbol }} {{ book.price }}</td>
+            <td>{{ book.currency.symbol }} {{ book.price }}</td>
         </tr>
     </table>
 
@@ -61,7 +48,7 @@
             &nbsp;&nbsp; {{ book.stock }} in stock
         </label>
         <form @submit.prevent="submitOrder" style="float:right; display:flex; flex-direction:row-reverse">
-            <input type="number" v-model="order.quantity" v-bind:class="{ failed: order.failed }" style="width:5em">
+            <input type="number" v-model="order.amount" v-bind:class="{ failed: order.failed }" style="width:5em">
             <input type="submit" value="Order:" class="muted-button">
         </form>
         <h4> {{ book.title }} </h4>

bookshop/db/data/sap.capire.bookshop-Books.csv

@@ -2,5 +2,5 @@ ID;title;descr;author_ID;stock;price;currency_code;genre_ID
 201;Wuthering Heights;"Wuthering Heights, Emily Brontë's only novel, was published in 1847 under the pseudonym ""Ellis Bell"". It was written between October 1845 and June 1846. Wuthering Heights and Anne Brontë's Agnes Grey were accepted by publisher Thomas Newby before the success of their sister Charlotte's novel Jane Eyre. After Emily's death, Charlotte edited the manuscript of Wuthering Heights and arranged for the edited version to be published as a posthumous second edition in 1850.";101;12;11.11;GBP;11
 207;Jane Eyre;"Jane Eyre /ɛər/ (originally published as Jane Eyre: An Autobiography) is a novel by English writer Charlotte Brontë, published under the pen name ""Currer Bell"", on 16 October 1847, by Smith, Elder & Co. of London. The first American edition was published the following year by Harper & Brothers of New York. Primarily a bildungsroman, Jane Eyre follows the experiences of its eponymous heroine, including her growth to adulthood and her love for Mr. Rochester, the brooding master of Thornfield Hall. The novel revolutionised prose fiction in that the focus on Jane's moral and spiritual development is told through an intimate, first-person narrative, where actions and events are coloured by a psychological intensity. The book contains elements of social criticism, with a strong sense of Christian morality at its core and is considered by many to be ahead of its time because of Jane's individualistic character and how the novel approaches the topics of class, sexuality, religion and feminism.";107;11;12.34;GBP;11
 251;The Raven;"""The Raven"" is a narrative poem by American writer Edgar Allan Poe. First published in January 1845, the poem is often noted for its musicality, stylized language, and supernatural atmosphere. It tells of a talking raven's mysterious visit to a distraught lover, tracing the man's slow fall into madness. The lover, often identified as being a student, is lamenting the loss of his love, Lenore. Sitting on a bust of Pallas, the raven seems to further distress the protagonist with its constant repetition of the word ""Nevermore"". The poem makes use of folk, mythological, religious, and classical references.";150;333;13.13;USD;16
-252;Eleonora;"""Eleonora"" is a short story by Edgar Allan Poe, first published in 1842 in Philadelphia in the literary annual The Gift. It is often regarded as somewhat autobiographical and has a relatively ""happy"" ending.";150;555;14;USD;15
+252;Eleonora;"""Eleonora"" is a short story by Edgar Allan Poe, first published in 1842 in Philadelphia in the literary annual The Gift. It is often regarded as somewhat autobiographical and has a relatively ""happy"" ending.";150;555;14;USD;16
-271;Catweazle;Catweazle is a British fantasy television series, starring Geoffrey Bayldon in the title role, and created by Richard Carpenter for London Weekend Television. The first series, produced and directed by Quentin Lawrence, was screened in the UK on ITV in 1970. The second series, directed by David Reid and David Lane, was shown in 1971. Each series had thirteen episodes, most but not all written by Carpenter, who also published two books based on the scripts.;170;22;150;JPY;13
+271;Catweazle;Catweazle is a British fantasy television series, starring Geoffrey Bayldon in the title role, and created by Richard Carpenter for London Weekend Television. The first series, produced and directed by Quentin Lawrence, was screened in the UK on ITV in 1970. The second series, directed by David Reid and David Lane, was shown in 1971. Each series had thirteen episodes, most but not all written by Carpenter, who also published two books based on the scripts.;170;22;15;EUR;13

bookshop/db/init.js

@@ -1,18 +0,0 @@
-/**
- * In order to keep basic bookshop sample as simple as possible, we don't add
- * reuse dependencies. This db/init.js ensures we still have a minimum set of
- * currencies, if not obtained through @capire/common.
- */
-
-module.exports = async ()=>{
-
-  await UPSERT.into ('sap.common.Currencies') .columns (
-    'code','symbol','name'
-  ) .rows (
-    [ 'EUR','€','Euro' ],
-    [ 'USD','$','US Dollar' ],
-    [ 'GBP','£','British Pound' ],
-    [ 'ILS','₪','Shekel' ],
-    [ 'JPY','¥','Yen' ],
-  )
-}

bookshop/index.cds

@@ -2,4 +2,3 @@ namespace sap.capire.bookshop; //> important for reflection
 using from './db/schema';
 using from './srv/cat-service';
 using from './srv/admin-service';
-using from './srv/user-service';

bookshop/index.js

@@ -1,2 +1 @@
-const { CatalogService } = require('./srv/cat-service')
+exports.CatalogService = require('./srv/cat-service')
-module.exports = { CatalogService }

bookshop/package.json

@@ -2,17 +2,11 @@
   "name": "@capire/bookshop",
   "version": "1.0.0",
   "description": "A simple self-contained bookshop service.",
-  "files": [
-    "app",
-    "srv",
-    "db",
-    "index.cds",
-    "index.js"
-  ],
   "dependencies": {
-    "@sap/cds": ">=5.9",
+    "@capire/common": "*",
+    "@sap/cds": "^4",
     "express": "^4.17.1",
-    "passport": ">=0.4.1"
+    "passport": "0.4.1"
   },
   "scripts": {
     "genres": "cds serve test/genres.cds",
@@ -21,7 +15,9 @@
   },
   "cds": {
     "requires": {
-      "db": "sql"
+      "db": {
+        "kind": "sql"
+      }
     }
   }
 }

bookshop/readme.md

@@ -5,10 +5,10 @@ This stand-alone sample introduces the essential tasks in the development of CAP
 ## Hypothetical Use Cases
 
 1. Build a service that allows to browse _Books_ and _Authors_.
-2. Books have assigned _Genres_, which are organized hierarchically.
+2. Books have assigned _Genres_ which are organized hierarchically.
 3. All users may browse books without login.
 4. All entries are maintained by Administrators.
-5. End users may order books (the actual order mgmt being out of scope).
+5. End users may order books (the actual order mgmt being out of scope)
 
 ## Running the Sample
 
@@ -20,12 +20,12 @@ npm run watch
 
 | Links to capire                                                                                           | Sample files / folders               |
 | --------------------------------------------------------------------------------------------------------- | ------------------------------------ |
-| [Project Setup & Layouts](https://cap.cloud.sap/docs/get-started/projects#sharing-and-reusing-content)    | [`./`](./)                           |
+| [Project Setup and Layouts](https://cap.cloud.sap/docs/get-started/projects#sharing-and-reusing-content)  | [`./`](./)                           |
-| [Domain Modeling with CDS](https://cap.cloud.sap/docs/guides/domain-models)                               | [`./db/schema.cds`](./db/schema.cds) |
+| [Defining Domain Models](https://cap.cloud.sap/docs/guides/domain-models)                                 | [`./db/schema.cds`](./db/schema.cds) |
-| [Defining Services](https://cap.cloud.sap/docs/guides/services#defining-services)                         | [`./srv/*.cds`](./srv)               |
+| [Defining Services](https://cap.cloud.sap/docs/guides/providing-services)                                 | [`./srv/*.cds`](./srv)               |
-| [Single-purposed Services](https://cap.cloud.sap/docs/guides/services#single-purposed-services)           | [`./srv/*.cds`](./srv)               |
+| [Single-purposed Services](https://cap.cloud.sap/docs/guides/providing-services#single-purposed-services) | [`./srv/*.cds`](./srv)               |
-| [Providing & Consuming Providers](https://cap.cloud.sap/docs/guides/providing-services)                   | http://localhost:4004                |
+| [Generic Providers](https://cap.cloud.sap/docs/guides/providing-services)                                  | http://localhost:4004                |
-| [Using Databases](https://cap.cloud.sap/docs/guides/databases)                                            | [`./db/data/*.csv`](./db/data)       |
+| Using Databases                                            | [`./db/data/*.csv`](./db/data)       |
 | [Adding Custom Logic](https://cap.cloud.sap/docs/guides/service-impl)                                     | [`./srv/*.js`](./srv)                |
 | Adding Tests                                                 | [`./test`](./test)                   |
-| [Sharing for Reuse](https://cap.cloud.sap/docs/guides/reuse-and-compose)                                  | [`./index.cds`](./index.cds)         |
+| [Sharing for Reuse](https://cap.cloud.sap/docs/get-started/projects#sharing-and-reusing-content)          | [`./index.cds`](./index.cds)         |

bookshop/srv/admin-service.js

@@ -1,10 +1,9 @@
-const cds = require('@sap/cds/lib')
+const cds = require('@sap/cds')
 
-module.exports = class AdminService extends cds.ApplicationService { init(){
+module.exports = cds.service.impl (function(){
   this.before ('NEW','Authors', genid)
   this.before ('NEW','Books', genid)
-  return super.init()
+})
-}}
 
 /** Generate primary keys for target entity in request */
 async function genid (req) {

bookshop/srv/cat-service.cds

@@ -1,16 +1,14 @@
 using { sap.capire.bookshop as my } from '../db/schema';
 service CatalogService @(path:'/browse') {
 
-  /** For displaying lists of Books */
+  @readonly entity Books as SELECT from my.Books { *,
-  @readonly entity ListOfBooks as projection on Books
-  excluding { descr };
-
-  /** For display in details pages */
-  @readonly entity Books as projection on my.Books { *,
     author.name as author
   } excluding { createdBy, modifiedBy };
 
+  @readonly entity ListOfBooks as SELECT from Books
+  excluding { descr };
+
   @requires: 'authenticated-user'
-  action submitOrder ( book: Books:ID, quantity: Integer ) returns { stock: Integer };
+  action submitOrder ( book: Books:ID, amount: Integer ) returns { stock: Integer };
-  event OrderedBook : { book: Books:ID; quantity: Integer; buyer: String };
+  event OrderedBook : { book: Books:ID; amount: Integer; buyer: String };
 }

bookshop/srv/cat-service.js

@@ -1,26 +1,25 @@
 const cds = require('@sap/cds')
+const { Books } = cds.entities ('sap.capire.bookshop')
 
 class CatalogService extends cds.ApplicationService { init(){
 
-  const { Books } = cds.entities ('sap.capire.bookshop')
-  const { ListOfBooks } = this.entities
-
   // Reduce stock of ordered books if available stock suffices
   this.on ('submitOrder', async req => {
-    const {book,quantity} = req.data
+    const {book,amount} = req.data, tx = cds.tx(req)
-    if (quantity < 1) return req.reject (400,`quantity has to be 1 or more`)
+    let {stock} = await tx.read('stock').from(Books,book)
-    let b = await SELECT `stock` .from (Books,book)
+    if (stock >= amount) {
-    if (!b) return req.error (404,`Book #${book} doesn't exist`)
+      await tx.update (Books,book).with ({ stock: stock -= amount })
-    let {stock} = b
+      await this.emit ('OrderedBook', { book, amount, buyer:req.user.id })
-    if (quantity > stock) return req.reject (409,`${quantity} exceeds stock for book #${book}`)
-    await UPDATE (Books,book) .with ({ stock: stock -= quantity })
-    await this.emit ('OrderedBook', { book, quantity, buyer:req.user.id })
       return { stock }
+    }
+    else return req.error (409,`${amount} exceeds stock for book #${book}`)
   })
 
   // Add some discount for overstocked books
-  this.after ('READ', ListOfBooks, each => {
+  this.after ('READ','Books', each => {
-    if (each.stock > 111) each.title += ` -- 11% discount!`
+    if (each.stock > 111) {
+      each.title += ` -- 11% discount!`
+    }
   })
 
   return super.init()

bookshop/srv/user-service.cds

@@ -1,15 +0,0 @@
-/**
- * Exposes user information
- */
-service UserService {
-  /**
-   * The current user
-   */
-  @odata.singleton entity me @cds.persistence.skip {
-    id     : String; // user id
-    locale : String;
-    tenant : String;
-  }
-
-  action login() returns me;
-}

bookshop/srv/user-service.js

@@ -1,9 +0,0 @@
-const cds = require('@sap/cds')
-module.exports = class UserService extends cds.Service { init(){
-  this.on('READ', 'me', ({ tenant, user, locale }) => ({ id: user.id, locale, tenant }))
-  this.on('login', (req) => {
-    if (req.user._is_anonymous)
-      req._.res.set('WWW-Authenticate','Basic realm="Users"').sendStatus(401)
-    else return this.read('me')
-  })
-}}

bookshop/test/requests.http

@@ -16,9 +16,9 @@ GET {{server}}/browse/$metadata
 
 ### ------------------------------------------------------------------------
 # Browse Books as any user
-GET {{server}}/browse/ListOfBooks?
+GET {{server}}/browse/Books?
   # &$select=title,stock
-  &$expand=genre
+  # &$expand=currency
   # &sap-language=de
 {{me}}
 
@@ -32,19 +32,6 @@ GET {{server}}/admin/Authors?
   # &sap-language=de
 Authorization: Basic alice:
 
-### ------------------------------------------------------------------------
-# Create Author
-POST {{server}}/admin/Authors
-Content-Type: application/json;IEEE754Compatible=true
-Authorization: Basic alice:
-
-{
-  "ID": 112,
-  "name": "Shakespeeeeere",
-  "age": 22
-}
-
-
 ### ------------------------------------------------------------------------
 # Create book
 POST {{server}}/admin/Books
@@ -84,7 +71,7 @@ POST {{server}}/browse/submitOrder
 Content-Type: application/json
 {{me}}
 
-{ "book":201, "quantity":5 }
+{ "book":201, "amount":5 }
 
 
 ### ------------------------------------------------------------------------

bookstore/index.cds

@@ -1,2 +0,0 @@
-namespace sap.capire.bookshop; //> important for reflection
-using from './srv/mashup';

bookstore/package.json

@@ -1,35 +0,0 @@
-{
-  "name": "@capire/bookstore",
-  "version": "1.0.0",
-  "dependencies": {
-    "@capire/bookshop": "*",
-    "@capire/reviews": "*",
-    "@capire/orders": "*",
-    "@capire/common": "*",
-    "@capire/data-viewer": "*",
-    "@sap/cds": ">=5",
-    "express": "^4.17.1"
-  },
-  "cds": {
-    "requires": {
-      "ReviewsService": {
-        "kind": "odata",
-        "model": "@capire/reviews"
-      },
-      "OrdersService": {
-        "kind": "odata",
-        "model": "@capire/orders"
-      },
-      "messaging": {
-        "[development]": { "kind": "file-based-messaging" },
-        "[hybrid]": { "kind": "enterprise-messaging-shared" },
-        "[production]": { "kind": "enterprise-messaging" }
-      },
-      "db": {
-        "kind": "sql",
-        "schema_evolution": "auto"
-      }
-    },
-    "log": { "service": true }
-  }
-}

bookstore/server.js

@@ -1,22 +0,0 @@
-const cds = require ('@sap/cds')
-
-// Add mashup logic
-cds.once('served', require('./srv/mashup'))
-
-// Add routes to UIs from imported packages
-cds.once('bootstrap',(app)=>{
-  app.serve ('/bookshop') .from ('@capire/bookshop','app/vue')
-  app.serve ('/reviews') .from ('@capire/reviews','app/vue')
-  app.serve ('/orders') .from('@capire/orders','app/orders')
-  app.serve ('/data') .from('@capire/data-viewer','app/viewer')
-})
-
-// Add Swagger UI
-require('./srv/swagger-ui')
-
-// Returning cds.server
-module.exports = cds.server
-
-// For didactic reasons in capire
-const { ReviewsService, OrdersService } = cds.requires
-if (!ReviewsService?.credentials && !OrdersService?.credentials) cds.requires.messaging = false

bookstore/srv/mashup.cds

@@ -1,42 +0,0 @@
-////////////////////////////////////////////////////////////////////////////
-//
-//    Enhancing bookshop with Reviews and Orders provided through
-//    respective reuse packages and services
-//
-
-using { sap.capire.bookshop.Books } from '@capire/bookshop';
-
-//
-//  Extend Books with access to Reviews and average ratings
-//
-using { ReviewsService.Reviews } from '@capire/reviews';
-extend Books with {
-  reviews : Composition of many Reviews on reviews.subject = $self.ID;
-
-  @Common.Label : '{i18n>Rating}'
-  rating  : Decimal;
-
-  @Common.Label : '{i18n>NumberOfReviews}'
-  numberOfReviews : Integer;
-}
-
-
-//
-//  Extend Orders with Books as Products
-//
-using { sap.capire.orders.Orders } from '@capire/orders';
-extend Orders with {
-  extend Items with {
-    book : Association to Books on product.ID = book.ID
-  }
-}
-
-
-// Add orders fiori app (in case of embedded orders service)
-using from '@capire/orders/app/fiori';
-
-// Add data browser
-using from '@capire/data-viewer';
-
-// Incorporate pre-build extensions from...
-using from '@capire/common';

bookstore/srv/swagger-ui.js

@@ -1,10 +0,0 @@
-
-// -----------------------------------------------------------------------
-// Adding Swagger UI - see https://cap.cloud.sap/docs/advanced/openapi
-const cds = require ('@sap/cds')
-try {
-  const cds_swagger = require ('cds-swagger-ui-express')
-  cds.once ('bootstrap', app => app.use (cds_swagger()) )
-} catch (err) {
-  if (err.code !== 'MODULE_NOT_FOUND')  throw err
-}

chinook/.env

@@ -0,0 +1,3 @@
+# REVISIT: This is not a good practice -> don't do it that way, we just did it to save some time :)
+ACCESS_TOKEN_SECRET=secret
+REFRESH_TOKEN_SECRET=refresh-secret

chinook/.gitignore

@@ -0,0 +1,35 @@
+# CAP media-store
+_out
+*.db
+connection.properties
+default-*.json
+gen/
+node_modules/
+target/
+package-lock.json
+app/build
+
+# html5Deployer
+app/deployers/html5Deployer/resources/
+
+# Web IDE, App Studio
+.che/
+.gen/
+
+# MTA
+*_mta_build_tmp
+*.mtar
+*.mta
+mta_archives/
+
+# Other
+.DS_Store
+*.orig
+*.log
+
+*.iml
+*.flattened-pom.xml
+
+# IDEs
+# .vscode
+# .idea

chinook/.vscode/extensions.json

@@ -0,0 +1,20 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+		// >>>>>>>> Add CDS Editor here as soon it is available of vscode marketplace!,
+		"dbaeumer.vscode-eslint",
+		"esbenp.prettier-vscode",
+		"mechatroner.rainbow-csv",
+		"humao.rest-client",
+		"alexcvzz.vscode-sqlite",
+		"hbenl.vscode-mocha-test-adapter",
+		"sdras.night-owl"
+	],
+	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+	"unwantedRecommendations": [
+
+	]
+}

chinook/.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+
+   
+    {
+      "command": "cds run --with-mocks --in-memory?",
+      "name": "cds run",
+      "request": "launch",
+      "type": "node-terminal",
+      "skipFiles": ["<node_internals>/**"]
+    }
+  ]
+}

chinook/.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "files.exclude": {
+    "**/.gitignore": true,
+    "**/.git": true,
+    "**/.vscode": true
+  },
+  "files.watcherExclude": {}
+}

chinook/.vscode/tasks.json

@@ -0,0 +1,25 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "shell",
+      "label": "cds watch",
+      "command": "cds",
+      "args": ["watch"],
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "problemMatcher": []
+    },
+    {
+      "type": "shell",
+      "label": "cds run",
+      "command": "cds",
+      "args": ["run", "--with-mocks", "--in-memory?"],
+      "problemMatcher": []
+    }
+  ]
+}

chinook/README.md

@@ -0,0 +1,96 @@
+# Getting Started
+
+Welcome to your new project.
+
+It contains these folders and files, following our recommended project layout:
+
+| File or Folder   | Purpose                              |
+| ---------------- | ------------------------------------ |
+| `app/`           | will contain compiled front bundles  |
+| `app/front/`     | contains frontend app on react       |
+| `app/deployers/` | contains deployment stuff            |
+| `db/`            | your domain models and data go here  |
+| `srv/`           | your service models and code go here |
+| `test/`          | your services tests                  |
+| `package.json`   | project metadata and configuration   |
+| `mta.yaml`       | deployment config                    |
+| `readme.md`      | this getting started guide           |
+| `server.js`      | initial server set up                |
+
+## Development
+
+- Start cds service on 4004 port in watch mode:
+
+```json
+cds watch
+```
+
+- Open `app/front` folder and run next commands. This will install dependencies and run frontend src files watcher. When you will change src files your bundles in app directory will re-compiled. Now you can enjoy development:
+
+```json
+npm install
+npm run watch
+```
+
+> For better frontend development experience use below command instead of watcher. This will start frontend dev server on 3000 port. Now your bundles will be hot reloaded, this means you do not need reload the page to see changes:
+>
+> ```json
+> npm run start
+> ```
+
+## Test
+
+- Change package.json db section
+
+```json
+  "db": {
+    "kind": "sql"
+  }
+```
+
+- Run tests
+
+```json
+npm run test
+```
+
+## Deployment
+
+- Make sure you already have hana trial instance in your cockpit dashboard (SAP Cloud Platform).
+  Or if you are using hana instance - change it in mta.yaml config file from hanatrial to hana
+- Change package.json db section
+
+```json
+  "db": {
+    "kind": "hana"
+  }
+```
+
+- Authenticate to the Cloud Foundry:
+
+```json
+cf login
+```
+
+- Open `app/front` folder and run the following commands. This will create frontend production bundles in app subfolder:
+
+```json
+npm install
+npm run build:prod
+```
+
+- Clean up app/deployers/html5Deployer/resources folder from the previous frontend build
+
+- From root directory run:
+
+```json
+mbt build -t ./
+cf deploy media-store_1.0.0.mtar
+```
+
+- Now your services should be deployed with hanatrial instance and filled with initial data
+
+## Learn More
+
+- [Learn more about CAP](https://cap.cloud.sap/docs/get-started/)
+- [Deploying to Cloud Foundry](https://cap.cloud.sap/docs/advanced/deploy-to-cloud)

chinook/app/deployers/approuter/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "media-store-approuter",
+  "description": "Approuter",
+  "version": "1.0.0",
+  "dependencies": {
+    "@sap/approuter": "^6.8.2"
+  },
+  "scripts": {
+    "start": "node node_modules/@sap/approuter/approuter.js"
+  }
+}

chinook/app/deployers/approuter/xs-app.json

@@ -0,0 +1,17 @@
+{
+  "welcomeFile": "/index.html",
+  "authenticationMethod": "none",
+  "routes": [
+    {
+      "source": "/api/(.*)",
+      "target": "$1",
+      "destination": "srv-binding",
+      "authenticationType": "none"
+    },
+    {
+      "source": "^(.*)",
+      "target": "mediastore/$1",
+      "service": "html5-apps-repo-rt"
+    }
+  ]
+}

chinook/app/deployers/html5Deployer/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "media-store-html5deployer",
+  "engines": {
+    "node": ">=6.0.0"
+  },
+  "dependencies": {
+    "@sap/html5-app-deployer": "^2.0.0"
+  },
+  "scripts": {
+    "start": "node node_modules/@sap/html5-app-deployer/index.js"
+  }
+}

chinook/app/deployers/xs-security.json

@@ -0,0 +1,7 @@
+{
+  "xsappname": "media-store-xsuaa",
+  "tenant-mode": "dedicated",
+  "scopes": [],
+  "attributes": [],
+  "role-templates": []
+}

chinook/app/front/.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": ["@babel/preset-react", "@babel/preset-env"],
+    "plugins": ["@babel/plugin-transform-runtime", "babel-plugin-syntax-dynamic-import"]
+}
+  

chinook/app/front/.eslintrc.json

@@ -0,0 +1,43 @@
+{
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "extends": ["plugin:react/recommended", "airbnb", "prettier"],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "prettier"],
+  "rules": {
+    "prettier/prettier": ["error", { "parser": "flow", "endOfLine": "auto" }],
+    "linebreak-style": [0, "error", "windows"],
+    "import/prefer-default-export": "off",
+    "no-shadow": "off",
+    "react/forbid-prop-types": "off",
+    "no-alert": "off",
+    "jsx-a11y/label-has-associated-control": [
+      "error",
+      {
+        "required": {
+          "some": ["nesting", "id"]
+        }
+      }
+    ],
+    "jsx-a11y/label-has-for": [
+      "error",
+      {
+        "required": {
+          "some": ["nesting", "id"]
+        }
+      }
+    ],
+    "react/jsx-props-no-spreading": "off", // props spreading,
+    "no-console": "off",
+    "consistent-return": "off",
+    "prefer-destructuring": "off"
+  }
+}

chinook/app/front/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

chinook/app/front/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "singleQuote": true
+}

chinook/app/front/.vscode/launch.json

@@ -0,0 +1,13 @@
+
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Chrome",
+            "type": "chrome",
+            "request": "launch",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceRoot}/src"
+        }
+    ]
+}

chinook/app/front/README.md

@@ -0,0 +1 @@
+"# Media store UI"

chinook/app/front/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "mediastore",
+  "version": "0.1.0",
+  "private": false,
+  "scripts": {
+    "start": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack-dev-server.js",
+    "watch": "./node_modules/.bin/webpack -w --config ./webpack/webpack.dev.js",
+    "build:dev": "./node_modules/.bin/webpack --config ./webpack/webpack.dev.js",
+    "build:prod": "./node_modules/.bin/webpack --config ./webpack/webpack.prod.js",
+    "lint": "./node_modules/.bin/eslint"
+  },
+  "dependencies": {
+    "@ant-design/icons": "4.3.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@umijs/hooks": "^1.9.3",
+    "antd": "^4.8.2",
+    "axios": "^0.20.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^6.3.2",
+    "css-minimizer-webpack-plugin": "^1.1.5",
+    "events": "^3.2.0",
+    "html-webpack-plugin": "^4.5.0",
+    "lodash": "^4.17.20",
+    "mini-css-extract-plugin": "^1.3.1",
+    "moment": "^2.29.1",
+    "prop-types": "^15.7.2",
+    "react": "^16.14.0",
+    "react-dev-utils": "^11.0.1",
+    "react-dom": "^16.14.0",
+    "react-refresh": "^0.9.0",
+    "react-router-dom": "^5.2.0",
+    "terser-webpack-plugin": "^5.0.3",
+    "webpack": "5.8.0",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^5.4.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.12.7",
+    "@babel/preset-react": "^7.12.7",
+    "@babel/runtime": "^7.12.5",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "cowsay": "^1.4.0",
+    "css-loader": "^5.0.1",
+    "eslint": "^7.14.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "prettier": "^2.2.1",
+    "style-loader": "^2.0.0",
+    "url-loader": "^4.1.1",
+    "webpack-cli": "^3.3.12"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  }
+}

chinook/app/front/public/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta
+    name="description"
+    content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  <title>React App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

chinook/app/front/public/manifest.json

@@ -0,0 +1,31 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff",
+  "sap.app": {
+    "id": "mediastore",
+    "applicationVersion": {
+      "version": "1.0.0"
+    }
+  }
+}

chinook/app/front/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

chinook/app/front/public/xs-app.json

@@ -0,0 +1,10 @@
+{
+  "welcomeFile": "/index.html",
+  "routes": [
+    {
+      "source": "^(.*)",
+      "target": "$1",
+      "service": "html5-apps-repo-rt"
+    }
+  ]
+}

chinook/app/front/src/App.css

@@ -0,0 +1,57 @@
+@import "~antd/dist/antd.css";
+
+html {
+  overflow: hidden;
+}
+#root {
+  height: 100%;
+}
+section.ant-layout {
+  height: 100vh;
+  overflow: auto;
+}
+
+/* Layout
+*/
+.site-layout .site-layout-background {
+  background: #fff;
+}
+
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

chinook/app/front/src/App.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import 'antd/dist/antd.css';
+import './App.css';
+import { Layout } from 'antd';
+import { MyRouter } from './components/Router';
+import { AppStateContextProvider } from './contexts/AppStateContext';
+
+const App = () => {
+  return (
+    <Layout style={{ height: '100%' }}>
+      <AppStateContextProvider>
+        <MyRouter />
+      </AppStateContextProvider>
+    </Layout>
+  );
+};
+
+export default App;

chinook/app/front/src/api/axiosInstance.js

@@ -0,0 +1,168 @@
+import axios from 'axios';
+import { getUserFromLS, getLocaleFromLS } from '../util/localStorageService';
+import { emitter } from '../util/EventEmitter';
+
+const TIMEOUT = 2000;
+const RETRY_COUNT = 3;
+
+/**
+ * This is axios instance
+ */
+const axiosInstance = axios.create({
+  baseURL: process.env.SERVICE_URL,
+  timeout: TIMEOUT,
+  retryDelay: TIMEOUT,
+  retry: RETRY_COUNT,
+});
+
+/**
+ * Changing user axios default params,
+ * which are used in api call functions (calls.js)
+ * @param {*} currentUser current user from react state and local storage
+ */
+function changeUserDefaults(currentUser) {
+  if (currentUser) {
+    axiosInstance.defaults.headers.common.Authorization = `Basic ${currentUser.accessToken}`;
+    axiosInstance.defaults.userID = currentUser.ID;
+    if (currentUser.roles.includes('customer')) {
+      axiosInstance.defaults.userEntity = `Customers/${currentUser.ID}`;
+      axiosInstance.defaults.tracksEntity = 'MarkedTracks';
+    } else {
+      axiosInstance.defaults.userEntity = `Employees/${currentUser.ID}`;
+      axiosInstance.defaults.tracksEntity = 'Tracks';
+    }
+  } else {
+    axiosInstance.defaults.tracksEntity = 'Tracks';
+  }
+}
+/**
+ * This func changing axios instance default params
+ * @param {*} locale current locale from react state and local storage
+ */
+function changeLocaleDefaults(locale) {
+  if (locale) {
+    axiosInstance.defaults.headers.common['Accept-language'] = locale;
+  }
+}
+
+/**
+ * Init axios defaults
+ */
+const user = getUserFromLS();
+const locale = getLocaleFromLS();
+changeUserDefaults(user);
+changeLocaleDefaults(locale);
+
+/**
+ * Retry request if response time is too long
+ * See link below
+ * {@link https://github.com/axios/axios/issues/164#issuecomment-327837467 GitHub}
+ * @param {*} err response error object
+ */
+function axiosRetryInterceptor(err) {
+  const config = err.config;
+  // If config does not exist or the retry option is not set, reject
+  if (config && config.retry) {
+    // Set the variable for keeping track of the retry count
+    config.retryCount = config.retryCount || 0;
+
+    // Check if we've maxed out the total number of retries
+    if (config.retryCount >= config.retry) {
+      // Reject with the error
+      return Promise.reject(err);
+    }
+
+    // Increase the retry count
+    config.retryCount += 1;
+
+    // Create new promise to handle exponential backoff
+    const backoff = new Promise((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, config.retryDelay || 1);
+    });
+
+    // Return the promise in which recalls axios to retry the request
+    return backoff.then(() => {
+      return axios(config);
+    });
+  }
+}
+
+/**
+ * Things below needed for refresh tokens mechanism implementation
+ */
+let isRefreshing = false;
+let subscribers = [];
+const refreshTokens = (refreshToken) => {
+  return axiosInstance.post(
+    'users/refreshTokens',
+    { refreshToken },
+    {
+      headers: { 'content-type': 'application/json' },
+    }
+  );
+};
+
+/**
+ * Refresh tokens interceptor
+ * See link below
+ * {@link https://gist.github.com/mkjiau/650013a99c341c9f23ca00ccb213db1c#gistcomment-3536511 GitHub}
+ * @param {*} error error response object
+ */
+function axiosRefreshTokensInterceptor(error) {
+  const originalRequest = error.config;
+  const user = getUserFromLS();
+
+  if (error.response && error.response.status === 401 && !!user) {
+    if (originalRequest.url === 'users/login') {
+      return Promise.reject(error);
+    }
+
+    // if users/refreshTokens request failed
+    if (isRefreshing && originalRequest.url === 'users/refreshTokens') {
+      subscribers.forEach((request) => request.reject(error));
+      subscribers = [];
+      isRefreshing = false;
+      return Promise.reject(error);
+    }
+
+    // if got a 401 error we sending users/refreshTokens request
+    if (!isRefreshing) {
+      isRefreshing = true;
+
+      refreshTokens(user.refreshToken)
+        .then((response) => {
+          emitter.emit('UPDATE_USER', response.data);
+          subscribers.forEach((request) => request.resolve(response.data.accessToken));
+          subscribers = [];
+          isRefreshing = false;
+        })
+        .catch(() => {
+          emitter.emit('UPDATE_USER', undefined);
+        });
+    }
+
+    // holding requests which should be sended after users/refreshTokens complete
+    // otherwise if users/refreshTokens failed an error will be thrown
+    return new Promise((resolve, reject) => {
+      subscribers.push({
+        resolve: (newAccessToken) => {
+          originalRequest.headers.Authorization = `Basic ${newAccessToken}`;
+          resolve(axiosInstance(originalRequest));
+        },
+        reject: (err) => {
+          reject(err);
+        },
+      });
+    });
+  }
+}
+
+axiosInstance.interceptors.response.use(null, (error) => {
+  return (
+    axiosRefreshTokensInterceptor(error) || axiosRetryInterceptor(error) || Promise.reject(error)
+  );
+});
+
+export { axiosInstance, changeLocaleDefaults, changeUserDefaults };

chinook/app/front/src/api/calls.js

@@ -0,0 +1,164 @@
+import { isEmpty } from 'lodash';
+import { axiosInstance } from './axiosInstance';
+
+const BROWSE_TRACKS_SERVICE = 'browse-tracks';
+const INVOICES_SERVICE = 'browse-invoices';
+const USER_SERVICE = 'users';
+const MANAGE_STORE = 'manage-store';
+
+const constructGenresQuery = (genreIds) => {
+  return !isEmpty(genreIds)
+    ? ` and ${genreIds.map((value) => `genre_ID eq ${value}`).join(' or ')}`
+    : '';
+};
+
+const fetchTacks = ({ $top = 20, $skip = 0, genreIds = [], substr = '' } = {}) => {
+  const serializeTracksUrl = () => {
+    return `$expand=genre,album($expand=artist)&$top=${$top}&$skip=${$skip}&$filter=${`contains(name,'${substr}')${constructGenresQuery(
+      genreIds
+    )}`}`;
+  };
+
+  return axiosInstance.get(`${BROWSE_TRACKS_SERVICE}/${axiosInstance.defaults.tracksEntity}`, {
+    params: {},
+    paramsSerializer: () => serializeTracksUrl(),
+  });
+};
+
+const countTracks = ({ genreIds = [], substr = '' } = {}) => {
+  const { tracksEntity } = axiosInstance.defaults;
+
+  return axiosInstance.get(
+    `${BROWSE_TRACKS_SERVICE}/${tracksEntity}/$count?$filter=${`contains(name,'${substr}')${constructGenresQuery(
+      genreIds
+    )}`}`
+  );
+};
+
+const fetchGenres = () => {
+  return axiosInstance.get(`${BROWSE_TRACKS_SERVICE}/Genres`);
+};
+
+const invoice = (tracks) => {
+  return axiosInstance.post(
+    `${INVOICES_SERVICE}/invoice`,
+    {
+      tracks,
+    },
+    {
+      headers: { 'content-type': 'application/json' },
+    }
+  );
+};
+
+const fetchPerson = () => {
+  return axiosInstance.get(`${USER_SERVICE}/${axiosInstance.defaults.userEntity}`);
+};
+
+const confirmPerson = (person) => {
+  return axiosInstance.put(
+    `${USER_SERVICE}/${axiosInstance.defaults.userEntity}`,
+    {
+      ...person,
+    },
+    {
+      headers: { 'content-type': 'application/json' },
+    }
+  );
+};
+
+const fetchInvoices = () => {
+  return axiosInstance.get(
+    `${INVOICES_SERVICE}/Invoices?$expand=invoiceItems($expand=track($expand=album($expand=artist)))`
+  );
+};
+
+const cancelInvoice = (ID) => {
+  return axiosInstance.post(
+    `${INVOICES_SERVICE}/cancelInvoice`,
+    {
+      ID,
+    },
+    {
+      headers: { 'content-type': 'application/json' },
+    }
+  );
+};
+
+const fetchAlbumsByName = (substr = '', top) => {
+  return axiosInstance.get(
+    `${BROWSE_TRACKS_SERVICE}/Albums?$filter=${`contains(title,'${substr}')&$top=${top}`}`
+  );
+};
+
+const addTrack = (data) => {
+  return axiosInstance.post(`${MANAGE_STORE}/Tracks`, data, {
+    headers: { 'content-type': 'application/json;IEEE754Compatible=true' },
+  });
+};
+
+const addArtist = (data) => {
+  return axiosInstance.post(`${MANAGE_STORE}/Artists`, data, {
+    headers: { 'content-type': 'application/json' },
+  });
+};
+
+const addAlbum = (data) => {
+  return axiosInstance.post(`${MANAGE_STORE}/Albums`, data, {
+    headers: { 'content-type': 'application/json' },
+  });
+};
+
+const fetchArtistsByName = (substr = '', top) => {
+  return axiosInstance.get(
+    `${MANAGE_STORE}/Artists?$filter=${`contains(name,'${substr}')&$top=${top}`}`
+  );
+};
+
+const login = (data) => {
+  return axiosInstance.post(`${USER_SERVICE}/login`, data, {
+    headers: { 'content-type': 'application/json' },
+  });
+};
+
+const updateTrack = (track) => {
+  return axiosInstance.put(
+    `${MANAGE_STORE}/Tracks/${track.ID}`,
+    {
+      ...track,
+    },
+    {
+      headers: { 'content-type': 'application/json;IEEE754Compatible=true' },
+    }
+  );
+};
+
+const getTrack = (ID) => {
+  return axiosInstance.get(
+    `${BROWSE_TRACKS_SERVICE}/${axiosInstance.defaults.tracksEntity}/${ID}?$expand=genre,album($expand=artist)`
+  );
+};
+
+const deleteTrack = (ID) => {
+  return axiosInstance.delete(`${MANAGE_STORE}/Tracks(${ID})`);
+};
+
+export {
+  fetchTacks,
+  countTracks,
+  fetchGenres,
+  invoice,
+  fetchPerson,
+  confirmPerson,
+  fetchInvoices,
+  cancelInvoice,
+  fetchAlbumsByName,
+  addTrack,
+  addArtist,
+  addAlbum,
+  fetchArtistsByName,
+  login,
+  updateTrack,
+  getTrack,
+  deleteTrack,
+};

chinook/app/front/src/components/ErrorPage.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { isEmpty } from 'lodash';
+import { Result, Button } from 'antd';
+import { useAppState } from '../hooks/useAppState';
+
+const ErrorPage = () => {
+  const { error, setError } = useAppState();
+  const history = useHistory();
+
+  const onGoHome = () => {
+    setError({});
+    history.push('/');
+  };
+
+  const goLoginPage = () => {
+    setError({});
+    history.push('/login');
+  };
+
+  const goHomeButton = (
+    <Button onClick={onGoHome} key={1} type="primary">
+      Back Home
+    </Button>
+  );
+  const goLoginButton = (
+    <Button onClick={goLoginPage} key={2} type="primary">
+      Login
+    </Button>
+  );
+
+  const errorResultProps = isEmpty(error)
+    ? {
+        status: 404,
+        title: 'Not found',
+        subTitle: 'Sorry, the page you visited does not exist.',
+        extra: goHomeButton,
+      }
+    : {
+        status: [404, 403, 500].includes(error.status) ? error.status : 'error',
+        title: error.statusText,
+        subTitle: error.message,
+        extra: error.status === 401 ? [goHomeButton, goLoginButton] : goHomeButton,
+      };
+
+  return <Result {...errorResultProps} />;
+};
+
+export default ErrorPage;

chinook/app/front/src/components/Header.css

@@ -0,0 +1,3 @@
+.ant-menu-item .anticon {
+  margin: 0;
+}

chinook/app/front/src/components/Header.jsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { Menu, Badge, Spin, message } from 'antd';
+import { isEmpty } from 'lodash';
+import {
+  CreditCardOutlined,
+  LogoutOutlined,
+  LoginOutlined,
+  LoadingOutlined,
+} from '@ant-design/icons';
+import { useHistory, useLocation } from 'react-router-dom';
+import { useAppState } from '../hooks/useAppState';
+import { setLocaleToLS } from '../util/localStorageService';
+import { changeLocaleDefaults } from '../api/axiosInstance';
+import { emitter } from '../util/EventEmitter';
+import './Header.css';
+import { requireEmployee, requireCustomer, MESSAGE_TIMEOUT } from '../util/constants';
+
+const { SubMenu } = Menu;
+
+const keys = ['/', '/person', '/login', '/manage', '/invoice', '/invoices'];
+const AVAILABLE_LOCALES = ['en', 'fr', 'de'];
+const RELOAD_LOCATION_NUMBER = 0;
+
+const Header = () => {
+  const history = useHistory();
+  const location = useLocation();
+  const { user, invoicedItems, locale, setLocale, loading } = useAppState();
+  const currentKey = [keys.find((key) => key === location.pathname)];
+  const haveInvoicedItems = !isEmpty(invoicedItems);
+  const invoicedItemsLength = invoicedItems.length;
+
+  const onChangeLocale = (value) => {
+    setLocaleToLS(value);
+    changeLocaleDefaults(value);
+    setLocale(value);
+    history.go(RELOAD_LOCATION_NUMBER);
+  };
+  const localeElements = AVAILABLE_LOCALES.filter((localeName) => localeName !== locale).map(
+    (curLocale) => (
+      <Menu.Item key={curLocale} onClick={() => onChangeLocale(curLocale)}>
+        {curLocale}
+      </Menu.Item>
+    )
+  );
+
+  const onUserLogout = () => {
+    emitter.emit('UPDATE_USER', undefined);
+    message.warn(
+      'Now you are not authenticated. Log in to use full functionality',
+      MESSAGE_TIMEOUT
+    );
+    history.push('/');
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'baseline',
+        alignItems: 'center',
+        paddingLeft: '15vh',
+        paddingRight: '15vh',
+        background: 'white',
+      }}
+    >
+      <Menu theme="light" mode="horizontal" style={{ width: '50%' }} selectedKeys={currentKey}>
+        <Menu.Item key="/" onClick={() => history.push('/')}>
+          Browse
+        </Menu.Item>
+
+        {!!user && (
+          <Menu.Item key="/person" onClick={() => history.push('/person')}>
+            Profile
+          </Menu.Item>
+        )}
+        {requireCustomer(user) && (
+          <Menu.Item key="/invoices" onClick={() => history.push('/invoices')}>
+            Invoices
+          </Menu.Item>
+        )}
+        {requireEmployee(user) && (
+          <Menu.Item key="/manage" onClick={() => history.push('/manage')}>
+            Manages
+          </Menu.Item>
+        )}
+      </Menu>
+
+      <Menu
+        style={{ width: '50%', display: 'flex', justifyContent: 'flex-end' }}
+        theme="light"
+        mode="horizontal"
+        selectedKeys={currentKey}
+      >
+        <Menu.Item>
+          {loading && <Spin indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />} />}
+        </Menu.Item>
+        {haveInvoicedItems && (
+          <Menu.Item
+            style={{
+              width: 40,
+              display: 'flex',
+              justifyContent: 'center',
+            }}
+            onClick={() => history.push('/invoice')}
+            key="/invoice"
+          >
+            <div
+              style={{
+                height: '100%',
+              }}
+            >
+              <Badge
+                size="default"
+                style={{ backgroundColor: '#2db7f5' }}
+                count={invoicedItemsLength}
+              >
+                <CreditCardOutlined style={{ fontSize: 16 }} />
+              </Badge>
+            </div>
+          </Menu.Item>
+        )}
+        <SubMenu title={locale}>{localeElements}</SubMenu>
+        {user ? (
+          <Menu.Item
+            onClick={onUserLogout}
+            danger
+            icon={<LogoutOutlined style={{ fontSize: 16 }} />}
+          />
+        ) : (
+          <Menu.Item
+            key="/login"
+            onClick={() => history.push('/login')}
+            icon={<LoginOutlined style={{ fontSize: 16 }} />}
+          />
+        )}
+      </Menu>
+    </div>
+  );
+};
+
+export default Header;

chinook/app/front/src/components/InvoicePage.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Table, Button, message } from 'antd';
+import { useHistory } from 'react-router-dom';
+import { useAppState } from '../hooks/useAppState';
+import { invoice } from '../api/calls';
+import { useErrors } from '../hooks/useErrors';
+import { MESSAGE_TIMEOUT } from '../util/constants';
+
+const columns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+  },
+  {
+    title: 'Artist',
+    dataIndex: 'artist',
+  },
+  {
+    title: 'Album',
+    dataIndex: 'albumTitle',
+  },
+  {
+    title: 'Price',
+    dataIndex: 'unitPrice',
+  },
+];
+
+const InvoicePage = () => {
+  const history = useHistory();
+  const { handleError } = useErrors();
+  const { user, invoicedItems, setInvoicedItems, setLoading } = useAppState();
+
+  const data = invoicedItems.map(({ ID, ...otherProps }) => ({
+    key: `invoiceItem${ID}`,
+    ...otherProps,
+  }));
+
+  const onBuy = () => {
+    setLoading(true);
+    invoice(
+      invoicedItems.map(({ ID }) => ({
+        ID,
+      }))
+    )
+      .then(() => {
+        setInvoicedItems([]);
+        message.success('Invoice successfully completed', MESSAGE_TIMEOUT);
+        history.push('/invoices');
+      })
+      .catch(handleError)
+      .finally(() => setLoading(false));
+  };
+  const onCancel = () => {
+    setInvoicedItems([]);
+    history.push('/');
+  };
+  const goLogin = () => {
+    history.push('/login');
+  };
+
+  return (
+    <div style={{ backgroundColor: 'white', padding: 10 }}>
+      <Table
+        bordered={false}
+        pagination={false}
+        columns={columns}
+        dataSource={data}
+        size="middle"
+        footer={() => (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              padding: 5,
+            }}
+          >
+            {user ? (
+              <>
+                <Button type="primary" size="large" onClick={onBuy}>
+                  Buy
+                </Button>
+                <Button size="large" style={{ marginLeft: 5 }} onClick={onCancel} danger>
+                  Cancel
+                </Button>
+              </>
+            ) : (
+              <section>
+                <Button type="primary" size="large" onClick={goLogin}>
+                  Login
+                </Button>
+                <span> to buy selected</span>
+              </section>
+            )}
+          </div>
+        )}
+      />
+    </div>
+  );
+};
+
+export default InvoicePage;

chinook/app/front/src/components/Login.jsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Form, Input, Button, Checkbox, message } from 'antd';
+import { useHistory } from 'react-router-dom';
+import { login } from '../api/calls';
+import { useAppState } from '../hooks/useAppState';
+import { useErrors } from '../hooks/useErrors';
+import { MESSAGE_TIMEOUT } from '../util/constants';
+import { emitter } from '../util/EventEmitter';
+
+const layout = {
+  labelCol: {
+    span: 8,
+  },
+  wrapperCol: {
+    span: 8,
+  },
+};
+const tailLayout = {
+  wrapperCol: {
+    offset: 8,
+    span: 8,
+  },
+};
+
+const Login = () => {
+  const [form] = Form.useForm();
+  const history = useHistory();
+  const { setLoading, setInvoicedItems } = useAppState();
+  const { handleError } = useErrors();
+
+  const onFinish = (values) => {
+    setLoading(true);
+    login({ email: values.email, password: values.password })
+      .then(({ data: user }) => {
+        emitter.emit('UPDATE_USER', user);
+        if (user.roles.includes('employee')) {
+          setInvoicedItems([]);
+        }
+        history.push('/');
+      })
+      .catch((error) => {
+        console.log(error);
+        if (error.response && error.response.status === 401) {
+          form.resetFields();
+          message.error('Invalid credentials!', MESSAGE_TIMEOUT);
+        } else {
+          handleError(error);
+        }
+      })
+      .finally(() => setLoading(false));
+  };
+
+  const onFinishFailed = (errorInfo) => {
+    console.log('Validation Failed:', errorInfo);
+  };
+
+  return (
+    <Form
+      form={form}
+      {...layout}
+      name="basic"
+      initialValues={{
+        remember: true,
+      }}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+    >
+      <Form.Item
+        label="Email"
+        name="email"
+        rules={[
+          {
+            required: true,
+            message: 'Please input your email!',
+          },
+        ]}
+      >
+        <Input />
+      </Form.Item>
+
+      <Form.Item
+        label="Password"
+        name="password"
+        rules={[
+          {
+            required: true,
+            message: 'Please input your password!',
+          },
+        ]}
+      >
+        <Input.Password style={{}} />
+      </Form.Item>
+
+      <Form.Item {...tailLayout} name="remember" valuePropName="checked">
+        <Checkbox>Remember me</Checkbox>
+      </Form.Item>
+
+      <Form.Item {...tailLayout}>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default Login;

chinook/app/front/src/components/ManageStore.jsx

@@ -0,0 +1,115 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { Form, Radio, Button, message } from 'antd';
+import { TrackForm } from './manage-store/TrackForm';
+import { AddArtistForm } from './manage-store/AddArtistForm';
+import { AddAlbumForm } from './manage-store/AddAlbumForm';
+import { useErrors } from '../hooks/useErrors';
+import { useAppState } from '../hooks/useAppState';
+import { addTrack, addArtist, addAlbum } from '../api/calls';
+import { MESSAGE_TIMEOUT } from '../util/constants';
+
+const FORM_TYPES = {
+  track: 'track',
+  artist: 'artist',
+  album: 'album',
+  playlist: '',
+};
+
+const chooseForm = (type) => {
+  return (
+    (type === 'track' && <TrackForm />) ||
+    (type === 'artist' && <AddArtistForm />) ||
+    (type === 'album' && <AddAlbumForm />)
+  );
+};
+
+const ManageStore = () => {
+  const [form] = Form.useForm();
+  const { handleError } = useErrors();
+  const { setLoading } = useAppState();
+  const [formType, setFormType] = useState('track');
+
+  useEffect(() => {
+    form.resetFields();
+  }, [formType]);
+
+  const formElement = useMemo(() => {
+    return chooseForm(formType);
+  }, [formType]);
+
+  const onChangeForm = (event) => {
+    setFormType(event.target.value);
+  };
+
+  const sendCreateRequest = ({ type, ...data }) => {
+    setLoading(true);
+
+    let promise;
+    switch (type) {
+      case FORM_TYPES.track:
+        promise = addTrack({
+          name: data.name,
+          composer: data.composer,
+          album: { ID: data.albumID },
+          genre: { ID: data.genreID },
+          unitPrice: data.unitPrice.toString(),
+        });
+        break;
+      case FORM_TYPES.artist:
+        promise = addArtist(data);
+        break;
+      case FORM_TYPES.album:
+        promise = addAlbum({ title: data.name, artist: { ID: data.artistID } });
+        break;
+      default:
+    }
+
+    promise
+      .then(() => {
+        message.success('Entity successfully created', MESSAGE_TIMEOUT);
+        form.resetFields();
+      })
+      .catch(handleError)
+      .finally(() => setLoading(false));
+  };
+
+  return (
+    <Form
+      style={{ width: 700 }}
+      form={form}
+      labelCol={{
+        span: 4,
+      }}
+      wrapperCol={{
+        span: 14,
+      }}
+      layout="horizontal"
+      initialValues={{
+        type: formType,
+      }}
+      type={formType}
+      onFinish={sendCreateRequest}
+      onFinishFailed={() => console.log('Not valid params provided')}
+    >
+      <Form.Item label="Entity" name="type">
+        <Radio.Group onChange={onChangeForm}>
+          <Radio.Button value="track">Track</Radio.Button>
+          <Radio.Button value="album">Album</Radio.Button>
+          <Radio.Button value="artist">Artist</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      {formElement}
+      <Form.Item
+        type="primary"
+        wrapperCol={{
+          span: 14,
+          offset: 4,
+        }}
+      >
+        <Button onClick={() => form.submit()}>Create</Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default ManageStore;

chinook/app/front/src/components/MyInvoicesPage.jsx

@@ -0,0 +1,170 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Button, message, Tag, Collapse, Table, Spin } from 'antd';
+import moment from 'moment';
+import { useErrors } from '../hooks/useErrors';
+import { useAppState } from '../hooks/useAppState';
+import { cancelInvoice, fetchInvoices } from '../api/calls';
+import { MESSAGE_TIMEOUT } from '../util/constants';
+
+const { Panel } = Collapse;
+const INVOICE_STATUS = {
+  2: {
+    tagTitle: 'Shipped',
+    color: 'green',
+  },
+  1: {
+    tagTitle: 'Submitted',
+    color: 'processing',
+    canCancel: true,
+  },
+  '-1': {
+    tagTitle: 'Cancelled',
+    color: 'default',
+  },
+};
+const CANCELLED_STATUS = -1;
+const DATE_TIME_FORMAT_PATTERN = 'LLLL';
+const UTC_DATE_TIME_FORMAT = 'YYYY-MM-DDThh:mm:ssZ';
+const INVOICE_ITEMS_COLUMNS = [
+  {
+    title: 'Track name',
+    dataIndex: 'name',
+  },
+  {
+    title: 'Artist',
+    dataIndex: 'artistName',
+  },
+  {
+    title: 'Album',
+    dataIndex: 'albumTitle',
+  },
+  {
+    title: 'Price',
+    dataIndex: 'unitPrice',
+  },
+];
+const LEVERAGE_DURATION = 1; // in hours
+const STATUSES = { submitted: 1, shipped: 2, canceled: -1 };
+
+const isLeverageTimeExpired = (utcNowTimestamp, invoiceDate) => {
+  const duration = moment.duration(moment(utcNowTimestamp).diff(moment(invoiceDate).valueOf()));
+  return duration.asHours() > LEVERAGE_DURATION;
+};
+
+const chooseStatus = (utcNowTimestamp, invoiceDate, statusFromDb) => {
+  if (isLeverageTimeExpired(utcNowTimestamp, invoiceDate) && statusFromDb !== STATUSES.canceled) {
+    return INVOICE_STATUS[STATUSES.shipped];
+  }
+  return INVOICE_STATUS[statusFromDb];
+};
+
+const ExtraHeader = ({ ID, invoiceDate, status: initialStatus }) => {
+  const { loading, setLoading } = useAppState();
+  const { handleError } = useErrors();
+  const [loadingHeaderId, setLoadingHeaderId] = useState();
+  const [status, setStatus] = useState(initialStatus);
+
+  const statusConfig = useMemo(() => {
+    const utcNowTimestamp = moment(moment().utc().format(UTC_DATE_TIME_FORMAT)).valueOf();
+    return chooseStatus(utcNowTimestamp, invoiceDate, status);
+  }, [status]);
+
+  const onCancelInvoice = (event, ID) => {
+    event.stopPropagation();
+    setLoading(true);
+    setLoadingHeaderId(ID);
+    cancelInvoice(ID)
+      .then(() => {
+        message.success('Invoice successfully cancelled', MESSAGE_TIMEOUT);
+        setLoadingHeaderId(undefined);
+        setStatus(CANCELLED_STATUS);
+      })
+      .catch(handleError)
+      .finally(() => setLoading(false));
+  };
+
+  return (
+    <Spin spinning={loading && loadingHeaderId === ID}>
+      <Tag color={statusConfig.color}>{statusConfig.tagTitle}</Tag>
+      {statusConfig.canCancel && (
+        <Button onClick={(event) => onCancelInvoice(event, ID)} size="small" danger>
+          Cancel
+        </Button>
+      )}
+    </Spin>
+  );
+};
+ExtraHeader.propTypes = {
+  ID: PropTypes.number.isRequired,
+  status: PropTypes.number.isRequired,
+  invoiceDate: PropTypes.string.isRequired,
+};
+
+const MyInvoicesPage = () => {
+  const { handleError } = useErrors();
+  const { setLoading } = useAppState();
+  const [invoices, setInvoices] = useState([]);
+
+  useEffect(() => {
+    setLoading(true);
+    fetchInvoices()
+      .then(({ data: { value } }) => setInvoices(value))
+      .catch(handleError)
+      .finally(() => setLoading(false));
+  }, []);
+
+  const genExtra = useCallback(
+    (ID, status, invoiceDate) => <ExtraHeader ID={ID} status={status} invoiceDate={invoiceDate} />,
+    []
+  );
+  const invoiceElements = useMemo(() => {
+    return invoices.map(({ ID, status, invoiceDate, total, invoiceItems }) => {
+      const invoiceItemsData = invoiceItems.map(
+        ({
+          ID,
+          track: {
+            name,
+            unitPrice,
+            album: {
+              title: albumTitle,
+              artist: { name: artistName },
+            },
+          },
+        }) => ({
+          key: ID,
+          ID,
+          name,
+          unitPrice,
+          albumTitle,
+          artistName,
+        })
+      );
+
+      return (
+        <Panel
+          header={moment(invoiceDate).format(DATE_TIME_FORMAT_PATTERN)}
+          key={ID}
+          extra={genExtra(ID, status, invoiceDate)}
+        >
+          <div>
+            <Table
+              bordered={false}
+              pagination={false}
+              columns={INVOICE_ITEMS_COLUMNS}
+              dataSource={invoiceItemsData}
+              size="middle"
+              footer={() => <span style={{ fontWeight: 600 }}>{`Total price: ${total}`}</span>}
+            />
+          </div>
+        </Panel>
+      );
+    });
+  }, [invoices]);
+
+  return (
+    <div>{invoiceElements && <Collapse expandIconPosition="left">{invoiceElements}</Collapse>}</div>
+  );
+};
+
+export default MyInvoicesPage;

chinook/app/front/src/components/PersonPage.jsx

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { Form, Button, message, Input } from 'antd';
+import { omit, map } from 'lodash';
+import { fetchPerson, confirmPerson } from '../api/calls';
+import { useErrors } from '../hooks/useErrors';
+import { useAppState } from '../hooks/useAppState';
+import { MESSAGE_TIMEOUT } from '../util/constants';
+import { useAbortableEffect } from '../hooks/useAbortableEffect';
+
+const PERSON_PROP = {
+  address: 'Address ',
+  city: 'City ',
+  country: 'Country ',
+  fax: 'Fax: ',
+  firstName: 'First name: ',
+  lastName: 'Last name: ',
+  phone: 'Phone: ',
+  postalCode: 'Postal code: ',
+  state: 'State',
+  email: 'email',
+  company: 'Company: ',
+};
+
+const PersonPage = () => {
+  const { setLoading } = useAppState();
+  const { handleError } = useErrors();
+  const [form] = Form.useForm();
+  const [person, setPerson] = useState({
+    lastName: '',
+    firstName: '',
+    city: '',
+    state: '',
+    address: '',
+    country: '',
+    phone: '',
+    postalCode: '',
+    fax: '',
+    email: '',
+    company: '',
+  });
+
+  useAbortableEffect((status) => {
+    setLoading(true);
+
+    fetchPerson()
+      .then(({ data }) => {
+        const personData = omit(data, '@odata.context', 'ID');
+        if (!status.aborted) {
+          setPerson(personData);
+        }
+      })
+      .catch(handleError)
+      .finally(() => setLoading(false));
+  }, []);
+
+  const onConfirmChanges = (newPerson) => {
+    setLoading(true);
+    confirmPerson(newPerson)
+      .then(() => {
+        message.success('Person successfully updated', MESSAGE_TIMEOUT);
+      })
+      .catch(handleError)
+      .finally(() => setLoading(false));
+  };
+
+  const personProperties = map(Object.keys(person), (currentKey) => (
+    <div key={currentKey}>
+      <Form.Item label={PERSON_PROP[currentKey]} name={currentKey}>
+        <Input />
+      </Form.Item>
+    </div>
+  ));
+
+  return (
+    <>
+      {person.lastName !== '' && (
+        <Form
+          form={form}
+          labelCol={{
+            span: 4,
+          }}
+          wrapperCol={{
+            span: 14,
+          }}
+          layout="horizontal"
+          onFinish={onConfirmChanges}
+          onFinishFailed={() => console.log('Not valid params provided')}
+          initialValues={{
+            ...person,
+          }}
+        >
+          {personProperties}
+          <Form.Item
+            type="primary"
+            wrapperCol={{
+              span: 14,
+              offset: 4,
+            }}
+          >
+            <Button onClick={() => form.submit()}>Confirm changes</Button>
+          </Form.Item>
+        </Form>
+      )}
+    </>
+  );
+};
+
+export default PersonPage;

chinook/app/front/src/components/Router.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { isEmpty } from 'lodash';
+import TracksContainer from './TracksPage';
+import Header from './Header';
+import PersonPage from './PersonPage';
+import ErrorPage from './ErrorPage';
+import InvoicePage from './InvoicePage';
+import ManageStore from './ManageStore';
+import MyInvoicesPage from './MyInvoicesPage';
+import Login from './Login';
+import { withRestrictions } from '../hocs/withRestrictions';
+import { requireEmployee } from '../util/constants';
+
+const RestrictedLogin = withRestrictions(Login, ({ user }) => !user);
+const RestrictedInvoicePage = withRestrictions(
+  InvoicePage,
+  ({ user, invoicedItems }) => !requireEmployee(user) && !isEmpty(invoicedItems)
+);
+const RestrictedPersonPage = withRestrictions(PersonPage, ({ user }) => !!user);
+const RestrictedManageStore = withRestrictions(ManageStore, ({ user }) => requireEmployee(user));
+
+const MyRouter = () => {
+  return (
+    <Router>
+      <Header />
+      <div style={{ padding: '2em 20vh' }}>
+        <React.Suspense fallback={<div>Loading...</div>}>
+          <Switch>
+            <Route exact path={['/index.html', '/tracks', '/']}>
+              <TracksContainer />
+            </Route>
+            <Route exact path="/person">
+              <RestrictedPersonPage />
+            </Route>
+            <Route exact path="/login">
+              <RestrictedLogin />
+            </Route>
+            <Route exact path="/invoice">
+              <RestrictedInvoicePage />
+            </Route>
+            <Route exact path="/invoices">
+              <MyInvoicesPage />
+            </Route>
+            <Route exact path="/manage">
+              <RestrictedManageStore />
+            </Route>
+            <Route path="/">
+              <ErrorPage />
+            </Route>
+          </Switch>
+        </React.Suspense>
+      </div>
+    </Router>
+  );
+};
+
+export { MyRouter };

chinook/app/front/src/components/TracksPage.css

@@ -0,0 +1,4 @@
+.ant-select > div.ant-select-selector {
+  padding: 5px;
+  min-width: 300px;
+}

chinook/app/front/src/components/TracksPage.jsx

@@ -0,0 +1,221 @@
+import React, { useState } from 'react';
+import { debounce } from 'lodash';
+import { Input, Col, Row, Select, Pagination } from 'antd';
+import { Track } from './tracks/Track';
+import { ManagedTrack } from './tracks/ManagedTrack';
+import { useAppState } from '../hooks/useAppState';
+import { useErrors } from '../hooks/useErrors';
+import { fetchTacks, countTracks, fetchGenres } from '../api/calls';
+import { useAbortableEffect } from '../hooks/useAbortableEffect';
+import { requireEmployee } from '../util/constants';
+import './TracksPage.css';
+
+const { Search } = Input;
+const { Option } = Select;
+
+const DEBOUNCE_TIMER = 500;
+const DEBOUNCE_OPTIONS = {
+  leading: true,
+  trailing: false,
+};
+
+const isEven = (value) => {
+  return value % 2 === 0;
+};
+
+const renderGenres = (genres) =>
+  genres.map(({ ID, name }) => (
+    <Option key={ID} value={ID.toString()}>
+      {name}
+    </Option>
+  ));
+
+const TracksContainer = () => {
+  const { setLoading, user } = useAppState();
+  const { handleError } = useErrors();
+  const [state, setState] = useState({
+    tracks: [],
+    genres: [],
+    pagination: {
+      currentPage: 1,
+      totalItems: 0,
+      pageSize: 20,
+    },
+    searchOptions: {
+      substr: '',
+      genreIds: [],
+    },
+  });
+
+  useAbortableEffect((status) => {
+    setLoading(true);
+
+    const countTracksReq = countTracks();
+    const getTracksRequest = fetchTacks();
+    const getGenresReq = fetchGenres();
+
+    Promise.all([countTracksReq, getTracksRequest, getGenresReq])
+      .then(
+        ([
+          { data: totalItems },
+          {
+            data: { value: tracks },
+          },
+          {
+            data: { value: genres },
+          },
+        ]) => {
+          if (!status.aborted) {
+            setState({
+              ...state,
+              tracks,
+              genres,
+              pagination: { ...state.pagination, totalItems },
+            });
+          }
+        }
+      )
+      .catch(handleError)
+      .finally(() => setLoading(false));
+  }, []);
+
+  const onSearch = debounce(
+    () => {
+      setLoading(true);
+      const options = {
+        $top: state.pagination.pageSize,
+        substr: state.searchOptions.substr.replace(/'*/g, (value) =>
+          isEven(value.length) ? value : `${value}'`
+        ),
+        genreIds: state.searchOptions.genreIds,
+      };
+
+      Promise.all([
+        fetchTacks(options),
+        countTracks({
+          substr: options.substr,
+          genreIds: options.genreIds,
+        }),
+      ])
+        .then(([{ data: { value: tracks } }, { data: totalItems }]) =>
+          setState({
+            ...state,
+            tracks,
+            pagination: { ...state.pagination, totalItems },
+          })
+        )
+        .catch(handleError)
+        .finally(() => setLoading(false));
+    },
+    DEBOUNCE_TIMER,
+    DEBOUNCE_OPTIONS
+  );
+  const onSelectChange = (genres) => {
+    setState({
+      ...state,
+      searchOptions: {
+        ...state.searchOptions,
+        genreIds: genres.map((value) => parseInt(value, 10)),
+      },
+    });
+  };
+  const onSearchChange = (event) => {
+    setState({
+      ...state,
+      searchOptions: { ...state.searchOptions, substr: event.target.value },
+    });
+  };
+  const onChangePage = (pageNumber) => {
+    document.querySelector('section.ant-layout').scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+    setLoading(true);
+
+    const options = {
+      $top: state.pagination.pageSize,
+      substr: state.searchOptions.substr,
+      genreIds: state.searchOptions.genreIds,
+      $skip: (pageNumber - 1) * state.pagination.pageSize,
+    };
+    fetchTacks(options)
+      .then((response) =>
+        setState({
+          ...state,
+          tracks: response.data.value,
+          pagination: { ...state.pagination, currentPage: pageNumber },
+        })
+      )
+      .catch(handleError)
+      .finally(() => setLoading(false));
+  };
+  const deleteTrack = (ID) => {
+    setState({
+      ...state,
+      tracks: state.tracks.filter(({ ID: curID }) => curID !== ID),
+    });
+  };
+  const renderTracks = (tracks) => {
+    const isEmployee = requireEmployee(user);
+    const TrackComponent = isEmployee ? ManagedTrack : Track;
+    return tracks.map((track) => {
+      const isAlreadyOrdered = !isEmployee && track.alreadyOrdered;
+      const onDeleteTrack = isEmployee && ((ID) => deleteTrack(ID));
+      return (
+        <Col key={`track-col${track.ID}`} className="gutter-row" span={8}>
+          <TrackComponent
+            initialTrack={track}
+            onDeleteTrack={onDeleteTrack}
+            isAlreadyOrdered={isAlreadyOrdered}
+          />
+        </Col>
+      );
+    });
+  };
+
+  const trackElements = renderTracks(state.tracks);
+  const genreElements = renderGenres(state.genres);
+
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'start',
+          maxWidth: 600,
+          paddingBottom: 10,
+        }}
+      >
+        <Select
+          mode="multiple"
+          allowClear
+          style={{ marginRight: 10, borderRadius: 6 }}
+          placeholder="Genres"
+          onChange={(value) => onSelectChange(value)}
+        >
+          {genreElements}
+        </Select>
+        <Search
+          style={{
+            borderRadius: 6,
+          }}
+          placeholder="Search tracks"
+          size="large"
+          onSearch={onSearch}
+          onChange={onSearchChange}
+        />
+      </div>
+      <div>
+        <Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 32 }, 24]}>{trackElements}</Row>
+      </div>
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <Pagination
+          showSizeChanger={false}
+          defaultCurrent={1}
+          total={state.pagination.totalItems}
+          pageSize={state.pagination.pageSize}
+          onChange={onChangePage}
+        />
+      </div>
+    </>
+  );
+};
+
+export default TracksContainer;

chinook/app/front/src/components/manage-store/AddAlbumForm.jsx

@@ -0,0 +1,62 @@
+import React, { useEffect } from 'react';
+import { Form, Input, Select } from 'antd';
+import { useSearch } from '@umijs/hooks';
+import { useErrors } from '../../hooks/useErrors';
+import { fetchArtistsByName } from '../../api/calls';
+
+const REQUIRED = [
+  {
+    required: true,
+    message: 'This filed is required!',
+  },
+];
+const ARTISTS_LIMIT = 10;
+
+const getArtists = function (value) {
+  return fetchArtistsByName(value, ARTISTS_LIMIT)
+    .then((response) => response.data.value)
+    .catch(this.handleError);
+};
+
+const AddAlbumForm = () => {
+  const { handleError } = useErrors();
+  const {
+    data: artists,
+    loading: isArtistsLoading,
+    onChange: onChangeArtistInput,
+    cancel: onArtistCancel,
+  } = useSearch(getArtists.bind({ handleError }));
+
+  useEffect(() => {
+    onChangeArtistInput();
+  }, []);
+
+  return (
+    <>
+      <h3>Add album</h3>
+      <Form.Item label="Name" name="name" rules={REQUIRED}>
+        <Input />
+      </Form.Item>
+      <Form.Item label="Artist" name="artistID" rules={REQUIRED}>
+        <Select
+          showSearch
+          placeholder="Select artist"
+          filterOption={false}
+          onSearch={onChangeArtistInput}
+          loading={isArtistsLoading}
+          onBlur={onArtistCancel}
+          style={{ width: 300 }}
+        >
+          {artists &&
+            artists.map((artist) => (
+              <Select.Option key={artist.name} value={artist.ID}>
+                {artist.name}
+              </Select.Option>
+            ))}
+        </Select>
+      </Form.Item>
+    </>
+  );
+};
+
+export { AddAlbumForm };

chinook/app/front/src/components/manage-store/AddArtistForm.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Form, Input } from 'antd';
+
+const REQUIRED = [
+  {
+    required: true,
+    message: 'This filed is required!',
+  },
+];
+
+const AddArtistForm = () => {
+  return (
+    <>
+      <h3>Add artist</h3>
+      <Form.Item label="Name" name="name" rules={REQUIRED}>
+        <Input />
+      </Form.Item>
+    </>
+  );
+};
+
+export { AddArtistForm };

chinook/app/front/src/components/manage-store/TrackForm.jsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Form, Input, Select, InputNumber } from 'antd';
+import { head } from 'lodash';
+import { useSearch } from '@umijs/hooks';
+import { useAppState } from '../../hooks/useAppState';
+import { fetchAlbumsByName, fetchGenres } from '../../api/calls';
+import { useErrors } from '../../hooks/useErrors';
+
+const ALBUMS_LIMIT = 10;
+const REQUIRED = [
+  {
+    required: true,
+    message: 'This filed is required!',
+  },
+];
+
+function getAlbums(value) {
+  return fetchAlbumsByName(value, ALBUMS_LIMIT)
+    .then((response) => response.data.value)
+    .catch(this.handleError);
+}
+
+const TrackForm = ({ initialAlbumTitle }) => {
+  const { handleError } = useErrors();
+  const {
+    data: albums,
+    loading: isAlbumsLoading,
+    onChange: onChangeAlbumInput,
+    cancel: onAlbumCancel,
+  } = useSearch(getAlbums.bind({ handleError }));
+  const { setLoading } = useAppState();
+  const [genres, setGenres] = useState([]);
+
+  useEffect(() => {
+    setLoading(true);
+    Promise.all([fetchGenres(), onChangeAlbumInput(initialAlbumTitle)])
+      .then((responses) => setGenres(head(responses).data.value))
+      .catch(handleError)
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <div>
+      <Form.Item label="Name" name="name" rules={REQUIRED}>
+        <Input />
+      </Form.Item>
+      <Form.Item label="Composer" name="composer" rules={REQUIRED}>
+        <Input />
+      </Form.Item>
+      <Form.Item label="Album" name="albumID" rules={REQUIRED}>
+        <Select
+          showSearch
+          placeholder="Select album"
+          filterOption={false}
+          onSearch={onChangeAlbumInput}
+          loading={isAlbumsLoading}
+          onBlur={onAlbumCancel}
+        >
+          {albums &&
+            albums.map((album) => (
+              <Select.Option key={album.title} value={album.ID}>
+                {album.title}
+              </Select.Option>
+            ))}
+        </Select>
+      </Form.Item>
+      <Form.Item label="Genre" name="genreID" rules={REQUIRED}>
+        <Select showSearch placeholder="Select genre" filterOption={false}>
+          {genres &&
+            genres.map((genre) => (
+              <Select.Option key={genre.name} value={genre.ID}>
+                {genre.name}
+              </Select.Option>
+            ))}
+        </Select>
+      </Form.Item>
+      <Form.Item label="Unit price" name="unitPrice" precision={2} rules={REQUIRED}>
+        <InputNumber
+          precision={2}
+          decimalSeparator="."
+          parser={(value) => value.replace(/\$\s?|(,*)/g, '')}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+TrackForm.propTypes = {
+  initialAlbumTitle: PropTypes.string,
+};
+TrackForm.defaultProps = {
+  initialAlbumTitle: undefined,
+};
+
+export { TrackForm };

chinook/app/front/src/components/tracks/DeleteAction.jsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, message } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
+import { deleteTrack } from '../../api/calls';
+import { useErrors } from '../../hooks/useErrors';
+import { MESSAGE_TIMEOUT } from '../../util/constants';
+
+const DeleteAction = ({ ID, onDeleteTrack }) => {
+  const [modalVisible, setModalVisible] = useState(false);
+  const { handleError } = useErrors();
+
+  const onOk = () => {
+    setModalVisible(false);
+    deleteTrack(ID)
+      .then(() => {
+        onDeleteTrack();
+        setModalVisible(false);
+        message.success('Track successfully deleted!', MESSAGE_TIMEOUT);
+      })
+      .catch(handleError);
+  };
+
+  const onCancel = () => setModalVisible(false);
+  const onOpenModal = () => {
+    setModalVisible(true);
+  };
+
+  return (
+    <>
+      <DeleteOutlined onClick={onOpenModal}>Delete</DeleteOutlined>
+      <Modal title="Confirm" visible={modalVisible} onOk={onOk} onCancel={onCancel}>
+        <p>Are You really want to delete this track?</p>
+      </Modal>
+    </>
+  );
+};
+
+DeleteAction.propTypes = {
+  ID: PropTypes.number.isRequired,
+  onDeleteTrack: PropTypes.func.isRequired,
+};
+
+export { DeleteAction };

chinook/app/front/src/components/tracks/EditAction.jsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Modal, Form, message } from 'antd';
+import { EditOutlined, LoadingOutlined } from '@ant-design/icons';
+import { useErrors } from '../../hooks/useErrors';
+import { TrackForm } from '../manage-store/TrackForm';
+import { updateTrack, getTrack } from '../../api/calls';
+import { MESSAGE_TIMEOUT } from '../../util/constants';
+
+const EditAction = ({ ID, name, composer, genre, unitPrice, album, afterTrackUpdate }) => {
+  const [visible, setVisible] = React.useState(false);
+  const [confirmLoading, setConfirmLoading] = React.useState(false);
+  const [updateLoading, setUpdateLoading] = React.useState(false);
+  const [form] = Form.useForm();
+  const { handleError } = useErrors();
+
+  const onShowModal = () => {
+    setVisible(true);
+  };
+
+  const afterCloseModal = () => {
+    setUpdateLoading(true);
+    getTrack(ID)
+      .then((response) => {
+        afterTrackUpdate(response.data);
+        setUpdateLoading(false);
+      })
+      .catch(handleError);
+  };
+
+  const onFinish = (value) => {
+    setConfirmLoading(true);
+    updateTrack({
+      ID,
+      name: value.name,
+      composer: value.composer,
+      album: { ID: value.albumID },
+      genre: { ID: value.genreID },
+      unitPrice: value.unitPrice.toString(),
+    })
+      .then(() => {
+        message.success('Track successfully updated!', MESSAGE_TIMEOUT);
+        setConfirmLoading(false);
+        setVisible(false);
+        afterCloseModal();
+      })
+      .catch(handleError);
+  };
+
+  const handleOk = () => {
+    form.submit();
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+  };
+
+  return (
+    <>
+      {updateLoading ? <LoadingOutlined /> : <EditOutlined onClick={onShowModal} />}
+      <Modal
+        title="Edit track"
+        visible={visible}
+        confirmLoading={confirmLoading}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        width={600}
+        footer={[
+          <Button key="back" onClick={handleCancel}>
+            Cancel
+          </Button>,
+          <Button key="submit" type="primary" loading={confirmLoading} onClick={handleOk}>
+            Submit
+          </Button>,
+        ]}
+      >
+        <Form
+          form={form}
+          labelCol={{
+            span: 4,
+          }}
+          wrapperCol={{
+            span: 14,
+          }}
+          layout="horizontal"
+          onFinish={onFinish}
+          onFinishFailed={() => console.log('Not valid params provided')}
+          initialValues={{
+            name,
+            composer,
+            genreID: genre.ID,
+            albumID: album.ID,
+            unitPrice,
+          }}
+        >
+          <TrackForm initialAlbumTitle={album.title} />
+        </Form>
+      </Modal>
+    </>
+  );
+};
+
+EditAction.propTypes = {
+  ID: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  composer: PropTypes.string,
+  genre: PropTypes.object.isRequired,
+  unitPrice: PropTypes.number.isRequired,
+  album: PropTypes.object.isRequired,
+  afterTrackUpdate: PropTypes.func.isRequired,
+};
+
+EditAction.defaultProps = {
+  composer: undefined,
+};
+
+export { EditAction };

chinook/app/front/src/components/tracks/ManagedTrack.css

@@ -0,0 +1,7 @@
+span > span.anticon.anticon-delete:hover {
+  color: #ff4d4f;
+}
+
+.card-element {
+  transition: opacity 0.5s ease-in-out;
+}

chinook/app/front/src/components/tracks/ManagedTrack.jsx

@@ -0,0 +1,48 @@
+import React, { useState, useRef } from 'react';
+import { Card } from 'antd';
+import PropTypes from 'prop-types';
+import { EditAction } from './EditAction';
+import { DeleteAction } from './DeleteAction';
+import { TrackCardBody } from './TrackCardBody';
+import './ManagedTrack.css';
+
+const ManagedTrack = ({ initialTrack, onDeleteTrack }) => {
+  const trackElement = useRef();
+  const [track, setTrack] = useState(initialTrack);
+
+  return (
+    <div className="card-element" ref={trackElement}>
+      <Card
+        actions={[
+          <DeleteAction
+            ID={track.ID}
+            onDeleteTrack={() => {
+              trackElement.current.style.opacity = 0;
+              setTimeout(() => onDeleteTrack(track.ID), 500);
+            }}
+          />,
+          <EditAction
+            ID={track.ID}
+            name={track.name}
+            composer={track.composer}
+            album={track.album}
+            genre={track.genre}
+            unitPrice={track.unitPrice}
+            afterTrackUpdate={(value) => setTrack(value)}
+          />,
+        ]}
+        title={track.name}
+        bordered={false}
+      >
+        <TrackCardBody track={track} />
+      </Card>
+    </div>
+  );
+};
+
+ManagedTrack.propTypes = {
+  initialTrack: PropTypes.object.isRequired,
+  onDeleteTrack: PropTypes.func.isRequired,
+};
+
+export { ManagedTrack };

chinook/app/front/src/components/tracks/Track.jsx

@@ -0,0 +1,63 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Card, Button } from 'antd';
+import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
+import { useAppState } from '../../hooks/useAppState';
+import { TrackCardBody } from './TrackCardBody';
+
+const Track = ({ initialTrack, isAlreadyOrdered }) => {
+  const trackElement = useRef();
+  const { setInvoicedItems, invoicedItems } = useAppState();
+  const [isJustInvoiced, setIsJustInvoiced] = useState(
+    invoicedItems.find((curTrack) => curTrack.ID === initialTrack.ID)
+  );
+
+  const onChangedStatus = () => {
+    const newIsJustInvoiced = !isJustInvoiced;
+    if (newIsJustInvoiced) {
+      setInvoicedItems([
+        ...invoicedItems,
+        {
+          ID: initialTrack.ID,
+          name: initialTrack.name,
+          artist: initialTrack.album.artist.name,
+          albumTitle: initialTrack.album.title,
+          unitPrice: initialTrack.unitPrice,
+        },
+      ]);
+    } else {
+      setInvoicedItems(invoicedItems.filter(({ ID: curID }) => curID !== initialTrack.ID));
+    }
+    setIsJustInvoiced(newIsJustInvoiced);
+  };
+
+  return (
+    <div className="card-element" ref={trackElement}>
+      <Card
+        actions={[
+          <>
+            {!isAlreadyOrdered && (
+              <Button onClick={onChangedStatus} danger={isJustInvoiced}>
+                {isJustInvoiced ? <MinusOutlined /> : <PlusOutlined />}
+              </Button>
+            )}
+          </>,
+        ]}
+        title={initialTrack.name}
+        bordered={false}
+      >
+        <TrackCardBody track={initialTrack} />
+      </Card>
+    </div>
+  );
+};
+
+Track.propTypes = {
+  initialTrack: PropTypes.object.isRequired,
+  isAlreadyOrdered: PropTypes.bool,
+};
+Track.defaultProps = {
+  isAlreadyOrdered: undefined,
+};
+
+export { Track };

chinook/app/front/src/components/tracks/TrackCardBody.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const TrackCardBody = ({ track }) => {
+  return (
+    <>
+      <div>
+        Artist:
+        <span style={{ fontWeight: 600 }}>{track.album.artist.name}</span>
+      </div>
+      <div>
+        Album:
+        <span style={{ fontWeight: 600 }}>{track.album.title}</span>
+      </div>
+      <div>
+        Genre:
+        <span style={{ fontWeight: 600 }}>{track.genre.name}</span>
+      </div>
+      <div>
+        {track.composer && (
+          <span>
+            Compositor:
+            <span style={{ fontWeight: 600 }}>{track.composer}</span>
+          </span>
+        )}
+      </div>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <span>
+          Price:
+          <span style={{ fontWeight: 600 }}>{track.unitPrice}</span>
+        </span>
+      </div>
+    </>
+  );
+};
+
+TrackCardBody.propTypes = {
+  track: PropTypes.object.isRequired,
+};
+
+export { TrackCardBody };

chinook/app/front/src/contexts/AppStateContext.jsx

@@ -0,0 +1,66 @@
+import React, { useMemo, createContext, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { getUserFromLS, getLocaleFromLS, setUserToLS } from '../util/localStorageService';
+import { changeUserDefaults } from '../api/axiosInstance';
+import { emitter } from '../util/EventEmitter';
+
+const globalContext = {
+  error: {},
+  loading: true,
+  user: {
+    ID: undefined,
+    roles: [],
+    email: undefined,
+    accessToken: undefined,
+    refreshToken: undefined,
+  },
+  locale: undefined,
+  invoicedItems: [],
+  notifications: [],
+};
+const AppStateContext = createContext(globalContext);
+
+const AppStateContextProvider = ({ children }) => {
+  const [invoicedItems, setInvoicedItems] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState({});
+  const [user, setUser] = useState(getUserFromLS());
+  const [locale, setLocale] = useState(getLocaleFromLS());
+
+  useEffect(() => {
+    const updateUser = (newUser) => {
+      console.log('USER_UPDATE WAS TRIGGERED');
+      changeUserDefaults(newUser);
+      setUserToLS(newUser);
+      setUser(newUser);
+    };
+    emitter.on('UPDATE_USER', updateUser);
+    return () => {
+      emitter.removeListener('UPDATE_USER', updateUser);
+    };
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      error,
+      loading,
+      invoicedItems,
+      user,
+      locale,
+      setLoading,
+      setError,
+      setInvoicedItems,
+      setUser,
+      setLocale,
+    }),
+    [locale, user, loading, error, invoicedItems]
+  );
+
+  return <AppStateContext.Provider value={value}>{children}</AppStateContext.Provider>;
+};
+
+AppStateContextProvider.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+export { AppStateContextProvider, AppStateContext };

chinook/app/front/src/hocs/withRestrictions.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+import { useAppState } from '../hooks/useAppState';
+
+const withRestrictions = (Component, isUserMeetRestrictions) => {
+  return (props) => {
+    const { user, invoicedItems } = useAppState();
+    return isUserMeetRestrictions({ user, invoicedItems }) ? (
+      <Component {...props} />
+    ) : (
+      <Redirect exact to="/error" />
+    );
+  };
+};
+
+export { withRestrictions };

chinook/app/front/src/hooks/useAbortableEffect.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+function useAbortableEffect(effect, dependencies) {
+  const status = {}; // mutable status object
+  useEffect(() => {
+    status.aborted = false;
+    // pass the mutable object to the effect callback
+    // store the returned value for cleanup
+    const cleanUpFn = effect(status);
+    return () => {
+      // mutate the object to signal the consumer
+      // this effect is cleaning up
+      status.aborted = true;
+      if (typeof cleanUpFn === 'function') {
+        // run the cleanup function
+        cleanUpFn();
+      }
+    };
+  }, [...dependencies]);
+}
+
+export { useAbortableEffect };

chinook/app/front/src/hooks/useAppState.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { AppStateContext } from '../contexts/AppStateContext';
+
+const useAppState = () => useContext(AppStateContext);
+
+export { useAppState };

chinook/app/front/src/hooks/useErrors.js

@@ -0,0 +1,34 @@
+import { useHistory } from 'react-router-dom';
+import { useAppState } from './useAppState';
+
+const useErrors = () => {
+  const history = useHistory();
+  const { setError } = useAppState();
+
+  const handleError = (error) => {
+    console.error('Error', error);
+
+    if (error.response) {
+      const { status, statusText, data } = error.response;
+      setError({
+        status,
+        statusText,
+        message: data.error ? data.error.message : data,
+      });
+    } else {
+      setError({
+        status: '',
+        statusText: 'Error',
+        message: 'Something went wrong. Seems like request is too long',
+      });
+    }
+
+    history.push('/error');
+  };
+
+  return {
+    handleError,
+  };
+};
+
+export { useErrors };

chinook/app/front/src/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+// import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+// serviceWorker.unregister();

chinook/app/front/src/logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>

chinook/app/front/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';

chinook/app/front/src/util/EventEmitter.js

@@ -0,0 +1,5 @@
+import EventEmitter from 'events';
+
+const emitter = new EventEmitter();
+
+export { emitter };

chinook/app/front/src/util/constants.js

@@ -0,0 +1,7 @@
+export const AVAILABLE_LOCALES = ['en', 'fr', 'de'];
+
+export const MESSAGE_TIMEOUT = 2;
+
+export const requireEmployee = (user) => !!user && user.roles.includes('employee');
+
+export const requireCustomer = (user) => !!user && user.roles.includes('customer');

chinook/app/front/src/util/localStorageService.js

@@ -0,0 +1,36 @@
+import { isValidUser } from './validateUser';
+import { AVAILABLE_LOCALES } from './constants';
+
+const setUserToLS = (user) => {
+  if (user) {
+    localStorage.setItem('user', JSON.stringify(user));
+  } else {
+    localStorage.removeItem('user');
+  }
+};
+
+const getUserFromLS = () => {
+  let userFromLS;
+  try {
+    userFromLS = JSON.parse(localStorage.getItem('user'));
+    if (isValidUser(userFromLS)) {
+      return userFromLS;
+    }
+  } catch (e) {
+    console.error('User from local storage are not valid');
+  }
+  return undefined;
+};
+
+const getLocaleFromLS = () => {
+  const localeFromLS = localStorage.getItem('locale');
+  return localeFromLS && localeFromLS !== 'undefined' && AVAILABLE_LOCALES.includes(localeFromLS)
+    ? localeFromLS
+    : 'en';
+};
+
+const setLocaleToLS = (locale) => {
+  localStorage.setItem('locale', locale);
+};
+
+export { setLocaleToLS, getLocaleFromLS, getUserFromLS, setUserToLS };

chinook/app/front/src/util/validateUser.js

@@ -0,0 +1,18 @@
+import { isArray, isEmpty, isString, isNumber } from 'lodash';
+
+const CUSTOMER_ROLE = 'customer';
+const EMPLOYEE_ROLE = 'employee';
+
+const isValidUser = (user) => {
+  return (
+    !isEmpty(user) &&
+    isNumber(user.ID) &&
+    isArray(user.roles) &&
+    !!user.roles.some((role) => role === CUSTOMER_ROLE || role === EMPLOYEE_ROLE) &&
+    isString(user.email) &&
+    isString(user.accessToken) &&
+    isString(user.refreshToken)
+  );
+};
+
+export { isValidUser };

chinook/app/front/webpack/common-plugins.js

@@ -0,0 +1,33 @@
+const path = require('path');
+const webpack = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+
+module.exports = {
+  plugins: [
+    new CleanWebpackPlugin({ dangerouslyAllowCleanPatternsOutsideProject: true }),
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, '../public/index.html'),
+      filename: path.join(__dirname, '../../build/index.html'),
+      publicPath: '/static/', // for js bundles path
+    }),
+    new InterpolateHtmlPlugin(HtmlWebpackPlugin, {
+      PUBLIC_URL: '',
+    }),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.join(__dirname, '../public'),
+          to: path.join(__dirname, '../../build'),
+          globOptions: {
+            dot: true,
+            ignore: ['**/index.html'],
+          },
+        },
+      ],
+    }),
+    new webpack.ProgressPlugin(),
+  ],
+};

chinook/app/front/webpack/common-rules.js

@@ -0,0 +1,19 @@
+module.exports = {
+  rules: [
+    {
+      test: /\.(js|jsx)$/,
+      exclude: /(node_modules)/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env', '@babel/preset-react'],
+        },
+      },
+    },
+
+    {
+      test: /\.(png|jpg)$/,
+      use: [{ loader: 'url-loader' }],
+    },
+  ],
+};