Migrate to Vue 3 and Vite

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

js/src/components/Local/CloseEvents.vue

@@ -0,0 +1,176 @@
+<template>
+  <close-content
+    v-show="loadingEvents || (events && events.total > 0)"
+    :suggestGeoloc="suggestGeoloc"
+    v-on="attrs"
+  >
+    <template #title>
+      {{ t("Events nearby {position}", { position: userLocationName }) }}
+    </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
+        v-if="
+          userLocation &&
+          userLocationName &&
+          userLocation.lat &&
+          userLocation.lon &&
+          userLocation.picture
+        "
+        :to="{
+          name: 'SEARCH',
+          query: {
+            locationName: userLocationName,
+            lat: userLocation.lat?.toString(),
+            lon: userLocation.lon?.toString(),
+            contentType: 'EVENTS',
+            distance: '25',
+          },
+        }"
+        :picture="userLocation.picture"
+      >
+        {{
+          t("View more events around {position}", {
+            position: userLocationName,
+          })
+        }}
+      </more-content>
+    </template>
+  </close-content>
+</template>
+
+<script lang="ts" setup>
+import { LocationType } from "../../types/user-location.model";
+import MoreContent from "./MoreContent.vue";
+import CloseContent from "./CloseContent.vue";
+import { computed, useAttrs } from "vue";
+import { SEARCH_EVENTS } from "@/graphql/search";
+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 { CURRENT_USER_LOCATION_CLIENT } from "@/graphql/location";
+import { ICurrentUser, IUser } from "@/types/current-user.model";
+import { CURRENT_USER_CLIENT, USER_SETTINGS } from "@/graphql/user";
+import { coordsToGeoHash, geoHashToCoords } from "@/utils/location";
+import { REVERSE_GEOCODE } from "@/graphql/address";
+import { IAddress } from "@/types/address.model";
+import { CONFIG } from "@/graphql/config";
+import { IConfig } from "@/types/config.model";
+import { useI18n } from "vue-i18n";
+
+const EVENT_PAGE_LIMIT = 12;
+
+const { result: currentUserResult } = useQuery<{
+  currentUser: ICurrentUser;
+}>(CURRENT_USER_CLIENT);
+
+const currentUser = computed(() => currentUserResult.value?.currentUser);
+
+const { result: userResult } = useQuery<{ loggedUser: IUser }>(
+  USER_SETTINGS,
+  {},
+  () => ({
+    enabled: currentUser.value?.isLoggedIn,
+  })
+);
+
+const loggedUser = computed(() => userResult.value?.loggedUser);
+
+const { result: configResult } = useQuery<{ config: IConfig }>(CONFIG);
+
+const config = computed<IConfig | undefined>(() => configResult.value?.config);
+
+const serverLocation = computed(() => config.value?.location);
+
+const { t } = useI18n({ useScope: "global" });
+const attrs = useAttrs();
+
+const coords = computed(() => {
+  const userSettingsGeoHash =
+    loggedUser.value?.settings?.location?.geohash ?? undefined;
+  const userSettingsCoords = geoHashToCoords(userSettingsGeoHash);
+
+  if (userSettingsCoords) {
+    return { ...userSettingsCoords, isIPLocation: false };
+  }
+
+  return { ...serverLocation.value, isIPLocation: true };
+});
+
+const { result: reverseGeocodeResult } = useQuery<{
+  reverseGeocode: IAddress[];
+}>(REVERSE_GEOCODE, coords, () => ({
+  enabled: coords.value?.longitude != undefined,
+}));
+
+const userSettingsLocation = computed(() => {
+  const address = reverseGeocodeResult.value?.reverseGeocode[0];
+  const placeName = address?.locality ?? address?.region ?? address?.country;
+  return {
+    lat: coords.value?.latitude,
+    lon: coords.value?.longitude,
+    name: placeName,
+    picture: address?.pictureInfo,
+    isIPLocation: coords.value?.isIPLocation,
+  };
+});
+
+const { result: currentUserLocationResult } = useQuery<{
+  currentUserLocation: LocationType;
+}>(CURRENT_USER_LOCATION_CLIENT);
+const currentUserLocation = computed(() => {
+  return {
+    ...currentUserLocationResult.value?.currentUserLocation,
+    isIPLocation: false,
+  };
+});
+
+const geohash = computed(() => {
+  return coordsToGeoHash(userLocation.value?.lat, userLocation.value?.lon);
+});
+
+const userLocationName = computed(() => {
+  return userLocation.value?.name;
+});
+
+const userLocation = computed(() => {
+  if (
+    !userSettingsLocation.value ||
+    (userSettingsLocation.value?.isIPLocation &&
+      currentUserLocation.value?.name)
+  ) {
+    return currentUserLocation.value;
+  }
+  return userSettingsLocation.value;
+});
+
+const suggestGeoloc = computed(() => userLocation.value?.isIPLocation);
+
+const { result: eventsResult, loading: loadingEvents } = useQuery<{
+  searchEvents: Paginate<IEvent>;
+}>(SEARCH_EVENTS, {
+  location: geohash,
+  beginsOn: new Date(),
+  endsOn: undefined,
+  radius: 2500,
+  eventPage: 1,
+  limit: EVENT_PAGE_LIMIT,
+  type: "IN_PERSON",
+});
+
+const events = computed(
+  () => eventsResult.value?.searchEvents ?? { elements: [], total: 0 }
+);
+</script>