Instrument icon convered as a react component

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 <img width="25" src={file} alt={instrumentName} />
+      } catch (error) {
+        return <FontAwesomeIcon icon="music" size="md" />
+      }
+    },
+    [instrumentId],
+  )
+  
+  return (
+    InstrumentIcon()
+  )
+}
+
+export default JKInstrumentIcon

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 (
     <div data-testid="instrumentList">
       {instrumentsToShow &&
         instrumentsToShow.map(instrument => (
           <div key={instrument.instrument_id} className="text-nowrap mb-1">
               <span className='mr-1'>
-                <img width="25" src={instrumentIconFile(instrument)} alt={instrument.description} /> 
+                <JKInstrumentIcon instrumentId={instrument.instrument_id} instrumentName={instrument.description} />
               </span>
             <strong>{instrument.description}:</strong> {proficiencies[instrument.proficiency_level]}
           </div>

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 => (
                     <span key={track.id} className="mr-1 mb-1" title={track.instrment}>
                       <a id={`Participant${participant.id}Track${track.id}Instrument`}>
-                        <InstrumentIcon track={track} />
+                        {/* <InstrumentIcon track={track} /> */}
+                        <JKInstrumentIcon instrumentId={track.instrument_id} instrumentName={track.instrument} />
                       </a>
                       <UncontrolledTooltip placement="top" target={`Participant${participant.id}Track${track.id}Instrument`}>
                         {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 <img width="25" src={file} alt={track.instrument} />
-  } catch (error) {
-    //return require(`../../icons/instruments/icon_instrument_unknown.svg`);
-    return <FontAwesomeIcon icon="music" transform="shrink-4 down-1" />
-  }
-}
-
-
 JKSession.propTypes = { session: PropTypes.object.isRequired };
 
 export default JKSession;