From caef794231c0953038728bbd67ce25b6be55937b Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Sat, 11 Dec 2021 10:24:05 +0530
Subject: [PATCH] fix for latency data not showing. found a problem in react
 component structrue of JKPeople and JKPeopleSearch

---
 jam-ui/src/components/page/JKPeople.js       |   7 +-
 jam-ui/src/components/page/JKPeopleSearch.js | 356 ++++++++++---------
 jam-ui/src/store/features/peopleSlice.js     |  11 +-
 web/app/controllers/api_search_controller.rb |  58 +--
 web/app/helpers/latency_helper.rb            |   5 +-
 5 files changed, 232 insertions(+), 205 deletions(-)

diff --git a/jam-ui/src/components/page/JKPeople.js b/jam-ui/src/components/page/JKPeople.js
index 84509c858..a37e1f326 100644
--- a/jam-ui/src/components/page/JKPeople.js
+++ b/jam-ui/src/components/page/JKPeople.js
@@ -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">
diff --git a/jam-ui/src/components/page/JKPeopleSearch.js b/jam-ui/src/components/page/JKPeopleSearch.js
index cbcc9dd6c..1dee2ed04 100644
--- a/jam-ui/src/components/page/JKPeopleSearch.js
+++ b/jam-ui/src/components/page/JKPeopleSearch.js
@@ -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
 };
 
diff --git a/jam-ui/src/store/features/peopleSlice.js b/jam-ui/src/store/features/peopleSlice.js
index ef00e1b81..241f9cc91 100644
--- a/jam-ui/src/store/features/peopleSlice.js
+++ b/jam-ui/src/store/features/peopleSlice.js
@@ -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;
\ No newline at end of file
diff --git a/web/app/controllers/api_search_controller.rb b/web/app/controllers/api_search_controller.rb
index 34a4976c8..259344f13 100644
--- a/web/app/controllers/api_search_controller.rb
+++ b/web/app/controllers/api_search_controller.rb
@@ -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
 
diff --git a/web/app/helpers/latency_helper.rb b/web/app/helpers/latency_helper.rb
index 250ef0020..95b9b2eef 100644
--- a/web/app/helpers/latency_helper.rb
+++ b/web/app/helpers/latency_helper.rb
@@ -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