fixes in redux stores. also dismiss warnning messages raised when building

jam-ui/cypress/fixtures/people.json

@@ -11,7 +11,7 @@
       "online": true,
       "musician": true,
       "photo_url": null,
-      "biography": "Biography of Test User1",
+      "biography": "Biography of Test User1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
       "full_score": null,
       "instruments": [
         { "instrument_id": "acoustic guitar", "description": "Acoustic Guitar", "proficiency_level": 3, "priority": 1 },
@@ -42,7 +42,7 @@
       "online": false,
       "musician": true,
       "photo_url": null,
-      "biography": "",
+      "biography": "Biography of Test User2.",
       "full_score": null,
       "instruments": [
         { "instrument_id": "acoustic guitar", "description": "Acoustic Guitar", "proficiency_level": 3, "priority": 1 }

jam-ui/cypress/integration/friends/friends-page.spec.js

@@ -73,7 +73,7 @@ describe('Friends page with data', () => {
       });
     };
 
-    const closeMoreDetailsSidePanel = () => {
+    const closeSidePanel = () => {
       cy.get('[data-testid=profileSidePanel] .modal-header button.close').click();
     };
 
@@ -86,7 +86,7 @@ describe('Friends page with data', () => {
       //open side panel by clicking name
       cy.contains('Test User1').click();
       showSidePanelContent();
-      closeMoreDetailsSidePanel();
+      closeSidePanel();
 
       //open side panel by clicking more button
       cy.get('[data-testid=peopleListTable] > tbody tr')
@@ -94,7 +94,7 @@ describe('Friends page with data', () => {
         .find('[data-testid=btnMore]')
         .click();
       showSidePanelContent();
-      closeMoreDetailsSidePanel();
+      closeSidePanel();
 
       //open side panel by clicking more link
       cy.get('[data-testid=peopleListTable] > tbody tr')
@@ -102,7 +102,7 @@ describe('Friends page with data', () => {
         .find('[data-testid=linkMore]')
         .click();
       showSidePanelContent();
-      closeMoreDetailsSidePanel();
+      closeSidePanel();
     });
   });
 

jam-ui/cypress/support/commands.js

@@ -25,8 +25,6 @@
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
 
-import {createTextMessage} from '../../src/helpers/rest'
-
 Cypress.Commands.add('stubAuthenticate', (attrs = {}) => {
   const defaultAttrs = {
     id: '1',

jam-ui/cypress/support/index.js

@@ -16,7 +16,6 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 
-
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 

jam-ui/src/components/common/JKTooltip.js

@@ -7,8 +7,9 @@ const JKTooltip = props => {
   const toggle = () => setTooltipOpen(!tooltipOpen);
 
   return (
-    <a href="#">
+    <a href="javascript: void(0);">
       <img
+        alt="help"
         ref={iconRef}
         src={require('../../assets/img/icons/question_icon.svg')}
         height="12"

jam-ui/src/components/navbar/JKNavbarTop.js

@@ -1,13 +1,10 @@
 import React, { useContext } from 'react';
-import { Collapse, Navbar, NavItem, Nav } from 'reactstrap';
+import { Navbar } from 'reactstrap';
 import classNames from 'classnames';
 import AppContext from '../../context/Context';
 import Logo from './Logo';
-//import SearchBox from './SearchBox';
 import TopNavRightSideNavItem from './JKTopNavRightSideNavItem';
-//import NavbarTopDropDownMenus from './NavbarTopDropDownMenus';
 import { navbarBreakPoint, topNavbarBreakpoint } from '../../config';
-//import autoCompleteInitialItem from '../../data/autocomplete/autocomplete';
 
 const JKNavbarTop = () => {
   const {

jam-ui/src/components/navbar/JKNavbarVertical.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import is from 'is_js';
 import PropTypes from 'prop-types';
 import React, { useContext, useEffect, useRef } from 'react';
-import { Button, Collapse, Nav, Navbar } from 'reactstrap';
+import { Collapse, Nav, Navbar } from 'reactstrap';
 import bgNavbarImg from '../../assets/img/generic/bg-navbar.png';
 import { navbarBreakPoint, topNavbarBreakpoint } from '../../config';
 import AppContext from '../../context/Context';
@@ -11,7 +11,7 @@ import Flex from '../common/Flex';
 import Logo from './Logo';
 import NavbarTopDropDownMenus from './NavbarTopDropDownMenus';
 import NavbarVerticalMenu from './NavbarVerticalMenu';
-import ToggleButton from './ToggleButton';
+//import ToggleButton from './ToggleButton';
 
 const JKNavbarVertical = ({ navbarStyle }) => {
   const navBarRef = useRef(null);

jam-ui/src/components/navbar/JKNotificationDropdown.js

@@ -1,13 +1,11 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import classNames from 'classnames';
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
 import { Card, Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
 import ListGroup from 'reactstrap/es/ListGroup';
 import ListGroupItem from 'reactstrap/es/ListGroupItem';
-//import { rawEarlierNotifications, rawNewNotifications } from '../../data/notification/notification';
 import { isIterableArray } from '../../helpers/utils';
-//import useFakeFetch from '../../hooks/useFakeFetch';
 import FalconCardHeader from '../common/FalconCardHeader';
 import Notification from '../notification/JKNotification';
 
@@ -20,12 +18,9 @@ const JKNotificationDropdown = () => {
   const dispatch = useDispatch();
   const notifications = useSelector(state => state.notification.notifications.slice(0, 5));
 
-  const LIMIT = 20;
+  const LIMIT = 5;
   const [page, setPage] = useState(0);
 
-  // State
-  //const { data: newNotifications, setData: setNewNotifications } = useFakeFetch(rawNewNotifications);
-  //const { data: earlierNotifications, setData: setEarlierNotifications } = useFakeFetch(rawEarlierNotifications);
   const [isOpen, setIsOpen] = useState(false);
   const [isAllRead, setIsAllRead] = useState(false);
 
@@ -35,32 +30,6 @@ const JKNotificationDropdown = () => {
     setIsOpen(!isOpen);
   };
 
-  // const markAsRead = e => {
-  //   e.preventDefault();
-  //   const updatedNewNotifications = newNotifications.map(notification => {
-  //     if (notification.hasOwnProperty('unread')) {
-  //       return {
-  //         ...notification,
-  //         unread: false
-  //       };
-  //     }
-  //     return notification;
-  //   });
-  //   const updatedEarlierNotifications = earlierNotifications.map(notification => {
-  //     if (notification.hasOwnProperty('unread')) {
-  //       return {
-  //         ...notification,
-  //         unread: false
-  //       };
-  //     }
-  //     setIsAllRead(true);
-  //     return notification;
-  //   });
-
-  //   setNewNotifications(updatedNewNotifications);
-  //   setEarlierNotifications(updatedEarlierNotifications);
-  // };
-
   const loadNotifications = async () => {
     try {
       const options = {
@@ -69,7 +38,7 @@ const JKNotificationDropdown = () => {
         limit: LIMIT
       };
       await dispatch(fetchNotifications(options)).unwrap();
-      console.log('NOTIFICATIONS', notifications);
+      //console.log('NOTIFICATIONS', notifications);
       //setPage(prev => prev + 1);
     } catch (error) {
       console.log(error);

jam-ui/src/components/navbar/JKProfileDropdown.js

@@ -1,6 +1,5 @@
 //import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
 import { DropdownItem, DropdownMenu, DropdownToggle, Dropdown } from 'reactstrap';
 import { useAuth } from '../../context/AuthContext';
 import JKProfileAvatar from '../profile/JKProfileAvatar';

jam-ui/src/components/navbar/JKTopNavRightSideNavItem.js

@@ -3,13 +3,13 @@ import { Nav, NavItem, NavLink, UncontrolledTooltip, NavbarText } from 'reactstr
 import ProfileDropdown from './JKProfileDropdown';
 import NotificationDropdown from './JKNotificationDropdown';
 //import SettingsAnimatedIcon from './SettingsAnimatedIcon';
-import CartNotification from './CartNotification';
+//import CartNotification from './CartNotification';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link } from 'react-router-dom';
 import AppContext from '../../context/Context';
 import classNames from 'classnames';
 import { navbarBreakPoint } from '../../config';
-import { useSelector } from 'react-redux';
+//import { useSelector } from 'react-redux';
 
 const TopNavRightSideNavItem = () => {
 

jam-ui/src/components/notification/JKNotification.js

@@ -46,39 +46,21 @@ function JKNotification(props) {
     switch (description) {
       case NOTIFICATION_TYPES.TEXT_MESSAGE:
         return <TextMessageNotification notification={props.notification } handleOnAccept={handleOnAccept} />;
-        break;
       case NOTIFICATION_TYPES.FRIEND_REQUEST:
         return <JKFriendRequestNotification notification={props.notification} handleOnAccept={handleOnAccept} />;
-        break;
-
       default:
         return <JKGenericNotification {...props.notification} />;
-        break;
     }
   };
 
   return (<a className={classNames('notification', props.classNames) }>{render()}</a>);
 
-  // <Link className={classNames('notification', { 'bg-200': unread, 'notification-flush': flush }, className)} to={to}>
-  //   {avatar && (
-  //     <div className="notification-avatar">
-  //       <Avatar {...avatar} className="mr-3" />
-  //     </div>
-  //   )}
-  //   <div className="notification-body">
-  //     <p className={emoji ? 'mb-1' : 'mb-0'} dangerouslySetInnerHTML={createMarkup(children)} />
-  //     <span className="notification-time">
-  //       {emoji && (
-  //         <span className="mr-1" role="img" aria-label="Emoji">
-  //           {emoji}
-  //         </span>
-  //       )}
-  //       {time}
-  //     </span>
-  //   </div>
-  // </Link>
 };
 
+JKNotification.propTypes = {
+  notification: PropTypes.object.isRequired
+}
+
 // JKNotification.propTypes = {
 //   // to: PropTypes.string.isRequired,
 //   // avatar: PropTypes.shape(Avatar.propTypes),

jam-ui/src/components/notification/JKTextMessageNotification.js

@@ -1,51 +1,24 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useAuth } from '../../context/AuthContext';
-
 import { useDispatch, useSelector } from 'react-redux';
-import { selectPersonById, fetchPerson, add as addPerson } from '../../store/features/peopleSlice';
+import { fetchPerson, add as addPerson } from '../../store/features/peopleSlice';
 import JKMessageButton from '../profile/JKMessageButton';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ProfileAvatar from '../profile/JKProfileAvatar';
 import TimeAgo from '../common/JKTimeAgo';
+import { truncate } from '../../helpers/utils';
 
 function JKTextMessageNotification(props) {
   const { source_user, source_user_id, message, created_at } = props.notification;
-  const handleOnAccept = props.handleOnAccept;
-  
+
   const { currentUser } = useAuth();
-  //const [user, setUser] = useState(null);
   const dispatch = useDispatch();
 
   const user = useSelector(state => state.people.people.find(person => person.id === source_user_id));
 
-  // const user = useSelector(selectPersonById)
-
-  const loadSourceUser = () => {
-    if (!user) {
-      dispatch(fetchPerson({ userId: source_user_id }))
-        .unwrap()
-        .then(resp => {
-          dispatch(addPerson(resp))
-        })
-        .catch(error => console.log(error));
-    }
-  };
-
   useEffect(() => {
-    loadSourceUser();
-    return () => {
-      //cleanup
-    };
+    dispatch(fetchPerson({ userId: source_user_id }))
   }, []);
 
-  const truncate = msg => {
-    if (msg.length <= 200) {
-      return msg;
-    } else {
-      return `${msg.substring(0, 200)}...`;
-    }
-  };
-
   return (
     <>
       <div className="notification-avatar mr-3">
@@ -53,7 +26,7 @@ function JKTextMessageNotification(props) {
       </div>
       <div className="notification-body">
         <p className="mb-1">
-          {source_user.name} said: {truncate(message)}
+          {source_user.name} said: {truncate(message, 120)}
         </p>
         <span className="notification-time">
           <TimeAgo date={created_at} />

jam-ui/src/components/page/JKNotifications.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { Alert, Card, CardBody, Col, Row } from 'reactstrap';
-import classNames from 'classnames';
 import JKNotification from '../notification/JKNotification';
 import FalconCardHeader from '../common/FalconCardHeader';
 import Loader from '../common/Loader';

jam-ui/src/components/page/JKPeople.js

@@ -30,22 +30,23 @@ const JKPeople = ({ className }) => {
         return;
       } 
       try {
+        console.log('BEFORE fetching people');
         dispatch(fetchPeople({ page }));
       } catch (error) {
         console.log('Error fetching people', error);
       }
     },
-    [page]
+    [page, totalPages, dispatch]
   );
 
   useEffect(() => {
     loadPeople();
   }, [page]);
 
-  useEffect(() => {
-    if (loadingStatus === 'succeeded' && peopleListRef.current && page !== 1) {
-    }
-  }, [loadingStatus]);
+  // useEffect(() => {
+  //   if (loadingStatus === 'succeeded' && peopleListRef.current && page !== 1) {
+  //   }
+  // }, [loadingStatus]);
 
   const goNextPage = () => {
     setPage(val => ++val);

jam-ui/src/components/page/JKPeopleList.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, Row, Col, Button } from 'reactstrap';
+import { Table } from 'reactstrap';
 import JKPerson from './JKPerson';
 import PropTypes from 'prop-types';
 
@@ -10,7 +10,7 @@ const JKPeopleList = ({ people }) => {
         <thead className="bg-200 text-900">
           <tr>
             <th scope="col">Name</th>
-            <th scope="col" style={{ minWidth: 250 }} className="d-none d-lg-block d-xl-none">
+            <th scope="col" style={{ minWidth: 250 }}>
               About
             </th>
             <th scope="col">Instruments</th>
@@ -20,7 +20,7 @@ const JKPeopleList = ({ people }) => {
         </thead>
         <tbody className="list">
           {people.map((person, index) => (
-            <tr className="align-middle" key={person.id}>
+            <tr className="align-middle" key={`people-list-item-${person.id}`}>
               <JKPerson person={person} viewMode="list" />
             </tr>
           ))}

jam-ui/src/components/page/JKPeopleSwiper.js

@@ -43,7 +43,7 @@ const JKPeopleSwiper = ({ people, goNextPage }) => {
         }}
       >
         {people.map((person, index) => (
-          <SwiperSlide key={person.id}>
+          <SwiperSlide key={`people-swiper-item-${person.id}`}>
             <Card className="swiper-person-card">
               <CardHeader className="bg-200">
                 <div className="avatar avatar-xl d-inline-block me-2 mr-2">

jam-ui/src/components/page/JKPerson.js

@@ -1,8 +1,8 @@
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col, Container } from 'reactstrap';
+import { Row, Col } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import avatar from '../../assets/img/team/avatar.png';
+//import avatar from '../../assets/img/team/avatar.png';
 import JKProfileSidePanel from '../profile/JKProfileSidePanel';
 import JKProfileAvatar from '../profile/JKProfileAvatar';
 import JKProfileInstrumentsList from '../profile/JKProfileInstrumentsList';
@@ -12,6 +12,7 @@ import JKMessageButton from '../profile/JKMessageButton';
 import JKLatencyBadge from '../profile/JKLatencyBadge';
 import JKLastActiveAgo from '../profile/JKLastActiveAgo';
 import { useAuth } from '../../context/AuthContext';
+import { truncate } from '../../helpers/utils';
 
 const JKPerson = props => {
   const { id, name, biography, photo_url, instruments, latency_data, last_active_timestamp } = props.person;
@@ -37,7 +38,8 @@ const JKPerson = props => {
       .catch(error => console.log(error));
   };
 
-  const toggleMoreDetails = () => {
+  const toggleMoreDetails = e => {
+    e.preventDefault();
     fetchPerson();
     setShowSidePanel(prev => !prev);
   };
@@ -46,7 +48,7 @@ const JKPerson = props => {
       {viewMode === 'list' ? (
         <>
           <td className="text-nowrap">
-            <a onClick={toggleMoreDetails} className="d-flex align-items-center mb-1 fs-0">
+            <a href="/#" onClick={toggleMoreDetails} className="d-flex align-items-center mb-1 fs-0">
               <div className="avatar avatar-xl">
                 <JKProfileAvatar url={photo_url} />
               </div>
@@ -62,10 +64,10 @@ const JKPerson = props => {
               <strong>Last Active:</strong> <JKLastActiveAgo timestamp={last_active_timestamp} />
             </div>
           </td>
-          <td className="d-none d-lg-block d-xl-none">
-            { biography }
-            { biography && biography.length > 0 && (
-              <a data-testid="linkMore" onClick={toggleMoreDetails}>
+          <td>
+            {truncate(biography, 200)}
+            {biography && biography.length > 200 && (
+              <a href="/#" data-testid="linkMore" onClick={toggleMoreDetails}>
                 {'  '} more »
               </a>
             )}
@@ -87,7 +89,7 @@ const JKPerson = props => {
               <FontAwesomeIcon icon="comments" transform="shrink-4 down-1" className="mr-1" />
             </JKMessageButton>
 
-            <a onClick={toggleMoreDetails} data-testid="btnMore">
+            <a href="/#" onClick={toggleMoreDetails} data-testid="btnMore">
               <span className="btn btn-primary fs--1 px-2 py-1" data-bs-toggle="tooltip" title="View Profile">
                 <FontAwesomeIcon icon="user" transform="shrink-4 down-1" className="mr-1" />
               </span>
@@ -112,7 +114,7 @@ const JKPerson = props => {
           </Row>
           <Row className="d-block d-sm-none mt-3">
             <Col>
-            <h5>Instruments</h5>
+              <h5>Instruments</h5>
               <JKProfileInstrumentsList instruments={instruments} />
             </Col>
           </Row>
@@ -130,7 +132,7 @@ const JKPerson = props => {
             <FontAwesomeIcon icon="comments" transform="shrink-4 down-1" className="mr-1" />
           </JKMessageButton>
 
-          <a onClick={toggleMoreDetails} data-testid="btnMore">
+          <a href="/#" onClick={toggleMoreDetails} data-testid="btnMore">
             <span className="btn btn-primary fs--1 px-2 py-1" data-bs-toggle="tooltip" title="View Profile">
               <FontAwesomeIcon icon="user" transform="shrink-4 down-1" className="mr-1" />
             </span>
@@ -145,15 +147,14 @@ const JKPerson = props => {
 JKPerson.propTypes = {
   person: PropTypes.object.isRequired,
   viewMode: PropTypes.string
-  //instruments: PropTypes.arrayOf(PropTypes.string)
 };
 
-const JKPersonAvator = ({ url }) => {
-  if (url) {
-    return <img className="avatar avatar-xl rounded-circle" src={url} />;
-  } else {
-    return <img className="avatar avatar-xl rounded-circle" src={avatar} />;
-  }
-};
+// const JKPersonAvator = ({ url }) => {
+//   if (url) {
+//     return <img className="avatar avatar-xl rounded-circle" src={url} />;
+//   } else {
+//     return <img className="avatar avatar-xl rounded-circle" src={avatar} />;
+//   }
+// };
 
 export default JKPerson;

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

@@ -29,7 +29,7 @@ const JKLatencyBadge = ({ latencyData, showAll }) => {
     setLabel(lbl);
   };
 
-  const buildBadgeMarkup = () => {
+  useEffect(() => {
     if (latencyData) {
       setLatencyLabel(latencyData.ars_total_latency);
 
@@ -39,10 +39,6 @@ const JKLatencyBadge = ({ latencyData, showAll }) => {
         setLatencyInfo(`${latencyData.ars_total_latency}ms`);
       }
     }
-  };
-
-  useEffect(() => {
-    buildBadgeMarkup();
   }, [latencyData]);
 
   return (

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

@@ -11,16 +11,11 @@ const JKMessageButton = props => {
 
   const toggleTooltip = () => setTooltipOpen(!tooltipOpen);
 
-
   useEffect(() => {
     setIsFriend(user.is_friend);
     setPendingFriendRequest(user.pending_friend_request);
   }, [user]);
 
-  const buttonTitle = () => {
-    return isFriend ? 'Send friend request' : 'You can message this user once you are friends'
-  };
-
   return (
     <>
       <JKMessageModal show={showModal} setShow={setShowModal} user={user} currentUser={currentUser} />

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import { titleize } from '../../helpers/utils';
 
 const JKProfileInterests = ({ user }) => {
@@ -20,7 +21,7 @@ const JKProfileInterests = ({ user }) => {
   var FREE_SESSION_GENRE_TYPE = 'free_sessions';
   var COWRITING_GENRE_TYPE = 'cowriting';
 
-  const init = () => {
+  useEffect(() => {
     if (user.paid_sessions) {
       const filteredGenres = genres.filter(genre => {
         return genre.player_type === USER_TYPE && genre.genre_type === PAID_SESSION_GENRE_TYPE;
@@ -55,10 +56,6 @@ const JKProfileInterests = ({ user }) => {
       });
       setVirtualBandSessionGenres(filteredGenres);
     }
-  };
-
-  useEffect(() => {
-    init();
   }, []);
 
   return (
@@ -77,6 +74,10 @@ const JKProfileInterests = ({ user }) => {
   );
 };
 
+JKProfileInterests.propTypes = {
+  user: PropTypes.object
+}
+
 const FreeSessionInterests = ({ genres }) => {
   const genresList = genres.map(genre => titleize(genre.genre_id)).join(', ');
   
@@ -113,7 +114,9 @@ const TraditioalBandSessionInterests = ({ genres, commitment, touring }) => {
     "3": "2-3 times a week",
     "4": "4+ times a week"
   };
-  const canTour = touring ? "Yes" : (canTour === false ? "No" : 'Not specified')
+
+  let canTour = ''; 
+  canTour = touring ? "Yes" : (canTour === false ? "No" : 'Not specified')
 
   return (
     <div>

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

@@ -101,7 +101,7 @@ const JKProfileSidePanel = props => {
                   <h5>Bands</h5>
                   {user.bands.map(band => (
                     <p>
-                      <a key={band.id} href="#">
+                      <a key={band.id} href="/#">
                         {band.name}
                       </a>
                     </p>
@@ -144,7 +144,7 @@ const JKProfileSidePanel = props => {
                       </>
                     }
                   />{' '}
-                  <JKMessageButton currentUser={currentUser} user={user}>
+                  <JKMessageButton size="md" currentUser={currentUser} user={user}>
                     <FontAwesomeIcon icon="comments" transform="shrink-4 down-1" className="mr-1" /> Send Message
                   </JKMessageButton>
                 </div>

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

@@ -1,14 +1,17 @@
 import React from 'react'
 
-const JKProfileSkillLevel = ({skillLevel}) => {
+function JKProfileSkillLevel({skillLevel}) {
   const SKILL_LEVEL_MAP = {
     "1": "Amateur",
     "2": "Professional"
   };
-
   return (
-    skillLevel ? SKILL_LEVEL_MAP[skillLevel] : 'Not specified'
+    <span>
+      {
+        skillLevel ? SKILL_LEVEL_MAP[skillLevel] : 'Not specified'
+      }
+    </span>
   )
 }
 
-export default JKProfileSkillLevel
+export default JKProfileSkillLevel

jam-ui/src/helpers/utils.js

@@ -187,6 +187,15 @@ export const titleize = (str) => {
   );
  }
 
+ export const truncate = (str, length=100) => {
+  if(!str) return;
+  if (str.length <= length) {
+    return str;
+  } else {
+    return `${str.substring(0, length)}...`;
+  }
+ }
+
 export const routesSlicer = ({ routes, columns = 3, rows }) => {
   const routesCollection = [];
   routes.map(route => {

jam-ui/src/hooks/useScript.js

@@ -6,9 +6,9 @@ const useScript = (src, onloadHandler = () => {}) => {
     script.defer = false;
     document.body.appendChild(script);
     script.onload = onloadHandler;
-return () => {
+    return () => {
       document.body.removeChild(script);
-    }
-  }, [src]);
+    };
+  }, [src, onloadHandler]);
 };
-export default useScript;
+export default useScript;

jam-ui/src/layouts/JKDashboardLayout.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Route, Redirect } from 'react-router-dom';
+//import { Route, Redirect } from 'react-router-dom';
 
 import DashboardLoadingIndicator from '../components/dashboard/JKDashboardLoadingIndicator';
 import LoginRequest from '../components/auth/JKLoginRequest';
@@ -17,10 +17,10 @@ const AUTH_STAGES = {
 
 const DashboardLayout = ({ location }) => {
   
-  const { currentUser, setCurrentUser } = useAuth();
+  const { setCurrentUser } = useAuth();
   const [stage, setStage] = useState(AUTH_STAGES['loading']);
 
-  const fetchCurrentUser = () => {
+  useEffect(() => {
     getCurrentUser()
     .then(resp => {
       if (resp.ok) {
@@ -36,10 +36,6 @@ const DashboardLayout = ({ location }) => {
       setStage(AUTH_STAGES['unauthenticated']);
       console.log(error);
     });
-  };
-
-  useEffect(() => {
-    fetchCurrentUser();
   }, [location.pathname]);
 
   useEffect(() => {
@@ -56,20 +52,19 @@ const DashboardLayout = ({ location }) => {
   }
 };
 
-
-const ProtectedRoute = ({ component: Component, ...rest }) => {
-  const { currentUser } = useAuth();
-  return (
-    // Show the component only when the user is logged in
-    // Otherwise, redirect the user to /login page
-    <Route
-      {...rest}
-      render={props =>
-        currentUser ? <Component {...props} /> : <Redirect to={{ pathname: '/authentication/basic/start' }} />
-      }
-    />
-  );
-};
+// const ProtectedRoute = ({ component: Component, ...rest }) => {
+//   const { currentUser } = useAuth();
+//   return (
+//     // Show the component only when the user is logged in
+//     // Otherwise, redirect the user to /login page
+//     <Route
+//       {...rest}
+//       render={props =>
+//         currentUser ? <Component {...props} /> : <Redirect to={{ pathname: '/authentication/basic/start' }} />
+//       }
+//     />
+//   );
+// };
 
 DashboardLayout.propTypes = { location: PropTypes.object.isRequired };
 

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

@@ -21,7 +21,7 @@ export const removeNotification = createAsyncThunk(
   async (options) => {
     const {userId, notificationId} = options
     const response = await deleteNotification(userId, notificationId)
-    if (response.status == 204) return {}
+    if (response.status === 204) return {}
     return response.json()
   }
 )

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

@@ -23,6 +23,16 @@ export const fetchPerson = createAsyncThunk(
     const {userId} = options
     const response = await getPersonById(userId)
     return response.json()
+  },{
+    condition: (options, {getState, extra}) => {
+      const {people} = getState()
+      const {userId} = options
+      const person = people.people.find(person => person.id === userId)
+      console.log('fetchPerson Condition', person);
+      if(person){
+        return false;
+      }
+    }
   }
 )
 
@@ -63,6 +73,19 @@ export const peopleSlice = createSlice({
     .addCase(acceptFriendRequest.fulfilled, (state, action) => {
 
     })
+    .addCase(fetchPerson.fulfilled, (state, action) => {
+      const person = state.people.find(person => person.id === action.payload.id)
+      if(person){
+        const updated = {
+          ...person, 
+          ...action.payload
+        }
+        const objIndex = state.people.findIndex((p => p.id === updated.id));
+        state.people[objIndex] = updated
+      }else{
+        state.people.push(action.payload)
+      }
+    })
   }
 })