Skip to content

Commit 28d764b

Browse files
sudarshan777sudarshan777
authored
Merge pull request sudarshan777#19 from sudarshan777/UserEdit
User edit
2 parents 1cce389 + 2aca735 commit 28d764b

File tree

12 files changed

+428
-187
lines changed

12 files changed

+428
-187
lines changed

‎src/App.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import PrivateRoute from "./components/privateRoutes";
1313
import Home from "./components/Home";
1414
import Navbar from "./components/Navbar";
1515
import EditArticle from "./components/article/EditArticle";
16+
import EditProfile from "./components/EditProfile";
1617

1718
class App extends Component {
1819
render() {
@@ -56,6 +57,11 @@ class App extends Component {
5657
path="/user/:id"
5758
component={(props) => <User {...props} />}
5859
/>
60+
<PrivateRoute
61+
exact
62+
path="/EditProfile"
63+
component={(props) => <EditProfile {...props} />}
64+
/>
5965
</Switch>
6066
</div>
6167
</Router>

‎src/components/Comments.js‎

Lines changed: 1 addition & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, { Component } from "react";
22
import { Link } from "react-router-dom";
33
import { formatDistanceToNow } from "date-fns";
4-
//import Like from "./Like";
5-
import "../styles/styling.sass";
4+
import "../styles/comments.sass";
65

76
const Comments = (props) => {
87
if (props.comments.length > 0 && props !== undefined) {
@@ -16,14 +15,6 @@ const Comments = (props) => {
1615
{props.comments.map((comment, index) => {
1716
var date = new Date(comment.createdAt);
1817
return (
19-
// <li className="list-group-item" key={index}>
20-
// <p>{comment.body}</p>-
21-
// <Link to={"/user/" + comment.user._id}>
22-
// {comment.user.name}
23-
// </Link>
24-
// <br />
25-
// <b>Date - </b> {comment.createdAt.substring(0, 10)}
26-
// </li>
2718
<div>
2819
<div class="card">
2920
<div class="card-body">
@@ -50,40 +41,6 @@ const Comments = (props) => {
5041
</p>
5142
)}
5243
{comment.user._id === props.user.id ? (
53-
// <div style={{ float: "right" }}>
54-
// <button
55-
// class="btn btn-primary a-btn-slide-text"
56-
// data-toggle="tooltip"
57-
// data-placement="top"
58-
// title="Edit"
59-
// onClick={props.edit}
60-
// >
61-
// <span
62-
// class="glyphicon glyphicon-edit"
63-
// aria-hidden="true"
64-
// ></span>
65-
// <span>
66-
// <strong>Edit</strong>
67-
// </span>
68-
// </button>{" "}
69-
// <button
70-
// className="btn btn-primary a-btn-slide-text"
71-
// data-toggle="tooltip"
72-
// data-placement="top"
73-
// title="Delete Comment"
74-
// onClick={() => {
75-
// props.delete(comment._id);
76-
// }}
77-
// >
78-
// <span
79-
// className="glyphicon glyphicon-remove"
80-
// aria-hidden="true"
81-
// ></span>
82-
// <span>
83-
// <strong>Delete</strong>
84-
// </span>
85-
// </button>
86-
// </div>
8744
<EditOptions
8845
edit={props.edit}
8946
comment={comment}

‎src/components/EditProfile.js‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import React, { Component, useState, useRef, useEffect } from "react";
2+
import { Link } from "react-router-dom";
3+
import { useDispatch } from "react-redux";
4+
import "../styles/editProfile.sass";
5+
import { editProfileSubmit } from "../redux/actions/edit-profileActions";
6+
7+
const EditProfile = (props) => {
8+
const [name, setName] = useState("");
9+
const [role, setRole] = useState("");
10+
const [hobbies, setHobbies] = useState([]);
11+
const [skills, setSkills] = useState([]);
12+
const [userId, setUserId] = useState(props.location.userId);
13+
const hobbyRef = useRef();
14+
const skillRef = useRef();
15+
16+
const addHobby = (e) => {
17+
e.preventDefault();
18+
console.log("hobby is:", hobbyRef.current.value);
19+
let prevHobbies = hobbies;
20+
if (hobbyRef.current.value != "") {
21+
prevHobbies.push(hobbyRef.current.value);
22+
}
23+
setHobbies([...prevHobbies]);
24+
console.log("his hobby is:", hobbies);
25+
hobbyRef.current.value = "";
26+
};
27+
28+
const addSkills = (e) => {
29+
e.preventDefault();
30+
let prevSkills = skills;
31+
if (skillRef.current.value != "") {
32+
prevSkills.push(skillRef.current.value);
33+
}
34+
setSkills([...prevSkills]);
35+
skillRef.current.value = "";
36+
};
37+
38+
useEffect(() => {
39+
document.title = `You clicked times`;
40+
console.log("This is USeEffect");
41+
});
42+
43+
const dispatch = useDispatch();
44+
45+
const saveEdit = (e) => {
46+
e.preventDefault();
47+
const EditedProfile = {
48+
name: name,
49+
role: role,
50+
hobbies: hobbies,
51+
skills: skills,
52+
};
53+
console.log("USER EDITED DETAILS ARE: ", EditedProfile);
54+
dispatch(editProfileSubmit(EditedProfile, userId));
55+
props.history.push("/login");
56+
};
57+
58+
return (
59+
<form>
60+
<div className="form-group">
61+
<label for="inputFirstName"> Full Name </label>{" "}
62+
<input
63+
type="text"
64+
name="name"
65+
className="form-control"
66+
id="inputFullName"
67+
placeholder="Full Name"
68+
onChange={(e) => {
69+
setName(e.target.value);
70+
}}
71+
/>{" "}
72+
</div>{" "}
73+
<div className="form-row">
74+
<div className="form-group col-md-6">
75+
<label for="inputRole"> Role </label>{" "}
76+
<input
77+
type="text"
78+
name="role"
79+
className="form-control"
80+
id="inputRole"
81+
placeholder="Web Developer"
82+
onChange={(e) => {
83+
setRole(e.target.value);
84+
}}
85+
/>{" "}
86+
</div>{" "}
87+
<div className="form-group col-md-4">
88+
<label for="inputAddress2"> Hobbies </label>{" "}
89+
<input
90+
type="text"
91+
name="hobbies"
92+
className="form-control"
93+
id="inputHobbies"
94+
placeholder="Dancing, Hiking or Reading"
95+
ref={hobbyRef}
96+
/>{" "}
97+
</div>{" "}
98+
<div className="form-group col-md-2">
99+
<button className="btn btn-primary" onClick={addHobby}>
100+
Add Hobbies{" "}
101+
</button>{" "}
102+
</div>{" "}
103+
</div>{" "}
104+
<div className="form-group">
105+
{" "}
106+
{hobbies.length > 0
107+
? hobbies.map((h) => {
108+
console.log({
109+
h,
110+
});
111+
return (
112+
<span id="hobbyTag" className="tags">
113+
{" "}
114+
{h}{" "}
115+
</span>
116+
);
117+
})
118+
: null}{" "}
119+
</div>{" "}
120+
<div className="form-row">
121+
<div className="form-group col-md-6">
122+
<label for="exampleFormControlSelect2"> Skills </label>{" "}
123+
<input
124+
type="text"
125+
name="skills"
126+
className="form-control"
127+
id="inputSkills"
128+
placeholder="HTML, Javascript..."
129+
ref={skillRef}
130+
/>{" "}
131+
</div>{" "}
132+
<div className="form-group col-md-2">
133+
<button className="btn btn-primary" onClick={addSkills}>
134+
Add Skills{" "}
135+
</button>{" "}
136+
</div>{" "}
137+
</div>{" "}
138+
<div className="form-group">
139+
{" "}
140+
{skills.map((s) => {
141+
return skills.length >= 1 ? (
142+
<span id="skillTag" className="tags">
143+
{" "}
144+
{s}{" "}
145+
</span>
146+
) : null;
147+
})}{" "}
148+
</div>{" "}
149+
<div className="form-row">
150+
<div className="form-group col-md-1">
151+
<button className="btn btn-primary" onClick={saveEdit}>
152+
Save{" "}
153+
</button>{" "}
154+
</div>{" "}
155+
<div className="form-group col-md-1">
156+
<button className="btn btn-primary"> Cancel </button>{" "}
157+
</div>{" "}
158+
</div>{" "}
159+
</form>
160+
);
161+
};
162+
163+
export default EditProfile;

‎src/components/privateRoutes.js‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,35 @@
1-
import React, { Component } from "react";
2-
import { connect } from "react-redux";
3-
import { Route, Redirect } from "react-router-dom";
1+
import React, {
2+
Component
3+
} from "react";
4+
import {
5+
connect
6+
} from "react-redux";
7+
import {
8+
Route,
9+
Redirect
10+
} from "react-router-dom";
411

512
class PrivateRoute extends Component {
613
render() {
7-
const { component: Component, loggedIn, ...props } = this.props;
14+
const {
15+
component: Component,
16+
loggedIn,
17+
...props
18+
} = this.props;
19+
console.log("Logged in")
820

9-
return (
10-
<Route
11-
{...props}
12-
render={(props) =>
13-
loggedIn ? <Component {...props} /> : <Redirect to="/login" />
21+
return ( <
22+
Route {
23+
...props
24+
}
25+
render = {
26+
(props) =>
27+
loggedIn ? < Component {
28+
...props
1429
}
30+
/> : <Redirect to="/login
31+
" />
32+
}
1533
/>
1634
);
1735
}
@@ -23,4 +41,4 @@ const mapStateToProps = (state) => {
2341
};
2442
};
2543

26-
export default connect(mapStateToProps)(PrivateRoute);
44+
export default connect(mapStateToProps)(PrivateRoute);

0 commit comments

Comments
 (0)