Fixed queries and data fetching ui bugs (#312)

Co-authored-by: Anissa Chadouli <[email protected]>
ourjapanlife · Dec 7, 2023 · 4d9cdde · 4d9cdde
1 parent 25521d7
commit 4d9cdde
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 96 deletions.
diff --git a/components/MapContainer.vue b/components/MapContainer.vue
@@ -1,20 +1,10 @@
 <template>
-  <GoogleMap
-    data-testid="map-of-japan"
-    ref="mapRef"
-    :api-key="runtimeConfig.public.GOOGLE_MAPS_API_KEY"
-    map-id="153d718018a2577e"
-    style="height: 100%; width: 100%;"
-    :center="center"
-    :zoom="9"
-  >
-    <GMarker
-      @click="searchResultsStore.setActiveSearchResult(location.professional.id)"
-      :options="{position: { lat: location.facilities[0].mapLatitude, lng: location.facilities[0].mapLongitude }, icon: markerIcon}"
-      :key="index"
-      v-for="(location, index) in searchResultsStore.searchResultsList"
-    />
-  </GoogleMap>
+    <GoogleMap data-testid="map-of-japan" ref="mapRef" :api-key="runtimeConfig.public.GOOGLE_MAPS_API_KEY"
+        map-id="153d718018a2577e" style="height: 100%; width: 100%;" :center="center" :zoom="9">
+        <GMarker @click="searchResultsStore.setActiveSearchResult(location.professional.id)"
+            :options="{ position: { lat: location.facilities[0]?.mapLatitude ?? defaultLocation.lat, lng: location.facilities[0]?.mapLongitude ?? defaultLocation.lng }, icon: markerIcon }"
+            :key="index" v-for="(location, index) in searchResultsStore.searchResultsList" />
+    </GoogleMap>
 </template>
 
 <script lang="ts">
@@ -25,34 +15,32 @@ import customIcon from "../assets/images/blue-map-pin.svg"
 import { useSearchResultsStore } from "../stores/searchResultsStore"
 
 export default defineComponent({
-  components: { GoogleMap, GMarker },
-  setup() {
-    //tokyo is the default location
-    const defaultLocation = { lat: 35.6804, lng: 139.769 };
+    components: { GoogleMap, GMarker },
+    setup() {
+        //tokyo is the default location
+        const defaultLocation = { lat: 35.6804, lng: 139.769 };
 
-    const center = computed(() => {
-      const lng = useSearchResultsStore().activeResult?.facilities[0]
-        .mapLongitude;
-      const lat = useSearchResultsStore().activeResult?.facilities[0]
-        .mapLatitude;
-      const locationExists = lng && lat;
+        const center = computed(() => {
+            const lng = useSearchResultsStore().activeResult?.facilities[0]?.mapLongitude
+            const lat = useSearchResultsStore().activeResult?.facilities[0]?.mapLatitude
+            const locationExists = lng && lat;
 
-      return locationExists ? { lat, lng } : defaultLocation;
-    });
+            return locationExists ? { lat, lng } : defaultLocation;
+        });
 
-    const markerIcon = {
-      url: customIcon,
-      scaledSize: {
-        width: 45,
-        height: 73
-      }
-    };
+        const markerIcon = {
+            url: customIcon,
+            scaledSize: {
+                width: 45,
+                height: 73
+            }
+        };
 
-    const searchResultsStore = useSearchResultsStore();
-    const mapRef = ref(null);
-    const runtimeConfig = useRuntimeConfig();
+        const searchResultsStore = useSearchResultsStore();
+        const mapRef = ref(null);
+        const runtimeConfig = useRuntimeConfig();
 
-    return { center, mapRef, markerIcon, runtimeConfig, searchResultsStore };
-  }
+        return { center, mapRef, markerIcon, defaultLocation, runtimeConfig, searchResultsStore };
+    }
 });
 </script>
diff --git a/components/SearchResultsList.vue b/components/SearchResultsList.vue
@@ -21,7 +21,7 @@
                     hover:border-transparent hover:bg-primary/5 transition-all hover:cursor-pointer">
                     <SearchResultsListItem
                         :name="`${searchResult.professional.names[0].firstName}, ${searchResult.professional.names[0].lastName}`"
-                        :facility-name="localeStore.locale?.code == Locale.EnUs ? searchResult.facilities[0].nameEn : searchResult.facilities[0].nameJa"
+                        :facility-name="localeStore.locale?.code == Locale.EnUs ? searchResult.facilities[0]?.nameEn : searchResult.facilities[0]?.nameJa"
                         :specialties="searchResult.professional.specialties"
                         :spoken-languages="searchResult.professional.spokenLanguages" />
                 </div>

diff --git a/stores/searchResultsStore.ts b/stores/searchResultsStore.ts
@@ -1,83 +1,115 @@
-import { useQuery, useLazyQuery } from '@vue/apollo-composable'
+import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { defineStore } from 'pinia'
-import { Ref, reactive, ref, watch } from 'vue'
+import { Ref, ref, watch } from 'vue'
 import { Facility, FacilitySearchFilters, HealthcareProfessional, HealthcareProfessionalSearchFilters, Locale, Specialty } from '~/typedefs/gqlTypes.js'
 import { useModalStore } from './modalStore'
 import { useLoadingStore } from './loadingStore.js'
-import { useReadQuery } from '@apollo/client'
 
 type searchResult = {
     professional: HealthcareProfessional,
     facilities: Facility[]
 }
 
+let searchProfessionalsVariablesRef: Ref<{
+    filters: {
+        limit: number;
+        offset: number;
+        specialties: Specialty[] | undefined;
+        spokenLanguages: Locale[] | undefined;
+        acceptedInsurance: undefined;
+        degrees: undefined;
+        names: undefined;
+        orderBy: undefined;
+        createdDate: undefined;
+        updatedDate: undefined;
+    };
+} | undefined>
+
+let searchFacilitiesVariablesRef: Ref<{
+    filters: {
+        limit: number;
+        offset: number;
+        healthcareProfessionalIds: string[];
+        contact: undefined;
+        createdDate: undefined;
+        healthcareProfessionalName: undefined;
+        nameEn: undefined;
+        nameJa: undefined;
+        orderBy: undefined;
+        updatedDate: undefined;
+    };
+} | undefined>
+
 export const useSearchResultsStore = defineStore('searchResultsStore', () => {
     const activeResultId: Ref<String | undefined> = ref()
     const activeResult: Ref<searchResult | undefined> = ref()
     const searchResultsList: Ref<searchResult[]> = ref([])
 
-    let refetchProfessionalsHandle: () => void
-    let refetchFacilitiesHandle: () => void
-
+    const searchCity: Ref<string | undefined> = ref()
+    const searchSpecialty: Ref<Specialty | undefined> = ref()
+    const searchLanguage: Ref<Locale | undefined> = ref()
 
-    function search(searchCity?: string, searchSpecialty?: Specialty, searchLanguage?: Locale) {
+    function search(selectedSearchCity?: string, selectedSearchSpecialty?: Specialty, selectedSearchLanguage?: Locale) {
         //set the loading visual state
         const loadingStore = useLoadingStore()
         loadingStore.setIsLoading(true)
 
-        console.log('refetchProfessionalsHandle: ', refetchProfessionalsHandle)
-        if (refetchProfessionalsHandle) {
-            refetchProfessionalsHandle()
-        } else {
-            const { professionalsRef, refetchProfessionals } = searchProfessionals(searchSpecialty, searchLanguage)
-            refetchProfessionalsHandle = refetchProfessionals
+        searchCity.value = selectedSearchCity
+        searchSpecialty.value = selectedSearchSpecialty
+        searchLanguage.value = selectedSearchLanguage
 
-            //this is the async callback that will be called when the query is done (no async/await)
-            watch(professionalsRef, professionalsSearchResult => {
-                console.log(`Fetched professionals: ${JSON.stringify(professionalsSearchResult)}`)
+        //if we have already fetched data once, to trigger a new query, we can just update the query variables ref. This will trigger the watch function again
+        if (searchProfessionalsVariablesRef && searchProfessionalsVariablesRef.value) {
+            console.log('refetching professionals')
+            searchProfessionalsVariablesRef.value.filters = {
+                ...searchProfessionalsVariablesRef?.value?.filters,
+                specialties: searchSpecialty.value ? [searchSpecialty.value] : undefined,
+                spokenLanguages: searchLanguage.value ? [searchLanguage.value] : undefined
+            }
 
-                const filteredSpecialtyProfessionals = searchSpecialty
-                    ? professionalsSearchResult.healthcareProfessionals?.filter(professional => professional.specialties.includes(searchSpecialty as Specialty))
-                    : professionalsSearchResult.healthcareProfessionals
+            return
+        }
 
-                // const filteredSpecialtyProfessionals = professionalsSearchResult.healthcareProfessionals?.filter(professional => professional.specialties.includes(searchSpecialty as Specialty))
-                // console.log('searchSpecialty =', searchSpecialty)
+        const professionalsRef = searchProfessionals(searchSpecialty.value, searchLanguage.value)
 
-                const professionalIds = filteredSpecialtyProfessionals?.map(professional => professional.id) ?? []
+        //this is the async callback that will be called when the query is done (no async/await)
+        watch(professionalsRef, professionalsSearchResult => {
+            console.log(`Fetched professionals: ${JSON.stringify(professionalsSearchResult)}`)
 
-                if (refetchFacilitiesHandle) {
-                    refetchFacilitiesHandle()
-                } else {
-                    const { facilitiesRef, refetchFacilities } = searchFacilities(professionalIds, searchCity)
+            const professionalIds = professionalsSearchResult?.healthcareProfessionals?.map(professional => professional.id) ?? []
 
-                    watch(facilitiesRef, facilitiesSearchResults => {
-                        console.log(`Fetched facilities: ${JSON.stringify(facilitiesSearchResults)}`)
+            //if we have already fetched data once, to trigger a new query, we can just update the query variables ref. This will trigger the watch function again
+            if (searchFacilitiesVariablesRef && searchFacilitiesVariablesRef.value) {
+                console.log('refetching facilities')
+                searchFacilitiesVariablesRef.value.filters.healthcareProfessionalIds = professionalIds
+                return
+            }
 
-                        const searchResults = filteredSpecialtyProfessionals?.map(professional => {
-                            const matchingFacilities = facilitiesSearchResults.facilities?.filter(facility => facility.healthcareProfessionalIds.includes(professional.id))
-                            return { professional, facilities: matchingFacilities } satisfies searchResult
-                        })
+            //get the facilities that match the professionals we found
+            const facilitiesRef = searchFacilities(professionalIds)
 
-                        //filter the search results by location if a location is selected (and not the default '----Any----' value)
-                        const locationFilteredSearchResults = searchCity
-                            ? searchResults?.filter(item =>
-                                item.facilities.some(facility =>
-                                    facility.contact?.address.cityEn === searchCity || facility.contact?.address.cityJa === searchCity))
-                            : searchResults
+            watch(facilitiesRef, facilitiesSearchResults => {
+                console.log(`Fetched facilities: ${JSON.stringify(facilitiesSearchResults)}`)
 
-                        searchResultsList.value = locationFilteredSearchResults
+                const searchResults = professionalsSearchResult?.healthcareProfessionals?.map(professional => {
+                    const matchingFacilities = facilitiesSearchResults?.facilities?.filter(facility => facility.healthcareProfessionalIds.includes(professional.id)) ?? []
 
-                    })
+                    return { professional, facilities: matchingFacilities } satisfies searchResult
+                })
 
-                    refetchFacilitiesHandle = refetchFacilities
+                //filter the search results by location if a location is selected
+                const locationFilteredSearchResults = searchCity.value
+                    ? searchResults?.filter(item =>
+                        item.facilities.some(facility =>
+                            facility.contact?.address.cityEn === searchCity.value || facility.contact?.address.cityJa === searchCity.value))
+                    : searchResults
 
-                }
+                searchResultsList.value = locationFilteredSearchResults
 
+                loadingStore.setIsLoading(false)
             })
-        }
-
-
+        })
     }
 
     function setActiveSearchResult(selectedResultId: String) {
@@ -97,15 +129,15 @@ export const useSearchResultsStore = defineStore('searchResultsStore', () => {
     return { activeResultId, activeResult, searchResultsList, search, setActiveSearchResult, clearActiveSearchResult }
 })
 
+
 function searchProfessionals(searchSpecialty?: Specialty, searchLanguage?: Locale) {
     const loadingStore = useLoadingStore()
 
-    const searchProfessionalsData = ref({
+    const searchProfessionalsData = {
         filters: {
             limit: 100,
             offset: 0,
-            // we can't do more than 1 array contains filter in a single query, so we have to do this on the client side
-            // specialties: searchSpecialty ? [searchSpecialty] : undefined,
+            specialties: searchSpecialty ? [searchSpecialty] : undefined,
             spokenLanguages: searchLanguage ? [searchLanguage] : undefined,
             acceptedInsurance: undefined,
             degrees: undefined,
@@ -114,10 +146,12 @@ function searchProfessionals(searchSpecialty?: Specialty, searchLanguage?: Local
             createdDate: undefined,
             updatedDate: undefined
         } satisfies HealthcareProfessionalSearchFilters
-    })
+    }
 
     console.log('searching professionals')
-    const { result, loading, error, refetch } = useQuery(searchProfessionalsQuery, searchProfessionalsData)
+    const { result, loading, error, variables } = useQuery(searchProfessionalsQuery, searchProfessionalsData)
+
+    searchProfessionalsVariablesRef = variables
 
     //we want to set the app to a loading state while querying. This value is reactive
     watch(loading, (newValue) => {
@@ -131,10 +165,10 @@ function searchProfessionals(searchSpecialty?: Specialty, searchLanguage?: Local
         alert(`Error getting data! Please contact our support team by clicking the bottom right link on the page!`)
     })
 
-    return { professionalsRef: result as Ref<{ healthcareProfessionals: HealthcareProfessional[] }>, refetchProfessionals: refetch }
+    return result as Ref<{ healthcareProfessionals: HealthcareProfessional[] }>
 }
 
-function searchFacilities(healthcareProfessionalIds: string[], searchLocation?: string) {
+function searchFacilities(healthcareProfessionalIds: string[]) {
     //TODO: add search by location
     const searchFacilitiesData = ref({
         filters: {
@@ -152,7 +186,9 @@ function searchFacilities(healthcareProfessionalIds: string[], searchLocation?:
     })
 
     console.log('searching facilities')
-    const { result, loading, error, refetch } = useQuery(searchFacilitiesQuery, searchFacilitiesData)
+    const { result, loading, error, variables } = useQuery(searchFacilitiesQuery, searchFacilitiesData)
+
+    searchFacilitiesVariablesRef = variables
 
     //we want to set the app to a loading state while querying. This value is reactive
     watch(loading, (newValue) => {
@@ -166,7 +202,7 @@ function searchFacilities(healthcareProfessionalIds: string[], searchLocation?:
         alert(`Error getting data! Please contact our support team by clicking the bottom right link on the page!`)
     })
 
-    return { facilitiesRef: result as Ref<{ facilities: Facility[] }>, refetchFacilities: refetch }
+    return result as Ref<{ facilities: Facility[] }>
 }
 
 

diff --git a/typedefs/gqlTypes.ts b/typedefs/gqlTypes.ts
@@ -157,7 +157,8 @@ export type HealthcareProfessionalSubmission = {
 export enum Insurance {
   InsuranceNotAccepted = 'INSURANCE_NOT_ACCEPTED',
   InternationalHealthInsurance = 'INTERNATIONAL_HEALTH_INSURANCE',
-  JapaneseHealthInsurance = 'JAPANESE_HEALTH_INSURANCE'
+  JapaneseHealthInsurance = 'JAPANESE_HEALTH_INSURANCE',
+  Uninsured = 'UNINSURED'
 }
 
 export enum Locale {