users can now add and drop connections with other users#657
users can now add and drop connections with other users#657ccorkery97 wants to merge 14 commits intodevelopfrom
Conversation
0xZakk
left a comment
0xZakk
left a comment
There was a problem hiding this comment.
Are you missing some code here?
0xZakk
left a comment
0xZakk
left a comment
There was a problem hiding this comment.
@ccorkery97 This looks pretty good and is a good start. See my comments below.
Generally speaking, I'd say this is more complicated than it needs to be. Most of the logic you have here should be happening on the backend and you shouldn't need this much logic.
For example, to create a friend request, the signed in user should click a button that sends a request to the backend with the ID for the user who is the target of the friend request (probably just in the URL parameters). The backend should take that ID and create the request between the user with that ID and the currently signed in User. You can have a status field on it (like accepted) which defaults to false. When that other user signs in, there should be a separate page where they can see all their friend requests (i.e. requests where accepted is false) and then submit a request to approve or reject the request.
| getFriends = () => { | ||
| fetch(`http://127.0.0.1:8000/profile`, { | ||
| headers: { | ||
| Authorization: `Token ${localStorage.getItem("token")}` | ||
| } | ||
| }) | ||
| .then(res => res.json()) | ||
| .then(json => { | ||
| this.makeFriends(json) | ||
| }); | ||
| } | ||
|
|
| otherCards = (arr) => { | ||
| let length = others.length | ||
| for (let i = 0; i < length; i++) { | ||
| //same as the friends function | ||
| arr.push( | ||
| <div className="CommunityPage__momCard-single"> | ||
| <PersonCard image={this.state.others[i].image} name={this.state.others[i].first_name} location="Washington D.C." /> | ||
| <button className="FriendButton" onClick={this.sendRequest}>Add Friend</button> | ||
| </div> | ||
| ) | ||
| } | ||
| } |
There was a problem hiding this comment.
Same here re array method and putting this in the render method
| } | ||
| } | ||
| let data = { connections: connectionsList } | ||
| fetch(`http://127.0.0.1:8000/profile/${this.props.userid}`, { |
There was a problem hiding this comment.
Can you put this in a service and use the base_url constant? Otherwise, this will break in production
| .catch(error => { | ||
| console.error('Error:', error); | ||
| }); | ||
| window.location.reload(true) |
There was a problem hiding this comment.
Nope. Nope. Nope.
Please use react router
| sendRequest = (e) => { | ||
| let newFriend = e.target.parentElement.children[0].children[1].textContent | ||
| e.target.parentElement.children[1].textContent = "Request Sent" | ||
| let newFriendId | ||
| let requestList | ||
| for (let i = 0; i < this.state.others.length; i++) { | ||
| if (this.state.others[i].first_name === newFriend) { | ||
| newFriendId = this.state.others[i].user | ||
| requestList = this.state.others[i].requests | ||
| } | ||
| } | ||
| requestList.push(this.props.userid) | ||
| let data = { requests: requestList } | ||
| fetch(`http://127.0.0.1:8000/profile/${newFriendId}`, { | ||
| method: 'PATCH', | ||
| headers: { | ||
| Authorization: `Token ${localStorage.getItem("token")}`, | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| body: JSON.stringify(data) | ||
| }) | ||
| .then(response => response.json()) | ||
| .then(result => { | ||
| console.log('Success:', result); | ||
| }) | ||
| .catch(error => { | ||
| console.error('Error:', error); | ||
| }); | ||
| } |
There was a problem hiding this comment.
You should get the users's id that the currently signed in user wants to friend and send a request to the backend with just that. All you need is the user ID for the friend request and the currently signed in user
|
I fixed some of the minor changes but wasn't sure what you wanted with the services, did you want me to make my own services for connections and add those functions in there? I did try putting the different cards into the render method but i couldn't get it to work and display each user in the array. With the request functionality I wasn't sure how to set up the backend so that the request array would have not only the id the request is from but also if it is accepted or not, so i just have and array of id's and when one is accepted it is removed from the array. |
|
Before this PR can be merged: functions should be added to services, JSX should be put inside render, and the logic of the functionality should be done in such a way where requests have an ID field denoting from which user the request is and also a boolean field showing whether the request has been accepted or not. |
2 participants
Issue As a user I would like to formally "connect" with another user #457
Changes were done in Directory page where a user can now see their connections, see other users they are not connected to, add those users to their connection list, and drop users from their connection list.
the feature is complete
no known bugs
some feedback on the design of the directory page would be useful because I wasn't sure where to show the users connections.