From ea6d1ba83d9c2e20b5b56fa148dc6bc7e11cc009 Mon Sep 17 00:00:00 2001
From: Laurent GAY <l.gay@sd-libre.fr>
Date: Wed, 6 Nov 2024 17:36:35 +0100
Subject: [PATCH] #1492: search page correction + refactoring

---
 src/components/Local/CloseGroups.vue  | 116 --------------------------
 src/components/Local/LastEvents.vue   |  68 ---------------
 src/components/Local/OnlineEvents.vue |  75 -----------------
 src/components/NavBar.vue             |  14 ----
 src/views/SearchView.vue              |   6 +-
 5 files changed, 5 insertions(+), 274 deletions(-)
 delete mode 100644 src/components/Local/CloseGroups.vue
 delete mode 100644 src/components/Local/LastEvents.vue
 delete mode 100644 src/components/Local/OnlineEvents.vue

diff --git a/src/components/Local/CloseGroups.vue b/src/components/Local/CloseGroups.vue
deleted file mode 100644
index 0f238baef..000000000
--- a/src/components/Local/CloseGroups.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <close-content
-    class="container mx-auto px-2"
-    v-show="loading || selectedGroups.length > 0"
-    @do-geo-loc="emit('doGeoLoc')"
-    :suggestGeoloc="userLocation.isIPLocation"
-    :doingGeoloc="doingGeoloc"
-  >
-    <template #title>
-      <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
-        v-for="i in [...Array(6).keys()]"
-        class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
-        :key="i"
-        v-show="loading"
-      />
-      <group-card
-        v-for="group in selectedGroups"
-        :key="group.id"
-        :group="group"
-        :mode="'column'"
-        :showSummary="false"
-      />
-
-      <more-content
-        v-if="userLocationName"
-        :to="{
-          name: RouteName.SEARCH,
-          query: {
-            locationName: userLocationName,
-            lat: userLocation.lat?.toString(),
-            lon: userLocation.lon?.toString(),
-            contentType: 'GROUPS',
-            distance: `${distance}_km`,
-          },
-        }"
-        :picture="userLocation.picture"
-      >
-        {{
-          t("View more groups around {position}", {
-            position: userLocationName,
-          })
-        }}
-      </more-content>
-    </template>
-  </close-content>
-</template>
-
-<script lang="ts" setup>
-import SkeletonGroupResult from "@/components/Group/SkeletonGroupResult.vue";
-import sampleSize from "lodash/sampleSize";
-import { LocationType } from "@/types/user-location.model";
-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";
-import RouteName from "@/router/name";
-
-const props = defineProps<{
-  userLocation: LocationType;
-  doingGeoloc?: boolean;
-}>();
-const emit = defineEmits(["doGeoLoc"]);
-
-const { t } = useI18n({ useScope: "global" });
-
-const userLocation = computed(() => props.userLocation);
-
-const geoHash = computed(() =>
-  coordsToGeoHash(userLocation.value.lat, userLocation.value.lon)
-);
-
-const distance = computed<number>(() =>
-  userLocation.value?.isIPLocation ? 150 : 25
-);
-
-const { result: groupsResult, loading: loadingGroups } = useQuery<{
-  searchGroups: Paginate<IGroup>;
-}>(
-  SEARCH_GROUPS,
-  () => ({
-    location: geoHash.value,
-    radius: distance.value,
-    page: 1,
-    limit: 12,
-  }),
-  () => ({ enabled: geoHash.value !== undefined })
-);
-
-const groups = computed(
-  () => groupsResult.value?.searchGroups ?? { total: 0, elements: [] }
-);
-
-const selectedGroups = computed(() => sampleSize(groups.value?.elements, 5));
-
-const userLocationName = computed(() => props?.userLocation?.name);
-
-const loading = computed(() => props.doingGeoloc || loadingGroups.value);
-</script>
diff --git a/src/components/Local/LastEvents.vue b/src/components/Local/LastEvents.vue
deleted file mode 100644
index 959cec8a0..000000000
--- a/src/components/Local/LastEvents.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <close-content
-    class="container mx-auto px-2"
-    v-show="loadingEvents || (events && events.total > 0)"
-    :suggestGeoloc="false"
-    v-on="attrs"
-  >
-    <template #title>
-      {{ t("Agenda") }}
-    </template>
-    <template #content>
-      <skeleton-event-result
-        v-for="i in 6"
-        class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
-        :key="i"
-        v-show="loadingEvents"
-      />
-      <event-card
-        v-for="event in events.elements"
-        :event="event"
-        :key="event.uuid"
-      />
-      <more-content
-        :to="{
-          name: RouteName.SEARCH,
-          query: {
-            contentType: 'EVENTS',
-          },
-        }"
-      >
-        {{ t("View more events") }}
-      </more-content>
-    </template>
-  </close-content>
-</template>
-
-<script lang="ts" setup>
-import MoreContent from "./MoreContent.vue";
-import CloseContent from "./CloseContent.vue";
-import { computed, useAttrs } from "vue";
-import { IEvent } from "@/types/event.model";
-import { useQuery } from "@vue/apollo-composable";
-import EventCard from "../Event/EventCard.vue";
-import { Paginate } from "@/types/paginate";
-import SkeletonEventResult from "../Event/SkeletonEventResult.vue";
-import { EventSortField, SortDirection } from "@/types/enums";
-import { FETCH_EVENTS } from "@/graphql/event";
-import { useI18n } from "vue-i18n";
-import RouteName from "@/router/name";
-
-defineProps<{
-  instanceName: string;
-}>();
-
-const { t } = useI18n({ useScope: "global" });
-const attrs = useAttrs();
-
-const { result: resultEvents, loading: loadingEvents } = useQuery<{
-  events: Paginate<IEvent>;
-}>(FETCH_EVENTS, {
-  orderBy: EventSortField.BEGINS_ON,
-  direction: SortDirection.ASC,
-  longevents: false,
-});
-const events = computed(
-  () => resultEvents.value?.events ?? { total: 0, elements: [] }
-);
-</script>
diff --git a/src/components/Local/OnlineEvents.vue b/src/components/Local/OnlineEvents.vue
deleted file mode 100644
index bf4036764..000000000
--- a/src/components/Local/OnlineEvents.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <close-content
-    class="container mx-auto px-2"
-    :suggest-geoloc="false"
-    v-show="loadingEvents || (events?.elements && events?.elements.length > 0)"
-  >
-    <template #title>
-      {{ $t("Online upcoming events") }}
-    </template>
-    <template #content>
-      <skeleton-event-result
-        v-for="i in [...Array(6).keys()]"
-        class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
-        :key="i"
-        v-show="loadingEvents"
-      />
-      <event-card
-        class="scroll-ml-6 snap-center shrink-0 first:pl-8 last:pr-8 w-[18rem]"
-        v-for="event in events?.elements"
-        :key="event.id"
-        :event="event"
-        mode="column"
-      />
-      <more-content
-        :to="{
-          name: RouteName.SEARCH,
-          query: {
-            contentType: 'EVENTS',
-            isOnline: 'true',
-          },
-        }"
-        :picture="{
-          url: '/img/online-event.webp',
-          author: {
-            name: 'Chris Montgomery',
-            url: 'https://unsplash.com/@cwmonty',
-          },
-          source: {
-            name: 'Unsplash',
-            url: 'https://unsplash.com/?utm_source=Mobilizon&utm_medium=referral',
-          },
-        }"
-      >
-        {{ $t("View more online events") }}
-      </more-content>
-    </template>
-  </close-content>
-</template>
-
-<script lang="ts" setup>
-import { computed } from "vue";
-import SkeletonEventResult from "@/components/Event/SkeletonEventResult.vue";
-import MoreContent from "./MoreContent.vue";
-import CloseContent from "./CloseContent.vue";
-import { SEARCH_EVENTS } from "@/graphql/search";
-import EventCard from "@/components/Event/EventCard.vue";
-import { useQuery } from "@vue/apollo-composable";
-import RouteName from "@/router/name";
-import { Paginate } from "@/types/paginate";
-import { IEvent } from "@/types/event.model";
-
-const EVENT_PAGE_LIMIT = 12;
-
-const { result: searchEventResult, loading: loadingEvents } = useQuery<{
-  searchEvents: Paginate<IEvent>;
-}>(SEARCH_EVENTS, () => ({
-  beginsOn: new Date(),
-  endsOn: undefined,
-  eventPage: 1,
-  limit: EVENT_PAGE_LIMIT,
-  type: "ONLINE",
-}));
-
-const events = computed(() => searchEventResult.value?.searchEvents);
-</script>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 31c1e966e..fdcf298ad 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -179,13 +179,6 @@
         <ul
           class="flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold"
         >
-          <search-fields
-            v-if="showMobileMenu"
-            class="m-auto w-auto"
-            v-model:search="search"
-            v-model:location="location"
-          />
-
           <li class="m-auto">
             <router-link
               :to="{
@@ -257,13 +250,6 @@
               >{{ t("Register") }}</router-link
             >
           </li>
-
-          <search-fields
-            v-if="!showMobileMenu"
-            class="m-auto w-auto"
-            v-model:search="search"
-            v-model:location="location"
-          />
         </ul>
       </div>
     </div>
diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue
index 5907ba402..5ffdd8c62 100644
--- a/src/views/SearchView.vue
+++ b/src/views/SearchView.vue
@@ -943,7 +943,11 @@ const geoHashLocation = computed(() =>
 
 const radius = computed({
   get(): number | null {
-    return Number.parseInt(distance.value.slice(0, -3));
+    if (addressName.value) {
+      return Number.parseInt(distance.value.slice(0, -3));
+    } else {
+      return null;
+    }
   },
   set(newRadius: number) {
     distance.value = newRadius.toString() + "_km";