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

fix latency badge and avatar image

This commit is contained in:
Nuwan 2023-11-30 09:59:11 +05:30
parent 0a871c738a
commit 335d7667b5
3 changed files with 58 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
jam-ui/src/components/profile/JKLatencyBadge.js
View File

@ -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>
</>
);
};

78
jam-ui/src/components/profile/JKProfileSidePanel.js
View File

@ -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>
)}

19
jam-ui/src/components/sessions/JKSessionUser.js
View File

@ -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} />
</>
);
}