feat: add routing, database saving, forms, button

EGUI/lab3/data/db.json

@@ -0,0 +1,170 @@
+{
+  "posts": [
+    {
+      "title": "JSON SERVER",
+      "author": "foo",
+      "id": 1
+    },
+    {
+      "title": "REACT",
+      "author": "facebook",
+      "id": 2
+    },
+    {
+      "title": "BOOTSTRAP",
+      "author": "css master",
+      "id": 3
+    },
+    {
+      "title": "MEDIUM",
+      "author": "medium",
+      "id": 4
+    },
+    {
+      "title": "test",
+      "id": 5
+    },
+    {
+      "title": "test",
+      "id": 6
+    },
+    {
+      "title": "test",
+      "id": 7
+    },
+    {
+      "title": "test",
+      "id": 8
+    },
+    {
+      "title": "test",
+      "id": 9
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 10
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 11
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 12
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 13
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 14
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 15
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 16
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 17
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 18
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 19
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 20
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 21
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 22
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 23
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 24
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 25
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 26
+    },
+    {
+      "title": "",
+      "author": "",
+      "id": 27
+    },
+    {
+      "id": 28
+    },
+    {
+      "id": 29
+    },
+    {
+      "id": 30
+    },
+    {
+      "id": 31
+    },
+    {
+      "id": 32
+    },
+    {
+      "id": 33
+    },
+    {
+      "id": 34
+    },
+    {
+      "title": "test",
+      "author": "test",
+      "id": 35
+    },
+    {
+      "title": "test",
+      "author": "test",
+      "id": 36
+    },
+    {
+      "title": "test@test",
+      "author": "test",
+      "id": 37
+    }
+  ]
+}

EGUI/lab3/package.json

@@ -6,8 +6,12 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.1.3",
+    "json-server": "^0.17.0",
     "react": "^18.1.0",
+    "react-bootstrap": "^2.4.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

EGUI/lab3/public/manifest.json

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

EGUI/lab3/src/App.js

@@ -0,0 +1,34 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import Container from 'react-bootstrap/Container';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import {
+    Outlet,
+} from "react-router-dom";
+import React from 'react';
+
+export default function App() {
+    return (
+        <div>
+    <Navbar bg="light" expand="lg">
+    <Container>
+        <Navbar.Brand href="/">Lab 3</Navbar.Brand>
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Collapse id="basic-navbar-nav">
+        <Nav className="me-auto">
+            <Nav.Link href="/">Home</Nav.Link>
+            <Nav.Link href="/register">Register</Nav.Link>
+            <Nav.Link href="/login">Login</Nav.Link>
+            <Nav.Link href="/blog">Blog</Nav.Link>
+        </Nav>
+        </Navbar.Collapse>
+    </Container>
+
+    </Navbar>
+    <Outlet />
+    </div>
+
+    );
+  }
+  

EGUI/lab3/src/index.js

@@ -1,14 +1,24 @@
-import './index.css';
+import {
+    BrowserRouter,
+    Route,
+    Routes,
+} from "react-router-dom";
 
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import App from "./App";
+import Blog from "./routes/blog";
+import Login from "./routes/login";
+import ReactDOM from "react-dom/client";
+import Register from "./routes/register";
 
-class MainPage extends React.Component {
-    render()
-    {
-        return
-    }
-}
-
-const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(<MainPage />);
+const root = ReactDOM.createRoot(
+  document.getElementById("root")
+);
+root.render(  <BrowserRouter>
+        <Routes>
+      <Route path="/" element={<App />} >
+            <Route path="register" element={<Register />} />
+            <Route path="login" element={<Login />} />
+            <Route path="blog" element={<Blog />} />
+        </Route>
+    </Routes>
+  </BrowserRouter>);

EGUI/lab3/src/routes/blog.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default class Blog extends React.Component {
+    render() {
+      return (
+          <div> hello </div>
+      );
+    }
+  }

EGUI/lab3/src/routes/login.jsx

@@ -0,0 +1,22 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+
+export default function Login() {
+    return (
+<Form>
+  <Form.Group className="mb-3" controlId="formLogin">
+    <Form.Label>Login</Form.Label>
+    <Form.Control type="login" placeholder="Enter Login" />
+  </Form.Group>
+  <Form.Group className="mb-3" controlId="formBasicEmail">
+    <Form.Label>Password</Form.Label>
+    <Form.Control type="password" placeholder="Enter Password" />
+  </Form.Group>
+  <Button variant="primary" type="submit">
+    Submit
+  </Button>
+  </Form>
+    );
+  }

EGUI/lab3/src/routes/register.jsx

@@ -0,0 +1,79 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
+import React from 'react';
+
+export default class Register extends React.Component {
+
+
+        constructor(props) {
+          super(props);
+          this.state = {
+            inputValue: 'test'
+          };
+        }
+      
+        render() {
+          return (
+              <div>
+              <div>
+              { this.state.inputValue }
+              </div>
+            <Form>
+            <Form.Group className="mb-3" controlId="formBasicEmail">
+                <Form.Label>Email address</Form.Label>
+                <Form.Control type="email" placeholder="Enter email"
+                value={this.state.inputValue} 
+                onChange={evt => this.updateInputValue(evt)}
+                 />
+                </Form.Group>
+                
+                <Form.Group className="mb-3" controlId="formLogin">
+                <Form.Label>Login</Form.Label>
+                <Form.Control type="login" placeholder="Enter Login" />
+                
+                </Form.Group>
+                <Form.Group className="mb-3" controlId="formBlogTitle">
+                <Form.Label>Blog Title</Form.Label>
+                <Form.Control type="blogTitle" placeholder="Enter Blog Title" />
+                </Form.Group>
+                
+                <Form.Group className="mb-3" controlId="formPassword">
+                <Form.Label>Password</Form.Label>
+                <Form.Control type="password" placeholder="Enter Password" />
+            </Form.Group>
+            <Button variant="primary" type="submit" onClick={() => this.registerUser()}>
+                Submit
+            </Button>
+        </Form>
+        </div>
+          );
+        }
+      
+        updateInputValue(evt) {
+          const val = evt.target.value;
+          // ...       
+          this.setState({
+            inputValue: val
+          });
+        }
+
+        registerUser() {
+            alert(this.state.inputValue);
+            
+            console.log("anything");
+            // console.log(this.state.inputValue);
+            const test = {
+                title: this.state.inputValue,
+                author: "test"
+              };
+            fetch("http://localhost:8000/posts", {
+                method: "POST",
+                headers: {
+                  "Content-Type": "application/json"
+                },
+                body: JSON.stringify(test)
+              }).then(data => console.log(data));
+        };
+}