diff --git a/Next/.babelrc b/Next/.babelrc
deleted file mode 100644
index f5499a4..0000000
--- a/Next/.babelrc
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "presets": ["next/babel"],
- "plugins": [
- [
- "@babel/plugin-proposal-decorators",
- {
- "legacy": true
- }
- ],
- [
- "@babel/plugin-proposal-class-properties",
- {
- "loose": false
- }
- ]
- ]
-}
\ No newline at end of file
diff --git a/Next/package.json b/Next/package.json
index 3329cd5..4af4505 100644
--- a/Next/package.json
+++ b/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"
}
}
diff --git a/Next/pages/customer.tsx b/Next/pages/customer.tsx
new file mode 100644
index 0000000..949162a
--- /dev/null
+++ b/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 (
+
+ | {x.name} |
+ {x.email} |
+
+ );
+ })
+ return (
+
+ {rows}
+
+ )
+}
+class Customer extends React.Component<{}, {customer: CustomerListItem[] }> {
+ constructor(props) {
+ super(props);
+ this.state = {
+ customer: [],
+ }
+ }
+ async componentDidMount() {
+ try {
+ let data = await axios.get("http://localhost:5000/api/customer");0
+ console.log(data.data);
+ this.setState({
+ customer: data.data
+ });
+ } catch (error) {
+ this.setState({
+ customer: [],
+ });
+ }
+ }
+ render() {
+ return (
+
+
+ | Name |
+ Email |
+
+ {RenderCustomerListItemRows(this.state.customer)}
+
+ );
+ }
+}
+
+export default function CustomerPage() {
+ return (
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/Next/pages/index.tsx b/Next/pages/index.tsx
index 2f5e1f5..dfaf672 100644
--- a/Next/pages/index.tsx
+++ b/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 {
- @observable x: number = 0;
+class Index extends React.Component {
+ x: number = 0;
constructor(props) {
super(props);
+ makeObservable(this, {
+ x: observable,
+ clickMe: action,
+ })
}
- @action
clickMe() {
this.x += 1;
}
render() {
return (
-
+
+
+ Go to Todo
+
);
}
}
-export default Index;
\ No newline at end of file
+
+export default function IndexPage() {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/Next/pages/shared/Layout.tsx b/Next/pages/shared/Layout.tsx
new file mode 100644
index 0000000..6d1a3d5
--- /dev/null
+++ b/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 (
+
+
+ {children}
+
+
+ );
+}
+
+const NavBar: React.FunctionComponent<{}> = () => {
+ return (
+
+ )
+}
+export class Layout extends React.Component<{
+ title: string
+}> {
+ render () {
+ return (
+
+
+
+
{this.props.title} - TestAppRuna
+
+
+ {this.props.children}
+
+
+ )
+ }
+}
diff --git a/Next/pages/todo.tsx b/Next/pages/todo.tsx
new file mode 100644
index 0000000..431abd7
--- /dev/null
+++ b/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 (
+
+
+ {item.todo}
+
+ );
+}
+const TodoList: React.FunctionComponent<{
+ items: ToDoListItem[],
+ onChange?: (item) => void
+}> = ({ items, onChange }) => {
+ const onRemoveButtonClick = (item) => {
+ if(onChange) {
+ onChange(item);
+ }
+ }
+ const listItems = items.map(Q => )
+ return {listItems}
;
+}
+
+
+class Todo extends React.Component<{},ToDoState> {
+ constructor(props) {
+ super(props);
+ this.state = {
+ inputText: "",
+ toDoList: [],
+ };
+ }
+ onTextInput = (e: React.ChangeEvent) => {
+ 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 (
+
+
+
+
+ {this.state.inputText}
+
+
+
+