25/3/2021

Next/.babelrc

@@ -1,17 +0,0 @@
-{
-    "presets": ["next/babel"],
-    "plugins": [
-        [
-            "@babel/plugin-proposal-decorators",
-            {
-                "legacy": true
-            }
-        ],
-        [
-            "@babel/plugin-proposal-class-properties",
-            {
-                "loose": false
-            }
-        ]
-    ]
-}

Next/package.json

@@ -12,6 +12,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "axios": "^0.21.1",
+    "bootstrap": "^5.0.0-beta3",
     "mobx": "^6.1.8",
     "mobx-react": "^7.1.0",
     "next": "^10.0.9",
@@ -24,6 +26,7 @@
     "@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.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import axios from 'axios';
+
+import { Layout } from './shared/Layout';
+
+interface CustomerListItem {
+    customerID: string;
+    name: string;
+    email: string;
+}
+function RenderCustomerListItemRows(customers: CustomerListItem[]) {
+    let rows = customers.map(x => {
+        return (
+            <tr>
+                <td>{x.name}</td>
+                <td>{x.email}</td>
+            </tr>
+        );
+    })
+    return (
+        <tbody>
+            {rows}
+        </tbody>
+    )
+}
+class Customer extends React.Component<{}, {customer: CustomerListItem[] }> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            customer: [],
+        }
+    }
+    async componentDidMount() {
+        try {
+            let data = await axios.get<CustomerListItem[]>("http://localhost:5000/api/customer");0
+            console.log(data.data);
+            this.setState({
+                customer: data.data
+            });
+        } catch (error) {
+            this.setState({
+                customer: [],
+            });
+        }
+    }
+    render() {
+        return (
+            <table className="table table-hover table-striped table-sm">
+                <tr>
+                    <th>Name</th>
+                    <th>Email</th>
+                </tr>
+                {RenderCustomerListItemRows(this.state.customer)}
+            </table>
+        );
+    }
+}
+
+export default function CustomerPage() {
+    return (
+        <Layout title="Customers">
+            <Customer></Customer>
+        </Layout>
+    )
+}

Next/pages/index.tsx

@@ -1,24 +1,37 @@
 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';
 
-@observer class Index extends React.Component {
+class Index extends React.Component {
-    @observable x: number = 0;
+    x: number = 0;
 
     constructor(props) {
         super(props);
+        makeObservable(this, {
+            x: observable,
+            clickMe: action,
+        })
     }
 
-    @action
     clickMe() {
         this.x += 1;
     }
 
     render() {
         return (
-            <button onClick={this.clickMe.bind(this)}>{this.x}</button>
+            <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/shared/Layout.tsx

@@ -0,0 +1,79 @@
+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 null;
+        }
+    }
+    const active = router.pathname == href;
+    
+    return (
+        <li className='nav-item active'>
+            <Link href={href}>
+                <a className={NavLinkClasses(active)} aria-current={NavLinkCurrent}>{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>
+        </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>
+}

Next/tsconfig.json

@@ -23,8 +23,7 @@
       "resolveJsonModule": true,
       "isolatedModules": true,
       "jsx": "preserve",
-      "esModuleInterop": true,
+      "esModuleInterop": true
-      "experimentalDecorators": true
   },
   "include": [
       "next-env.d.ts",

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,6 @@ namespace TestAppRuna.API
 {
     [Route("api/[controller]")]
     [ApiController]
-    [Authorize(AuthenticationSchemes = "nanaoaccounts")]
     public class CustomerController : ControllerBase
     {
         public CustomerController(ShopDbContext shopDbContext)

TestAppRuna/Startup.cs

@@ -51,6 +51,11 @@ namespace TestAppRuna
                      options.Audience = "testappruna";
                  }  
                 );
+            services.AddCors(options => {
+                options.AddPolicy("BelajarNextJS", policy => {
+                    policy.WithOrigins("http://localhost:3000");
+                });	
+            });
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
@@ -85,6 +90,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

@@ -1,5 +0,0 @@
-{
-	"devDependencies": {
-		"tslib": "^2.1.0"
-	}
-}

pnpm-lock.yaml

@@ -1,10 +0,0 @@
-devDependencies:
-  tslib: 2.1.0
-lockfileVersion: 5.2
-packages:
-  /tslib/2.1.0:
-    dev: true
-    resolution:
-      integrity: sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
-specifiers:
-  tslib: ^2.1.0