Skip to content

Commit 9b67aff

Browse files
CKanishkaCKanishka
committed
BlogContainer refactored to handle the functional logic of adding/editing a blog
1 parent 0dd891f commit 9b67aff

File tree

3 files changed

+259
-215
lines changed

3 files changed

+259
-215
lines changed

‎client/src/App.js‎

Lines changed: 76 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,91 @@
1-
import React from 'react';
2-
import './App.css';
3-
import BlogContainer from './components/BlogContainer';
4-
import LoginForm from './components/LoginForm';
5-
import axios from 'axios';
1+
import React from "react";
2+
import "./App.css";
3+
import BlogContainer from "./components/BlogContainer";
4+
import LoginForm from "./components/LoginForm";
5+
import axios from "axios";
6+
import HeadingBanner from "./components/HeadingBanner";
7+
import Footer from "./components/Footer";
68
class App extends React.Component {
7-
state = {
8-
name:"",
9-
email:"",
10-
password:"",
11-
password2:"",
12-
address:"",
13-
route:"login"
14-
}
15-
onChange = (e) => {
16-
this.setState({
17-
[e.target.name]:e.target.value
18-
});
19-
};
9+
state = {
10+
name: "",
11+
email: "",
12+
password: "",
13+
password2: "",
14+
address: "",
15+
route: "login",
16+
};
17+
onChange = (e) => {
18+
this.setState({
19+
[e.target.name]: e.target.value,
20+
});
21+
};
2022

21-
authenticate = (login) => {
22-
const user = {
23-
email:this.state.email,
24-
password:this.state.password
25-
};
26-
if(login){
27-
console.log(this.state.email,this.state.password)
28-
// if(this.state.email==="admin" && this.state.password==="admin")
29-
// {
30-
// this.setState({route:"admin"})
31-
// }
32-
// else
33-
// {
34-
// alert("Wrong login credentials! Please try again");
35-
// }
36-
37-
axios
38-
.post(`/api/authenticate`,user)
39-
.then(res => {
40-
if (res.status === 200) {
41-
this.setState({route:"blog"})
42-
} else {
43-
const error = new Error(res.error);
44-
throw error;
45-
}
46-
})
47-
.catch(err => {
48-
console.error(err);
49-
alert('Error logging in please try again/register');
50-
});
51-
52-
}
53-
else{
54-
if(this.state.password!==this.state.password2){
55-
alert("Your passwords do not match, please make sure both passwords match.")
56-
return
57-
}
58-
axios
59-
.post(`/api/register`,user)
60-
.then(res => {
23+
authenticate = (login) => {
24+
const user = {
25+
name: this.state.name,
26+
email: this.state.email,
27+
password: this.state.password,
28+
};
29+
if (login) {
30+
axios
31+
.post(`http://localhost:5001/api/authenticate`, user)
32+
.then((res) => {
6133
if (res.status === 200) {
62-
alert("Registered Successfully! Welcome to Blog Planet ")
63-
this.setState({route:"blog"})
34+
this.setState({ route: "blog", name: res.data.name });
6435
} else {
6536
const error = new Error(res.error);
6637
throw error;
6738
}
6839
})
69-
.catch(err => {
40+
.catch((err) => {
7041
console.error(err);
71-
alert('Error logging in please try again with another email-id');
42+
alert(
43+
"Failed to login! Please try again with correct credentials or register"
44+
);
45+
});
46+
} else {
47+
if (this.state.password !== this.state.password2) {
48+
alert(
49+
"Your passwords do not match, please make sure both passwords match."
50+
);
51+
return;
52+
}
53+
axios
54+
.post(`http://localhost:5001/api/register`, user)
55+
.then((res) => {
56+
if (res.status === 200) {
57+
alert("Registered Successfully! Welcome to Blog Planet ");
58+
this.setState({ route: "blog",name: res.data.name });
59+
} else {
60+
const error = new Error(res.error);
61+
throw error;
62+
}
63+
})
64+
.catch((err) => {
65+
console.error(err);
66+
alert("Failed to register! Please try again with another email-id");
7267
});
73-
}
7468
}
75-
render(){
69+
};
70+
71+
render() {
7672
return (
77-
<div className="App">
78-
{
79-
this.state.route==="login"?
80-
<LoginForm onChange={this.onChange} onSubmit={this.onSubmit} authenticate={this.authenticate}/>:<BlogContainer name={this.state.name} email={this.state.email}/>
81-
}
82-
</div>
83-
);
84-
}
73+
<div className="App">
74+
{this.state.route === "login" ? (
75+
<LoginForm
76+
onChange={this.onChange}
77+
authenticate={this.authenticate}
78+
/>
79+
) : (
80+
<React.Fragment>
81+
<HeadingBanner />
82+
<BlogContainer name={this.state.name} email={this.state.email} />
83+
<Footer />
84+
</React.Fragment>
85+
)}
86+
</div>
87+
);
88+
}
8589
}
8690

8791
export default App;

‎client/src/components/Blog.js‎

Lines changed: 59 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,62 @@
1-
import React from 'react';
2-
import InputModal from './InputModal';
1+
import React from "react";
2+
import BlogImage from "../static/images/blog_item_banner.jpg";
33
class Blog extends React.Component {
4-
state={
5-
modal:false,
6-
isOpen:false
7-
}
8-
toggle = () => {
9-
this.setState({isOpen:!this.state.isOpen})
10-
};
11-
showModal = () => {
12-
this.setState({ modal: true });
13-
};
14-
hideModal = () => {
15-
this.setState({ modal: false });
16-
};
17-
render(){
18-
var showEdit = this.props.edit?"block":"none";
19-
return(
20-
21-
<div className="iq-blog-box" >
22-
<div className="iq-blog-image">
23-
<img alt="#" src={"https://signatureiow.marketing/wp-content/uploads/2018/05/Oli-Blog-2.jpg"}/>
24-
<ul className="iq-blogtag">
25-
<li>{this.props.genre}</li>
26-
</ul>
27-
</div>
28-
<div className="iq-blog-detail">
29-
<div className="iq-blog-meta">
30-
<ul className="pl-0">
31-
<li className="list-inline-item">
32-
<time className="entry-date published updated">On {this.props.date.split('T')[0]} </time>
33-
</li>
34-
<li className="list-inline-item">
35-
<a href="/"><i> By {this.props.author}</i></a>
36-
</li>
37-
</ul>
38-
</div>
39-
<div className="blog-title">
40-
<h4 className="entry-title">{this.props.title}</h4>
41-
</div>
42-
<div className="blog-content">
43-
<p>{this.state.isOpen?this.props.desc:this.props.desc.substring(0,200)}</p>
44-
</div>
45-
<div className="blog-button" onClick={this.toggle}>
46-
47-
Read {this.state.isOpen ? 'less' : 'more'}
48-
49-
{/* <a className="button-link" href="/blog-details">Read More<i class="fa fa-angle-right" aria-hidden="true"></i></a> */}
50-
</div>
51-
<button className="mt-5 mr-0 btn-yellow" style={{display:showEdit}} onClick={this.showModal}>Start Editing</button>
52-
</div>
53-
<InputModal modal={this.state.modal} handleClose={this.hideModal} id={this.props.id} name={this.props.author} email={this.props.email} content={this.props.desc} title={this.props.title} genre={this.props.genre} edit={true}/>
54-
</div>
55-
56-
);
57-
}
4+
state = {
5+
isOpen: false,
6+
};
7+
toggle = () => {
8+
this.setState({ isOpen: !this.state.isOpen });
9+
};
10+
11+
showModal = () => {
12+
this.props.showModal(this.props.blog)
13+
}
14+
render() {
15+
const {
16+
blog: { edit, genre, name, date, title, content }
17+
} = this.props;
18+
return (
19+
<div className="blog-box">
20+
<div className="blog-image">
21+
<img alt="Abstract Banner" src={BlogImage} />
22+
<ul className="blog-tag">
23+
<li>{genre}</li>
24+
</ul>
25+
</div>
26+
<div className="blog-detail">
27+
<div className="blog-meta">
28+
<ul className="pl-0">
29+
<li className="list-inline-item">
30+
<time className="entry-date published updated">
31+
On {date.split("T")[0]}{" "}
32+
</time>
33+
</li>
34+
<li className="list-inline-item">
35+
<span className="font-italic text-info"> By {name}</span>
36+
</li>
37+
</ul>
38+
</div>
39+
<div className="blog-title">
40+
<h4 className="entry-title">{title}</h4>
41+
</div>
42+
<div className="blog-content">
43+
<p>{this.state.isOpen ? content : content.substring(0, 200)}</p>
44+
</div>
45+
<div className="btn btn-link pl-0" onClick={this.toggle}>
46+
Read {this.state.isOpen ? "less" : "more"}
47+
</div>
48+
{edit && (
49+
<button
50+
className="btn btn-warning rounded-circle float-right"
51+
onClick={this.showModal}
52+
>
53+
<i className="fa fa-pencil"></i>
54+
</button>
55+
)}
56+
</div>
57+
</div>
58+
);
59+
}
5860
}
5961

60-
export default Blog;
62+
export default Blog;

0 commit comments

Comments
 (0)