refactoring error page

media-store/.vscode/launch.json

@@ -4,13 +4,8 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
-    {
-      "name": "Launch import",
-      "command": "npm run import",
-      "request": "launch",
-      "skipFiles": ["<node_internals>/**"],
-      "type": "node-terminal"
-    },
+
+   
     {
       "command": "cds run --with-mocks --in-memory?",
       "name": "cds run",

media-store/app/src/components/Router.js

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  Redirect,
-} from "react-router-dom";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import { isEmpty } from "lodash";
 import { TracksContainer } from "../pages/tracks/TracksPage";
 import { CurrentPageHeader } from "./CurrentPageHeader";
@@ -40,39 +35,32 @@ const RestrictedManageStore = withRestrictions(
 const MyRouter = () => {
   return (
     <Router>
-      <Switch>
-        <Route path="/error">
-          <ErrorPage />
-        </Route>
-        <Route>
-          <Header />
-          <div style={{ padding: "2em 20vh" }}>
-            <CurrentPageHeader />
-            <Switch>
-              <Route exact path={["/"]}>
-                <TracksContainer />
-              </Route>
-              <Route exact path="/person">
-                <RestrictedPersonPage
-                  myInvoicesSection={<RestrictedMyInvoicesSection />}
-                />
-              </Route>
-              <Route exact path="/login">
-                <RestrictedLogin />
-              </Route>
-              <Route exact path="/invoice">
-                <RestrictedInvoicePage />
-              </Route>
-              <Route exact path="/manage">
-                <RestrictedManageStore />
-              </Route>
-              <Route>
-                <Redirect to="/error" />
-              </Route>
-            </Switch>
-          </div>
-        </Route>
-      </Switch>
+      <Header />
+      <div style={{ padding: "2em 20vh" }}>
+        <CurrentPageHeader />
+        <Switch>
+          <Route exact path={["/", "/tracks"]}>
+            <TracksContainer />
+          </Route>
+          <Route exact path="/person">
+            <RestrictedPersonPage
+              myInvoicesSection={<RestrictedMyInvoicesSection />}
+            />
+          </Route>
+          <Route exact path="/login">
+            <RestrictedLogin />
+          </Route>
+          <Route exact path="/invoice">
+            <RestrictedInvoicePage />
+          </Route>
+          <Route exact path="/manage">
+            <RestrictedManageStore />
+          </Route>
+          <Route path="/">
+            <ErrorPage />
+          </Route>
+        </Switch>
+      </div>
     </Router>
   );
 };

media-store/app/src/pages/ErrorPage.js

@@ -1,22 +1,23 @@
-import React, { useEffect } from "react";
+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 { user, error, setError } = useAppState();
   const history = useHistory();
 
-  useEffect(() => {
-    setError({});
-    history.replace("/");
-  }, []);
-
   const onGoHome = () => {
+    setError({});
     history.push("/");
   };
 
+  const goLoginPage = () => {
+    setError({});
+    history.push("/login");
+  };
+
   const errorResultProps = isEmpty(error)
     ? {
         status: 404,
@@ -35,9 +36,16 @@ const ErrorPage = () => {
     <Result
       {...errorResultProps}
       extra={
-        <Button onClick={onGoHome} type="primary">
-          Back Home
-        </Button>
+        <>
+          <Button onClick={onGoHome} type="primary">
+            Back Home
+          </Button>
+          {!user && (
+            <Button onClick={goLoginPage} type="primary">
+              Login
+            </Button>
+          )}
+        </>
       }
     />
   );

media-store/srv/manage-store-service.js

@@ -3,10 +3,15 @@ const cds = require("@sap/cds");
 module.exports = async function () {
   const db = await cds.connect.to("db"); // connect to database service
 
-  this.before("CREATE", "*", async (req) => {
-    let { ID: lastEntityID } = await db.run(
+  this.on("CREATE", "*", async (req) => {
+    const transaction = await db.tx(req);
+    let { ID: lastEntityID } = await transaction.run(
       SELECT.one(req.entity).columns("ID").orderBy({ ID: "desc" })
     );
-    req.data = { ...req.data, ID: ++lastEntityID };
+    const columns = ["ID", ...Object.keys(req.data)];
+    const values = [++lastEntityID, ...Object.values(req.data)];
+
+    await transaction.run(req.query.columns(columns).values(values));
+    await transaction.commit();
   });
 };