Skip to content

Commit

Permalink
Assignment 4 commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@AshKnight99
AshKnight99 committed Nov 7, 2020
1 parent 84690b6 commit a65f387
Show file tree
Hide file tree
Showing 8 changed files with 255 additions and 81 deletions.
59 changes: 44 additions & 15 deletions src/components/AboutComponent.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,57 @@
import React from 'react';
import { Breadcrumb, BreadcrumbItem, Card, CardBody, CardHeader, Media } from 'reactstrap';
import { Link } from 'react-router-dom';
import { baseUrl } from '../shared/baseUrl';
import { Loading } from './LoadingComponent';
import { Fade, Stagger } from 'react-animation-components';

function RenderLeader({ leader }) {
return (
<Media>
<Media left className="mt-3">
<Media object src={leader.image} alt={leader.name} />
</Media>
<Media body className="ml-5">
<Media heading>{leader.name}</Media>
<p>{leader.designation}</p>
<p> {leader.description} </p>
</Media>
</Media>
);
function RenderLeader({ leader, isLoading, errMess }) {

return (
<Stagger in>
<Fade in>
<Media>
<Media left className="mt-3">
<Media object src={baseUrl + leader.image} alt={leader.name} />
</Media>
<Media body className="ml-5">
<Media heading>{leader.name}</Media>
<p>{leader.designation}</p>
<p> {leader.description} </p>
</Media>
</Media>
</Fade>
</Stagger>
);

}

function About(props) {
if (props.isLoading) {
return (
<div className="conatianer">
<div className="row" >
<Loading />
</div>
</div>

);
}
else if (props.errMess) {
return (
<div className="conatianer">
<div className="row" >
<h4>{props.errMess}</h4>
</div>
</div>

);
}

const leaders = props.leaders.map((leader) => {
return (
<RenderLeader leader = {leader} />
);
<RenderLeader leader={leader}/>
);
});

return (
Expand Down
118 changes: 64 additions & 54 deletions src/components/ContactComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Control, Form, actions, Errors } from 'react-redux-form';

const required = (val) => val && val.length;
const maxlength = (len) => (val) => !(val) || (val.length <= len);
const minlength = (len) => (val) => !(val) || (val.length >= len);
const minlength = (len) => (val) => !(val) || (val.length >= len);
const isNumber = (val) => !isNaN(Number(val));
const validEmail = (val) => /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(val);

Expand All @@ -19,12 +19,21 @@ class Contact extends Component {

handleSubmit(values) {
console.log("Current State is:" + JSON.stringify(values));
alert("Current State is:" + JSON.stringify(values));
alert("Current State is:" + JSON.stringify(values));
this.props.resetFeedbackForm();
this.props.postFeedback(
values.firstname,
values.lastname,
values.telnum,
values.email,
values.agree,
values.contactType,
values.message
);
}
render() {

return (
return (
<div className="container">
<div className="row">
<Breadcrumb>
Expand Down Expand Up @@ -71,7 +80,7 @@ class Contact extends Component {
<h3> Send us Your Feedback</h3>
</div>
<div className="col-12 col-md-9">
<Form model = "feedback" onSubmit={(values) => this.handleSubmit(values)}>
<Form model="feedback" onSubmit={(values) => this.handleSubmit(values)}>

<Row className="form-group">
<Label htmlFor="firstname" md={2}>First Name</Label>
Expand All @@ -80,19 +89,19 @@ class Contact extends Component {
className="form-control"
placeholder="First Name"
validators={{
required,minlength:minlength(3),maxlength:maxlength(15)
required, minlength: minlength(3), maxlength: maxlength(15)
}}
/>
<Errors
className="text-danger"
model=".firstname"
show="touched"
messages={{
required: "Required",
minlength: 'Must be greater than 2 characters',
maxlength: 'Must be 15 characters or less'
}}
/>
<Errors
className="text-danger"
model=".firstname"
show="touched"
messages={{
required:"Required",
minlength: 'Must be greater than 2 characters',
maxlength : 'Must be 15 characters or less'
}}
/>
/>
</Col>
</Row>
<Row className="form-group">
Expand All @@ -102,19 +111,19 @@ class Contact extends Component {
className="form-control"
placeholder="Last Name"
validators={{
required,minlength:minlength(3),maxlength:maxlength(15)
required, minlength: minlength(3), maxlength: maxlength(15)
}}
/>
<Errors
className="text-danger"
model=".lastname"
show="touched"
messages={{
required: "Required",
minlength: 'Must be greater than 2 characters',
maxlength: 'Must be 15 characters or less'
}}
/>
<Errors
className="text-danger"
model=".lastname"
show="touched"
messages={{
required:"Required",
minlength: 'Must be greater than 2 characters',
maxlength : 'Must be 15 characters or less'
}}
/>
/>
</Col>
</Row>
<Row className="form-group">
Expand All @@ -124,21 +133,21 @@ class Contact extends Component {
placeholder="Tel. Number"
className="form-control"
validators={{
required,minlength:minlength(3),maxlength:maxlength(15) , isNumber
required, minlength: minlength(3), maxlength: maxlength(15), isNumber
}}
/>
<Errors
className="text-danger"
model=".telnum"
show="touched"
messages={{
required:"Required",
minlength: 'Must be greater than 2 numbers',
maxlength : 'Must be 15 numbers or less',
isNumber : 'Must be a number'
/>
<Errors
className="text-danger"
model=".telnum"
show="touched"
messages={{
required: "Required",
minlength: 'Must be greater than 2 numbers',
maxlength: 'Must be 15 numbers or less',
isNumber: 'Must be a number'

}}
/>
}}
/>
</Col>
</Row>
<Row className="form-group">
Expand All @@ -148,24 +157,25 @@ class Contact extends Component {
placeholder="Email"
className="form-control"
validators={{
required,validEmail}}
/>
<Errors
className="text-danger"
model=".email"
show="touched"
messages={{
required:"Required",
validEmail: "Invalid email Address"
}}
/>
required, validEmail
}}
/>
<Errors
className="text-danger"
model=".email"
show="touched"
messages={{
required: "Required",
validEmail: "Invalid email Address"
}}
/>
</Col>
</Row>
<Row className="form-group">
<Col md={{ size: 6, offset: 2 }}>
<div className="form-check">
<Label check>
<Control.checkbox model = ".agree" name="agree" className="form-check-input" />
<Control.checkbox model=".agree" name="agree" className="form-check-input" />
{' '} <strong> May we contact you? </strong>
</Label>
</div>
Expand All @@ -180,7 +190,7 @@ class Contact extends Component {
<Row className="form-group">
<Label htmlFor="feedback" md={2}>Your Feedback</Label>
<Col md={10}>
<Control.textarea model=".message" id="message" name="message" rows="12" className="form-control"/>
<Control.textarea model=".message" id="message" name="message" rows="12" className="form-control" />
</Col>
</Row>
<Row className="form-group">
Expand Down
5 changes: 4 additions & 1 deletion src/components/HomeComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,10 @@ function Home(props) {
/>
</div>
<div className="col-12 col-md m-1">
<RenderCard item={props.leader} />
<RenderCard item={props.leaders}
isLoading={props.leadersLoading}
errMess={props.leadersErrMess}
/>
</div>
</div>
</div>
Expand Down
32 changes: 27 additions & 5 deletions src/components/MainComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Contact from './ContactComponent';
import About from './AboutComponent';
import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { postComment, fetchComments, fetchDishes, fetchPromos } from '../redux/ActionCreators';
import { postComment, fetchComments, fetchDishes, fetchPromos, fetchLeaders,postFeedback } from '../redux/ActionCreators';
import { actions } from 'react-redux-form';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
const mapStateToProps = state => {
Expand All @@ -22,10 +22,24 @@ const mapStateToProps = state => {
}
const mapDispatchToProps = (dispatch) => ({
postComment: (dishId, rating, author, comment) => dispatch(postComment(dishId, rating, author, comment)),
postFeedback: (firstname,
lastname,
telnum,
email,
agree,
contactType,
message) => dispatch(postFeedback(firstname,
lastname,
telnum,
email,
agree,
contactType,
message)),
fetchDishes: () => { dispatch(fetchDishes()) },
resetDispatchForm: () => { dispatch(actions.reset('feedback')) },
resetFeedbackForm: () => { dispatch(actions.reset('feedback')) },
fetchComments: () => { dispatch(fetchComments()) },
fetchPromos: () => { dispatch(fetchPromos()) },
fetchLeaders: () => {dispatch(fetchLeaders())}

});

Expand All @@ -39,6 +53,7 @@ class Main extends Component {
this.props.fetchDishes();
this.props.fetchComments();
this.props.fetchPromos();
this.props.fetchLeaders();
}

render() {
Expand All @@ -50,7 +65,9 @@ class Main extends Component {
promotion={this.props.promotions.promotions.filter((promo) => promo.featured)[0]}
promoLoading={this.props.promotions.isLoading}
promoErrMess={this.props.promotions.errMess}
leader={this.props.leaders.filter((lead) => lead.featured)[0]}
leaders={this.props.leaders.leaders.filter((lead) => lead.featured)[0]}
leadersLoading={this.props.leaders.isLoading}
leadersErrMess={this.props.leaders.errMess}
/>
);
}
Expand All @@ -73,10 +90,15 @@ class Main extends Component {
<CSSTransition key={this.props.location.key} classNames="page" timeout={300}>
<Switch location={this.props.location}>
<Route path='/home' component={HomePage} />
<Route exact path='/aboutus' component={() => <About leaders={this.props.leaders} />} />
<Route exact path='/about' component={() => <About leaders={this.props.leaders.leaders}
leadersLoading={this.props.leaders.isLoading}
leadersErrMess={this.props.leaders.errMess}/>}
/>
<Route exact path='/menu' component={() => <Menu dishes={this.props.dishes} />} />
<Route path='/menu/:dishId' component={DishWithId} />
<Route exact path='/contactus' component={() => <Contact resetFeedbackForm={this.props.resetFeedbackForm} />} />
<Route exact path='/contact' component={() => <Contact
postFeedback = {this.props.postFeedback}
resetFeedbackForm={this.props.resetFeedbackForm} />} />
<Redirect to="/home" />
</Switch>
</CSSTransition>
Expand Down
Loading

0 comments on commit a65f387

Please sign in to comment.