show instrument icons in profile details side panel

jam-ui/src/components/profile/JKProfileInstrumentsList.js

@@ -20,11 +20,22 @@ 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">
+          <div key={instrument.instrument_id} className="text-nowrap mb-1">
+              <span className='mr-1'>
+                <img width="25" src={instrumentIconFile(instrument)} alt={instrument.description} /> 
+              </span>
             <strong>{instrument.description}:</strong> {proficiencies[instrument.proficiency_level]}
           </div>
         ))}

jam-ui/src/components/profile/JKProfileSidePanel.js

@@ -31,7 +31,12 @@ const JKProfileSidePanel = props => {
   const {t} = useTranslation();
   
   const joinedDate = () => {
-    return moment(new Date(user.created_at_timestamp * 1000)).format('MM-DD-YYYY');
+    try{
+      return moment(new Date(parseInt(user.created_at_timestamp) * 1000)).format('MM-DD-YYYY');
+    }catch(e){
+      return 'Not specified';
+    }
+   
   };
 
   const location = () => {

jam-ui/src/components/sessions/JKSession.js

@@ -97,6 +97,14 @@ clicks this button, we open an audio stream using Icecast server to let the user
     overflow: "hidden"
   }
 
+  const instrumentIconFile = track => {
+    try {
+      return require(`../../icons/instruments/icon_instrument_${track.instrument_id.replace(/\s+/g,"_")}.svg`)
+    }catch (error) {
+      return require(`../../icons/instruments/icon_instrument_unknown.svg`);
+    }
+  }
+
   return (
     <>
       {greaterThan.sm ? (
@@ -140,7 +148,7 @@ clicks this button, we open an audio stream using Icecast server to let the user
                 <Col>
                   {participant.tracks.map(track => (
                     <span key={track.id} className='mr-1' title={track.instrment}>
-                       <img width="25" src={require(`../../icons/instruments/icon_instrument_${track.instrument_id.replace(/\s+/g,"_")}.svg`)} alt={track.instrment} />
+                       <img width="25" src={instrumentIconFile(track)} alt={track.instrment} />
                     </span>
                   ))}
                 </Col>

jam-ui/src/components/sessions/JKSessionUser.js

@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 function JKSessionUser({ user }) {
   const dispatch = useDispatch();
   const latencyData = useSelector(state => state.latency.latencies.find(l => l.user_id === user.id));
+  const userData = useSelector(state => state.people.people.find(p => p.id === user.id));
   const [showSidePanel, setShowSidePanel] = useState(false);
   const { greaterThan } = useResponsive();
 
@@ -61,7 +62,7 @@ function JKSessionUser({ user }) {
           </div>
         </div>
       )}
-      <JKProfileSidePanel show={showSidePanel} setShow={setShowSidePanel} user={user} toggle={toggleMoreDetails} />
+      <JKProfileSidePanel show={showSidePanel} setShow={setShowSidePanel} user={userData} toggle={toggleMoreDetails} />
     </>
   );
 }

jam-ui/src/icons/instruments/icon_instrument_unknown.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 422.686 422.686" xml:space="preserve">
+<g>
+	<g>
+		<path style="fill:#010002;" d="M211.343,422.686C94.812,422.686,0,327.882,0,211.343C0,94.812,94.812,0,211.343,0
+			s211.343,94.812,211.343,211.343C422.694,327.882,327.882,422.686,211.343,422.686z M211.343,16.257
+			c-107.565,0-195.086,87.52-195.086,195.086s87.52,195.086,195.086,195.086c107.574,0,195.086-87.52,195.086-195.086
+			S318.917,16.257,211.343,16.257z"/>
+	</g>
+	<g>
+		<g>
+			<path style="fill:#010002;" d="M192.85,252.88l-0.569-7.397c-1.707-15.371,3.414-32.149,17.647-49.227
+				c12.811-15.078,19.923-26.182,19.923-38.985c0-14.51-9.112-24.182-27.044-24.467c-10.242,0-21.622,3.414-28.735,8.819
+				l-6.828-17.924c9.388-6.828,25.605-11.38,40.692-11.38c32.726,0,47.52,20.2,47.52,41.83c0,19.346-10.811,33.295-24.483,49.511
+				c-12.51,14.794-17.07,27.312-16.216,41.83l0.284,7.397H192.85V252.88z M186.583,292.718c0-10.526,7.121-17.923,17.078-17.923
+				c9.966,0,16.785,7.397,16.785,17.924c0,9.957-6.544,17.639-17.07,17.639C193.419,310.349,186.583,302.667,186.583,292.718z"/>
+		</g>
+	</g>
+</g>
+</svg>

jam-ui/src/store/features/peopleSlice.js

@@ -109,6 +109,7 @@ export const peopleSlice = createSlice({
     .addCase(acceptFriendRequest.fulfilled, (state, action) => {
     })
     .addCase(fetchPerson.fulfilled, (state, action) => {
+      console.log("fetchPerson -> response", action.payload)
       const person = state.people.find(person => person.id === action.payload.id)
       if(person){
         const updated = {