feat: fetch data from json, block multiple login register

This commit is contained in:
PolishPigeon 2022-06-11 13:51:11 +02:00
parent cd60cc258a
commit 2d599a2b8e
2 changed files with 223 additions and 144 deletions

View File

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

View File

@ -7,73 +7,115 @@ import React from 'react';
export default class Register extends React.Component { export default class Register extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
inputValue: 'test' mail: "",
}; login: "",
} blogTitle: "",
password: "",
};
}
render() { render() {
return ( return (
<div> <div>
<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}
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> </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.mail}
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"
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"
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"
value={this.state.password}
onChange={evt => this.updatePassword(evt)}
/>
</Form.Group>
<Button variant="primary" type="submit" onClick={async () => this.registerUser()}>
Submit
</Button>
</Form>
</div>
);
}
updateInputValue(evt) { updateMail(evt) {
const val = evt.target.value; const val = evt.target.value;
// ... // ...
this.setState({ this.setState({
inputValue: val mail: val
}); });
} }
registerUser() { updateLogin(evt) {
alert(this.state.inputValue); const val = evt.target.value;
// ...
console.log("anything"); this.setState({
// console.log(this.state.inputValue); login: val
const test = { });
title: this.state.inputValue, }
author: "test"
}; updateBlogTitle(evt) {
fetch("http://localhost:8000/posts", { const val = evt.target.value;
method: "POST", // ...
headers: { this.setState({
"Content-Type": "application/json" blogTitle: val
}, });
body: JSON.stringify(test) }
}).then(data => console.log(data));
}; 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 response = await fetch(fetchAddress,
{
method: "GET",
});
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(this.state)
}).then(data => console.log(data));
};
} }