seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

fix for latency data not showing. found a problem in react component structrue of JKPeople and JKPeopleSearch

This commit is contained in:
Nuwan 2021-12-11 10:24:05 +05:30
parent 178d4fcb3f
commit caef794231
5 changed files with 232 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
jam-ui/src/components/page/JKPeople.js
View File

@ -19,6 +19,7 @@ const JKPeople = ({ className }) => {
const [page, setPage] = useState(1);
const [resetFilter, setResetFilter] = useState(false);
const peopleListRef = useRef();
const searchRef = useRef();
const dispatch = useDispatch();
const { t } = useTranslation();
@ -35,14 +36,15 @@ const JKPeople = ({ className }) => {
}
try {
console.log('BEFORE fetching people');
dispatch(fetchPeople({ page }));
//dispatch(fetchPeople({ page }));
searchRef.current.getResults()
} catch (error) {
console.log('Error fetching people', error);
}
}, [page, totalPages, dispatch]);
useEffect(() => {
loadPeople();
loadPeople();
}, [page]);
// useEffect(() => {
@ -80,6 +82,7 @@ const JKPeople = ({ className }) => {
setShow={setShowSearch}
resetFilter={resetFilter}
setResetFilter={setResetFilter}
ref={searchRef}
/>
<FalconCardHeader title={t('page_title', { ns: 'people' })} titleClass="font-weight-bold">
<Form inline className="mt-md-0 mt-3">

356
jam-ui/src/components/page/JKPeopleSearch.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import Select from 'react-select';
import JKTooltip from '../common/JKTooltip';
@ -6,13 +6,13 @@ import PropTypes from 'prop-types';
import { getGenres, getInstruments } from '../../helpers/rest';
import { useForm, Controller, useFormState } from 'react-hook-form';
import { useDispatch } from 'react-redux';
import { fetchPeople } from '../../store/features/peopleSlice';
import { fetchPeople, resetState as clearPeople} from '../../store/features/peopleSlice';
const JKPeopleSearch = props => {
const { show, setShow, resetFilter, setResetFilter } = props;
const JKPeopleSearch = forwardRef((props, ref) => {
const { show, setShow, resetFilter, setResetFilter, submit } = props;
const [instruments, setInstruments] = useState([]);
const [genres, setGenres] = useState([]);
const [page, setPage] = useState(1);
const dispatch = useDispatch();
const { register, handleSubmit, setValue, control, reset } = useForm({
@ -29,7 +29,7 @@ const JKPeopleSearch = props => {
}
});
const {isDirty} = useFormState({control});
const { isDirty } = useFormState({ control });
const toggle = () => setShow(!show);
@ -78,41 +78,57 @@ const JKPeopleSearch = props => {
};
useEffect(() => {
if(resetFilter){
reset()
setResetFilter(false)
if (resetFilter) {
reset();
setResetFilter(false);
}
}, [resetFilter])
}, [resetFilter]);
useEffect(() => {
fetchGenres();
fetchInstruments();
//handleSubmit(onSubmit)();
}, []);
const submitForm = event => {
event.preventDefault();
if(event){
event.preventDefault();
}
console.log("BEFORE CLEAR");
dispatch(clearPeople())
handleSubmit(onSubmit)();
setShow(false);
};
const onSubmit = (data) => {
let genres = []
let joined_within_days, active_within_days = ''
if(data.genres){
genres = data.genres.map(genre => genre.value)
useImperativeHandle(ref, () => ({
getResults(page) {
setPage(page)
console.log("GET RESULTS", page);
handleSubmit(onSubmit)();
//submitForm()
//setShow(false);
}
}));
const onSubmit = data => {
console.log("Submitting......");
let genres = [];
let joined_within_days,
active_within_days = '';
if (data.genres) {
genres = data.genres.map(genre => genre.value);
}
joined_within_days = data.joined_within_days.value;
active_within_days = data.active_within_days.value;
const updatedData = {...data, genres, joined_within_days, active_within_days}
const updatedData = { ...data, genres, joined_within_days, active_within_days };
try {
dispatch(fetchPeople({data: updatedData, page: 1}))
dispatch(fetchPeople({ data: updatedData, page: page }));
} catch (error) {
console.log('Error fetching people', error);
}
};
const lastActiveOpts = [
@ -132,164 +148,166 @@ const JKPeopleSearch = props => {
];
return (
<Modal isOpen={show} toggle={toggle} className="mw-100 mx-1 mr-1 ml-1 mx-md-5 mr-md-5 ml-md-5 mx-xl-10 mr-xl-10 ml-xl-10" data-testid="modalUpdateSearch">
<ModalHeader toggle={toggle}>Update Search</ModalHeader>
<ModalBody>
<div className="px-4 pb-4">
<form>
<div className="row justify-content-start mt-2">
{/* first column */}
<div className="col-12 col-md-6 mb-3 mb-md-0">
<div className="row justify-content-start">
<div className="col-6">
<label className="form-label">
Latency{' '}
<JKTooltip title="Use these checkboxes to search for other musicians by the estimated amount of latency between you and them. Latency is the amount of time it takes for each of your computers to process audio, plus the time it takes for this digital audio to move over the Internet between you." />
</label>
<div className="form-check">
<input
{...register('latency_good')}
type="checkbox"
className="form-check-input"
defaultChecked={!isDirty}
onChange={e => setValue('latency_good', e.target.checked)}
/>
<label className="form-check-label">Good (less than 40ms)</label>
</div>
<div className="form-check">
<input
{...register('latency_fair')}
type="checkbox"
className="form-check-input"
defaultChecked={!isDirty}
onChange={e => setValue('latency_fair', e.target.checked)}
/>
<label className="form-check-label">Fair (40-60ms)</label>
</div>
<div className="form-check">
<input
{...register('latency_high')}
type="checkbox"
className="form-check-input"
defaultChecked={isDirty}
onChange={e => setValue('latency_high', e.target.checked)}
/>
<label className="form-check-label">Poor (more than 60ms)</label>
</div>
<Modal
isOpen={show}
toggle={toggle}
className="mw-100 mx-1 mr-1 ml-1 mx-md-5 mr-md-5 ml-md-5 mx-xl-10 mr-xl-10 ml-xl-10"
data-testid="modalUpdateSearch"
>
<ModalHeader toggle={toggle}>Update Search</ModalHeader>
<ModalBody>
<div className="px-4 pb-4">
<form>
<div className="row justify-content-start mt-2">
{/* first column */}
<div className="col-12 col-md-6 mb-3 mb-md-0">
<div className="row justify-content-start">
<div className="col-6">
<label className="form-label">
Latency{' '}
<JKTooltip title="Use these checkboxes to search for other musicians by the estimated amount of latency between you and them. Latency is the amount of time it takes for each of your computers to process audio, plus the time it takes for this digital audio to move over the Internet between you." />
</label>
<div className="form-check">
<input
{...register('latency_good')}
type="checkbox"
className="form-check-input"
defaultChecked={!isDirty}
onChange={e => setValue('latency_good', e.target.checked)}
/>
<label className="form-check-label">Good (less than 40ms)</label>
</div>
<div className="col-6">
<label className="form-label">
Skill Level <JKTooltip title="Use these checkboxes to search for other musicians by their skill level." />
</label>
<div className="form-check">
<input
{...register('proficiency_beginner')}
type="checkbox"
className="form-check-input"
defaultChecked={!isDirty}
onChange={e => setValue('proficiency_beginner', e.target.checked)}
/>
<label className="form-check-label">Beginner</label>
</div>
<div className="form-check">
<input
{...register('proficiency_intermediate')}
type="checkbox"
className="form-check-input"
defaultChecked={!isDirty}
onChange={e => setValue('proficiency_intermediate', e.target.checked)}
/>
<label className="form-check-label">Intermediate</label>
</div>
<div className="form-check">
<input
{...register('proficiency_expert')}
type="checkbox"
className="form-check-input"
defaultChecked={!isDirty}
onChange={e => setValue('proficiency_expert', e.target.checked)}
/>
<label className="form-check-label">Expert</label>
</div>
<div className="form-check">
<input
{...register('latency_fair')}
type="checkbox"
className="form-check-input"
defaultChecked={!isDirty}
onChange={e => setValue('latency_fair', e.target.checked)}
/>
<label className="form-check-label">Fair (40-60ms)</label>
</div>
<div className="form-check">
<input
{...register('latency_high')}
type="checkbox"
className="form-check-input"
defaultChecked={isDirty}
onChange={e => setValue('latency_high', e.target.checked)}
/>
<label className="form-check-label">Poor (more than 60ms)</label>
</div>
</div>
</div>
{/* second column */}
<div className="col-12 col-md-6">
<label className="form-label" htmlFor="instruments">
Instruments{' '}
<JKTooltip title="Use these checkboxes to search for other musicians who play particular instruments. If you do not select any instruments, we search for any/all instruments. If you select multiple instruments, we search for musicians who play any of these instruments." />
</label>
<div className="choices">
<Controller
name="instruments"
control={control}
render={({ field }) => (
<Select {...field} options={instruments} isMulti closeMenuOnSelect={false} id="selInstruments" />
)}
/>
</div>
<label className="form-label" htmlFor="genres">
Genres{' '}
<JKTooltip title="Use these checkboxes to search for other musicians who enjoy playing particular musical genres/styles. If you do not select any genres, we search for any/all genres. If you select multiple genres, we search for musicians who play any of these genres." />
</label>
<div className="choices">
<Controller
name="genres"
control={control}
render={({ field }) => (
<Select {...field} options={genres} isMulti closeMenuOnSelect={false} id="selGenres" />
)}
/>
</div>
<label className="form-label" htmlFor="lastActive">
Last Active <JKTooltip title="Use this list to search for other musicians who have been active on JamKazam within a specified time period. More recent activity makes it more likely they will respond if you message or request to connect." />
</label>
<div className="choices">
<Controller
name="active_within_days"
control={control}
render={({ field }) => (
<Select {...field } options={lastActiveOpts} id="selLastActive" />
)}
/>
</div>
<label className="form-label" htmlFor="joined">
Joined JamKazam <JKTooltip title="Use this list to search for other musicians based on when they joined JamKazam. This can be useful for finding and connecting with newer users." />
</label>
<div className="choices">
<Controller
name="joined_within_days"
control={control}
render={({ field}) => (
<Select {...field} options={joinedOpts} id="selJoinedWithin" />
)}
/>
<div className="col-6">
<label className="form-label">
Skill Level{' '}
<JKTooltip title="Use these checkboxes to search for other musicians by their skill level." />
</label>
<div className="form-check">
<input
{...register('proficiency_beginner')}
type="checkbox"
className="form-check-input"
defaultChecked={!isDirty}
onChange={e => setValue('proficiency_beginner', e.target.checked)}
/>
<label className="form-check-label">Beginner</label>
</div>
<div className="form-check">
<input
{...register('proficiency_intermediate')}
type="checkbox"
className="form-check-input"
defaultChecked={!isDirty}
onChange={e => setValue('proficiency_intermediate', e.target.checked)}
/>
<label className="form-check-label">Intermediate</label>
</div>
<div className="form-check">
<input
{...register('proficiency_expert')}
type="checkbox"
className="form-check-input"
defaultChecked={!isDirty}
onChange={e => setValue('proficiency_expert', e.target.checked)}
/>
<label className="form-check-label">Expert</label>
</div>
</div>
</div>
</div>
</form>
</div>
</ModalBody>
<ModalFooter>
<Button color="outline-primary" onClick={toggle}>
Cancel
</Button>{' '}
<Button color="primary" onClick={submitForm} data-testid="btnSubmitSearch">
Search
</Button>
</ModalFooter>
</Modal>
{/* second column */}
<div className="col-12 col-md-6">
<label className="form-label" htmlFor="instruments">
Instruments{' '}
<JKTooltip title="Use these checkboxes to search for other musicians who play particular instruments. If you do not select any instruments, we search for any/all instruments. If you select multiple instruments, we search for musicians who play any of these instruments." />
</label>
<div className="choices">
<Controller
name="instruments"
control={control}
render={({ field }) => (
<Select {...field} options={instruments} isMulti closeMenuOnSelect={false} id="selInstruments" />
)}
/>
</div>
<label className="form-label" htmlFor="genres">
Genres{' '}
<JKTooltip title="Use these checkboxes to search for other musicians who enjoy playing particular musical genres/styles. If you do not select any genres, we search for any/all genres. If you select multiple genres, we search for musicians who play any of these genres." />
</label>
<div className="choices">
<Controller
name="genres"
control={control}
render={({ field }) => (
<Select {...field} options={genres} isMulti closeMenuOnSelect={false} id="selGenres" />
)}
/>
</div>
<label className="form-label" htmlFor="lastActive">
Last Active{' '}
<JKTooltip title="Use this list to search for other musicians who have been active on JamKazam within a specified time period. More recent activity makes it more likely they will respond if you message or request to connect." />
</label>
<div className="choices">
<Controller
name="active_within_days"
control={control}
render={({ field }) => <Select {...field} options={lastActiveOpts} id="selLastActive" />}
/>
</div>
<label className="form-label" htmlFor="joined">
Joined JamKazam{' '}
<JKTooltip title="Use this list to search for other musicians based on when they joined JamKazam. This can be useful for finding and connecting with newer users." />
</label>
<div className="choices">
<Controller
name="joined_within_days"
control={control}
render={({ field }) => <Select {...field} options={joinedOpts} id="selJoinedWithin" />}
/>
</div>
</div>
</div>
</form>
</div>
</ModalBody>
<ModalFooter>
<Button color="outline-primary" onClick={toggle}>
Cancel
</Button>{' '}
<Button color="primary" onClick={submitForm} data-testid="btnSubmitSearch">
Search
</Button>
</ModalFooter>
</Modal>
);
};
});
JKPeopleSearch.propTypes = {
show: PropTypes.bool,
setShow: PropTypes.func,
setShow: PropTypes.func
//setPeople: PropTypes.func
};

11
jam-ui/src/store/features/peopleSlice.js
View File

@ -16,7 +16,6 @@ export const fetchPeople = createAsyncThunk(
}
)
export const fetchPerson = createAsyncThunk(
'people/fetchPerson',
async (options, thunkAPI) => {
@ -53,7 +52,11 @@ export const peopleSlice = createSlice({
reducers: {
add: (state, action) => {
state.people.push(action.payload)
}
},
resetState: () => {
console.log("RESET STATE");
return { ...initialState }
},
},
extraReducers: (builder) => {
builder
@ -94,8 +97,6 @@ export const peopleSlice = createSlice({
export const selectPersonById = (state, userId) => state.people.find((person) => person.id === userId)
export const { add } = peopleSlice.actions;
export const { add, resetState } = peopleSlice.actions;
export default peopleSlice.reducer;

58
web/app/controllers/api_search_controller.rb
View File

@ -99,27 +99,31 @@ class ApiSearchController < ApiController
#for latency specific filter options and then query the postgresql relational
#database for other filter options
def filter
latency_good = ActiveRecord::Type::Boolean.new.type_cast_from_user(params[:latency_good])
latency_fair = ActiveRecord::Type::Boolean.new.type_cast_from_user(params[:latency_fair])
latency_high = ActiveRecord::Type::Boolean.new.type_cast_from_user(params[:latency_high])
begin
bm = Benchmark.measure do
@latency_data = users_latency_data(latency_good, latency_fair, latency_high)
end
Rails.logger.info "benchmark neo4j"
Rails.logger.info "*" * 50
Rails.logger.info bm
Bugsnag.notify("search_users_benchmark") do |report|
report.severity = "info"
report.add_tab(:benchmark, benchmark: bm.to_s)
end
#begin
#bm = Benchmark.measure do
@latency_data = users_latency_data(latency_good, latency_fair, latency_high)
#end
# Bugsnag.notify("search_users_benchmark") do |report|
# report.severity = "info"
# report.add_tab(:benchmark, benchmark: bm.to_s)
# end if Rails.env.production?
user_ids = @latency_data.map{ |l_data| l_data[:user_id] }
Rails.logger.info "user_ids from neo4j: #{user_ids}"
#debugger
user_ids = @latency_data.map{ |l_data| l_data[:user_id] }
filter_params = {
"sort_order"=>"latency",
"instruments"=>[],
@ -164,19 +168,19 @@ class ApiSearchController < ApiController
respond_with @search, responder: ApiResponder, status: 201, template: 'api_search/index'
rescue => exception
logger.debug("Latency exception: #{exception.message}")
Bugsnag.notify(exception) do |report|
report.severity = "error"
report.add_tab(:latency, {
params: params,
user_id: current_user.id,
name: current_user.name,
url: filter_latency_url,
})
end
render json: {}, status: 500
end
# rescue => exception
# logger.debug("Latency exception: #{exception.message}")
# Bugsnag.notify(exception) do |report|
# report.severity = "error"
# report.add_tab(:latency, {
# params: params,
# user_id: current_user.id,
# name: current_user.name,
# url: filter_latency_url,
# })
# end
# render json: {}, status: 500
# end
end

5
web/app/helpers/latency_helper.rb
View File

@ -12,7 +12,7 @@ module LatencyHelper
def users_latency_data(latency_good, latency_fair, latency_high)
latency_data = []
if latency_good || latency_fair || latency_high
#if latency_good || latency_fair || latency_high
uri = URI(filter_latency_url)
begin
http = Net::HTTP.new(uri.host, uri.port)
@ -31,6 +31,7 @@ module LatencyHelper
if response.is_a?(Net::HTTPOK) || response.is_a?(Net::HTTPSuccess)
graph_db_users = JSON.parse(response.body)["users"]
#debugger
if latency_good || latency_fair || latency_high
#fiter by latency params
graph_db_users.select! do |user|
@ -67,7 +68,7 @@ module LatencyHelper
rescue => exception
raise exception
end
end
#end
latency_data
end