Commit 3424e984 authored by Mohammad Javad Ghasemy's avatar Mohammad Javad Ghasemy 🦈

my job with react is almost done

parent b87035ed
......@@ -9,20 +9,38 @@ export default class BookDetail extends React.Component {
constructor(props) {
super(props);
this.props = props;
this.state = {};
this.state = {
};
}
render() {
return (
<div>
<br />
<Row>
<Col span={12}>
</Col>
<Col span={12}>
</Col>
<img src={this.props.book.picture} />
</Row>
{
(typeof this.props.book.detail === typeof []) ?
this.props.book.detail.map((element, i) => {
<Row key={i}>
{console.log(element.title)}
<Col span={10} offset={2}>
<h6>{element.title}</h6>
</Col>
<Col span={10} offset={1}>
<h6>{element.content}</h6>
</Col>
</Row>
})
:
<center>
{console.log(this.props.book.detail)}
<h1>HI</h1>
</center>
}
</div>
);
}
......
import React from 'react';
import {
Layout, Row, Col,
Form, Input, Button, Checkbox,
} from 'antd';
import BookDetail from './NewBook/BookDetail';
export default class NewBook extends React.Component {
constructor(props) {
super(props);
this.props = props;
this.state = {};
this.state = {
book: {
picture: "",
detail: []
},
isbn: "",
checkStatus: false,
disableSubmit: true
};
this.onIsbnChange = this.onIsbnChange.bind(this);
this.onCheck = this.onCheck.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.onReset = this.onReset.bind(this);
}
onCheck(e) {
if (this.state.isbn == "") {
return null;
}
fetch('api/book/search_book_by_isbn/' + this.state.isbn, {
method: 'get',
/* headers are important*/
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
})
.then(res => { return res.json(); })
.then(book => {
console.log("there");
if (typeof book.ok === typeof true && book.ok === true)
this.setState({ book: book, disableSubmit: false });
else
console.log(book);
})
.catch(err => console.log(err));
}
onSubmit(e) {
if (!this.state.checkStatus)
return null;
fetch('api/books/', {
method: 'post',
/* headers are important*/
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ isbn: this.state.isbn })
})
.then(res => { return res.json(); })
.then(book => {
console.log(book)
})
.catch(err => console.log(err));
}
onReset(e) {
this.setState({ isbn: "" });
}
onIsbnChange(e) {
this.setState({ isbn: e.target.value });
}
render() {
return (
<div>
</div>
<Row>
<Col span={10} offset={2}>
<BookDetail book={this.state.book} />
</Col>
<Col span={10}>
<br /><br /><br />
<Form
layout="horizontal"
>
<Form.Item label="شابک">
<Input value={this.state.isbn} onChange={this.onIsbnChange} placeholder="964-7956-27-0" />
</Form.Item>
<Form.Item >
<Button onClick={this.onCheck} type="primary">Cehck</Button>&nbsp;
<Button onClick={this.onSubmit} type="primary" disabled={this.state.disableSubmit}>Submit</Button>&nbsp;
<Button onClick={this.onReset} type="danger">Refresh</Button>
</Form.Item>
</Form>
</Col>
</Row>
</div >
);
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment