Refactor with React hooks

.vscode/launch.json

@@ -0,0 +1,61 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Next",
+            "runtimeExecutable": "yarn",
+            "cwd": "${workspaceFolder}/Next",
+            "runtimeArgs": [
+                "dev"
+            ],
+            "port": 9229,
+            "skipFiles": [
+                "<node_internals>/**"
+            ]
+        },
+        {
+            "name": "TestAppRuna",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            "program": "${workspaceFolder}/TestAppRuna/bin/Debug/net5.0/TestAppRuna.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}/TestAppRuna",
+            "stopAtEntry": false,
+            "serverReadyAction": {
+                "action": "openExternally",
+                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
+            },
+            "env": {
+                "ASPNETCORE_ENVIRONMENT": "Development"
+            },
+            "sourceFileMap": {
+                "/Views": "${workspaceFolder}/TestAppRuna/Views"
+            }
+        },
+        {
+            // Use IntelliSense to find out which attributes exist for C# debugging
+            // Use hover for the description of the existing attributes
+            // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
+            "name": "TestAppRuna.TokenGenerator",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            // If you have changed target frameworks, make sure to update the program path.
+            "program": "${workspaceFolder}/TestAppRuna.TokenGenerator/bin/Debug/net5.0/TestAppRuna.TokenGenerator.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}/TestAppRuna.TokenGenerator",
+            // For more information about the 'console' field, see https://aka.ms/VSCode-CS-LaunchJson-Console
+            "console": "internalConsole",
+            "stopAtEntry": false
+        },
+        {
+            "name": ".NET Core Attach",
+            "type": "coreclr",
+            "request": "attach",
+            "processId": "${command:pickProcess}"
+        }
+    ]
+}

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "build",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "build",
+                "${workspaceFolder}/TestAppRuna.TokenGenerator/TestAppRuna.TokenGenerator.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "publish",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "publish",
+                "${workspaceFolder}/TestAppRuna.TokenGenerator/TestAppRuna.TokenGenerator.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "watch",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "watch",
+                "run",
+                "${workspaceFolder}/TestAppRuna.TokenGenerator/TestAppRuna.TokenGenerator.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        }
+    ]
+}

Next/APIClient.ts

@@ -0,0 +1,716 @@
+/* tslint:disable */
+/* eslint-disable */
+//----------------------
+// <auto-generated>
+//     Generated using the NSwag toolchain v13.10.8.0 (NJsonSchema v10.3.11.0 (Newtonsoft.Json v11.0.0.0)) (http://NSwag.org)
+// </auto-generated>
+//----------------------
+// ReSharper disable InconsistentNaming
+
+export class CartClient {
+    private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
+    private baseUrl: string;
+    protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
+
+    constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
+        this.http = http ? http : <any>window;
+        this.baseUrl = baseUrl !== undefined && baseUrl !== null ? baseUrl : "http://localhost:5000";
+    }
+
+    get(): Promise<CartCustomerListItem[]> {
+        let url_ = this.baseUrl + "/api/Cart";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_ = <RequestInit>{
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGet(_response);
+        });
+    }
+
+    protected processGet(response: Response): Promise<CartCustomerListItem[]> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <CartCustomerListItem[]>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<CartCustomerListItem[]>(<any>null);
+    }
+
+    post(model: CartCreateUpdateModel): Promise<boolean> {
+        let url_ = this.baseUrl + "/api/Cart";
+        url_ = url_.replace(/[?&]$/, "");
+
+        const content_ = JSON.stringify(model);
+
+        let options_ = <RequestInit>{
+            body: content_,
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processPost(_response);
+        });
+    }
+
+    protected processPost(response: Response): Promise<boolean> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <boolean>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<boolean>(<any>null);
+    }
+
+    getFromCustomer(customerId: string): Promise<CartListItem[]> {
+        let url_ = this.baseUrl + "/api/Cart/{customerId}";
+        if (customerId === undefined || customerId === null)
+            throw new Error("The parameter 'customerId' must be defined.");
+        url_ = url_.replace("{customerId}", encodeURIComponent("" + customerId));
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_ = <RequestInit>{
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGetFromCustomer(_response);
+        });
+    }
+
+    protected processGetFromCustomer(response: Response): Promise<CartListItem[]> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <CartListItem[]>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<CartListItem[]>(<any>null);
+    }
+
+    delete(model: CartDeleteModel): Promise<boolean> {
+        let url_ = this.baseUrl + "/api/Cart/delete";
+        url_ = url_.replace(/[?&]$/, "");
+
+        const content_ = JSON.stringify(model);
+
+        let options_ = <RequestInit>{
+            body: content_,
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processDelete(_response);
+        });
+    }
+
+    protected processDelete(response: Response): Promise<boolean> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <boolean>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<boolean>(<any>null);
+    }
+}
+
+export class CustomerClient {
+    private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
+    private baseUrl: string;
+    protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
+
+    constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
+        this.http = http ? http : <any>window;
+        this.baseUrl = baseUrl !== undefined && baseUrl !== null ? baseUrl : "http://localhost:5000";
+    }
+
+    getAll(): Promise<CustomerListItem[]> {
+        let url_ = this.baseUrl + "/api/Customer";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_ = <RequestInit>{
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGetAll(_response);
+        });
+    }
+
+    protected processGetAll(response: Response): Promise<CustomerListItem[]> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <CustomerListItem[]>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<CustomerListItem[]>(<any>null);
+    }
+
+    post(model: CustomerCreateUpdateModel): Promise<string> {
+        let url_ = this.baseUrl + "/api/Customer";
+        url_ = url_.replace(/[?&]$/, "");
+
+        const content_ = JSON.stringify(model);
+
+        let options_ = <RequestInit>{
+            body: content_,
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processPost(_response);
+        });
+    }
+
+    protected processPost(response: Response): Promise<string> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <string>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<string>(<any>null);
+    }
+
+    get(id: string): Promise<CustomerListItem> {
+        let url_ = this.baseUrl + "/api/Customer/{id}";
+        if (id === undefined || id === null)
+            throw new Error("The parameter 'id' must be defined.");
+        url_ = url_.replace("{id}", encodeURIComponent("" + id));
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_ = <RequestInit>{
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGet(_response);
+        });
+    }
+
+    protected processGet(response: Response): Promise<CustomerListItem> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <CustomerListItem>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<CustomerListItem>(<any>null);
+    }
+
+    put(id: string, model: CustomerCreateUpdateModel): Promise<string> {
+        let url_ = this.baseUrl + "/api/Customer/{id}";
+        if (id === undefined || id === null)
+            throw new Error("The parameter 'id' must be defined.");
+        url_ = url_.replace("{id}", encodeURIComponent("" + id));
+        url_ = url_.replace(/[?&]$/, "");
+
+        const content_ = JSON.stringify(model);
+
+        let options_ = <RequestInit>{
+            body: content_,
+            method: "PUT",
+            headers: {
+                "Content-Type": "application/json",
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processPut(_response);
+        });
+    }
+
+    protected processPut(response: Response): Promise<string> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <string>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<string>(<any>null);
+    }
+
+    delete(id: string): Promise<string> {
+        let url_ = this.baseUrl + "/api/Customer/{id}";
+        if (id === undefined || id === null)
+            throw new Error("The parameter 'id' must be defined.");
+        url_ = url_.replace("{id}", encodeURIComponent("" + id));
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_ = <RequestInit>{
+            method: "DELETE",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processDelete(_response);
+        });
+    }
+
+    protected processDelete(response: Response): Promise<string> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <string>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<string>(<any>null);
+    }
+}
+
+export class MathClient {
+    private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
+    private baseUrl: string;
+    protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
+
+    constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
+        this.http = http ? http : <any>window;
+        this.baseUrl = baseUrl !== undefined && baseUrl !== null ? baseUrl : "http://localhost:5000";
+    }
+
+    get(): Promise<number> {
+        let url_ = this.baseUrl + "/api/Math";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_ = <RequestInit>{
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGet(_response);
+        });
+    }
+
+    protected processGet(response: Response): Promise<number> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <number>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<number>(<any>null);
+    }
+}
+
+export class ProductClient {
+    private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
+    private baseUrl: string;
+    protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
+
+    constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
+        this.http = http ? http : <any>window;
+        this.baseUrl = baseUrl !== undefined && baseUrl !== null ? baseUrl : "http://localhost:5000";
+    }
+
+    getAll(): Promise<ProductListItem[]> {
+        let url_ = this.baseUrl + "/api/Product";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_ = <RequestInit>{
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGetAll(_response);
+        });
+    }
+
+    protected processGetAll(response: Response): Promise<ProductListItem[]> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <ProductListItem[]>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<ProductListItem[]>(<any>null);
+    }
+
+    post(model: ProductCreateUpdateModel): Promise<string> {
+        let url_ = this.baseUrl + "/api/Product";
+        url_ = url_.replace(/[?&]$/, "");
+
+        const content_ = JSON.stringify(model);
+
+        let options_ = <RequestInit>{
+            body: content_,
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processPost(_response);
+        });
+    }
+
+    protected processPost(response: Response): Promise<string> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <string>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<string>(<any>null);
+    }
+
+    get(id: string): Promise<ProductListItem> {
+        let url_ = this.baseUrl + "/api/Product/{id}";
+        if (id === undefined || id === null)
+            throw new Error("The parameter 'id' must be defined.");
+        url_ = url_.replace("{id}", encodeURIComponent("" + id));
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_ = <RequestInit>{
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGet(_response);
+        });
+    }
+
+    protected processGet(response: Response): Promise<ProductListItem> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <ProductListItem>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<ProductListItem>(<any>null);
+    }
+
+    put(id: string, model: ProductCreateUpdateModel): Promise<string> {
+        let url_ = this.baseUrl + "/api/Product/{id}";
+        if (id === undefined || id === null)
+            throw new Error("The parameter 'id' must be defined.");
+        url_ = url_.replace("{id}", encodeURIComponent("" + id));
+        url_ = url_.replace(/[?&]$/, "");
+
+        const content_ = JSON.stringify(model);
+
+        let options_ = <RequestInit>{
+            body: content_,
+            method: "PUT",
+            headers: {
+                "Content-Type": "application/json",
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processPut(_response);
+        });
+    }
+
+    protected processPut(response: Response): Promise<string> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <string>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<string>(<any>null);
+    }
+
+    delete(id: string): Promise<string> {
+        let url_ = this.baseUrl + "/api/Product/{id}";
+        if (id === undefined || id === null)
+            throw new Error("The parameter 'id' must be defined.");
+        url_ = url_.replace("{id}", encodeURIComponent("" + id));
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_ = <RequestInit>{
+            method: "DELETE",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processDelete(_response);
+        });
+    }
+
+    protected processDelete(response: Response): Promise<string> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <string>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<string>(<any>null);
+    }
+}
+
+export class SettingsClient {
+    private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
+    private baseUrl: string;
+    protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
+
+    constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
+        this.http = http ? http : <any>window;
+        this.baseUrl = baseUrl !== undefined && baseUrl !== null ? baseUrl : "http://localhost:5000";
+    }
+
+    get(): Promise<string> {
+        let url_ = this.baseUrl + "/api/Settings";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_ = <RequestInit>{
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGet(_response);
+        });
+    }
+
+    protected processGet(response: Response): Promise<string> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : <string>JSON.parse(_responseText, this.jsonParseReviver);
+            return result200;
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<string>(<any>null);
+    }
+}
+
+export interface CartCustomerListItem {
+    productID: string;
+    productName?: string | undefined;
+    productPrice: number;
+    customerName?: string | undefined;
+    customerEmail?: string | undefined;
+    quantity: number;
+}
+
+export interface CartListItem {
+    productID: string;
+    productName?: string | undefined;
+    productPrice: number;
+    quantity: number;
+}
+
+export interface CartCreateUpdateModel {
+    customerID: string;
+    productID: string;
+    quantity: number;
+}
+
+export interface CartDeleteModel {
+    customerID: string;
+    productID: string;
+}
+
+export interface CustomerListItem {
+    customerID: string;
+    name: string;
+    email: string;
+}
+
+export interface CustomerCreateUpdateModel {
+    name: string;
+    email: string;
+}
+
+export interface ProductListItem {
+    productID: string;
+    name: string;
+    price: number;
+}
+
+export interface ProductCreateUpdateModel {
+    name: string;
+    price: number;
+}
+
+export class ApiException extends Error {
+    message: string;
+    status: number;
+    response: string;
+    headers: { [key: string]: any; };
+    result: any;
+
+    constructor(message: string, status: number, response: string, headers: { [key: string]: any; }, result: any) {
+        super();
+
+        this.message = message;
+        this.status = status;
+        this.response = response;
+        this.headers = headers;
+        this.result = result;
+    }
+
+    protected isApiException = true;
+
+    static isApiException(obj: any): obj is ApiException {
+        return obj.isApiException === true;
+    }
+}
+
+function throwException(message: string, status: number, response: string, headers: { [key: string]: any; }, result?: any): any {
+    if (result !== null && result !== undefined)
+        throw result;
+    else
+        throw new ApiException(message, status, response, headers, null);
+}

Next/components/Errors.tsx

@@ -0,0 +1,6 @@
+
+export default function Errors({ errors }) {
+    return errors.map(x => (
+        <li>{x}</li>
+    ));
+}

Next/components/ProductForm.tsx

@@ -0,0 +1,47 @@
+import { faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useEffect, useState } from "react";
+
+
+export default function ProductForm({ name, price, onNameChange, onPriceChange, onSubmit, busy }) {
+    let [form,setForm] = useState({
+        name: "",
+        value: "",
+    })
+    let [formBusy,setFormBusy] = useState(false);
+    let nameChanged = (e: React.ChangeEvent<HTMLInputElement>) => { 
+        name = e.target.value;
+        onNameChange(e.target.value);
+    }
+    let priceChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        price = e.target.value;
+        onPriceChange(e.target.value);
+    }
+    let submit = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault()
+        onSubmit();
+    }
+    formBusy = busy;
+    useEffect(() => {
+        setFormBusy(busy);
+    },[busy]);
+    return (
+        <form>
+            <fieldset disabled={formBusy}>
+                <div className="mb-3">
+                    <label htmlFor="name">Name</label>
+                    <input className="form-control" id="name" value={name} onChange={nameChanged}></input>
+                </div>
+                <div className="mb-3">
+                    <label htmlFor="email">Price</label>
+                    <input type="number" className="form-control" id="price" value={price} onChange={priceChanged}></input>
+                </div>
+                <div className="mb-3">
+                    <button type="submit" className="btn btn-primary" onClick={submit}>
+                        <FontAwesomeIcon icon={faChevronUp}/> Submit
+                    </button>
+                </div>
+            </fieldset>
+        </form>
+    );
+}

Next/lib/product.ts

@@ -0,0 +1,34 @@
+import { ProductListItem } from "../APIClient";
+
+export interface ProductDataProps {
+    productID: string,
+}
+export interface DeleteProductProps extends ProductDataProps {
+    onDelete: (val) => void
+}
+export interface ProductListRowsProps {
+    products: ProductListItem[],
+    onDelete: (val) => void,
+}
+export interface ProductState {
+    product: ProductListItem[]
+}
+export interface ProductFormState {
+    form: {
+        name: string,
+        price: number,
+    },
+    errors: string[],
+    busy: boolean,
+}
+
+export function validateForm(form): string[] {
+    let errors: string[] = [];
+    if (!form.name) {
+        errors.push("Name required");
+    }
+    if (!form.price) {
+        errors.push("Price required");
+    }
+    return errors;
+}

Next/package.json

@@ -12,13 +12,26 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
+    "axios": "^0.21.1",
+    "bootstrap": "^5.0.0-beta3",
+    "mobx": "^6.1.8",
+    "mobx-react": "^7.1.0",
     "next": "^10.0.9",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-fontawesome": "^1.7.1",
+    "sweetalert2": "^10.15.6"
   },
   "devDependencies": {
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-decorators": "^7.13.5",
     "@types/node": "^14.14.35",
     "@types/react": "^17.0.3",
+    "tslib": "^2.1.0",
     "typescript": "^4.2.3"
   }
 }

Next/pages/customer/create.tsx

@@ -0,0 +1,122 @@
+import React, { ChangeEvent } from 'react';
+import { Layout } from '../shared/Layout';
+import { CustomerClient } from '../../APIClient';
+import Swal from 'sweetalert2';
+
+function Errors({ errors }) {
+    return errors.map(x => (
+        <li>{x}</li>
+    ));
+}
+class CreateCustomer extends React.Component<{}, {
+    form: {
+        name: string,
+        email: string,
+    },
+    errors: string[],
+    busy: boolean,
+}> {
+    constructor(props) {
+        super(props)
+        this.state = {
+            form: {
+                name: "",
+                email: "",
+            },
+            errors: [],
+            busy: false,
+        }
+    }
+    onNameChanged(e: ChangeEvent<HTMLInputElement>) {
+        this.setState({
+            form: {
+                name: e.target.value,
+                email: this.state.form.email,
+            }
+        });
+    }
+    onEmailChanged(e: ChangeEvent<HTMLInputElement>) {
+        this.setState({
+            form: {
+                name: this.state.form.name,
+                email: e.target.value
+            }
+        });
+    }
+    async validate() {
+        let errors: string[] = [];
+        if (!this.state.form.name) {
+            errors.push("Name required");
+        }
+        if (!this.state.form.email) {
+            errors.push("Email required");
+        }
+        await new Promise((resolve) => {
+            this.setState({
+                errors
+            }, () => resolve(undefined));
+        })
+        return errors.length == 0;
+    }
+    async onSubmit(e) {
+        e.preventDefault();
+        if (await this.validate()) {
+            await new Promise((resolve) => {
+                this.setState({
+                    busy: true,
+                }, () => resolve(undefined));
+            })
+            try {
+                const form = this.state.form;
+                const client = new CustomerClient();
+                await client.post({
+                    name: form.name,
+                    email: form.email,
+                })
+                Swal.fire({
+                    title: "Submitted!",
+                    text: "Customer is now in database",
+                })
+            } catch (error) {
+
+            } finally {
+                await new Promise((resolve) => {
+                    this.setState({
+                        busy: false,
+                    }, () => resolve(undefined));
+                })
+
+            }
+        }
+    }
+    render() {
+        return (
+            <form>
+                <fieldset disabled={this.state.busy}>
+                    <div className="mb-3">
+                        <label htmlFor="name">Name</label>
+                        <input className="form-control" id="name" value={this.state.form.name} onChange={this.onNameChanged.bind(this)}></input>
+                    </div>
+                    <div className="mb-3">
+                        <label htmlFor="email">Email</label>
+                        <input className="form-control" id="email" value={this.state.form.email} onChange={this.onEmailChanged.bind(this)}></input>
+                    </div>
+                    <div className="mb-3">
+                        <button type="submit" className="btn btn-primary" onClick={this.onSubmit.bind(this)}>Create</button>
+                    </div>
+                    <li>
+                        <Errors errors={this.state.errors}></Errors>
+                    </li>
+                </fieldset>
+            </form>
+        )
+    }
+}
+
+export default function CreateCustomerPage() {
+    return (
+        <Layout title="Create customer">
+            <CreateCustomer></CreateCustomer>
+        </Layout>
+    )
+}

Next/pages/customer/edit/[id].tsx

@@ -0,0 +1,141 @@
+import React, { ChangeEvent } from 'react';
+import { withRouter, NextRouter } from 'next/router';
+import { Layout } from '../../shared/Layout';
+import { CustomerClient } from '../../../APIClient';
+import Swal from 'sweetalert2';
+
+function Errors({ errors }) {
+    return errors.map(x => (
+        <li>{x}</li>
+    ));
+}
+class EditCustomer extends React.Component<{
+    router: NextRouter,
+}, {
+    form: {
+        name: string,
+        email: string,
+    },
+    errors: string[],
+    busy: boolean,
+}> {
+    constructor(props) {
+        super(props)
+        const router = props.router;
+        const { id } = router.query!;
+        this.state = {
+            form: {
+                name: "",
+                email: "",
+            },
+            errors: [],
+            busy: false,
+        }
+    }
+    async componentDidMount() {
+        const client = new CustomerClient();
+        console.log(this.props.router)
+        if (this.props.router.query['id']) {
+            let data = await client.get(this.props.router.query['id']);
+            this.setState({
+                form: {
+                    name: data.name,
+                    email: data.email,
+                }
+            });
+        }
+    }
+    onNameChanged(e: ChangeEvent<HTMLInputElement>) {
+        this.setState({
+            form: {
+                name: e.target.value,
+                email: this.state.form.email,
+            }
+        });
+    }
+    onEmailChanged(e: ChangeEvent<HTMLInputElement>) {
+        this.setState({
+            form: {
+                name: this.state.form.name,
+                email: e.target.value
+            }
+        });
+    }
+    async validate() {
+        let errors: string[] = [];
+        if (!this.state.form.name) {
+            errors.push("Name required");
+        }
+        if (!this.state.form.email) {
+            errors.push("Email required");
+        }
+        await new Promise((resolve) => {
+            this.setState({
+                errors
+            }, () => resolve(undefined));
+        })
+        return errors.length == 0;
+    }
+    async onSubmit(e) {
+        e.preventDefault();
+        if (await this.validate()) {
+            await new Promise((resolve) => {
+                this.setState({
+                    busy: true,
+                }, () => resolve(undefined));
+            })
+            try {
+                const form = this.state.form;
+                const client = new CustomerClient();
+                await client.put(this.props.router.query.id, {
+                    name: form.name,
+                    email: form.email,
+                })
+                Swal.fire({
+                    title: "Submitted!",
+                    text: "Customer is now in database",
+                })
+            } catch (error) {
+
+            } finally {
+                await new Promise((resolve) => {
+                    this.setState({
+                        busy: false,
+                    }, () => resolve(undefined));
+                })
+
+            }
+        }
+    }
+    render() {
+        return (
+            <form>
+                <fieldset disabled={this.state.busy}>
+                    <div className="mb-3">
+                        <label htmlFor="name">Name</label>
+                        <input className="form-control" id="name" value={this.state.form.name} onChange={this.onNameChanged.bind(this)}></input>
+                    </div>
+                    <div className="mb-3">
+                        <label htmlFor="email">Email</label>
+                        <input className="form-control" id="email" value={this.state.form.email} onChange={this.onEmailChanged.bind(this)}></input>
+                    </div>
+                    <div className="mb-3">
+                        <button type="submit" className="btn btn-primary" onClick={this.onSubmit.bind(this)}>Edit</button>
+                    </div>
+                    <li>
+                        <Errors errors={this.state.errors}></Errors>
+                    </li>
+                </fieldset>
+            </form>
+        )
+    }
+}
+
+export default function EditCustomerPage() {
+    let EditCustomerMain = withRouter(EditCustomer);
+    return (
+        <Layout title="Edit customer">
+            <EditCustomerMain></EditCustomerMain>
+        </Layout>
+    )
+}

Next/pages/customer/index.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import axios from 'axios';
+import { CustomerClient, CustomerListItem } from '../../APIClient';
+import { Layout } from '../shared/Layout';
+import Swal from 'sweetalert2';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
+
+const DeleteCustomerButton: React.FunctionComponent<{
+    customerID: string,
+    onDelete: (val) => void
+
+}> = ({ customerID, onDelete }) => {
+    const onClickDelete = async () => {
+        const result = await Swal.fire({
+            title: 'Confirm delete?',
+            text: 'Delete customer?',
+            icon: 'warning',
+            showCancelButton: true,
+        })
+        if (result.isConfirmed) {
+            onDelete(customerID);
+        }
+    }
+    return (
+        <button className="btn btn-danger btn-sm" onClick={onClickDelete}>
+            <FontAwesomeIcon icon={faTrash} />
+        </button>
+    );
+}
+const CustomerListItemRows: React.FunctionComponent<{
+    customers: CustomerListItem[],
+    onDelete: (val) => void,
+}> = ({ customers, onDelete }) => {
+    let rows = customers.map(x => {
+        return (
+            <tr>
+                <td>{x.customerID}</td>
+                <td>{x.name}</td>
+                <td>{x.email}</td>
+                <td><DeleteCustomerButton customerID={x.customerID} onDelete={onDelete}></DeleteCustomerButton></td>
+            </tr>
+        );
+    })
+    return (
+        <tbody>
+            {rows}
+        </tbody>
+    )
+}
+class Customer extends React.Component<{}, { customer: CustomerListItem[] }> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            customer: [],
+        }
+    }
+    async componentDidMount() {
+        this.getCustomers();
+    }
+    async getCustomers() {
+        try {
+            const client = new CustomerClient();
+            let data = await client.getAll();
+            console.log(data);
+            this.setState({
+                customer: data
+            });
+        } catch (error) {
+            this.setState({
+                customer: [],
+            });
+        }
+    }
+    async deleteCustomer(customerId) {
+        try {
+            const client = new CustomerClient();
+            await client.delete(customerId);
+            let customer = this.state.customer.filter(x => x.customerID != customerId);
+            this.setState({
+                customer
+            })
+        } catch (error) {
+            alert(error);
+        }
+    }
+    render() {
+        return (
+            <table className="table table-hover table-striped table-sm">
+                <tr>
+                    <th>ID</th>
+                    <th>Name</th>
+                    <th>Email</th>
+                </tr>
+                <CustomerListItemRows customers={this.state.customer} onDelete={this.deleteCustomer.bind(this)}>
+                </CustomerListItemRows>
+            </table>
+        );
+    }
+}
+
+export default function CustomerPage() {
+    return (
+        <Layout title="Customers">
+            <Customer></Customer>
+        </Layout>
+    )
+}

Next/pages/index.tsx

@@ -1,6 +1,37 @@
-function Index() {
-    return (
-        <p>Hello World</p>
-    );
+import { makeObservable, observable, action } from 'mobx';
+import { observer } from 'mobx-react';
+import React from 'react';
+import Link  from 'next/link';
+import { Layout } from './shared/Layout';
+
+class Index extends React.Component {
+    x: number = 0;
+
+    constructor(props) {
+        super(props);
+        makeObservable(this, {
+            x: observable,
+            clickMe: action,
+        })
+    }
+
+    clickMe() {
+        this.x += 1;
+    }
+
+    render() {
+        return (
+            <div>
+                <button onClick={this.clickMe.bind(this)}>{this.x}</button>
+                <Link href="/todo">Go to Todo</Link>
+            </div>
+        );
+    }
 }
-export default Index;
+
+
+export default function IndexPage() {
+    return (<Layout title="Home">
+        <Index></Index>
+    </Layout>);
+}

Next/pages/product/create.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { Layout } from '../shared/Layout';
+import { ProductClient } from '../../APIClient';
+import Swal from 'sweetalert2';
+import ProductForm from '../../components/ProductForm';
+import Link from 'next/link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { validateForm } from '../../lib/product';
+
+function Errors({ errors }) {
+    return errors.map(x => (
+        <li>{x}</li>
+    ));
+}
+
+function CreateProduct() {
+    let [form, setForm] = useState({ name: "", price: 0 });
+    let [busy, setBusy] = useState(false);
+    let [errors,setErrors] = useState([""]);
+
+    const onNameChanged = (newName: string) => {
+        setForm(
+            {
+                name: newName,
+                price: form.price,
+            }
+        );
+    }
+    const onPriceChanged = (newPrice: number) => {
+        setForm({
+            name: form.name,
+            price: newPrice,
+        });
+    }
+    const validate = () => {
+        let errors: string[] = validateForm(form);
+        setErrors(errors);
+        return errors.length == 0;
+    }
+    const onSubmit = async () => {
+        if (validate()) {
+            setBusy(true);
+            try {
+                const client = new ProductClient();
+                await client.post({
+                    name: form.name,
+                    price: form.price,
+                })
+                Swal.fire({
+                    title: "Submitted!",
+                    text: "Product is added in database",
+                })
+            } catch (error) {
+
+            } finally {
+                setBusy(false);
+            }
+        }
+    }
+
+    return (
+        <div className="container mx-auto">
+            <h1>Create Product</h1>
+            <Link href="/product/">
+                <a>
+                    <FontAwesomeIcon icon={faArrowLeft} /> Return to index
+                    </a>
+            </Link>
+            <ProductForm
+                name={form.name}
+                price={form.price}
+                busy={busy}
+                onNameChange={onNameChanged}
+                onPriceChange={onPriceChanged}
+                onSubmit={onSubmit} />
+            <ul>
+                <Errors errors={errors}></Errors>
+            </ul>
+        </div>
+    );
+}
+
+export default function CreateProductPage() {
+    return (
+        <Layout title="Create product">
+            <CreateProduct></CreateProduct>
+        </Layout>
+    )
+}

Next/pages/product/edit/[id].tsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { Layout } from '../../shared/Layout';
+import { ProductClient } from '../../../APIClient';
+import Swal from 'sweetalert2';
+import ProductForm from '../../../components/ProductForm';
+import Link from 'next/link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { validateForm } from '../../../lib/product';
+
+function Errors({ errors }) {
+    return errors.map(x => (
+        <li>{x}</li>
+    ));
+}
+
+function EditProduct({ productID }) {
+    if (typeof productID != "string") {
+        return (
+            <div>
+            </div>
+        )
+    }
+    let [form, setForm] = useState({ name: "", price: 0 });
+    let [busy, setBusy] = useState(false);
+    let [errors,setErrors] = useState([""]);
+
+    const getInitialData = async() => {
+        const client = new ProductClient();
+        let data = await client.get(productID);
+        setBusy(false);
+        setForm(
+            {
+                name: data.name,
+                price: data.price,
+            }
+        );
+    }
+    // Startup
+    useEffect(() => {
+        setBusy(true);
+        if (productID) {
+            getInitialData();
+        }
+    }, [productID]);
+
+    const onNameChanged = (newName: string) => {
+        setForm(
+            {
+                name: newName,
+                price: form.price,
+            }
+        );
+    }
+    const onPriceChanged = (newPrice: number) => {
+        setForm({
+            name: form.name,
+            price: newPrice,
+        });
+    }
+    const validate = () => {
+        let errors: string[] = validateForm(form);
+        setErrors(errors);
+        return errors.length == 0;
+    }
+    const onSubmit = async () => {
+        if (validate()) {
+            setBusy(true);
+            try {
+                const client = new ProductClient();
+                await client.put(productID, {
+                    name: form.name,
+                    price: form.price,
+                })
+                Swal.fire({
+                    title: "Submitted!",
+                    text: "Product is modified in database",
+                })
+            } catch (error) {
+
+            } finally {
+                setBusy(false);
+            }
+        }
+    }
+
+    return (
+        <div className="container mx-auto">
+            <h1>Edit Product</h1>
+            <Link href="/product/">
+                <a>
+                    <FontAwesomeIcon icon={faArrowLeft} /> Return to index
+                    </a>
+            </Link>
+            <ProductForm
+                name={form.name}
+                price={form.price}
+                busy={busy}
+                onNameChange={onNameChanged}
+                onPriceChange={onPriceChanged}
+                onSubmit={onSubmit} />
+            <ul>
+                <Errors errors={errors}></Errors>
+            </ul>
+        </div>
+    );
+}
+
+export default function EditProductPage() {
+    const router = useRouter();
+    const id = router.query['id'];
+
+    return (
+        <Layout title="Edit product">
+            <EditProduct productID={id}></EditProduct>
+        </Layout>
+    )
+}

Next/pages/product/index.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import axios from 'axios';
+import { ProductClient, ProductListItem } from '../../APIClient';
+import { Layout } from '../shared/Layout';
+import Swal from 'sweetalert2';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import { DeleteProductProps, ProductDataProps, ProductListRowsProps, ProductState } from '../../lib/product';
+
+const DeleteProductButton: React.FunctionComponent<DeleteProductProps> = ({ productID, onDelete }) => {
+    const onClickDelete = async () => {
+        const result = await Swal.fire({
+            title: 'Confirm delete?',
+            text: 'Delete product?',
+            icon: 'warning',
+            showCancelButton: true,
+        })
+        if (result.isConfirmed) {
+            onDelete(productID);
+        }
+    }
+    return (
+        <button className="btn btn-danger btn-sm" onClick={onClickDelete}>
+            <FontAwesomeIcon icon={faTrash} />
+        </button>
+    );
+}
+const EditProductButton: React.FunctionComponent<ProductDataProps> = ({ productID }) => {
+    const router = useRouter();
+    return (
+        <Link href={`/product/edit/${productID}`}>
+            <a className="btn btn-warning btn-sm">
+                <FontAwesomeIcon icon={faEdit} />
+            </a>
+        </Link>
+    );
+}
+const ProductListItemRows: React.FunctionComponent<ProductListRowsProps> = ({ products, onDelete }) => {
+    let rows = products.map(x => {
+        return (
+            <tr>
+                <td>{x.productID}</td>
+                <td>{x.name}</td>
+                <td>{x.price}</td>
+                <td><EditProductButton productID={x.productID}></EditProductButton></td>
+                <td><DeleteProductButton productID={x.productID} onDelete={onDelete}></DeleteProductButton></td>
+            </tr>
+        );
+    })
+    return (
+        <tbody>
+            {rows}
+        </tbody>
+    )
+}
+class Product extends React.Component<{},ProductState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            product: [],
+        }
+    }
+    async componentDidMount() {
+        this.getProducts();
+    }
+    async getProducts() {
+        try {
+            const client = new ProductClient();
+            let data = await client.getAll();
+            console.log(data);
+            this.setState({
+                product: data
+            });
+        } catch (error) {
+            this.setState({
+                product: [],
+            });
+        }
+    }
+    async deleteProduct(productId) {
+        try {
+            const client = new ProductClient();
+            await client.delete(productId);
+            // Remove the product in the state by filter()ing it
+            let product = this.state.product.filter(x => x.productID != productId);
+            this.setState({
+                product
+            })
+            Swal.fire({
+                title: "Deleted!",
+                text: "Product is deleted in database",
+            })
+        } catch (error) {
+            alert(error);
+        }
+    }
+    render() {
+        return (
+            <div className="container px-4 mx-auto">
+                <h1>Products</h1>
+                <table className="table table-hover table-striped table-sm">
+                    <tr>
+                        <th>ID</th>
+                        <th>Name</th>
+                        <th>Price</th>
+                        <th>Edit</th>
+                        <th>Delete</th>
+                    </tr>
+                    <ProductListItemRows products={this.state.product} onDelete={this.deleteProduct.bind(this)}>
+                    </ProductListItemRows>
+                </table>
+                <Link href="/product/create">
+                    <a className="btn btn-primary btn-large">
+                        Create
+                    </a>
+                </Link>
+            </div>
+        );
+    }
+}
+
+export default function ProductPage() {
+    return (
+        <Layout title="Products">
+            <Product></Product>
+        </Layout>
+    )
+}

Next/pages/shared/Layout.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import Head from 'next/head'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+import 'bootstrap/dist/css/bootstrap.min.css'
+
+const NavLink: React.FunctionComponent<{href: string}> = ({href, children}) => {
+    const router = useRouter();
+    const NavLinkClasses = (active) => {
+        if(active) {
+            return "nav-link active";
+        } else {
+            return "nav-link"
+        }
+    }
+    const NavLinkCurrent = (active) => {
+        if(active) {
+            return "page";
+        } else {
+            return undefined;
+        }
+    }
+    const active = router.pathname == href;
+    
+    return (
+        <li className='nav-item active'>
+            <Link href={href}>
+                <a className={NavLinkClasses(active)} aria-current={NavLinkCurrent(active)}>{children}</a>
+            </Link>
+        </li>
+    );
+}
+
+const NavBar: React.FunctionComponent<{}> = () => {
+  return (
+    <nav className='navbar navbar-expand-lg navbar-light bg-light'>
+      <a className='navbar-brand' href='#'>
+        Navbar
+      </a>
+      <button
+        className='navbar-toggler'
+        type='button'
+        data-toggle='collapse'
+        data-target='#navbarSupportedContent'
+        aria-controls='navbarSupportedContent'
+        aria-expanded='false'
+        aria-label='Toggle navigation'
+      >
+        <span className='navbar-toggler-icon' />
+      </button>
+      <div className='collapse navbar-collapse' id='navbarSupportedContent'>
+        <ul className='navbar-nav mr-auto'>
+            <NavLink href="/">Home</NavLink>
+            <NavLink href="/todo">Todo</NavLink>
+            <NavLink href="/customer">Customer</NavLink>
+            <NavLink href="/product">Product</NavLink>
+        </ul>
+      </div>
+    </nav>
+  )
+}
+export class Layout extends React.Component<{
+  title: string
+}> {
+  render () {
+    return (
+      <div>
+        <Head>
+          <meta name='viewport' content='width=device-width, initial-scale=1' />
+          <title>{this.props.title} - TestAppRuna</title>
+        </Head>
+        <header>
+          <NavBar />
+        </header>
+        <main>{this.props.children}</main>
+        <footer></footer>
+      </div>
+    )
+  }
+}

Next/pages/todo.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { observable, action, makeObservable } from 'mobx';
+import { PropTypes } from 'mobx-react';
+import { Layout } from './shared/Layout';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+interface ToDoListItem {
+    todo: string,
+    checked: boolean,
+}
+
+interface ToDoState {
+    inputText: string,
+    toDoList: ToDoListItem[],
+}
+
+const TodoItem: React.FunctionComponent<{
+    item: ToDoListItem,
+    onRemoveButtonClick: (id) => void
+}> = ({ item, onRemoveButtonClick }) => {
+    let onClick = () => {
+        onRemoveButtonClick(item);
+    }
+    return (
+        <div>
+            <button onClick={onClick}>Remove</button>
+            {item.todo}
+        </div>
+    );
+}
+const TodoList: React.FunctionComponent<{
+    items: ToDoListItem[],
+    onChange?: (item) => void
+}> = ({ items, onChange }) => {
+    const onRemoveButtonClick = (item) => {
+        if(onChange) {
+            onChange(item);
+        }
+    }
+    const listItems = items.map(Q => <TodoItem onRemoveButtonClick={onRemoveButtonClick} item={Q}></TodoItem>)
+    return <div>{listItems}</div>;
+}
+
+
+class Todo extends React.Component<{},ToDoState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            inputText: "",
+            toDoList: [],
+        };
+    }
+    onTextInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.setState({
+            inputText: e.target.value,
+        })
+    };
+    onChange = (item) => {
+        this.setState(
+            {
+                toDoList: this.state.toDoList.filter(x => item.todo != x.todo)
+            }
+        )
+    };
+    addList = () => {
+        this.setState({
+            inputText: "",
+            toDoList: [...this.state.toDoList, {
+                todo: this.state.inputText, checked: false
+            }],
+        })
+    }
+    render() {
+        return (
+            <div>
+
+                <div>
+                    <input value={this.state.inputText} onChange={this.onTextInput}></input>
+                    {this.state.inputText}
+                </div>
+                <button onClick={this.addList}>Add</button>
+                <TodoList onChange={this.onChange} items={this.state.toDoList}></TodoList>
+            </div>
+        );
+    }
+}
+
+export default () => {
+    return <Layout title="Todo"><Todo></Todo></Layout>
+}

TestAppRuna/.vscode/launch.json

@@ -0,0 +1,25 @@
+{
+    // 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": [
+        {
+            "name": ".NET Core Launch (console)",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            "program": "${workspaceFolder}/bin/Debug/net5.0/TestAppRuna.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}",
+            "console": "internalConsole",
+            "stopAtEntry": false
+        },
+        {
+            "name": ".NET Core Attach",
+            "type": "coreclr",
+            "request": "attach",
+            "processId": "${command:pickProcess}"
+        }
+    ]
+}

TestAppRuna/.vscode/tasks.json

@@ -0,0 +1,24 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "build",
+            "command": "dotnet",
+            "type": "shell",
+            "args": [
+                "build",
+                // Ask dotnet build to generate full paths for file names.
+                "/property:GenerateFullPaths=true",
+                // Do not generate summary otherwise it leads to duplicate errors in Problems panel
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "group": "build",
+            "presentation": {
+                "reveal": "silent"
+            },
+            "problemMatcher": "$msCompile"
+        }
+    ]
+}

TestAppRuna/API/CustomerController.cs

@@ -14,7 +14,7 @@ namespace TestAppRuna.API
 {
     [Route("api/[controller]")]
     [ApiController]
-    [Authorize(AuthenticationSchemes = "nanaoaccounts")]
+    // [Authorize("nanaoaccounts")]
     public class CustomerController : ControllerBase
     {
         public CustomerController(ShopDbContext shopDbContext)

TestAppRuna/Startup.cs

@@ -51,6 +51,15 @@ namespace TestAppRuna
                      options.Audience = "testappruna";
                  }  
                 );
+            services.AddCors(options => {
+                options.AddPolicy("BelajarNextJS", policy => {
+                    policy.WithOrigins("http://localhost:3000")
+                    .AllowAnyHeader()
+                    .AllowAnyMethod();
+                });	
+            });
+            services.AddSwaggerDocument(settings => {
+            });
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
@@ -74,10 +83,15 @@ namespace TestAppRuna
             }
             app.UseStaticFiles();
 
-            app.UseOpenApi();
+            app.UseOpenApi(settings => {
+                settings.DocumentName =  "v1";
+                settings.Path = "/swagger/v1/swagger.json";
+            });
+
             app.UseSwaggerUi3(settings =>
             {
                 settings.DocumentTitle = "TestAppRuna";
+                settings.DocumentPath = "/swagger/v1/swagger.json";
             });
 
             app.UseRouting();
@@ -85,6 +99,8 @@ namespace TestAppRuna
             app.UseAuthentication();
             app.UseAuthorization();
 
+            app.UseCors("BelajarNextJS");
+
             app.UseEndpoints(endpoints =>
             {
                 endpoints.MapDefaultControllerRoute();

TestAppRuna/TestAppRuna.csproj

@@ -6,6 +6,7 @@
 
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="5.0.4" />
+    <PackageReference Include="Microsoft.AspNetCore.Cors" Version="2.2.0" />
     <PackageReference Include="NSwag.AspNetCore" Version="13.10.8" />
     <PackageReference Include="Serilog.AspNetCore" Version="4.0.0" />
     <PackageReference Include="Serilog.Formatting.Compact" Version="1.1.0" />

package.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "react-fontawesome": "^1.7.1",
+    "sweetalert2": "^10.15.6",
+    "validate.js": "^0.13.1"
+  }
+}

yarn.lock

@@ -0,0 +1,51 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+prop-types@^15.5.6:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
+react-fontawesome@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/react-fontawesome/-/react-fontawesome-1.7.1.tgz#f74f5a338fef3ee3b379820109c1cba47290f035"
+  integrity sha512-kottReWW1I9Uupub6A5YX4VK7qfpFnEjAcm5zB4Aepst7iofONT27GJYdTcRsj7q5uQu9PXBL7GsxAFKANNUVg==
+  dependencies:
+    prop-types "^15.5.6"
+
+react-is@^16.8.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+sweetalert2@^10.15.6:
+  version "10.15.6"
+  resolved "https://registry.yarnpkg.com/sweetalert2/-/sweetalert2-10.15.6.tgz#8fe309af76543f7d8151a2e57a226f1cceb51a4e"
+  integrity sha512-elLyVvVwBBsgkT0NrxiiVuEv077gqGhm7WEdBjXRHN+TOX+MoC4LpDW2kbdSeJtjjU1sPdqGKfGLoJElIXfVWA==
+
+validate.js@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/validate.js/-/validate.js-0.13.1.tgz#b58bfac04a0f600a340f62e5227e70d95971e92a"
+  integrity sha512-PnFM3xiZ+kYmLyTiMgTYmU7ZHkjBZz2/+F0DaALc/uUtVzdCt1wAosvYJ5hFQi/hz8O4zb52FQhHZRC+uVkJ+g==