For quiz

.vscode/launch.json

@@ -2,13 +2,19 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "command": "yarn dev",
-            "name": "Next.js",
+            "type": "node",
             "request": "launch",
+            "name": "Next",
+            "runtimeExecutable": "yarn",
             "cwd": "${workspaceFolder}/Next",
-            "type": "node-terminal"
+            "runtimeArgs": [
+                "dev"
+            ],
+            "port": 9229,
+            "skipFiles": [
+                "<node_internals>/**"
+            ]
         },
-        
         {
             "name": "TestAppRuna",
             "type": "coreclr",

Next/APIClient.ts

@@ -664,8 +664,8 @@ export interface CartDeleteModel {
 
 export interface CustomerListItem {
     customerID: string;
-    name?: string | undefined;
-    email?: string | undefined;
+    name: string;
+    email: string;
 }
 
 export interface CustomerCreateUpdateModel {
@@ -675,7 +675,7 @@ export interface CustomerCreateUpdateModel {
 
 export interface ProductListItem {
     productID: string;
-    name?: string | undefined;
+    name: string;
     price: number;
 }
 

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/interfaces/product.ts

@@ -0,0 +1,23 @@
+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,
+}

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

@@ -35,6 +35,7 @@ const CustomerListItemRows: React.FunctionComponent<{
     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>
@@ -87,6 +88,7 @@ class Customer extends React.Component<{}, { customer: CustomerListItem[] }> {
         return (
             <table className="table table-hover table-striped table-sm">
                 <tr>
+                    <th>ID</th>
                     <th>Name</th>
                     <th>Email</th>
                 </tr>

Next/pages/product/create.tsx

@@ -0,0 +1,116 @@
+import React, { ChangeEvent } from 'react';
+import { Layout } from '../shared/Layout';
+import { ProductClient } from '../../APIClient';
+import Swal from 'sweetalert2';
+import ProductForm from '../../components/ProductForm';
+import Errors from '../../components/Errors';
+import Link from 'next/link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { ProductFormState } from '../../interfaces/product';
+
+class CreateProduct extends React.Component<{}, ProductFormState> {
+    constructor(props) {
+        super(props)
+        this.state = {
+            form: {
+                name: "",
+                price: 0,
+            },
+            errors: [],
+            busy: false,
+        }
+    }
+    onNameChanged(newName) {
+        this.setState({
+            form: {
+                name: newName,
+                price: this.state.form.price,
+            }
+        });
+    }
+    onPriceChanged(newPrice) {
+        this.setState({
+            form: {
+                name: this.state.form.name,
+                price: newPrice
+            }
+        });
+    }
+    async validate() {
+        let errors: string[] = [];
+        if (!this.state.form.name) {
+            errors.push("Name required");
+        }
+        if (!this.state.form.price) {
+            errors.push("Price required");
+        }
+        await new Promise((resolve) => {
+            this.setState({
+                errors
+            }, () => resolve(undefined));
+        })
+        return errors.length == 0;
+    }
+    async onSubmit() {
+        if (await this.validate()) {
+            await new Promise((resolve) => {
+                this.setState({
+                    busy: true,
+                }, () => resolve(undefined));
+            })
+            try {
+                const form = this.state.form;
+                const client = new ProductClient();
+                await client.post({
+                    name: form.name,
+                    price: form.price,
+                })
+                Swal.fire({
+                    title: "Submitted!",
+                    text: "Product is now in database",
+                })
+            } catch (error) {
+
+            } finally {
+                await new Promise((resolve) => {
+                    this.setState({
+                        busy: false,
+                    }, () => resolve(undefined));
+                })
+
+            }
+        }
+    }
+    render() {
+        return (
+            <div className="container mx-auto">
+                <h1>Create Product</h1>
+                <Link href="/product/">
+                    <a>
+                        <FontAwesomeIcon icon={faArrowLeft} /> Return to index
+                    </a>
+                </Link>
+                <ProductForm
+                    name={this.state.form.name}
+                    price={this.state.form.price}
+                    busy={this.state.busy}
+                    onNameChange={this.onNameChanged.bind(this)}
+                    onPriceChange={this.onPriceChanged.bind(this)}
+                    onSubmit={this.onSubmit.bind(this)} />
+                <ul>
+                    <Errors errors={this.state.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,152 @@
+import React, { ChangeEvent } from 'react';
+import { withRouter, NextRouter, 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 { ProductDataProps, ProductFormState } from '../../../interfaces/product';
+
+function Errors({ errors }) {
+    return errors.map(x => (
+        <li>{x}</li>
+    ));
+}
+class EditProduct extends React.Component<ProductDataProps,ProductFormState> {
+    constructor(props) {
+        super(props)
+        const id = props.productID;
+        this.state = {
+            form: {
+                name: "",
+                price: 0,
+            },
+            errors: [],
+            busy: false,
+        }
+    }
+    async componentDidMount() {
+        const client = new ProductClient();
+        await new Promise((resolve) => {
+            this.setState({
+                busy: true,
+            }, () => resolve(undefined));
+        })
+        if (this.props.productID) {
+            let data = await client.get(this.props.productID);
+            await new Promise((resolve) => {
+                this.setState({
+                    busy: false,
+                }, () => resolve(undefined));
+            })
+            this.setState({
+                form: {
+                    name: data.name,
+                    price: data.price,
+                }
+            });
+        }
+    }
+    onNameChanged(newName: string) {
+        this.setState({
+            form: {
+                name: newName,
+                price: this.state.form.price,
+            }
+        });
+    }
+    onPriceChanged(newPrice: number) {
+        this.setState({
+            form: {
+                name: this.state.form.name,
+                price: newPrice,
+            }
+        });
+    }
+    async validate() {
+        let errors: string[] = [];
+        if (!this.state.form.name) {
+            errors.push("Name required");
+        }
+        if (!this.state.form.price) {
+            errors.push("Email required");
+        }
+        await new Promise((resolve) => {
+            this.setState({
+                errors
+            }, () => resolve(undefined));
+        })
+        return errors.length == 0;
+    }
+    async onSubmit() {
+        if (await this.validate()) {
+            await new Promise((resolve) => {
+                this.setState({
+                    busy: true,
+                }, () => resolve(undefined));
+            })
+            try {
+                const form = this.state.form;
+                const client = new ProductClient();
+                await client.put(this.props.productID, {
+                    name: form.name,
+                    price: form.price,
+                })
+                Swal.fire({
+                    title: "Submitted!",
+                    text: "Product is modified in database",
+                })
+            } catch (error) {
+
+            } finally {
+                await new Promise((resolve) => {
+                    this.setState({
+                        busy: false,
+                    }, () => resolve(undefined));
+                })
+
+            }
+        }
+    }
+    render() {
+        if (typeof this.props.productID != "string") {
+            return (
+                <div>
+                </div>
+            )
+        }
+        return (
+            <div className="container mx-auto">
+                <h1>Edit Product</h1>
+                <Link href="/product/">
+                    <a>
+                        <FontAwesomeIcon icon={faArrowLeft} /> Return to index
+                    </a>
+                </Link>
+                <ProductForm
+                    name={this.state.form.name}
+                    price={this.state.form.price}
+                    busy={this.state.busy}
+                    onNameChange={this.onNameChanged.bind(this)}
+                    onPriceChange={this.onPriceChanged.bind(this)}
+                    onSubmit={this.onSubmit.bind(this)} />
+                <ul>
+                    <Errors errors={this.state.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 '../../interfaces/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>
+    )
+}