diff --git a/jam-ui/src/components/profile/JKInstrumentIcon.js b/jam-ui/src/components/profile/JKInstrumentIcon.js new file mode 100644 index 000000000..997e6764b --- /dev/null +++ b/jam-ui/src/components/profile/JKInstrumentIcon.js @@ -0,0 +1,22 @@ +import React, { useCallback } from 'react' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +function JKInstrumentIcon({instrumentId, instrumentName}) { + const InstrumentIcon = useCallback( + () => { + try { + const file = require(`../../icons/instruments/icon_instrument_${instrumentId.replace(/\s+/g, '_')}.svg`); + return {instrumentName} + } catch (error) { + return + } + }, + [instrumentId], + ) + + return ( + InstrumentIcon() + ) +} + +export default JKInstrumentIcon \ No newline at end of file diff --git a/jam-ui/src/components/profile/JKProfileInstrumentsList.js b/jam-ui/src/components/profile/JKProfileInstrumentsList.js index 313f2540a..4b8771806 100644 --- a/jam-ui/src/components/profile/JKProfileInstrumentsList.js +++ b/jam-ui/src/components/profile/JKProfileInstrumentsList.js @@ -1,6 +1,7 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { useResponsive, useIsMobile } from '@farfetch/react-context-responsive'; +import JKInstrumentIcon from './JKInstrumentIcon'; const JKPersonInstrumentsList = ({ instruments, showAll, toggleMoreDetails }) => { const proficiencies = { @@ -20,21 +21,13 @@ const JKPersonInstrumentsList = ({ instruments, showAll, toggleMoreDetails }) => showAll || !greaterThan.xs ? setInstrumentsToShow(instruments) : setInstrumentsToShow(instruments.slice(0, LIMIT)); }, [showAll]); - const instrumentIconFile = instrument => { - try { - return require(`../../icons/instruments/icon_instrument_${instrument.instrument_id.replace(/\s+/g,"_")}.svg`); - } catch (error) { - return require(`../../icons/instruments/icon_instrument_unknown.svg`); - } - - } return (
{instrumentsToShow && instrumentsToShow.map(instrument => (
- {instrument.description} + {instrument.description}: {proficiencies[instrument.proficiency_level]}
diff --git a/jam-ui/src/components/sessions/JKSession.js b/jam-ui/src/components/sessions/JKSession.js index 93c88c661..bcde9aacd 100644 --- a/jam-ui/src/components/sessions/JKSession.js +++ b/jam-ui/src/components/sessions/JKSession.js @@ -1,5 +1,4 @@ import React, { useEffect } from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { useAuth } from '../../context/UserAuth'; import { useDispatch, useSelector } from 'react-redux'; import { fetchUserLatencies } from '../../store/features/latencySlice'; @@ -16,6 +15,7 @@ import JKSessionUser from './JKSessionUser'; import useNativeAppCheck from '../../hooks/useNativeAppCheck'; import { useNativeApp } from '../../context/NativeAppContext'; import EnterIcon from '../../assets/img/session/session_entrance.png'; +import JKInstrumentIcon from '../profile/JKInstrumentIcon'; function JKSession({ session }) { const { currentUser } = useAuth(); @@ -145,7 +145,8 @@ clicks this button, we open an audio stream using Icecast server to let the user {participant.tracks.map(track => ( - + {/* */} + {track.instrument} @@ -195,17 +196,6 @@ clicks this button, we open an audio stream using Icecast server to let the user ); } -function InstrumentIcon({ track }) { - try { - const file = require(`../../icons/instruments/icon_instrument_${track.instrument_id.replace(/\s+/g, '_')}.svg`); - return {track.instrument} - } catch (error) { - //return require(`../../icons/instruments/icon_instrument_unknown.svg`); - return - } -} - - JKSession.propTypes = { session: PropTypes.object.isRequired }; export default JKSession;