feat: fetch data from json, block multiple login register

EGUI/lab3/data/db.json

@@ -1,170 +1,207 @@
 {
   "posts": [
     {
-      "title": "JSON SERVER",
+      "mail": "",
-      "author": "foo",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 1
     },
     {
-      "title": "REACT",
+      "mail": "",
-      "author": "facebook",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 2
     },
     {
-      "title": "BOOTSTRAP",
+      "mail": "test@test",
-      "author": "css master",
+      "login": "test@test",
+      "blogTitle": "test@test",
+      "password": "test@test",
       "id": 3
     },
     {
-      "title": "MEDIUM",
+      "mail": "",
-      "author": "medium",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 4
     },
     {
-      "title": "test",
+      "mail": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 5
     },
     {
-      "title": "test",
+      "mail": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 6
     },
     {
-      "title": "test",
+      "mail": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 7
     },
     {
-      "title": "test",
+      "mail": "test@test",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 8
     },
     {
-      "title": "test",
+      "mail": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 9
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 10
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 11
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 12
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 13
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 14
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 15
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 16
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 17
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 18
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 19
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 20
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 21
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 22
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 23
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 24
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 25
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 26
     },
     {
-      "title": "",
+      "mail": "",
-      "author": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 27
     },
     {
+      "mail": "",
+      "login": "",
+      "blogTitle": "",
+      "password": "",
       "id": 28
     },
     {
+      "mail": "",
+      "login": "test@test",
+      "blogTitle": "",
+      "password": "",
       "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/src/routes/register.jsx

@@ -10,7 +10,10 @@ export default class Register extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-            inputValue: 'test'
+      mail: "",
+      login: "",
+      blogTitle: "",
+      password: "",
       };
   }
       
@@ -18,32 +21,41 @@ export default class Register extends React.Component {
     return (
         <div>
         <div>
-              { this.state.inputValue }
+        { this.state.mail }
         </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} 
+          value={this.state.mail} 
-                onChange={evt => this.updateInputValue(evt)}
+          onChange={evt => this.updateMail(evt)}
             />
           </Form.Group>
           
           <Form.Group className="mb-3" controlId="formLogin">
           <Form.Label>Login</Form.Label>
-                <Form.Control type="login" placeholder="Enter Login" />
+          <Form.Control type="login" placeholder="Enter Login" 
+          value={this.state.login} 
+          onChange={evt => this.updateLogin(evt)}
+            />
           
           </Form.Group>
           <Form.Group className="mb-3" controlId="formBlogTitle">
           <Form.Label>Blog Title</Form.Label>
-                <Form.Control type="blogTitle" placeholder="Enter Blog Title" />
+          <Form.Control type="blogTitle" placeholder="Enter Blog Title" 
+          value={this.state.blogTitle} 
+          onChange={evt => this.updateBlogTitle(evt)}
+          />
           </Form.Group>
           
           <Form.Group className="mb-3" controlId="formPassword">
           <Form.Label>Password</Form.Label>
-                <Form.Control type="password" placeholder="Enter Password" />
+          <Form.Control type="password" placeholder="Enter Password" 
+          value={this.state.password} 
+          onChange={evt => this.updatePassword(evt)}
+          />
       </Form.Group>
-            <Button variant="primary" type="submit" onClick={() => this.registerUser()}>
+      <Button variant="primary" type="submit" onClick={async () =>  this.registerUser()}>
           Submit
       </Button>
   </Form>
@@ -51,29 +63,59 @@ export default class Register extends React.Component {
     );
   }
       
-        updateInputValue(evt) {
+  updateMail(evt) {
     const val = evt.target.value;
     // ...       
     this.setState({
-            inputValue: val
+      mail: val
     });
   }
 
-        registerUser() {
+  updateLogin(evt) {
-            alert(this.state.inputValue);
+    const val = evt.target.value;
+    // ...       
+    this.setState({
+      login: val
+    });
+  }
 
-            console.log("anything");
+  updateBlogTitle(evt) {
+    const val = evt.target.value;
+    // ...       
+    this.setState({
+      blogTitle: val
+    });
+  }
+
+  updatePassword(evt) {
+    const val = evt.target.value;
+    // ...       
+    this.setState({
+      password: val
+    });
+  }
+
+  async registerUser() {
+    const fetchAddress = "http://localhost:8000/posts/?login=" + this.state.login;
     // console.log(this.state.inputValue);
-            const test = {
+    const response = await fetch(fetchAddress, 
-                title: this.state.inputValue,
+    { 
-                author: "test"
+      method: "GET",
-              };
+    });
-            fetch("http://localhost:8000/posts", {
+    const allData = await response.json();
+    console.log(allData.length);
+    if(allData.length !== 0)
+    {
+      alert("This login: \"" + this.state.login + "\" is already taken!");
+      return;
+    } 
+    await fetch("http://localhost:8000/posts", {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
         },
-                body: JSON.stringify(test)
+        body: JSON.stringify(this.state)
       }).then(data => console.log(data));
+
     };
 }