improvements in friend connect/disconect function

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 ? (
         <tr className="align-middle person-row" key={`people-list-item-${id}`}>
           <td className="text-nowrap">
-            <a href="/#" onClick={toggleMoreDetails} className={linkClass}>
+            <a href="/#" onClick={toggleMoreDetails} className="d-flex align-items-center mb-1 fs-0 person-link">
               <div className="avatar avatar-xl">
                 <JKProfileAvatar url={photo_url} />
               </div>
@@ -92,7 +90,7 @@ const JKPerson = props => {
             </div>
           </td>
           <td data-testid="biography-col">
-            {truncate(biography, 310)}
+            <div dangerouslySetInnerHTML={ { __html: truncate(biography, 310) } } />
             {biography && biography.length > 200 && (
               <a href="/#" data-testid="linkMore" onClick={toggleMoreDetails}>
                 {'  '} {t('more', { ns: 'common' })} »

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 ? (
         <>
-          <button
-            className={`btn btn-primary ${cssClasses}`}
+          <Button
+            id={`connect-user-${user.id}`}
+            onClick={addFriend}
+            color={color}
+            size={size}
+            outline={outline}
+            className={cssClasses}
             data-testid="connect"
             disabled={pendingFriendRequest}
-            onClick={addFriend}
-            title={buttonTitle()}
           >
             {addContent}
-          </button>
+            </Button>
+          <Tooltip placement="top" isOpen={tooltipOpen} target={`connect-user-${user.id}`} toggle={() => setTooltipOpen(!tooltipOpen)}>
+            {buttonTitle}
+          </Tooltip>
           {/* <ConnectConfirmModal
             show={showConfirmModal}
             setShow={setShowConfirmModal}
@@ -101,19 +118,26 @@ const JKConnectButton = props => {
         </>
       ) : (
         <>
-          <button
-            className={`btn btn-primary ${cssClasses}`}
-            data-testid="disconnect"
+          <Button
+            id={`disconnect-user-${user.id}`}
             onClick={() => setShowConfirmModal(!showConfirmModal)}
-            title={buttonTitle()}
+            color={color}
+            size={size}
+            outline={outline}
+            className={cssClasses}
+            data-testid="disconnect"
           >
             {removeContent}
-          </button>
+          </Button>
+          <Tooltip placement="top" isOpen={tooltipOpen} target={`disconnect-user-${user.id}`} toggle={() => setTooltipOpen(!tooltipOpen)}>
+            {buttonTitle}
+          </Tooltip>
           <RemoveConfirmModal
             show={showConfirmModal}
             setShow={setShowConfirmModal}
             user={user}
-            handleOnConfirm={removeFriend}
+            handleOnConfirm={unFriend}
+            isRemoving={isRemoving}
           />
         </>
       )}
@@ -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 => {
       <ModalHeader toggle={toggle}>Remove Friend</ModalHeader>
       <ModalBody>Are you sure to remove {user.name} from your friend list?</ModalBody>
       <ModalFooter>
-        <Button color="primary" onClick={accept}>
-          Yes
+        <Button color="primary" onClick={accept} disabled={isRemoving}>
+          {
+            isRemoving ? 'Removing...' : 'Yes'
+          }
         </Button>{' '}
-        <Button color="secondary" onClick={toggle}>
+        <Button color="secondary" onClick={toggle} disabled={isRemoving}>
           Cancel
         </Button>
       </ModalFooter>

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 }) => {
     <span className={`badge latency-badge latency-${label.toLowerCase()}`}>{label}</span>
   ) : (
     <>
-      <span className="me-1">{latencyInfo}</span>
+      <span className="mr-1">{latencyInfo}</span>
       <span className={`badge latency-badge latency-${label.toLowerCase()}`}>{label}</span>
     </>
   );

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;