Skip to content

Commit ab34989

Browse files
sunzid02sunzid02
committed
assignment 3 before
1 parent 6f25ec2 commit ab34989

File tree

2 files changed

+335
-4
lines changed

2 files changed

+335
-4
lines changed

‎confusion/src/components/CommentFormComponent.js‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import React, { Component } from 'react';
2+
3+
import {
4+
Button, Modal, ModalBody, ModalHeader, Label, Row, Col
5+
} from "reactstrap";
6+
7+
import { Control, LocalForm, Errors } from 'react-redux-form';
8+
9+
//// validators
10+
const required = (val) => val && val.length; //value > 0
11+
const maxLength = (len) => (val) => !(val) || (val.length <= len);
12+
const minLength = (len) => (val) => (val) && (val.length >= len);
13+
14+
class CommentForm extends Component{
15+
16+
constructor(props) {
17+
super(props);
18+
19+
20+
this.state = {
21+
isCommentFormModalOpen: false
22+
};
23+
24+
this.toggleCommentFormModal = this.toggleCommentFormModal.bind(this);
25+
this.handleCommentFormSubmit = this.handleCommentFormSubmit.bind(this);
26+
27+
}
28+
29+
handleCommentFormSubmit(values) {
30+
console.log("Current State is: " + JSON.stringify(values));
31+
alert("Current State is: " + JSON.stringify(values));
32+
33+
34+
}
35+
36+
toggleCommentFormModal() {
37+
this.setState({
38+
isCommentFormModalOpen: !this.state.isCommentFormModalOpen
39+
});
40+
}
41+
42+
43+
render(){
44+
return(
45+
<React.Fragment>
46+
<Button outline onClick={this.toggleCommentFormModal}>
47+
<span className="fa fa-comments fa-lg"></span> Submit Comment
48+
</Button>
49+
50+
51+
{/* commentform Modal */}
52+
<Modal isOpen={this.state.isCommentFormModalOpen} toggle={this.toggleCommentFormModal} >
53+
<ModalHeader toggle={this.toggleCommentFormModal}> Submit Comment </ModalHeader>
54+
<ModalBody>
55+
56+
<LocalForm onSubmit={(values) => this.handleCommentFormSubmit(values)}>
57+
58+
{/* rating */}
59+
<Row className="form-group">
60+
<Label htmlFor="rating" md={12} >Rating</Label>
61+
<Col md={12}>
62+
<Control.select model=".rating"
63+
className="form-control"
64+
name="rating"
65+
id="rating"
66+
validators={{
67+
required
68+
}}
69+
>
70+
<option>Please Select</option>
71+
<option>1</option>
72+
<option>2</option>
73+
<option>3</option>
74+
<option>4</option>
75+
<option>5</option>
76+
</Control.select>
77+
<Errors
78+
className="text-danger"
79+
model=".author"
80+
show="touched"
81+
messages={{
82+
required: 'Required',
83+
}}
84+
/>
85+
</Col>
86+
</Row>
87+
88+
89+
{/* author */}
90+
<Row className="form-group">
91+
<Label htmlFor="author" md={12}> Your Name </Label>
92+
<Col md={12}>
93+
<Control.text model=".author" id="author" name="author"
94+
placeholder="First Name"
95+
className="form-control"
96+
validators={{
97+
required, minLength: minLength(3), maxLength: maxLength(15)
98+
}}
99+
/>
100+
<Errors
101+
className="text-danger"
102+
model=".author"
103+
show="touched"
104+
messages={{
105+
required: 'Required',
106+
minLength: 'Must be greater than 2 characters',
107+
maxLength: 'Must be 15 characters or less'
108+
}}
109+
/>
110+
</Col>
111+
</Row>
112+
113+
114+
115+
116+
{/* comment */}
117+
<Row className="form-group">
118+
<Label htmlFor="comment" md={12}>Comment</Label>
119+
<Col md={12}>
120+
<Control.textarea model=".comment" id="comment" name="comment"
121+
rows="6"
122+
className="form-control"
123+
validators={{
124+
required
125+
}}
126+
/>
127+
<Errors
128+
className="text-danger"
129+
model=".author"
130+
show="touched"
131+
messages={{
132+
required: 'Required',
133+
}}
134+
/>
135+
</Col>
136+
137+
</Row>
138+
139+
{/* submit button */}
140+
<Row className="form-group">
141+
<Col>
142+
<Button type="submit" color="primary">
143+
Submit
144+
</Button>
145+
</Col>
146+
</Row>
147+
148+
</LocalForm>
149+
150+
</ModalBody>
151+
</Modal>
152+
153+
154+
</React.Fragment>
155+
);
156+
}
157+
}
158+
159+
export default CommentForm;

‎confusion/src/components/DishdetailComponent.js‎

Lines changed: 176 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,174 @@
1-
import React from "react";
1+
import React, { Component } from "react";
22
import { Card, CardImg, CardImgOverlay, CardTitle, Breadcrumb, BreadcrumbItem, CardBody, CardText } from "reactstrap";
33
import { Link } from 'react-router-dom';
4+
import {
5+
Button, Modal, ModalBody, ModalHeader, Label, Row, Col
6+
} from "reactstrap";
7+
8+
import { Control, LocalForm, Errors } from 'react-redux-form';
9+
10+
11+
12+
13+
/**........................ comment component ends ................................................. */
14+
//// validators
15+
const required = (val) => val && val.length; //value > 0
16+
const maxLength = (len) => (val) => !(val) || (val.length <= len);
17+
const minLength = (len) => (val) => (val) && (val.length >= len);
18+
19+
class CommentForm extends Component {
20+
21+
constructor(props) {
22+
super(props);
23+
24+
25+
this.state = {
26+
isCommentFormModalOpen: false
27+
};
28+
29+
this.toggleCommentFormModal = this.toggleCommentFormModal.bind(this);
30+
this.handleCommentFormSubmit = this.handleCommentFormSubmit.bind(this);
31+
32+
}
33+
34+
handleCommentFormSubmit(values) {
35+
console.log("Current State is: " + JSON.stringify(values));
36+
alert("Current State is: " + JSON.stringify(values));
37+
38+
39+
}
40+
41+
toggleCommentFormModal() {
42+
this.setState({
43+
isCommentFormModalOpen: !this.state.isCommentFormModalOpen
44+
});
45+
}
46+
47+
48+
render() {
49+
return (
50+
<React.Fragment>
51+
<Button outline onClick={this.toggleCommentFormModal}>
52+
<span className="fa fa-comments fa-lg"></span> Submit Comment
53+
</Button>
54+
55+
56+
{/* commentform Modal */}
57+
<Modal isOpen={this.state.isCommentFormModalOpen} toggle={this.toggleCommentFormModal} >
58+
<ModalHeader toggle={this.toggleCommentFormModal}> Submit Comment </ModalHeader>
59+
<ModalBody>
60+
61+
<LocalForm onSubmit={(values) => this.handleCommentFormSubmit(values)}>
62+
63+
{/* rating */}
64+
<Row className="form-group">
65+
<Label htmlFor="rating" md={12} >Rating</Label>
66+
<Col md={12}>
67+
<Control.select model=".rating"
68+
className="form-control"
69+
name="rating"
70+
id="rating"
71+
validators={{
72+
required
73+
}}
74+
>
75+
<option>Please Select</option>
76+
<option>1</option>
77+
<option>2</option>
78+
<option>3</option>
79+
<option>4</option>
80+
<option>5</option>
81+
</Control.select>
82+
<Errors
83+
className="text-danger"
84+
model=".author"
85+
show="touched"
86+
messages={{
87+
required: 'Required',
88+
}}
89+
/>
90+
</Col>
91+
</Row>
92+
93+
94+
{/* author */}
95+
<Row className="form-group">
96+
<Label htmlFor="author" md={12}> Your Name </Label>
97+
<Col md={12}>
98+
<Control.text model=".author" id="author" name="author"
99+
placeholder="First Name"
100+
className="form-control"
101+
validators={{
102+
required, minLength: minLength(3), maxLength: maxLength(15)
103+
}}
104+
/>
105+
<Errors
106+
className="text-danger"
107+
model=".author"
108+
show="touched"
109+
messages={{
110+
required: 'Required',
111+
minLength: 'Must be greater than 2 characters',
112+
maxLength: 'Must be 15 characters or less'
113+
}}
114+
/>
115+
</Col>
116+
</Row>
117+
118+
119+
120+
121+
{/* comment */}
122+
<Row className="form-group">
123+
<Label htmlFor="comment" md={12}>Comment</Label>
124+
<Col md={12}>
125+
<Control.textarea model=".comment" id="comment" name="comment"
126+
rows="6"
127+
className="form-control"
128+
validators={{
129+
required
130+
}}
131+
/>
132+
<Errors
133+
className="text-danger"
134+
model=".author"
135+
show="touched"
136+
messages={{
137+
required: 'Required',
138+
}}
139+
/>
140+
</Col>
141+
142+
</Row>
143+
144+
{/* submit button */}
145+
<Row className="form-group">
146+
<Col>
147+
<Button type="submit" color="primary">
148+
Submit
149+
</Button>
150+
</Col>
151+
</Row>
152+
153+
</LocalForm>
154+
155+
</ModalBody>
156+
</Modal>
157+
158+
159+
</React.Fragment>
160+
);
161+
}
162+
}
163+
164+
/**........................ comment component ends ................................................. */
165+
166+
167+
168+
169+
170+
171+
4172

5173
function RenderDish({dish}) {
6174
if (dish != null) {
@@ -23,12 +191,13 @@ import { Link } from 'react-router-dom';
23191
}
24192
}
25193

26-
function RenderComments({comments}){
194+
function RenderComments({dish,comments}){
27195
if (comments == null) {
28196
return (<div></div>)
29197
}
30198
const cmnts = comments.map(comment => {
31199
return (
200+
32201
<li key={comment.id}>
33202
<p>{comment.comment}</p>
34203
<p>-- {comment.author},
@@ -40,6 +209,7 @@ import { Link } from 'react-router-dom';
40209
}).format(new Date(comment.date))}
41210
</p>
42211
</li>
212+
43213
)
44214
})
45215
return (
@@ -48,7 +218,7 @@ import { Link } from 'react-router-dom';
48218
<ul className='list-unstyled'>
49219
{cmnts}
50220
</ul>
51-
221+
<CommentForm dish={dish} comments={comments} />
52222
</div>
53223
)
54224
}
@@ -83,8 +253,10 @@ import { Link } from 'react-router-dom';
83253

84254
<div className='row'>
85255
<RenderDish dish={ props.dish } />
86-
<RenderComments comments={ props.comments } />
256+
<RenderComments dish={props.dish} comments={ props.comments } />
87257
</div>
258+
259+
88260
</div>
89261
)
90262
}

0 commit comments

Comments
 (0)