seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

refactor code related to send friend request functionality

This commit is contained in:
Nuwan 2021-10-22 14:11:00 +05:30
parent 4d4cbde465
commit f95ed1ac0c
6 changed files with 132 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jam-ui/cypress/fixtures/person.json
View File

@ -18,7 +18,7 @@
"following_count": 0,
"recording_count": 0,
"session_count": 0,
"biography": "Biography of Test User1",
"biography": "Biography of Test User1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"favorite_count": 0,
"audio_latency": null,
"upcoming_session_count": 0,

8
jam-ui/cypress/integration/friends/friends-page.spec.js
View File

@ -112,12 +112,18 @@ describe('Friends page with data', () => {
cy.intercept('POST', /\S+\/friend_requests/, { statusCode: 201, body: { ok: true } });
cy.visit('/friends');
cy.contains('Test User1').click();
cy.contains('Test User2').click();
cy.get('[data-testid=profileSidePanel]')
.find('[data-testid=connect]')
.should('not.be.disabled')
.click();
cy.get('[data-testid=confirmFriendRequestModal]')
.within(() => {
cy.contains('Send a friend request to Test User2')
cy.contains('Yes').click()
})
cy.get('[data-testid=profileSidePanel]')
.find('[data-testid=connect]')
.should('be.disabled');

39
jam-ui/src/components/page/JKPerson.js
View File

@ -2,47 +2,38 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Row, Col } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
//import avatar from '../../assets/img/team/avatar.png';
import { useAuth } from '../../context/AuthContext';
import { truncate } from '../../helpers/utils';
import { fetchPerson } from '../../store/features/peopleSlice'
import { useDispatch, useSelector } from 'react-redux'
import JKProfileSidePanel from '../profile/JKProfileSidePanel';
import JKProfileAvatar from '../profile/JKProfileAvatar';
import JKProfileInstrumentsList from '../profile/JKProfileInstrumentsList';
import { getPersonById } from '../../helpers/rest';
import JKConnectButton from '../profile/JKConnectButton';
import JKMessageButton from '../profile/JKMessageButton';
import JKLatencyBadge from '../profile/JKLatencyBadge';
import JKLastActiveAgo from '../profile/JKLastActiveAgo';
import { useAuth } from '../../context/AuthContext';
import { truncate } from '../../helpers/utils';
const JKPerson = props => {
const { id, name, biography, photo_url, instruments, latency_data, last_active_timestamp } = props.person;
const viewMode = props.viewMode;
const { currentUser } = useAuth();
const [showSidePanel, setShowSidePanel] = useState(false);
const [user, setUser] = useState(null);
const dispatch = useDispatch()
const user = useSelector(state => state.people.people.find(p => p.id === id))
const fetchPerson = async () => {
//console.log("fetchPerson called");
await getPersonById(id)
.then(response => {
if (response.ok) {
return response.json();
} else {
}
})
.then(json => {
console.log('USER', json);
setUser(json);
})
.catch(error => console.log(error));
};
const toggleMoreDetails = e => {
const toggleMoreDetails = async (e) => {
e.preventDefault();
fetchPerson();
try {
await dispatch(fetchPerson({userId: id})).unwrap()
} catch (error) {
console.log(error);
}
setShowSidePanel(prev => !prev);
};
return (
<>
{viewMode === 'list' ? (

143
jam-ui/src/components/profile/JKConnectButton.js
View File

@ -1,43 +1,54 @@
import React, {useEffect, useState} from 'react';
import {addFriend as connect, removeFriend as disconnect} from '../../helpers/rest';
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { addFriend as connect, removeFriend as disconnect } from '../../helpers/rest';
import { toast } from 'react-toastify';
import { Modal, ModalBody, ModalHeader, ModalFooter, Button } from 'reactstrap';
const JKConnectButton = (props) => {
const { user, currentUser, addContent, removeContent, cssClasses } = props
const [isFriend, setIsFriend] = useState(false)
const [pendingFriendRequest, setPendingFriendRequest] = useState(false)
const JKConnectButton = props => {
const { user, currentUser, addContent, removeContent, cssClasses } = props;
const [isFriend, setIsFriend] = useState(false);
const [pendingFriendRequest, setPendingFriendRequest] = useState(false);
const [showConfirmModal, setShowConfirmModal] = useState(false);
useEffect(() => {
setIsFriend(user.is_friend);
setPendingFriendRequest(user.pending_friend_request)
}, [user])
setPendingFriendRequest(user.pending_friend_request);
}, [user]);
const addFriend = () => {
setPendingFriendRequest(true)
connect(currentUser.id, user.id)
.then(resp => {
if(resp.ok && resp.status === 201){
toast.success('Friend request was sent successfully')
}
})
.catch(err => {
toast.error('An error encountered when sending friend request')
setPendingFriendRequest(false)
})
}
setShowConfirmModal(!showConfirmModal);
setPendingFriendRequest(true);
connect(
currentUser.id,
user.id
)
.then(resp => {
if (resp.ok && resp.status === 201) {
toast.success('Friend request was sent successfully');
}
})
.catch(err => {
toast.error('An error encountered when sending friend request');
setPendingFriendRequest(false);
});
};
const confirm = () => {
setShowConfirmModal(!showConfirmModal);
};
const removeFriend = () => {
disconnect(currentUser.id, user.id)
.then(resp => {
if(resp.ok){
setIsFriend(false)
setPendingFriendRequest(false)
}
})
.catch(err => {
toast.error('An error encountered when removing friend')
})
}
.then(resp => {
if (resp.ok) {
setIsFriend(false);
setPendingFriendRequest(false);
}
})
.catch(err => {
toast.error('An error encountered when removing friend');
});
};
const buttonTitle = () => {
let title;
@ -53,18 +64,72 @@ const JKConnectButton = (props) => {
return (
<>
{ !isFriend ? (
<button className={`btn btn-primary ${cssClasses}`} data-testid="connect" disabled={pendingFriendRequest} onClick={addFriend} title={buttonTitle()}>
{addContent}
</button>)
: (
<button className={`btn btn-primary ${cssClasses}`} data-testid="disconnect" onClick={removeFriend} title={buttonTitle()}>
{removeContent}
{!isFriend ? (
<>
<button
className={`btn btn-primary ${cssClasses}`}
data-testid="connect"
disabled={pendingFriendRequest}
onClick={confirm}
title={buttonTitle()}
>
{addContent}
</button>
)
}
<ConnectConfirmModal
show={showConfirmModal}
setShow={setShowConfirmModal}
user={user}
handleOnConfirm={addFriend}
/>
</>
) : (
<button
className={`btn btn-primary ${cssClasses}`}
data-testid="disconnect"
onClick={removeFriend}
title={buttonTitle()}
>
{removeContent}
</button>
)}
</>
);
};
JKConnectButton.propTypes = {
user: PropTypes.object.isRequired,
currentUser: PropTypes.object.isRequired,
addContent: PropTypes.element.isRequired,
removeContent: PropTypes.element.isRequired
};
const ConnectConfirmModal = props => {
const { className, show, setShow, user, handleOnConfirm } = props;
//const [modal, setModal] = useState(show);
const toggle = () => setShow(!show);
const accept = () => {
handleOnConfirm();
};
return (
<Modal isOpen={show} toggle={toggle} className={className} centered={true} data-testid="confirmFriendRequestModal">
<ModalHeader toggle={toggle}>Send Friend Request</ModalHeader>
<ModalBody>Send a friend request to {user.name}.</ModalBody>
<ModalFooter>
<Button color="primary" onClick={accept}>
Yes
</Button>{' '}
<Button color="secondary" onClick={toggle}>
No
</Button>
</ModalFooter>
</Modal>
);
};
export default JKConnectButton;

2
jam-ui/src/components/profile/JKProfileSkillLevel.js
View File

@ -8,7 +8,7 @@ function JKProfileSkillLevel({skillLevel}) {
return (
<span>
{
skillLevel ? SKILL_LEVEL_MAP[skillLevel] : 'Not specified'
skillLevel in SKILL_LEVEL_MAP ? SKILL_LEVEL_MAP[skillLevel] : 'Not specified'
}
</span>
)

6
jam-ui/src/store/features/peopleSlice.js
View File

@ -23,13 +23,15 @@ export const fetchPerson = createAsyncThunk(
const {userId} = options
const response = await getPersonById(userId)
return response.json()
},{
}
,{
condition: (options, {getState, extra}) => {
const {people} = getState()
const {userId} = options
const person = people.people.find(person => person.id === userId)
console.log('fetchPerson Condition', person);
if(person){
if(person && person.website){
//only proceed if full data set for user has not been fetched. person.website is not included in the initial data fetching (i.e: in friends listing ).
return false;
}
}