conserve radius of location between Home page & Search page - #1850

src/components/Home/SearchFields.vue

@@ -84,7 +84,9 @@ import { AddressSearchType, ContentType } from "@/types/enums";
 import {
   addressToLocation,
   getAddressFromLocal,
+  getRadiusFromLocal,
   storeAddressInLocal,
+  storeRadiusInLocal,
 } from "@/utils/location";
 import { computed, defineAsyncComponent } from "vue";
 import { useI18n } from "vue-i18n";
@@ -145,11 +147,20 @@ const search = computed({
 });
 
 const distance = computed({
-  get(): number {
+  get(): number | null {
-    return props.distance;
+    if (props.distance) {
+      return props.distance;
+    }
+    if (props.fromLocalStorage) {
+      return getRadiusFromLocal();
+    }
+    return null;
   },
   set(newDistance: number) {
     emit("update:distance", newDistance);
+    if (props.fromLocalStorage) {
+      storeRadiusInLocal(newDistance);
+    }
   },
 });
 

src/utils/location.ts

@@ -64,6 +64,7 @@ export const storeAddressInLocal = (address: IAddress | null): undefined => {
     window.localStorage.setItem("address", JSON.stringify(address));
   } else {
     window.localStorage.removeItem("address");
+    storeRadiusInLocal(null);
   }
 };
 
@@ -79,6 +80,24 @@ export const getAddressFromLocal = (): IAddress | null => {
   return address;
 };
 
+export const storeRadiusInLocal = (
+  radius: number | null | undefined
+): undefined => {
+  if (radius) {
+    window.localStorage.setItem("radius", JSON.stringify(radius));
+  } else {
+    window.localStorage.removeItem("radius");
+  }
+};
+
+export const getRadiusFromLocal = (): number | null => {
+  const radiusString = window.localStorage.getItem("radius");
+  if (!radiusString) {
+    return null;
+  }
+  return JSON.parse(radiusString) as number;
+};
+
 export const storeUserLocationAndRadiusFromUserSettings = (
   location: IUserPreferredLocation | null
 ): undefined => {
@@ -91,6 +110,7 @@ export const storeUserLocationAndRadiusFromUserSettings = (
         description: location.name || "",
         type: "administrative",
       });
+      storeRadiusInLocal(location.range);
     }
   } else {
     console.debug("user has not set a location");

src/views/HomeView.vue

@@ -193,8 +193,10 @@ import {
   addressToLocation,
   geoHashToCoords,
   getAddressFromLocal,
+  getRadiusFromLocal,
   locationToAddress,
   storeAddressInLocal,
+  storeRadiusInLocal,
 } from "@/utils/location";
 import { useServerProvidedLocation } from "@/composition/apollo/config";
 import QuickPublish from "@/components/Home/QuickPublish.vue";
@@ -520,13 +522,19 @@ const distance = computed({
   get(): number | null {
     if (noAddress.value || !userLocation.value?.name) {
       return null;
-    } else if (current_distance.value == null) {
+    }
+    if (current_distance.value == null) {
+      const local_radius = getRadiusFromLocal();
+      if (local_radius) {
+        return local_radius;
+      }
       return userLocation.value?.isIPLocation ? 150 : 25;
     }
     return current_distance.value;
   },
   set(newDistance: number) {
     current_distance.value = newDistance;
+    storeRadiusInLocal(newDistance);
   },
 });