- Thanks for using Falcon. You are
+ Thanks for using JamKazam. You are
now successfully signed out.
+ {process.env.REACT_APP_LEGACY_BASE_URL}
-
+ {/*
@@ -41,8 +59,11 @@ const ProfileDropdown = () => {
Settings
-
-
+ */}
+
+ My Profile
+
+
Logout
diff --git a/jam-ui/src/components/navbar/TopNavRightSideNavItem.js b/jam-ui/src/components/navbar/TopNavRightSideNavItem.js
index cee3325b6..ea2be7b4a 100644
--- a/jam-ui/src/components/navbar/TopNavRightSideNavItem.js
+++ b/jam-ui/src/components/navbar/TopNavRightSideNavItem.js
@@ -1,23 +1,24 @@
import React, { useContext } from 'react';
import { Nav, NavItem, NavLink, UncontrolledTooltip } from 'reactstrap';
-import ProfileDropdown from './ProfileDropdown';
-import NotificationDropdown from './NotificationDropdown';
-import SettingsAnimatedIcon from './SettingsAnimatedIcon';
-import CartNotification from './CartNotification';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Link } from 'react-router-dom';
+// import ProfileDropdown from './ProfileDropdown';
+// import NotificationDropdown from './NotificationDropdown';
+// import SettingsAnimatedIcon from './SettingsAnimatedIcon';
+// 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 classNames from 'classnames';
+// import { navbarBreakPoint } from '../../config';
+import JKNavbarTopProfile from './JKNavbarTopProfile';
const TopNavRightSideNavItem = () => {
const { isTopNav, isCombo } = useContext(AppContext);
return (
);
};
diff --git a/jam-ui/src/components/page/JKPeople.js b/jam-ui/src/components/page/JKPeople.js
new file mode 100644
index 000000000..3ceaaf874
--- /dev/null
+++ b/jam-ui/src/components/page/JKPeople.js
@@ -0,0 +1,99 @@
+import React, {useState, useEffect} from 'react';
+import PropTypes from 'prop-types';
+import { Alert, Card, CardBody, Col, Row, Button } from 'reactstrap';
+import Loader from '../common/Loader';
+import FalconCardHeader from '../common/FalconCardHeader';
+import { isIterableArray } from '../../helpers/utils';
+// import useFakeFetch from '../../hooks/useFakeFetch';
+// import rawPeople from '../../data/people/people';
+// import peopleCategories from '../../data/people/peopleCategories';
+// import apiFetch from '../../helpers/apiFetch';
+import JKPeopleSearch from "./JKPeopleSearch";
+import JKPeopleList from './JKPeopleList';
+import { getPeople } from "../../helpers/rest";
+
+const JKPeople = ({ className }) => {
+ //const { loading, data: people, setData: setPeople } = useFakeFetch(rawPeople);
+
+ const [people, setPeople] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [showSearch, setShowSearch] = useState(false);
+
+ const fetchPeople = React.useCallback( () => {
+ getPeople()
+ .then(response => {
+ if(!response.ok){
+ //TODO: handle failure
+ console.log(response);
+ throw new Error('Network response was not ok');
+ }
+ return response.json();
+ })
+ .then(data => {
+ console.log('people received', data);
+ setPeople(data.musicians);
+ })
+ .catch( error => {
+ //TODO: handle error
+ console.log(error);
+ }).finally(() => {
+ setLoading(false)
+ });
+ }, [])
+
+ useEffect(() => {
+ fetchPeople();
+ }, [fetchPeople])
+
+ const searchPeople = ({ target }) => {
+ const keyword = target.value.toLowerCase();
+ const filteredResult = people.filter(
+ person => person.name.toLowerCase().includes(keyword) || person.institution.toLowerCase().includes(keyword)
+ );
+
+ setPeople(keyword.length ? filteredResult : people);
+ };
+
+ return (
+
+
+
+
+
+ | Name | +About | +Instruments | +Genres | +Action | +
|---|---|---|---|---|
+
+ Update Search
+
+
+
+ {' '}
+
+
+
+
+ );
+};
+
+JKPeopleSearch.propTypes = {
+ show: PropTypes.bool,
+ setShow: PropTypes.func,
+ setPeople: PropTypes.func
+};
+
+JKPeopleSearch.defaultProps = {
+ show: false
+};
+
+export default JKPeopleSearch;
diff --git a/jam-ui/src/components/page/JKPerson.js b/jam-ui/src/components/page/JKPerson.js
new file mode 100644
index 000000000..3385715e1
--- /dev/null
+++ b/jam-ui/src/components/page/JKPerson.js
@@ -0,0 +1,120 @@
+import React, { Fragment, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Row, Col } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import avatar from '../../assets/img/team/avatar.png';
+import JKProfileSidePanel from '../profile/JKProfileSidePanel';
+import JKProfileAvatar from '../profile/JKProfileAvatar';
+import JKProfileInstrumentsList from '../profile/JKProfileInstrumentsList';
+import {getUserProfile} from '../../helpers/rest';
+
+const JKPerson = ({ id, name, biography, photo_url, instruments }) => {
+
+ const [showSidePanel, setShowSidePanel] = useState(false)
+ const [user, setUser] = useState(null);
+
+ const fetchPerson = () => {
+ console.log("fetchPerson called");
+ getUserProfile(id)
+ .then(response => {
+ if(response.ok){
+ return response.json()
+ }else{
+
+ }
+ })
+ .then(json => {
+ console.log("USER", json);
+ setUser(json)
+ })
+ .catch(error => console.log(error))
+ }
+
+
+ const toggleMoreDetails = () => {
+ setShowSidePanel(prev => !prev)
+ if(!user){
+ fetchPerson()
+ }
+ }
+ return(
+
+
+
+
+
+
+ {name}
+
+
+
+ Latency To Me: 24ms GOOD
+
+
+ Last Active: 1 hour
+
+ {getGenresNames()}
+ );
+}
+
+export default JKProfileGenres;
\ No newline at end of file
diff --git a/jam-ui/src/components/profile/JKProfileInstrumentsList.js b/jam-ui/src/components/profile/JKProfileInstrumentsList.js
new file mode 100644
index 000000000..47b8f296b
--- /dev/null
+++ b/jam-ui/src/components/profile/JKProfileInstrumentsList.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const JKPersonInstrumentsList = ({ instruments }) => {
+ const proficiencies = {
+ '1': 'Beginner',
+ '2': 'Intermediate',
+ '3': 'Expert'
+ };
+ return (
+ instruments &&
+ instruments.map(instrument => (
+
+ {instrument.description}: {proficiencies[instrument.proficiency_level]}
+
+ ))
+ );
+};
+
+JKPersonInstrumentsList.propTypes = {
+ instruments: PropTypes.arrayOf(PropTypes.object)
+}
+
+export default JKPersonInstrumentsList
\ No newline at end of file
diff --git a/jam-ui/src/components/profile/JKProfileInterests.js b/jam-ui/src/components/profile/JKProfileInterests.js
new file mode 100644
index 000000000..a7ed7cc49
--- /dev/null
+++ b/jam-ui/src/components/profile/JKProfileInterests.js
@@ -0,0 +1,167 @@
+import React, { useEffect, useState } from 'react';
+import { titleize } from '../../helpers/utils';
+
+const JKProfileInterests = ({ user }) => {
+ const [freeSessionGenres, setFreeSessionGenres] = useState([]);
+ const [paidSessionGenres, setPaidSessionGenres] = useState([]);
+ const [traditionalBandSessionGenres, setTraditionalBandSessionGenres] = useState([]);
+ const [virtualBandSessionGenres, setVirtualBandSessionGenres] = useState([]);
+ const [coWritingSessionGenres, setCoWritingSessionGenres] = useState([]);
+
+ const { genres } = user;
+
+ const USER_TYPE = 'JamRuby::User';
+
+ // genre types
+ var PROFILE_GENRE_TYPE = 'profile';
+ var VIRTUAL_BAND_GENRE_TYPE = 'virtual_band';
+ var TRADITIONAL_BAND_GENRE_TYPE = 'traditional_band';
+ var PAID_SESSION_GENRE_TYPE = 'paid_sessions';
+ var FREE_SESSION_GENRE_TYPE = 'free_sessions';
+ var COWRITING_GENRE_TYPE = 'cowriting';
+
+ const init = () => {
+ if (user.paid_sessions) {
+ const filteredGenres = genres.filter(genre => {
+ return genre.player_type === USER_TYPE && genre.genre_type === PAID_SESSION_GENRE_TYPE;
+ });
+ setPaidSessionGenres(filteredGenres);
+ }
+
+ if (user.free_sessions) {
+ const filteredGenres = genres.filter(genre => {
+ return genre.player_type === USER_TYPE && genre.genre_type === FREE_SESSION_GENRE_TYPE;
+ });
+ setFreeSessionGenres(filteredGenres);
+ }
+
+ if (user.cowriting) {
+ const filteredGenres = genres.filter(genre => {
+ return genre.player_type === USER_TYPE && genre.genre_type === COWRITING_GENRE_TYPE;
+ });
+ setCoWritingSessionGenres(filteredGenres);
+ }
+
+ if (user.traditional_band) {
+ const filteredGenres = genres.filter(genre => {
+ return genre.player_type === USER_TYPE && genre.genre_type === TRADITIONAL_BAND_GENRE_TYPE;
+ });
+ setTraditionalBandSessionGenres(filteredGenres);
+ }
+
+ if (user.virtual_band) {
+ const filteredGenres = genres.filter(genre => {
+ return genre.player_type === USER_TYPE && genre.genre_type === VIRTUAL_BAND_GENRE_TYPE;
+ });
+ setVirtualBandSessionGenres(filteredGenres);
+ }
+ };
+
+ useEffect(() => {
+ init();
+ }, []);
+
+ return (
+
+ {user.paid_sessions && }
+
+
+ );
+};
+
+const FreeSessionInterests = ({ genres }) => {
+ const genresList = genres.map(genre => titleize(genre.genre_id)).join(', ');
+
+ return (
+
+
+ );
+};
+
+const PaidSessionInterests = ({ genres, hourlyRate, dailyRate }) => {
+ const genresList = genres.map(genre => titleize(genre.genre_id)).join(', ');
+
+ return (
+ I'm interested in playing free gigs
+ -
+
- Genre(s): {genres.length > 0 ? genresList : 'Not specified'} +
+
+ );
+};
+
+const TraditioalBandSessionInterests = ({ genres, commitment, touring }) => {
+ const genresList = genres.map(genre => titleize(genre.genre_id)).join(', ');
+ const bandCommitmentMap = {
+ "1": "infrequent",
+ "2": "once a week",
+ "3": "2-3 times a week",
+ "4": "4+ times a week"
+ };
+ const canTour = touring ? "Yes" : (canTour === false ? "No" : 'Not specified')
+
+ return (
+ I'm interested in playing paid gigs
+ -
+
- Genre(s): {genres.length > 0 ? genresList : 'Not specified'} +
- Horly rate: {hourlyRate ? hourlyRate : 'Not specified'} +
- Daily rate: {dailyRate ? dailyRate : 'Not specified'} +
+
+ );
+};
+
+const VirtualBandSessionInterests = ({ genres, commitment }) => {
+ const genresList = genres.map(genre => titleize(genre.genre_id)).join(', ');
+ const bandCommitmentMap = {
+ "1": "infrequent",
+ "2": "once a week",
+ "3": "2-3 times a week",
+ "4": "4+ times a week"
+ };
+
+ return (
+ I'm interested in forming traditional band(s)
+ -
+
- Genre(s): {genres.length > 0 ? genresList : 'Not specified'} +
- Commitment: {commitment ? bandCommitmentMap[commitment] : 'Not specified' } +
- Touring: {canTour} +
+
+ );
+};
+
+const CoWritingSessionInterests = ({ genres, purpose }) => {
+ const genresList = genres.map(genre => titleize(genre.genre_id)).join(', ');
+ const purposeMap = {
+ "1": "just for fun",
+ "2": "sell music"
+ }
+ return (
+ I'm interested in forming virtual band(s)
+ -
+
- Genre(s): {genres.length > 0 ? genresList : 'Not specified'} +
- Commitment: {commitment ? bandCommitmentMap[commitment] : 'Not specified' } +
+
+ );
+};
+
+export default JKProfileInterests;
diff --git a/jam-ui/src/components/profile/JKProfileOnlinePresence.js b/jam-ui/src/components/profile/JKProfileOnlinePresence.js
new file mode 100644
index 000000000..5454e3798
--- /dev/null
+++ b/jam-ui/src/components/profile/JKProfileOnlinePresence.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { titleize } from '../../helpers/utils';
+
+const JKProfileOnlinePresence = ({ onlinePresences, userId }) => {
+ const itemList = [];
+
+ const serviceUrl = item => {
+ let url;
+ switch (item.service_type) {
+ case 'soundcloud':
+ url = 'www.soundcloud.com';
+ break;
+
+ case 'reverbnation':
+ url = 'www.reverbnation.com';
+ break;
+
+ case 'bandcamp':
+ url = 'www.bandcamp.com';
+ break;
+
+ case 'fandalism':
+ url = 'www.fandalism.com';
+ break;
+
+ case 'youtube':
+ url = 'www.youtube.com';
+ break;
+
+ case 'facebook':
+ url = 'www.facebook.com';
+ break;
+
+ case 'twitter':
+ url = 'www.twitter.com';
+ break;
+ }
+ return url;
+ };
+
+
+
+ return (
+ I'm interested in co-writing - {purpose}
+ -
+
- Genre(s): {genres.length > 0 ? genresList : 'Not specified'} +
- Purpose: {purpose ? purposeMap[purpose] : 'Not specified'} +
+ {onlinePresences.map(item => (
+
+ {titleize(item.service_type)}
+
+ )).reduce((prev, curr) => [prev, ', ', curr])
+ }
+
+
+ );
+};
+
+export default JKProfileOnlinePresence;
diff --git a/jam-ui/src/components/profile/JKProfilePerformanceSamples.js b/jam-ui/src/components/profile/JKProfilePerformanceSamples.js
new file mode 100644
index 000000000..c23bf276e
--- /dev/null
+++ b/jam-ui/src/components/profile/JKProfilePerformanceSamples.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { titleize } from '../../helpers/utils';
+
+const JKProfilePerformanceSamples = ({samples}) => {
+ const SAMPLE_TYPES = {
+ JAMKAZAM: { description: 'jamkazam' },
+ SOUNDCLOUD: { description: 'soundcloud' },
+ YOUTUBE: { description: 'youtube' }
+ };
+
+ const jamkasamSamples = samples.filter(sample => sample.service_type === SAMPLE_TYPES.JAMKAZAM.description);
+
+ const soundCloudSamples = samples.filter(sample => sample.service_type === SAMPLE_TYPES.SOUNDCLOUD.description);
+
+ const youTubeSamples = samples.filter(sample => sample.service_type === SAMPLE_TYPES.YOUTUBE.description);
+
+ return (
+
+ Jamkazam :
+ {jamkasamSamples.map(sample => (
+ {titleize(sample.claimed_recording.name)}
+ ))}
+
+ SoundCloud: + {soundCloudSamples.map(sample => ( + {titleize(sample.claimed_recording.name)} + ))} +
+ Youtube : + {youTubeSamples.map(sample => ( + {titleize(sample.claimed_recording.name)} + ))} +
+ );
+};
+
+export default JKProfilePerformanceSamples;
diff --git a/jam-ui/src/components/profile/JKProfileSidePanel.js b/jam-ui/src/components/profile/JKProfileSidePanel.js
new file mode 100644
index 000000000..b60967c0e
--- /dev/null
+++ b/jam-ui/src/components/profile/JKProfileSidePanel.js
@@ -0,0 +1,140 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import PropTypes from 'prop-types';
+import React, { useContext, useEffect } from 'react';
+import classNames from 'classnames';
+import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+import ScrollBarCustom from '../common/ScrollBarCustom';
+import JKProfileAvatar from './JKProfileAvatar';
+import JKProfileInstrumentsList from './JKProfileInstrumentsList';
+import { Fragment } from 'react';
+import JKProfileOnlinePresence from './JKProfileOnlinePresence';
+import JKProfileInterests from './JKProfileInterests';
+import JKProfileGenres from './JKProfileGenres';
+import JKProfilePerformanceSamples from './JKProfilePerformanceSamples';
+
+const JKProfileSidePanel = props => {
+ const { show, setShow, user } = props;
+
+ const toggle = () => setShow(!show);
+
+ return (
+ + SoundCloud: + {soundCloudSamples.map(sample => ( + {titleize(sample.claimed_recording.name)} + ))} +
+ Youtube : + {youTubeSamples.map(sample => ( + {titleize(sample.claimed_recording.name)} + ))} +
+
+ {user.name}
+
+
+
+ )}
+
+ Latency to Me: 18ms Internet + 8ms Audio{' '}
+ GOOD
+
+ Location: {`${user.city}, ${user.country}`}
+
+ Skill Level: Intermediate
+
+ Joined JamKazam: June 1, 2020
+
+ Last Active: 1 Hour Ago
+
+
+ )}
+
+ {user.instruments && user.instruments.length && (
+ About
+{user.biography}
+
+
+
+ )}
+
+ {user.genres && user.genres.length > 0 && (
+ Instruments
+
+
+
+ )}
+
+ {user.bands && user.bands.length > 0 && (
+
+ )}
+
+ { user.performance_samples && user.performance_samples.length > 0 &&
+ +
Genres
+
+
+ }
+
+ {user.online_presences && user.online_presences.length > 0 && (
+ Performance Samples
+
+
+
+ )}
+
+ +
Online Presence
++
Interests
+
+ {' '}
+
+
+