Skip to content

Commit 8b31309

Browse files
ZulfuqarAsgerzadeZulfuqarAsgerzade
authoredDec 26, 2019
Merge pull request #20 from emin-alizada/Emin_Branch
instagram v1.0
2 parents ddaee22 + 5bc12b4 commit 8b31309

File tree

20 files changed

+452
-108
lines changed

20 files changed

+452
-108
lines changed
 

‎src/actions/userAction.js

+12
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,22 @@ export const verifyUser = (logInUser) => {
1818
}
1919
})
2020
.then(user => {
21+
sessionStorage.setItem("isAuthorized", true);
22+
sessionStorage.setItem("user", JSON.stringify(user));
2123
dispatch({type: "VERIFIED_USER", payload:user})
2224
})
2325
.catch(e => {
2426
console.log(e);
2527
})
2628
}
29+
};
30+
31+
export const updateUser = (userId) => {
32+
return async dispatch => {
33+
await fetch(`https://fp-instagram.herokuapp.com/users/${userId}`)
34+
.then(result => result.json())
35+
.then(user => {
36+
dispatch({type: "fetchUpdateUserSuccess", payload: user})
37+
})
38+
}
2739
};

‎src/components/MainFeed/Feed/feed.scss

+1
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@
9595
&_descriptionUsername {
9696
font-weight: bolder;
9797
margin-right: 8px;
98+
cursor: pointer;
9899
}
99100

100101
&_description {

‎src/components/MainFeed/Feed/index.js

+37-5
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import Icon from "../../sharedComponents/Icon/index";
55

66
import {connect} from "react-redux"
77

8+
import {Link, Route} from "react-router-dom";
9+
10+
811

912
class Feed extends Component {
1013
constructor() {
@@ -62,11 +65,40 @@ class Feed extends Component {
6265
<div className={"feed_descriptionContainer"}>
6366
<p><b className={"feed_descriptionUsername"}>{`${item.user.username}`}</b> {item.description}</p>
6467
</div>
65-
<p className={"feed_commentCounter"}>view {item.comments_counter} comments</p>
66-
<div className={"feed_commentContainer"}>
67-
<input type="text" placeholder="write comment..." className={"feed_inputComment"}/>
68-
<button className={"feed_sendBtn"}>send</button>
69-
</div>
68+
<p className={"feed_commentCounter"} onClick={
69+
()=> {
70+
this.props.history.push("/feed/post", {post:item})
71+
}
72+
}>view {item.comments_counter} comments</p>
73+
<form action="" onSubmit={event => {event.preventDefault();
74+
const comment ={
75+
comment_itself: event.target.querySelector("input").value,
76+
commenter:{
77+
id: this.props.user.id
78+
}
79+
};
80+
const sendComment = async () => {
81+
await fetch(`https://fp-instagram.herokuapp.com/posts/${item.id}/comments`,{
82+
headers: {
83+
"Content-Type": "application/json",
84+
"Accept": "application/json",
85+
// "Origin": "http://localhost:3000"
86+
},
87+
method: "POST",
88+
body: JSON.stringify(comment)
89+
}).then(response => {
90+
// this.setState({...this.state, posts: posts.})
91+
alert("Comment is added");
92+
});
93+
};
94+
sendComment();
95+
console.log("Fetch is called, problem with comment counter");
96+
}}>
97+
<div className={"feed_commentContainer"}>
98+
<input type="text" placeholder="write comment..." className={"feed_inputComment"}/>
99+
<input type={"submit"} className={"feed_sendBtn"} value={"send"}/>
100+
</div>
101+
</form>
70102
</div>
71103
</div>
72104
)}

‎src/components/MainFeed/index.js

+45-8
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,56 @@ import Feed from "./Feed";
33
import MainFeedProfile from "./MainFeedProfile";
44
import Navbar from "../sharedComponents/Navbar";
55
import "./mainFeed.scss"
6+
import Icon from "../sharedComponents/Icon/index";
67

78
import SettingPage from "../settingsPage";
8-
import {Route} from "react-router-dom";
9+
import {Link, Route} from "react-router-dom";
10+
import SearcResults from "../sharedComponents/searchResults"
11+
import SharePost from "../sharedComponents/sharePost"
12+
import PostComment from "../sharedComponents/postComment";
13+
14+
15+
import {connect} from "react-redux"
916

1017
class MainFeed extends Component {
1118
render() {
12-
console.log('MainFeed = ', this.props);
13-
1419
return (
1520
<div>
16-
<Navbar/>
21+
<Route path="/feed" component={Navbar}/>
22+
1723

1824
<Route path="/feed/settings" component={SettingPage}/>
25+
<Route path="/feed/search_username" component={SearcResults}/>
26+
<Route path="/feed/recommendations" component={SearcResults}/>
27+
<Route path="/feed/post" component={PostComment}/>
28+
<Route path="/feed/new" component={SharePost}/>
1929
<div className={"bgc"}>
2030
<div className={"container container-for-feed"}>
21-
<Feed/>
31+
<Route path="/feed" component={Feed}/>
2232
<div className={"userProfileCardContainer"}>
23-
<div className={"userProfileCard"}>
24-
33+
<div className={"userProfileCardContainer_settingContainer"}>
34+
<Link to={`/feed/settings`}>
35+
<Icon name={"settings"}/>
36+
</Link>
37+
</div>
38+
<div className={"userProfileCardContainer_userInfo"}>
39+
<img src={this.props.user.profile_photo}
40+
className={"userProfileCardContainer_profilePhoto"}/>
41+
<p className={"userProfileCardContainer_username"}>{this.props.user.username}</p>
42+
<div className={"userProfileCardContainer_followContainer"}>
43+
<div className={"userProfileCardContainer_followInfo"}>
44+
<p className={"userProfileCardContainer_followType"}>Post</p>
45+
<p className={"userProfileCardContainer_followCounter"}>{this.props.user.count_posts}</p>
46+
</div>
47+
<div className={"userProfileCardContainer_followInfo"}>
48+
<p className={"userProfileCardContainer_followType"}>Followers</p>
49+
<p className={"userProfileCardContainer_followCounter"}>{this.props.user.number_followers}</p>
50+
</div>
51+
<div className={"userProfileCardContainer_followInfo"}>
52+
<p className={"userProfileCardContainer_followType"}>Following</p>
53+
<p className={"userProfileCardContainer_followCounter"}>{this.props.user.number_follow}</p>
54+
</div>
55+
</div>
2556
</div>
2657
</div>
2758
</div>
@@ -31,4 +62,10 @@ class MainFeed extends Component {
3162
}
3263
}
3364

34-
export default MainFeed;
65+
const mapStateToProps = store => {
66+
return {
67+
user: store.currentUser.user,
68+
}
69+
};
70+
71+
export default connect(mapStateToProps)(MainFeed);

‎src/components/MainFeed/mainFeed.scss

+57-8
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,68 @@
88

99
.userProfileCardContainer {
1010
width: 30%;
11-
height: 500px;
12-
border: 0.5px solid black;
13-
}
11+
height: 355px;
12+
border: 1px solid lightgray;
13+
overflow: hidden;
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
border-radius: 30px;
18+
19+
20+
&_settingContainer {
21+
width: 100%;
22+
overflow: hidden;
23+
}
24+
25+
&_userInfo {
26+
margin: 20px auto 0;
27+
display: flex;
28+
flex-direction: column;
29+
align-items: center;
30+
}
31+
32+
&_profilePhoto {
33+
width: 150px;
34+
border-radius: 20px;
35+
}
36+
37+
&_username {
38+
font-size: 20px;
39+
margin: 20px 0 30px;
40+
text-align: center;
41+
font-weight: bolder;
42+
}
43+
44+
&_followContainer {
45+
display: flex;
46+
}
47+
48+
&_followInfo {
49+
margin: 0 10px;
50+
display: flex;
51+
flex-direction: column;
52+
align-items: center;
53+
}
54+
55+
&_followInfo:last-child {
56+
margin: 0;
57+
}
58+
59+
&_followCounter {
60+
margin-top: 5px;
61+
font-size: 15px;
62+
}
63+
64+
&_followType {
65+
color: gray;
66+
}
1467

15-
.userProfileCard {
16-
height: 70%;
17-
background-color: red;
18-
position: fixed;
1968
}
2069

2170

2271
@media screen and (max-width: 999px) {
23-
72+
2473
.userProfileCardContainer {
2574
display: none;
2675
}

‎src/components/SignInPage/RegisterPanel/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ class RegisterPanel extends React.Component {
7878

7979
console.log(JSON.stringify(newUser));
8080

81-
await fetch("http://fp-instagram.herokuapp.com/users", {
81+
await fetch("https://fp-instagram.herokuapp.com/users", {
8282
headers: headers,
8383
method: "POST",
8484
body: JSON.stringify(newUser)

‎src/components/settingsPage/index.js

+74-14
Original file line numberDiff line numberDiff line change
@@ -7,35 +7,89 @@ import {connect} from "react-redux"
77

88
import './css/settingsPage-media.scss'
99
import ShareBtn from "../sharedComponents/sharePostBTN";
10+
import {updateUser} from "../../actions/userAction";
11+
12+
1013
class SettingPage extends React.Component{
1114
render() {
1215
console.log("user from settings",this.props.user);
1316
return (
1417
<div className={"settings-page"}>
1518
<div className="settings-window">
1619
<div className="avatar">
17-
<img src={require("../sharedComponents/postComment/img/laura-comment.png")} alt="" className={"setting-page-avatar"}/>
20+
<img src={this.props.user.profile_photo} alt="" className={"setting-page-avatar"}/>
1821
<button className="change-photo-button">Change Profile Picture</button>
1922
</div>
20-
<div className="settings-username">anna_white</div>
21-
<form action="" className={"settings-form"}>
23+
<div className="settings-username">{this.props.user.username}</div>
24+
<form action="" className={"settings-form"} onSubmit={async (event) => {
25+
event.preventDefault();
26+
const formInputs = event.target.querySelectorAll("input");
27+
let oldPassword = formInputs[6].value;
28+
let newPassword= formInputs[7].value;
29+
let newPasswordConfrim= formInputs[8].value;
30+
const userUpdated = {
31+
name: formInputs[0].value,
32+
username: formInputs[1].value,
33+
description: formInputs[2].value,
34+
gender: event.target.querySelector("select").value,
35+
birthdate: formInputs[3].value,
36+
mail: formInputs[4].value,
37+
phone_number: formInputs[5].value,
38+
};
39+
if(oldPassword === "" && newPassword === "" && newPasswordConfrim === ""){
40+
await fetch(`https://fp-instagram.herokuapp.com/users/${this.props.user.id}`, {
41+
headers: {
42+
"Content-Type": "application/json",
43+
"Accept": "application/json",
44+
"Origin": "http://localhost:3000"
45+
},
46+
method: "PUT",
47+
body: JSON.stringify(userUpdated)
48+
}).then(response => {
49+
this.props.userUpdateToProps(this.props.user.id);
50+
alert("Updated is added");
51+
})
52+
.then(()=>{
53+
this.props.history.goBack();
54+
});
55+
}
56+
else if(oldPassword === this.props.user.password && newPassword===newPasswordConfrim && newPassword!=="" ){
57+
userUpdated.password = newPassword;
58+
await fetch(`https://fp-instagram.herokuapp.com/users/${this.props.user.id}`, {
59+
headers: {
60+
"Content-Type": "application/json",
61+
"Accept": "application/json",
62+
"Origin": "http://localhost:3000"
63+
},
64+
method: "PUT",
65+
body: JSON.stringify(userUpdated)
66+
}).then(response => {
67+
this.props.userUpdateToProps(this.props.user.id);
68+
alert("Updated is added");
69+
})
70+
.then(()=>{
71+
this.props.history.goBack();
72+
});
73+
}
74+
else{
75+
alert("Please check the data");
76+
}
77+
}}>
2278
<fieldset className={"personal-info"}>
2379
<label htmlFor="change-name" className={"settings-labels"}>Name
24-
<input id={"change-name"} type="text" className={"personal-info-fields"}/>
80+
<input id={"change-name"} type="text" className={"personal-info-fields"} defaultValue={this.props.user.name}/>
2581
</label>
2682
<label htmlFor="change-username" className={"settings-labels"}>Username
27-
<input id={"change-username"} type="text" className={"personal-info-fields"}/>
83+
<input id={"change-username"} type="text" className={"personal-info-fields"} defaultValue={this.props.user.username}/>
2884
</label>
2985
<label htmlFor="change-bio" className={"settings-labels"}>Bio
30-
<input id={"change-bio"} type="text" className={"personal-info-fields"}/>
86+
<input id={"change-bio"} type="text" className={"personal-info-fields"} defaultValue={this.props.user.description}/>
3187
</label>
3288
<label htmlFor="change-gender " className={"gender-select-holder settings-labels"}>Gender
33-
{/*<input id={"change-gender"} type="text" className={"personal-info-fields"}/>*/}
3489
<select name="change-gender" id="change-gender" className={"personal-info-fields"}>
35-
<option value="default-select-option">-Please select your gender</option>
36-
<option value="male">Male</option>
37-
<option value="male">Female</option>
38-
90+
{/*<option value="default-select-option" disabled={true}>-Please select your gender</option>*/}
91+
<option value="M" selected={this.props.user.gender==="M"} >Male</option>
92+
<option value="F" selected={this.props.user.gender==="F"}>Female</option>
3993
</select>
4094
</label>
4195
<label className={"settings-labels"} htmlFor="change-birthdate">Birthday
@@ -45,10 +99,10 @@ class SettingPage extends React.Component{
4599

46100
<fieldset className={"change-contact-info"}>
47101
<label className={"settings-labels"} htmlFor="change-email">E-mail
48-
<input id={"change-email"} type="text" className={"contact-info-fields"}/>
102+
<input id={"change-email"} type="text" className={"contact-info-fields"} defaultValue={this.props.user.mail}/>
49103
</label>
50104
<label className={"settings-labels"} htmlFor="change-phone">Phone Number
51-
<input id={"change-phone"} type="text" className={"contact-info-fields"}/>
105+
<input id={"change-phone"} type="text" className={"contact-info-fields"} defaultValue={this.props.user.phone_number}/>
52106
</label>
53107
</fieldset>
54108

@@ -84,4 +138,10 @@ const mapStateToProps = store => {
84138
}
85139
};
86140

87-
export default connect(mapStateToProps)(SettingPage);
141+
const mapDispatchToProps = dispatch => {
142+
return {
143+
userUpdateToProps: userId => dispatch(updateUser(userId))
144+
}
145+
};
146+
147+
export default connect(mapStateToProps, mapDispatchToProps)(SettingPage);

0 commit comments

Comments
 (0)
Please sign in to comment.