Improve search

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Local/CloseGroups.vue

@@ -1,11 +1,21 @@
 <template>
-  <close-content v-show="loadingGroups || selectedGroups.length > 0">
+  <close-content
+    class="container mx-auto px-2"
+    v-show="loadingGroups || selectedGroups.length > 0"
+    @do-geo-loc="emit('doGeoLoc')"
+    :suggestGeoloc="userLocation.isIPLocation"
+  >
     <template #title>
-      {{
-        $t("Popular groups nearby {position}", {
-          position: userLocationName,
-        })
-      }}
+      <template v-if="userLocationName">
+        {{
+          t("Popular groups nearby {position}", {
+            position: userLocationName,
+          })
+        }}
+      </template>
+      <template v-else>
+        {{ t("Popular groups close to you") }}
+      </template>
     </template>
     <template #content>
       <!-- <skeleton-group-result
@@ -14,32 +24,32 @@
         :key="i"
         v-show="loadingGroups"
       /> -->
-      <group-result
+      <group-card
         v-for="group in selectedGroups"
         :key="group.id"
-        class="scroll-ml-6 snap-center shrink-0 first:pl-8 last:pr-8 w-[18rem]"
         :group="group"
         :view-mode="'column'"
         :minimal="true"
         :has-border="true"
+        :showSummary="false"
       />
 
       <more-content
-        v-if="userLocation"
+        v-if="userLocationName"
         :to="{
           name: 'SEARCH',
           query: {
             locationName: userLocationName,
-            lat: userLocation.lat,
-            lon: userLocation.lon,
+            lat: userLocation.lat?.toString(),
+            lon: userLocation.lon?.toString(),
             contentType: 'GROUPS',
-            distance: currentDistance,
+            distance: '25_km',
           },
         }"
         :picture="userLocation.picture"
       >
         {{
-          $t("View more groups around {position}", {
+          t("View more groups around {position}", {
             position: userLocationName,
           })
         }}
@@ -48,8 +58,7 @@
   </close-content>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, reactive, computed, ref } from "vue";
+<script lang="ts" setup>
 // import SkeletonGroupResult from "../../components/result/SkeletonGroupResult.vue";
 import sampleSize from "lodash/sampleSize";
 import { LocationType } from "../../types/user-location.model";
@@ -57,39 +66,36 @@ import MoreContent from "./MoreContent.vue";
 import CloseContent from "./CloseContent.vue";
 import { IGroup } from "@/types/actor";
 import { SEARCH_GROUPS } from "@/graphql/search";
+import { useQuery } from "@vue/apollo-composable";
+import { Paginate } from "@/types/paginate";
+import { computed } from "vue";
+import GroupCard from "@/components/Group/GroupCard.vue";
+import { coordsToGeoHash } from "@/utils/location";
+import { useI18n } from "vue-i18n";
 
-export default defineComponent({
-  components: {
-    MoreContent,
-    CloseContent,
-    // SkeletonGroupResult,
-  },
-  apollo: {
-    groups: {
-      query: SEARCH_GROUPS,
-    },
-  },
-  setup() {
-    const userLocationInjection = inject<{
-      userLocation: LocationType;
-    }>("userLocation");
+const props = defineProps<{ userLocation: LocationType }>();
+const emit = defineEmits(["doGeoLoc"]);
 
-    const groups = reactive<IGroup[]>([]);
+const { t } = useI18n({ useScope: "global" });
 
-    const selectedGroups = computed(() => sampleSize(groups, 5));
+const { result: groupsResult, loading: loadingGroups } = useQuery<{
+  searchGroups: Paginate<IGroup>;
+}>(
+  SEARCH_GROUPS,
+  () => ({
+    location: coordsToGeoHash(props.userLocation.lat, props.userLocation.lon),
+    radius: 25,
+    page: 1,
+    limit: 12,
+  }),
+  () => ({ enabled: props.userLocation?.lat !== undefined })
+);
 
-    const currentDistance = ref("25_km");
+const groups = computed(
+  () => groupsResult.value?.searchGroups ?? { total: 0, elements: [] }
+);
 
-    const userLocationName = computed(
-      () => userLocationInjection?.userLocation?.name
-    );
+const selectedGroups = computed(() => sampleSize(groups.value?.elements, 5));
 
-    return {
-      selectedGroups,
-      userLocation: userLocationInjection?.userLocation,
-      userLocationName,
-      currentDistance,
-    };
-  },
-});
+const userLocationName = computed(() => props?.userLocation?.name);
 </script>