From 335d7667b5a3ac34c1bf5318042c83924924cb5a Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Thu, 30 Nov 2023 09:59:11 +0530
Subject: [PATCH] fix latency badge and avatar image

---
 .../src/components/profile/JKLatencyBadge.js  |  4 +-
 .../components/profile/JKProfileSidePanel.js  | 78 ++++++++++---------
 .../src/components/sessions/JKSessionUser.js  | 19 ++++-
 3 files changed, 58 insertions(+), 43 deletions(-)

diff --git a/jam-ui/src/components/profile/JKLatencyBadge.js b/jam-ui/src/components/profile/JKLatencyBadge.js
index 9dc004150..2d31034ad 100644
--- a/jam-ui/src/components/profile/JKLatencyBadge.js
+++ b/jam-ui/src/components/profile/JKLatencyBadge.js
@@ -49,10 +49,10 @@ const JKLatencyBadge = ({ latencyData, showAll, showBadgeOnly }) => {
   return showBadgeOnly ? (
     <span className={`badge latency-badge latency-${label.toLowerCase()}`}>{label}</span>
   ) : (
-    <div className="d-flex flex-row align-items-center">
+    <>
       <span className="me-1">{latencyInfo}</span>
       <span className={`badge latency-badge latency-${label.toLowerCase()}`}>{label}</span>
-    </div>
+    </>
   );
 };
 
diff --git a/jam-ui/src/components/profile/JKProfileSidePanel.js b/jam-ui/src/components/profile/JKProfileSidePanel.js
index 9e57ae65c..11686c311 100644
--- a/jam-ui/src/components/profile/JKProfileSidePanel.js
+++ b/jam-ui/src/components/profile/JKProfileSidePanel.js
@@ -8,7 +8,7 @@ import { Modal, ModalBody, ModalHeader } from 'reactstrap';
 import ScrollBarCustom from '../common/ScrollBarCustom';
 
 import { useAuth } from '../../context/UserAuth';
-import { useTranslation } from "react-i18next";
+import { useTranslation } from 'react-i18next';
 
 import JKProfileAvatar from './JKProfileAvatar';
 import JKProfileInstrumentsList from './JKProfileInstrumentsList';
@@ -23,31 +23,29 @@ import JKLatencyBadge from './JKLatencyBadge';
 import JKLastActiveAgo from './JKLastActiveAgo';
 import JKProfileSkillLevel from './JKProfileSkillLevel';
 
-
 const JKProfileSidePanel = props => {
   const { show, setShow, user, latencyData } = props;
   const { currentUser } = useAuth();
   const toggle = () => setShow(!show);
-  const {t} = useTranslation();
-  
+  const { t } = useTranslation();
+
   const joinedDate = () => {
-    try{
+    try {
       return moment(new Date(parseInt(user.created_at_timestamp) * 1000)).format('MM-DD-YYYY');
-    }catch(e){
+    } catch (e) {
       return 'Not specified';
     }
-   
   };
 
   const location = () => {
-    if(user.location && user.location.trim().length && user.country && user.country.trim().length){
+    if (user.location && user.location.trim().length && user.country && user.country.trim().length) {
       return `${user.location}, ${user.country}`;
-    }else if(user.country && user.country.trim().length){
-      return user.country;  
-    }else{
-      return "Not specified";
+    } else if (user.country && user.country.trim().length) {
+      return user.country;
+    } else {
+      return 'Not specified';
     }
-  }
+  };
 
   return (
     <Modal
@@ -62,7 +60,7 @@ const JKProfileSidePanel = props => {
         {user && (
           <Fragment>
             <div className="avatar avatar-2xl d-inline-block me-2 mr-2">
-              <JKProfileAvatar url={user.photo_url} size="2xl" />
+              <JKProfileAvatar src={user.photo_url} size="2xl" />
             </div>
             <h4 className="d-inline-block align-middle mt-n3 pt-0">{user.name}</h4>
           </Fragment>
@@ -79,28 +77,31 @@ const JKProfileSidePanel = props => {
         <ModalBody className="pb-5">
           {user && (
             <div>
-              <p>
-                <strong>{t('person_attributes.latency_to_me', {ns: 'people'})}:</strong> <JKLatencyBadge latencyData={latencyData} showAll={true} />
+              <div className="mb-3">
+                <strong>{t('person_attributes.latency_to_me', { ns: 'people' })}:</strong>{' '}
+                <JKLatencyBadge latencyData={latencyData} showAll={true} />
                 <br />
-                <strong>{t('person_attributes.location', {ns: 'people'})}:</strong> {`${location()}`}
+                <strong>{t('person_attributes.location', { ns: 'people' })}:</strong> {`${location()}`}
                 <br />
-                <strong>{t('person_attributes.skill_level', {ns: 'people'})}:</strong> <JKProfileSkillLevel skillLevel={user.skill_level} />
+                <strong>{t('person_attributes.skill_level', { ns: 'people' })}:</strong>{' '}
+                <JKProfileSkillLevel skillLevel={user.skill_level} />
                 <br />
-                <strong>{t('person_attributes.joined_jamkazam', {ns: 'people'})}:</strong> {joinedDate()}
+                <strong>{t('person_attributes.joined_jamkazam', { ns: 'people' })}:</strong> {joinedDate()}
                 <br />
-                <strong>{t('person_attributes.last_active', {ns: 'people'})}:</strong> <JKLastActiveAgo timestamp={user.last_active_timestamp} />
-              </p>
+                <strong>{t('person_attributes.last_active', { ns: 'people' })}:</strong>{' '}
+                <JKLastActiveAgo timestamp={user.last_active_timestamp} />
+              </div>
 
               {user.biography && user.biography.length > 0 && (
                 <div data-testid="biography">
-                  <h5>{t('person_attributes.about', {ns: 'people'})}</h5>
+                  <h5>{t('person_attributes.about', { ns: 'people' })}</h5>
                   <p>{user.biography}</p>
                 </div>
               )}
 
               {user.instruments && user.instruments.length && (
                 <div data-testid="instruments">
-                  <h5>{t('person_attributes.instruments', {ns: 'people'})}</h5>
+                  <h5>{t('person_attributes.instruments', { ns: 'people' })}</h5>
                   <JKProfileInstrumentsList instruments={user.instruments} showAll={true} />
                 </div>
               )}
@@ -108,28 +109,28 @@ const JKProfileSidePanel = props => {
               {user.genres && user.genres.length > 0 && (
                 <div data-testid="genres">
                   <br />
-                  <h5>{t('person_attributes.genres', {ns: 'people'})}</h5>
+                  <h5>{t('person_attributes.genres', { ns: 'people' })}</h5>
                   <JKProfileGenres genres={user.genres} showAll={true} />
                 </div>
               )}
-              
+
               {user.bands && user.bands.length > 0 && (
                 <div data-testid="bands">
                   <br />
-                  <h5>{t('person_attributes.bands', {ns: 'people'})}</h5>
+                  <h5>{t('person_attributes.bands', { ns: 'people' })}</h5>
                   {user.bands.map(band => (
-                    <p key={band.id} >
-                      <a href={band.website} target='_blank'>
+                    <p key={band.id}>
+                      <a href={band.website} target="_blank">
                         {band.name}
                       </a>
                     </p>
                   ))}
                 </div>
               )}
-              
+
               {user.performance_samples && user.performance_samples.length > 0 && (
                 <div data-testid="performance_samples">
-                  <h5>{t('person_attributes.performance_samples', {ns: 'people'})}</h5>
+                  <h5>{t('person_attributes.performance_samples', { ns: 'people' })}</h5>
                   <JKProfilePerformanceSamples samples={user.performance_samples} />
                 </div>
               )}
@@ -137,17 +138,17 @@ const JKProfileSidePanel = props => {
               {user.online_presences && user.online_presences.length > 0 && (
                 <div data-testid="online_presences">
                   <br />
-                  <h5>{t('person_attributes.online_presence', {ns: 'people'})}</h5>
+                  <h5>{t('person_attributes.online_presence', { ns: 'people' })}</h5>
                   <JKProfileOnlinePresence onlinePresences={user.online_presences} userId={user.id} />
                 </div>
               )}
 
               <br />
-              
+
               {user.genres && user.genres.length > 0 && (
                 <>
-                <h5>{t('person_attributes.interests', {ns: 'people'})}</h5>
-                <JKProfileInterests user={user} />
+                  <h5>{t('person_attributes.interests', { ns: 'people' })}</h5>
+                  <JKProfileInterests user={user} />
                 </>
               )}
 
@@ -158,17 +159,20 @@ const JKProfileSidePanel = props => {
                     user={user}
                     addContent={
                       <>
-                        <FontAwesomeIcon icon="plus" transform="shrink-4 down-1" className="mr-1" /> {t('add_friend', {ns: 'people'})}{' '}
+                        <FontAwesomeIcon icon="plus" transform="shrink-4 down-1" className="mr-1" />{' '}
+                        {t('add_friend', { ns: 'people' })}{' '}
                       </>
                     }
                     removeContent={
                       <>
-                        <FontAwesomeIcon icon="minus" transform="shrink-4 down-1" className="mr-1" /> {t('disconnect', {ns: 'people'})}
+                        <FontAwesomeIcon icon="minus" transform="shrink-4 down-1" className="mr-1" />{' '}
+                        {t('disconnect', { ns: 'people' })}
                       </>
                     }
                   />{' '}
                   <JKMessageButton size="md" currentUser={currentUser} user={user}>
-                    <FontAwesomeIcon icon="comments" transform="shrink-4 down-1" className="mr-1" /> {t('send_message', {ns: 'people'})}
+                    <FontAwesomeIcon icon="comments" transform="shrink-4 down-1" className="mr-1" />{' '}
+                    {t('send_message', { ns: 'people' })}
                   </JKMessageButton>
                 </div>
               )}
diff --git a/jam-ui/src/components/sessions/JKSessionUser.js b/jam-ui/src/components/sessions/JKSessionUser.js
index 5df8584c1..de23f9579 100644
--- a/jam-ui/src/components/sessions/JKSessionUser.js
+++ b/jam-ui/src/components/sessions/JKSessionUser.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { fetchPerson } from '../../store/features/peopleSlice';
 import { useResponsive } from '@farfetch/react-context-responsive';
@@ -15,10 +15,21 @@ function JKSessionUser({ user }) {
   const [showSidePanel, setShowSidePanel] = useState(false);
   const { greaterThan } = useResponsive();
 
+  const fetchPersonData = useCallback(async ()  => {
+    await dispatch(fetchPerson({ userId: user.id })).unwrap();
+  }, [user.id])
+
+  useEffect(() => {
+    fetchPersonData();
+  }, [user.id])
+  
+
   const toggleMoreDetails = async e => {
     e.preventDefault();
     try {
-      await dispatch(fetchPerson({ userId: user.id })).unwrap();
+      if(!userData){
+        await fetchPersonData();
+      }
     } catch (error) {
       console.log(error);
     }
@@ -45,7 +56,7 @@ function JKSessionUser({ user }) {
             </a>
           </div>
           <div className="ml-2 ms-2" style={{ marginRight: 'auto' }}>
-            <JKLatencyBadge latencyData={latencyData} showAll={false} />
+            <JKLatencyBadge latencyData={latencyData} showBadgeOnly={true} />
           </div>
         </div>
       ) : (
@@ -62,7 +73,7 @@ function JKSessionUser({ user }) {
           </div>
         </div>
       )}
-      <JKProfileSidePanel show={showSidePanel} setShow={setShowSidePanel} user={userData} toggle={toggleMoreDetails} />
+      <JKProfileSidePanel show={showSidePanel} setShow={setShowSidePanel} user={userData} latencyData={latencyData} />
     </>
   );
 }