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
+ } 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}: {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
- } catch (error) {
- //return require(`../../icons/instruments/icon_instrument_unknown.svg`);
- return
- }
-}
-
-
JKSession.propTypes = { session: PropTypes.object.isRequired };
export default JKSession;