From ccfb48459dc8fcef0a3856e7bce840e8e25a3bfc Mon Sep 17 00:00:00 2001 From: Nuwan Date: Tue, 22 Oct 2024 04:43:40 +0530 Subject: [PATCH] improvements in friend connect/disconect function --- jam-ui/src/components/page/JKPerson.js | 18 ++-- .../src/components/profile/JKConnectButton.js | 83 +++++++++++++------ .../src/components/profile/JKLatencyBadge.js | 9 +- jam-ui/src/store/features/friendsSlice.js | 6 +- 4 files changed, 78 insertions(+), 38 deletions(-) diff --git a/jam-ui/src/components/page/JKPerson.js b/jam-ui/src/components/page/JKPerson.js index cf6f21472..54f7c5c98 100644 --- a/jam-ui/src/components/page/JKPerson.js +++ b/jam-ui/src/components/page/JKPerson.js @@ -28,8 +28,6 @@ const JKPerson = props => { const user = useSelector(state => state.people.people.find(p => p.id === id)); const latencyData = useSelector(state => state.latency.latencies.find(l => l.user_id === id)); const { greaterThan } = useResponsive(); - console.log('latency_data', latency_data); - console.log('latencyData', latencyData); const toggleMoreDetails = async e => { if(e) @@ -57,12 +55,12 @@ const JKPerson = props => { }, []) - const linkClass = useMemo(() => { - if (!online) { - return `d-flex align-items-center mb-1 fs-0 person-link offline`; - } - return `d-flex align-items-center mb-1 fs-0 person-link`; - }, [online]); + // const linkClass = useMemo(() => { + // if (!online) { + // return `d-flex align-items-center mb-1 fs-0 person-link offline`; + // } + // return `d-flex align-items-center mb-1 fs-0 person-link`; + // }, [online]); return ( @@ -70,7 +68,7 @@ const JKPerson = props => { {greaterThan.sm ? ( - +
@@ -92,7 +90,7 @@ const JKPerson = props => { - {truncate(biography, 310)} +
{biography && biography.length > 200 && ( {' '} {t('more', { ns: 'common' })} ยป diff --git a/jam-ui/src/components/profile/JKConnectButton.js b/jam-ui/src/components/profile/JKConnectButton.js index e8d53f513..c4997c8d9 100644 --- a/jam-ui/src/components/profile/JKConnectButton.js +++ b/jam-ui/src/components/profile/JKConnectButton.js @@ -1,15 +1,20 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, 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'; +import { Modal, ModalBody, ModalHeader, ModalFooter, Button, Tooltip } from 'reactstrap'; import { useBrowserQuery } from '../../context/BrowserQuery'; +import { removeFriend } from '../../store/features/friendsSlice'; +import { useDispatch } from 'react-redux'; const JKConnectButton = props => { - const { user, currentUser, addContent, removeContent, cssClasses } = props; + const { user, currentUser, addContent, removeContent, cssClasses, color, size, outline } = props; const [isFriend, setIsFriend] = useState(false); const [pendingFriendRequest, setPendingFriendRequest] = useState(false); const [showConfirmModal, setShowConfirmModal] = useState(false); + const [tooltipOpen, setTooltipOpen] = useState(false); + const [isRemoving, setIsRemoving] = useState(false); + const dispatch = useDispatch(); useEffect(() => { if (user) { @@ -54,21 +59,27 @@ const JKConnectButton = props => { setShowConfirmModal(!showConfirmModal); }; - const removeFriend = () => { + const unFriend = () => { + setIsRemoving(true); disconnect(currentUser.id, user.id) .then(resp => { if (resp.ok) { - setIsFriend(false); - setPendingFriendRequest(false); + dispatch(removeFriend(user.id)); } }) .catch(err => { toast.error('An error encountered when removing friend'); + }) + .finally(() => { + setIsFriend(false); + setPendingFriendRequest(false); + setIsRemoving(false); + setShowConfirmModal(false); }); }; - const buttonTitle = () => { - let title; + const buttonTitle = useMemo(() => { + let title = ""; if (pendingFriendRequest) { title = 'Delete pending friend request'; } else if (!isFriend) { @@ -77,21 +88,27 @@ const JKConnectButton = props => { title = 'Unfriend this person'; } return title; - }; + }, [isFriend, pendingFriendRequest]); return ( <> {!isFriend ? ( <> - + + setTooltipOpen(!tooltipOpen)}> + {buttonTitle} + {/* { ) : ( <> - + + setTooltipOpen(!tooltipOpen)}> + {buttonTitle} + )} @@ -125,7 +149,14 @@ JKConnectButton.propTypes = { user: PropTypes.object.isRequired, currentUser: PropTypes.object.isRequired, addContent: PropTypes.element.isRequired, - removeContent: PropTypes.element.isRequired + removeContent: PropTypes.element.isRequired, + +}; + +JKConnectButton.defaultProps = { + color: 'primary', + size: 'sm', + outline: false }; // const ConnectConfirmModal = props => { @@ -158,7 +189,7 @@ JKConnectButton.propTypes = { // }; const RemoveConfirmModal = props => { - const { className, show, setShow, user, handleOnConfirm } = props; + const { className, show, setShow, user, handleOnConfirm, isRemoving } = props; const toggle = () => setShow(!show); @@ -171,10 +202,12 @@ const RemoveConfirmModal = props => { Remove Friend Are you sure to remove {user.name} from your friend list? - {' '} - diff --git a/jam-ui/src/components/profile/JKLatencyBadge.js b/jam-ui/src/components/profile/JKLatencyBadge.js index c7d185b0b..38314e846 100644 --- a/jam-ui/src/components/profile/JKLatencyBadge.js +++ b/jam-ui/src/components/profile/JKLatencyBadge.js @@ -31,6 +31,13 @@ const JKLatencyBadge = ({ latencyData, showAll, showBadgeOnly }) => { useEffect(() => { if (latencyData) { + if( + (latencyData.ars_internet_latency === "" || parseFloat(latencyData.ars_internet_latency) === NaN) || + (latencyData.audio_latency === "" || parseFloat(latencyData.audio_latency) === NaN)){ + setLatencyLabel(LATENCY_SCORES['unknown']['min']); + setLatencyInfo(""); + return; + } const tot = Math.round(latencyData.ars_internet_latency) + Math.round(latencyData.audio_latency); setLatencyLabel(tot); @@ -50,7 +57,7 @@ const JKLatencyBadge = ({ latencyData, showAll, showBadgeOnly }) => { {label} ) : ( <> - {latencyInfo} + {latencyInfo} {label} ); diff --git a/jam-ui/src/store/features/friendsSlice.js b/jam-ui/src/store/features/friendsSlice.js index 3dd087b14..b8ea6d417 100644 --- a/jam-ui/src/store/features/friendsSlice.js +++ b/jam-ui/src/store/features/friendsSlice.js @@ -31,7 +31,9 @@ export const FriendSlice = createSlice({ initialState, reducers: { addFriend: (state) => {}, - updateFriend: (state) => {}, + removeFriend: (state, action) => { + state.friends = state.friends.filter(friend => friend.id !== action.payload); + }, deleteFriend: (state) => {}, sortFriends: (state, action) => { console.log('sorting friends', action.payload) @@ -61,5 +63,5 @@ export const FriendSlice = createSlice({ } }) -export const { sortFriends } = FriendSlice.actions; +export const { sortFriends, removeFriend } = FriendSlice.actions; export default FriendSlice.reducer; \ No newline at end of file