Fix address selector

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

js/package.json

@@ -53,7 +53,7 @@
     "@vue/apollo-composable": "^4.0.0-alpha.17",
     "@vue/compiler-sfc": "^3.2.37",
     "@vueuse/core": "^9.1.0",
-    "@vueuse/head": "^0.7.9",
+    "@vueuse/head": "^0.9.6",
     "@vueuse/router": "^9.0.2",
     "apollo-absinthe-upload-link": "^1.5.0",
     "autoprefixer": "^10",
@@ -93,7 +93,7 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "^0.10.0",
+    "@histoire/plugin-vue": "^0.11.0",
     "@playwright/test": "^1.25.1",
     "@rushstack/eslint-patch": "^1.1.4",
     "@tailwindcss/forms": "^0.5.2",
@@ -122,7 +122,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^9.3.0",
     "flush-promises": "^1.0.2",
-    "histoire": "^0.10.4",
+    "histoire": "^0.11.0",
     "jsdom": "^20.0.0",
     "mock-apollo-client": "^1.1.0",
     "prettier": "^2.2.1",

js/src/App.vue

@@ -69,7 +69,11 @@ import { IConfig } from "@/types/config.model";
 import { useRouter } from "vue-router";
 import RouteName from "@/router/name";
 
-const { result: configResult } = useQuery<{ config: IConfig }>(CONFIG);
+const { result: configResult } = useQuery<{ config: IConfig }>(
+  CONFIG,
+  undefined,
+  { fetchPolicy: "cache-only" }
+);
 
 const config = computed(() => configResult.value?.config);
 

js/src/apollo/utils.ts

@@ -74,7 +74,7 @@ export const typePolicies: TypePolicies = {
     merge: true,
   },
   Address: {
-    keyFields: ["id"],
+    keyFields: ["id", "originId"],
   },
   RootQueryType: {
     fields: {

js/src/assets/oruga-tailwindcss.css

@@ -114,7 +114,7 @@ body {
 }
 
 .autocomplete-item {
-  @apply py-1.5 px-4;
+  @apply py-1.5 px-4 text-start;
 }
 
 /* Dropdown */

js/src/components/Event/FullAddressAutoComplete.vue

@@ -44,10 +44,11 @@
           class="!mt-0"
         >
           <template #default="{ option }">
-            <o-icon :icon="option.poiInfos.poiIcon.icon" />
-            <b>{{ option.poiInfos.name }}</b
-            ><br />
-            <small>{{ option.poiInfos.alternativeName }}</small>
+            <p class="flex gap-1">
+              <o-icon :icon="addressToPoiInfos(option).poiIcon.icon" />
+              <b>{{ addressToPoiInfos(option).name }}</b>
+            </p>
+            <small>{{ addressToPoiInfos(option).alternativeName }}</small>
           </template>
           <template #empty>
             <span v-if="isFetching">{{ t("Searching…") }}</span>
@@ -91,15 +92,15 @@
         </div>
       </div>
     </div>
-    <div
-      class="map"
-      v-if="!hideMap && selected && selected.geom && selected.poiInfos"
-    >
+    <div class="map" v-if="!hideMap && selected && selected.geom">
       <map-leaflet
         :coords="selected.geom"
         :marker="{
-          text: [selected.poiInfos.name, selected.poiInfos.alternativeName],
-          icon: selected.poiInfos.poiIcon.icon,
+          text: [
+            addressToPoiInfos(selected).name,
+            addressToPoiInfos(selected).alternativeName,
+          ],
+          icon: addressToPoiInfos(selected).poiIcon.icon,
         }"
         :updateDraggableMarkerCallback="reverseGeoCode"
         :options="{ zoom: mapDefaultZoom }"
@@ -110,7 +111,13 @@
 </template>
 <script lang="ts" setup>
 import { LatLng } from "leaflet";
-import { Address, IAddress, addressFullName } from "../../types/address.model";
+import {
+  Address,
+  IAddress,
+  addressFullName,
+  addressToPoiInfos,
+  IPoiInfo,
+} from "../../types/address.model";
 import AddressInfo from "../../components/Address/AddressInfo.vue";
 import { computed, ref, watch, defineAsyncComponent } from "vue";
 import { useI18n } from "vue-i18n";
@@ -118,6 +125,7 @@ import { useGeocodingAutocomplete } from "@/composition/apollo/config";
 import { ADDRESS } from "@/graphql/address";
 import { useReverseGeocode } from "@/composition/apollo/address";
 import { useLazyQuery } from "@vue/apollo-composable";
+import { AddressSearchType } from "@/types/enums";
 const MapLeaflet = defineAsyncComponent(
   () => import("@/components/LeafletMap.vue")
 );
@@ -133,6 +141,7 @@ const props = withDefaults(
     hideMap?: boolean;
     hideSelected?: boolean;
     placeholder?: string;
+    resultType?: AddressSearchType;
   }>(),
   {
     labelClass: "",
@@ -227,12 +236,13 @@ const { onResult: onAddressSearchResult, load: searchAddress } = useLazyQuery<{
 onAddressSearchResult((result) => {
   if (result.loading) return;
   const { data } = result;
-  addressData.value = data.searchAddress.map(
-    (address: IAddress) => new Address(address)
-  );
+  console.debug("onAddressSearchResult", data.searchAddress);
+  addressData.value = data.searchAddress;
   isFetching.value = false;
 });
 
+const searchQuery = ref("");
+
 const asyncData = async (query: string): Promise<void> => {
   if (!query.length) {
     addressData.value = [];
@@ -247,9 +257,12 @@ const asyncData = async (query: string): Promise<void> => {
 
   isFetching.value = true;
 
+  searchQuery.value = query;
+
   searchAddress(undefined, {
-    query,
+    query: searchQuery.value,
     locale: locale.value,
+    type: props.resultType,
   });
 };
 
@@ -295,12 +308,10 @@ const { onResult: onReverseGeocodeResult, load: loadReverseGeocode } =
 onReverseGeocodeResult((result) => {
   if (result.loading !== false) return;
   const { data } = result;
-  addressData.value = data.reverseGeocode.map(
-    (elem: IAddress) => new Address(elem)
-  );
+  addressData.value = data.reverseGeocode;
 
   if (addressData.value.length > 0) {
-    const defaultAddress = new Address(addressData.value[0]);
+    const defaultAddress = addressData.value[0];
     selected.value = defaultAddress;
     emit("update:modelValue", selected.value);
   }

js/src/components/Home/SearchFields.vue

@@ -19,13 +19,14 @@
       maxlength="1024"
     />
     <full-address-auto-complete
-      :type="AddressSearchType.ADMINISTRATIVE"
+      :resultType="AddressSearchType.ADMINISTRATIVE"
       :doGeoLocation="false"
       v-model="location"
       :hide-map="true"
       :hide-selected="true"
       :default-text="locationDefaultText"
       labelClass="sr-only"
+      :placeholder="t('e.g. Nantes, Berlin, Cork, …')"
     />
     <o-button native-type="submit" icon-left="magnify">
       <template v-if="search">{{ t("Go!") }}</template>

js/src/components/Local/CloseContent.vue

@@ -8,13 +8,14 @@
           <slot name="title" />
         </h2>
 
-        <button
+        <o-button
+          :disabled="doingGeoloc"
           v-if="suggestGeoloc"
           class="inline-flex bg-primary rounded text-white flex-initial px-4 py-2 justify-center w-full md:w-min whitespace-nowrap"
           @click="emit('doGeoLoc')"
         >
           {{ t("Geolocate me") }}
-        </button>
+        </o-button>
       </div>
       <slot name="subtitle" />
     </div>
@@ -53,8 +54,9 @@ import { useI18n } from "vue-i18n";
 withDefaults(
   defineProps<{
     suggestGeoloc?: boolean;
+    doingGeoloc?: boolean;
   }>(),
-  { suggestGeoloc: true }
+  { suggestGeoloc: true, doingGeoloc: false }
 );
 
 const emit = defineEmits(["doGeoLoc"]);

js/src/components/Local/CloseEvents.vue

@@ -1,10 +1,11 @@
 <template>
   <close-content
     class="container mx-auto px-2"
-    v-show="loadingEvents || (events && events.total > 0)"
+    v-show="loading || (events && events.total > 0)"
     :suggestGeoloc="suggestGeoloc"
     v-on="attrs"
     @doGeoLoc="emit('doGeoLoc')"
+    :doingGeoloc="doingGeoloc"
   >
     <template #title>
       <template v-if="userLocationName">
@@ -19,7 +20,7 @@
         v-for="i in 6"
         class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
         :key="i"
-        v-show="loadingEvents"
+        v-show="loading"
       />
       <event-card
         v-for="event in events.elements"
@@ -35,7 +36,7 @@
             lat: userLocation.lat?.toString(),
             lon: userLocation.lon?.toString(),
             contentType: 'EVENTS',
-            distance: '25_km',
+            distance: `${distance}_km`,
           },
         }"
         :picture="userLocation?.picture"
@@ -54,10 +55,10 @@
 import { LocationType } from "../../types/user-location.model";
 import MoreContent from "./MoreContent.vue";
 import CloseContent from "./CloseContent.vue";
-import { computed, useAttrs } from "vue";
+import { computed, onMounted, ref, useAttrs } from "vue";
 import { SEARCH_EVENTS } from "@/graphql/search";
 import { IEvent } from "@/types/event.model";
-import { useQuery } from "@vue/apollo-composable";
+import { useLazyQuery } from "@vue/apollo-composable";
 import EventCard from "../Event/EventCard.vue";
 import { Paginate } from "@/types/paginate";
 import SkeletonEventResult from "../Event/SkeletonEventResult.vue";
@@ -66,7 +67,10 @@ import { coordsToGeoHash } from "@/utils/location";
 import { roundToNearestMinute } from "@/utils/datetime";
 import RouteName from "@/router/name";
 
-const props = defineProps<{ userLocation: LocationType }>();
+const props = defineProps<{
+  userLocation: LocationType;
+  doingGeoloc?: boolean;
+}>();
 const emit = defineEmits(["doGeoLoc"]);
 
 const EVENT_PAGE_LIMIT = 12;
@@ -74,34 +78,54 @@ const EVENT_PAGE_LIMIT = 12;
 const { t } = useI18n({ useScope: "global" });
 const attrs = useAttrs();
 
+const userLocation = computed(() => props.userLocation);
+
 const userLocationName = computed(() => {
-  return props.userLocation?.name;
+  return userLocation.value?.name;
 });
-const suggestGeoloc = computed(() => props.userLocation?.isIPLocation);
+const suggestGeoloc = computed(() => userLocation.value?.isIPLocation);
 
 const geoHash = computed(() =>
   coordsToGeoHash(props.userLocation.lat, props.userLocation.lon)
 );
 
-const { result: eventsResult, loading: loadingEvents } = useQuery<{
+const distance = computed<number>(() => (suggestGeoloc.value ? 150 : 25));
+
+const now = computed(() => roundToNearestMinute(new Date()));
+
+const searchEnabled = computed(() => geoHash.value != undefined);
+const enabled = ref(false);
+
+const {
+  result: eventsResult,
+  loading: loadingEvents,
+  load: load,
+} = useLazyQuery<{
   searchEvents: Paginate<IEvent>;
 }>(
   SEARCH_EVENTS,
   () => ({
     location: geoHash.value,
-    beginsOn: roundToNearestMinute(new Date()),
+    beginsOn: now.value,
     endsOn: undefined,
-    radius: 25,
+    radius: distance.value,
     eventPage: 1,
     limit: EVENT_PAGE_LIMIT,
     type: "IN_PERSON",
   }),
   () => ({
-    enabled: geoHash.value !== undefined,
+    enabled: searchEnabled.value,
+    fetchPolicy: "cache-first",
   })
 );
 
 const events = computed(
   () => eventsResult.value?.searchEvents ?? { elements: [], total: 0 }
 );
+
+onMounted(() => {
+  load();
+});
+
+const loading = computed(() => props.doingGeoloc || loadingEvents.value);
 </script>

js/src/components/Local/CloseGroups.vue

@@ -1,9 +1,10 @@
 <template>
   <close-content
     class="container mx-auto px-2"
-    v-show="loadingGroups || selectedGroups.length > 0"
+    v-show="loading || selectedGroups.length > 0"
     @do-geo-loc="emit('doGeoLoc')"
     :suggestGeoloc="userLocation.isIPLocation"
+    :doingGeoloc="doingGeoloc"
   >
     <template #title>
       <template v-if="userLocationName">
@@ -22,7 +23,7 @@
         v-for="i in [...Array(6).keys()]"
         class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
         :key="i"
-        v-show="loadingGroups"
+        v-show="loading"
       />
       <group-card
         v-for="group in selectedGroups"
@@ -43,7 +44,7 @@
             lat: userLocation.lat?.toString(),
             lon: userLocation.lon?.toString(),
             contentType: 'GROUPS',
-            distance: '25_km',
+            distance: `${distance}_km`,
           },
         }"
         :picture="userLocation.picture"
@@ -74,22 +75,35 @@ import { coordsToGeoHash } from "@/utils/location";
 import { useI18n } from "vue-i18n";
 import RouteName from "@/router/name";
 
-const props = defineProps<{ userLocation: LocationType }>();
+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: coordsToGeoHash(props.userLocation.lat, props.userLocation.lon),
-    radius: 25,
+    location: geoHash.value,
+    radius: distance.value,
     page: 1,
     limit: 12,
   }),
-  () => ({ enabled: props.userLocation?.lat !== undefined })
+  () => ({ enabled: geoHash.value !== undefined })
 );
 
 const groups = computed(
@@ -99,4 +113,6 @@ const groups = computed(
 const selectedGroups = computed(() => sampleSize(groups.value?.elements, 5));
 
 const userLocationName = computed(() => props?.userLocation?.name);
+
+const loading = computed(() => props.doingGeoloc || loadingGroups.value);
 </script>

js/src/components/NavBar.vue

@@ -3,8 +3,14 @@
     class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-zinc-900"
     id="navbar"
   >
-    <div class="container mx-auto flex flex-wrap items-center mx-auto gap-4">
-      <router-link :to="{ name: RouteName.HOME }" class="flex items-center">
+    <div
+      class="container mx-auto flex flex-wrap items-center mx-auto gap-2 sm:gap-4"
+    >
+      <router-link
+        :to="{ name: RouteName.HOME }"
+        class="flex items-center"
+        :class="{ 'flex-1': !currentActor?.id }"
+      >
         <MobilizonLogo class="w-40" />
       </router-link>
       <div class="flex items-center md:order-2 ml-auto" v-if="currentActor?.id">
@@ -12,7 +18,7 @@
           <template #trigger>
             <button
               type="button"
-              class="flex mr-3 text-sm rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
+              class="flex sm:mr-3 text-sm rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
               id="user-menu-button"
               aria-expanded="false"
             >

js/src/composition/apollo/config.ts

@@ -29,7 +29,7 @@ export function useTimezones() {
     loading,
   } = useQuery<{
     config: Pick<IConfig, "timezones">;
-  }>(TIMEZONES);
+  }>(TIMEZONES, undefined, { fetchPolicy: "cache-first" });
 
   const timezones = computed(() => timezoneResult.value?.config?.timezones);
   return { timezones, error, loading };
@@ -42,7 +42,7 @@ export function useAnonymousParticipationConfig() {
     loading,
   } = useQuery<{
     config: Pick<IConfig, "anonymous">;
-  }>(ANONYMOUS_PARTICIPATION_CONFIG);
+  }>(ANONYMOUS_PARTICIPATION_CONFIG, undefined, { fetchPolicy: "cache-only" });
 
   const anonymousParticipationConfig = computed(
     () => configResult.value?.config?.anonymous?.participation
@@ -58,7 +58,7 @@ export function useAnonymousReportsConfig() {
     loading,
   } = useQuery<{
     config: Pick<IConfig, "anonymous">;
-  }>(ANONYMOUS_REPORTS_CONFIG);
+  }>(ANONYMOUS_REPORTS_CONFIG, undefined, { fetchPolicy: "cache-only" });
 
   const anonymousReportsConfig = computed(
     () => configResult.value?.config?.anonymous?.participation
@@ -69,7 +69,7 @@ export function useAnonymousReportsConfig() {
 export function useInstanceName() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "name">;
-  }>(ABOUT);
+  }>(ABOUT, undefined, { fetchPolicy: "cache-only" });
 
   const instanceName = computed(() => result.value?.config?.name);
   return { instanceName, error, loading };
@@ -78,7 +78,7 @@ export function useInstanceName() {
 export function useAnonymousActorId() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "anonymous">;
-  }>(ANONYMOUS_ACTOR_ID);
+  }>(ANONYMOUS_ACTOR_ID, undefined, { fetchPolicy: "cache-only" });
 
   const anonymousActorId = computed(
     () => result.value?.config?.anonymous?.actorId
@@ -89,7 +89,7 @@ export function useAnonymousActorId() {
 export function useUploadLimits() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "uploadLimits">;
-  }>(UPLOAD_LIMITS);
+  }>(UPLOAD_LIMITS, undefined, { fetchPolicy: "cache-only" });
 
   const uploadLimits = computed(() => result.value?.config?.uploadLimits);
   return { uploadLimits, error, loading };
@@ -98,7 +98,7 @@ export function useUploadLimits() {
 export function useEventCategories() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "eventCategories">;
-  }>(EVENT_CATEGORIES);
+  }>(EVENT_CATEGORIES, undefined, { fetchPolicy: "cache-only" });
 
   const eventCategories = computed(() => result.value?.config.eventCategories);
   return { eventCategories, error, loading };
@@ -107,7 +107,7 @@ export function useEventCategories() {
 export function useRestrictions() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "restrictions">;
-  }>(RESTRICTIONS);
+  }>(RESTRICTIONS, undefined, { fetchPolicy: "cache-only" });
 
   const restrictions = computed(() => result.value?.config.restrictions);
   return { restrictions, error, loading };
@@ -116,7 +116,7 @@ export function useRestrictions() {
 export function useExportFormats() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "exportFormats">;
-  }>(EVENT_PARTICIPANTS);
+  }>(EVENT_PARTICIPANTS, undefined, { fetchPolicy: "cache-only" });
   const exportFormats = computed(() => result.value?.config?.exportFormats);
   return { exportFormats, error, loading };
 }
@@ -124,7 +124,7 @@ export function useExportFormats() {
 export function useGeocodingAutocomplete() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "geocoding">;
-  }>(GEOCODING_AUTOCOMPLETE);
+  }>(GEOCODING_AUTOCOMPLETE, undefined, { fetchPolicy: "cache-only" });
   const geocodingAutocomplete = computed(
     () => result.value?.config?.geocoding?.autocomplete
   );
@@ -134,7 +134,7 @@ export function useGeocodingAutocomplete() {
 export function useMapTiles() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "maps">;
-  }>(MAPS_TILES);
+  }>(MAPS_TILES, undefined, { fetchPolicy: "cache-only" });
 
   const tiles = computed(() => result.value?.config.maps.tiles);
   return { tiles, error, loading };
@@ -143,7 +143,7 @@ export function useMapTiles() {
 export function useRoutingType() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "maps">;
-  }>(ROUTING_TYPE);
+  }>(ROUTING_TYPE, undefined, { fetchPolicy: "cache-only" });
 
   const routingType = computed(() => result.value?.config.maps.routing.type);
   return { routingType, error, loading };
@@ -152,7 +152,7 @@ export function useRoutingType() {
 export function useFeatures() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "features">;
-  }>(FEATURES);
+  }>(FEATURES, undefined, { fetchPolicy: "cache-only" });
 
   const features = computed(() => result.value?.config.features);
   return { features, error, loading };
@@ -161,7 +161,7 @@ export function useFeatures() {
 export function useResourceProviders() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "resourceProviders">;
-  }>(RESOURCE_PROVIDERS);
+  }>(RESOURCE_PROVIDERS, undefined, { fetchPolicy: "cache-only" });
 
   const resourceProviders = computed(
     () => result.value?.config.resourceProviders
@@ -172,7 +172,7 @@ export function useResourceProviders() {
 export function useServerProvidedLocation() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "location">;
-  }>(LOCATION);
+  }>(LOCATION, undefined, { fetchPolicy: "cache-only" });
 
   const location = computed(() => result.value?.config.location);
   return { location, error, loading };
@@ -181,7 +181,7 @@ export function useServerProvidedLocation() {
 export function useIsDemoMode() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "demoMode">;
-  }>(DEMO_MODE);
+  }>(DEMO_MODE, undefined, { fetchPolicy: "cache-only" });
 
   const isDemoMode = computed(() => result.value?.config.demoMode);
   return { isDemoMode, error, loading };
@@ -190,7 +190,7 @@ export function useIsDemoMode() {
 export function useAnalytics() {
   const { result, error, loading } = useQuery<{
     config: Pick<IConfig, "analytics">;
-  }>(ANALYTICS);
+  }>(ANALYTICS, undefined, { fetchPolicy: "cache-only" });
 
   const analytics = computed(() => result.value?.config.analytics);
   return { analytics, error, loading };
@@ -199,7 +199,7 @@ export function useAnalytics() {
 export function useSearchConfig() {
   const { result, error, loading, onResult } = useQuery<{
     config: Pick<IConfig, "search">;
-  }>(SEARCH_CONFIG);
+  }>(SEARCH_CONFIG, undefined, { fetchPolicy: "cache-only" });
 
   const searchConfig = computed(() => result.value?.config.search);
   return { searchConfig, error, loading, onResult };

js/src/graphql/group.ts

@@ -420,19 +420,3 @@ export const GROUP_TIMELINE = gql`
   }
   ${ACTOR_FRAGMENT}
 `;
-
-export const CLOSE_GROUPS = gql`
-  query CloseGroups($location: String, $radius: Float) {
-    searchGroups(location: $location, radius: $radius, page: 1, limit: 10) {
-      total
-      elements {
-        ...ActorFragment
-        physicalAddress {
-          ...AdressFragment
-        }
-      }
-    }
-  }
-  ${ACTOR_FRAGMENT}
-  ${ADDRESS_FRAGMENT}
-`;

js/src/graphql/home.ts

@@ -109,53 +109,3 @@ export const HOME_USER_QUERIES = gql`
   ${EVENT_OPTIONS_FRAGMENT}
   ${ACTOR_FRAGMENT}
 `;
-
-export const CLOSE_CONTENT = gql`
-  query CloseContent(
-    $location: String!
-    $radius: Float
-    $page: Int
-    $limit: Int
-  ) {
-    searchEvents(
-      location: $location
-      radius: $radius
-      page: $page
-      limit: $limit
-    ) {
-      total
-      elements {
-        id
-        title
-        uuid
-        beginsOn
-        status
-        picture {
-          id
-          url
-        }
-        language
-        tags {
-          ...TagFragment
-        }
-        options {
-          ...EventOptions
-        }
-        physicalAddress {
-          ...AdressFragment
-        }
-        attributedTo {
-          ...ActorFragment
-        }
-        organizerActor {
-          ...ActorFragment
-        }
-        __typename
-      }
-    }
-  }
-  ${ADDRESS_FRAGMENT}
-  ${TAG_FRAGMENT}
-  ${EVENT_OPTIONS_FRAGMENT}
-  ${ACTOR_FRAGMENT}
-`;

js/src/views/Admin/SettingsView.vue

@@ -432,7 +432,7 @@ const filteredLanguages = ref<string[]>([]);
 
 const instanceLanguages = computed({
   get() {
-    const languageCodes = [...adminSettings.value.instanceLanguages] || [];
+    const languageCodes = [...(adminSettings.value?.instanceLanguages ?? [])];
     return languageCodes
       .map((code) => languageForCode(code))
       .filter((language) => language) as string[];
@@ -468,7 +468,8 @@ saveAdminSettingsError((e) => {
 });
 
 const updateSettings = async (): Promise<void> => {
-  const variables = { ...settingsToWrite };
+  const variables = { ...settingsToWrite.value };
+  console.debug("updating settings with variables", variables);
   saveAdminSettings(variables);
 };
 

js/src/views/HomeView.vue

@@ -131,7 +131,11 @@
     </span>
   </section>
   <!-- Recent events -->
-  <CloseEvents @doGeoLoc="performGeoLocation()" :userLocation="userLocation" />
+  <CloseEvents
+    @doGeoLoc="performGeoLocation()"
+    :userLocation="userLocation"
+    :doingGeoloc="doingGeoloc"
+  />
   <CloseGroups :userLocation="userLocation" @doGeoLoc="performGeoLocation()" />
   <OnlineEvents />
   <LastEvents v-if="instanceName" :instanceName="instanceName" />
@@ -224,7 +228,9 @@ const { result: aboutConfigResult } = useQuery<{
     IConfig,
     "name" | "description" | "slogan" | "registrationsOpen"
   >;
-}>(ABOUT);
+}>(ABOUT, undefined, {
+  fetchPolicy: "cache-only",
+});
 
 const config = computed(() => aboutConfigResult.value?.config);
 
@@ -507,10 +513,19 @@ GeolocationPosition) => {
   reverseGeoCodeInformation.latitude = latitude;
   reverseGeoCodeInformation.longitude = longitude;
   reverseGeoCodeInformation.accuracy = accuracy;
+  doingGeoloc.value = false;
 };
 
+const doingGeoloc = ref(false);
+
 const performGeoLocation = () => {
-  navigator.geolocation.getCurrentPosition(fetchAndSaveCurrentLocationName);
+  doingGeoloc.value = true;
+  navigator.geolocation.getCurrentPosition(
+    fetchAndSaveCurrentLocationName,
+    () => {
+      doingGeoloc.value = false;
+    }
+  );
 };
 
 /**

js/src/views/Settings/PreferencesView.vue

@@ -16,7 +16,7 @@
       <o-field :label="t('Language')" label-for="setting-language">
         <o-select
           :loading="loadingTimezones || loadingUserSettings"
-          v-model="locale"
+          v-model="$i18n.locale"
           :placeholder="t('Select a language')"
           id="setting-language"
         >
@@ -64,11 +64,15 @@
         <o-field :label="t('City or region')" expanded label-for="setting-city">
           <full-address-auto-complete
             v-if="loggedUser?.settings"
-            :type="AddressSearchType.ADMINISTRATIVE"
+            :resultType="AddressSearchType.ADMINISTRATIVE"
             :doGeoLocation="false"
             v-model="address"
+            :default-text="address?.description"
             id="setting-city"
             class="grid"
+            :hideMap="true"
+            :hideSelected="true"
+            labelClass="sr-only"
             :placeholder="t('e.g. Nantes, Berlin, Cork, …')"
           />
         </o-field>
@@ -108,7 +112,6 @@
 </template>
 <script lang="ts" setup>
 import ngeohash from "ngeohash";
-import { saveLocaleData } from "@/utils/auth";
 import {
   USER_SETTINGS,
   SET_USER_SETTINGS,
@@ -133,7 +136,7 @@ const { timezones: serverTimezones, loading: loadingTimezones } =
   useTimezones();
 const { loggedUser, loading: loadingUserSettings } = useUserSettings();
 
-const { t, locale: i18nLocale } = useI18n({ useScope: "global" });
+const { t, locale } = useI18n({ useScope: "global" });
 
 useHead({
   title: computed(() => t("Preferences")),
@@ -161,25 +164,6 @@ const selectedTimezone = computed({
 
 const { mutate: updateUserLocale } = useMutation(UPDATE_USER_LOCALE);
 
-const locale = computed({
-  get(): string {
-    if (loggedUser.value?.locale) {
-      return loggedUser.value?.locale;
-    }
-    return i18nLocale.value as string;
-  },
-  set(newLocale: string) {
-    if (newLocale) {
-      updateUserLocale({
-        locale: newLocale,
-      });
-      saveLocaleData(newLocale);
-      console.debug("changing locale", i18nLocale, newLocale);
-      i18nLocale.value = newLocale;
-    }
-  },
-});
-
 const sanitize = (timezone: string): string => {
   return timezone
     .split("_")

js/src/views/User/LoginView.vue

@@ -69,7 +69,7 @@
         />
       </o-field>
 
-      <p class="text-center my-2" v-if="!submitted">
+      <p class="text-center my-2">
         <o-button
           variant="primary"
           size="large"
@@ -227,6 +227,7 @@ const loginAction = (e: Event) => {
   }
 
   submitted.value = true;
+  errors.value = [];
 
   loginMutation({
     email: credentials.email,

lib/graphql/resolvers/config.ex

@@ -23,7 +23,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Config do
 
     location =
       case Map.get(geolix, :city) do
-        %{location: %{} = location} -> location
+        %{location: location} -> location
         _ -> nil
       end