Move geolocation feature to weather utility and add to settings page

The geolocation functionality has been extracted from the WeatherWidget component and integrated into the WeatherSettings page. A new button allows users to update their location using their device's geolocation services. The WeatherWidget has been updated to remove its geolocation button and now displays the location in a more concise format.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d43bd811-9372-45a7-8ac9-4a954c0538e1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/d43bd811-9372-45a7-8ac9-4a954c0538e1/sBtPBve

client/src/components/WeatherWidget.tsx

@@ -1,9 +1,6 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
-import { Cloud, CloudRain, Sun, CloudSnow, CloudSun, ThermometerSun, CloudDrizzle, Wind, Zap, Eye, MapPin, Loader2 } from "lucide-react";
+import { Cloud, CloudRain, Sun, CloudSnow, CloudSun, ThermometerSun, CloudDrizzle, Wind, Zap, Eye } from "lucide-react";
 import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { useToast } from "@/hooks/use-toast";
-import { apiRequest } from "@/lib/queryClient";
 
 interface WeatherData {
   id: number;
@@ -130,86 +127,7 @@ export default function WeatherWidget() {
     retry: 1,
   });
 
-  // Mutation pour la géolocalisation
-  const geoLocationMutation = useMutation({
-    mutationFn: async (coordinates: { latitude: number; longitude: number }) => {
-      const response = await fetch('/api/weather/geolocation', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(coordinates),
-      });
-      
-      if (!response.ok) {
-        const error = await response.json();
-        throw new Error(error.message || 'Erreur de géolocalisation');
-      }
-      
-      return response.json();
-    },
-    onSuccess: (data) => {
-      toast({
-        title: "Localisation mise à jour",
-        description: data.message,
-      });
-      
-      // Forcer le rechargement immédiat des données météo
-      queryClient.invalidateQueries({ queryKey: ['/api/weather/current'] });
-      queryClient.refetchQueries({ queryKey: ['/api/weather/current'] });
-    },
-    onError: (error: any) => {
-      toast({
-        title: "Erreur de géolocalisation",
-        description: error.message || "Impossible de déterminer votre localisation",
-        variant: "destructive",
-      });
-    },
-  });
 
-  // Fonction pour obtenir la géolocalisation
-  const handleGeolocation = () => {
-    if (!navigator.geolocation) {
-      toast({
-        title: "Géolocalisation non supportée",
-        description: "Votre navigateur ne supporte pas la géolocalisation",
-        variant: "destructive",
-      });
-      return;
-    }
-
-    navigator.geolocation.getCurrentPosition(
-      (position) => {
-        const { latitude, longitude } = position.coords;
-        geoLocationMutation.mutate({ latitude, longitude });
-      },
-      (error) => {
-        let message = "Erreur de géolocalisation";
-        switch (error.code) {
-          case error.PERMISSION_DENIED:
-            message = "Autorisation de géolocalisation refusée";
-            break;
-          case error.POSITION_UNAVAILABLE:
-            message = "Position non disponible";
-            break;
-          case error.TIMEOUT:
-            message = "Délai d'attente dépassé";
-            break;
-        }
-        
-        toast({
-          title: "Erreur de géolocalisation",
-          description: message,
-          variant: "destructive",
-        });
-      },
-      {
-        enableHighAccuracy: true,
-        timeout: 10000,
-        maximumAge: 300000, // 5 minutes
-      }
-    );
-  };
 
   if (isLoading) {
     return (
@@ -247,25 +165,9 @@ export default function WeatherWidget() {
               <WeatherIcon condition={weather.currentYear?.condition || ''} size={24} />
             </div>
             <div className="flex flex-col">
-              <div className="flex items-center gap-2">
+              <span className="text-slate-700 dark:text-slate-200 font-semibold text-sm">
-                <span className="text-slate-700 dark:text-slate-200 font-semibold text-sm">
+                {location.split(',')[0]}
-                  {location.split(',')[0]}
+              </span>
-                </span>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={handleGeolocation}
-                  disabled={geoLocationMutation.isPending}
-                  className="h-6 w-6 p-0 hover:bg-slate-200 dark:hover:bg-slate-600"
-                  title="Détecter ma localisation"
-                >
-                  {geoLocationMutation.isPending ? (
-                    <Loader2 className="h-3 w-3 animate-spin" />
-                  ) : (
-                    <MapPin className="h-3 w-3" />
-                  )}
-                </Button>
-              </div>
               <span className="text-xs text-slate-500 dark:text-slate-400">
                 {translateToFrench(weather.currentYear?.condition || 'Inconnu')}
               </span>

client/src/pages/WeatherSettings.tsx

@@ -5,7 +5,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
-import { AlertCircle, CheckCircle, Cloud, Settings } from "lucide-react";
+import { AlertCircle, CheckCircle, Cloud, Settings, MapPin, Loader2 } from "lucide-react";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest } from "@/lib/queryClient";
@@ -66,6 +66,92 @@ export default function WeatherSettings() {
     },
   });
 
+  // Geolocation mutation
+  const geoLocationMutation = useMutation({
+    mutationFn: async (coordinates: { latitude: number; longitude: number }) => {
+      const response = await fetch('/api/weather/geolocation', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(coordinates),
+      });
+      
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.message || 'Erreur de géolocalisation');
+      }
+      
+      return response.json();
+    },
+    onSuccess: (data) => {
+      toast({
+        title: "Localisation mise à jour",
+        description: data.message,
+      });
+      
+      // Refresh settings to get updated location
+      queryClient.invalidateQueries({ queryKey: ['/api/weather/settings'] });
+      
+      // Update the form field
+      const locationInput = document.getElementById('location') as HTMLInputElement;
+      if (locationInput && data.location?.fullLocation) {
+        locationInput.value = data.location.fullLocation;
+      }
+    },
+    onError: (error: any) => {
+      toast({
+        title: "Erreur de géolocalisation",
+        description: error.message || "Impossible de déterminer votre localisation",
+        variant: "destructive",
+      });
+    },
+  });
+
+  // Handle geolocation
+  const handleGeolocation = () => {
+    if (!navigator.geolocation) {
+      toast({
+        title: "Géolocalisation non supportée",
+        description: "Votre navigateur ne supporte pas la géolocalisation",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const { latitude, longitude } = position.coords;
+        geoLocationMutation.mutate({ latitude, longitude });
+      },
+      (error) => {
+        let message = "Erreur de géolocalisation";
+        switch (error.code) {
+          case error.PERMISSION_DENIED:
+            message = "Autorisation de géolocalisation refusée";
+            break;
+          case error.POSITION_UNAVAILABLE:
+            message = "Position non disponible";
+            break;
+          case error.TIMEOUT:
+            message = "Délai d'attente dépassé";
+            break;
+        }
+        
+        toast({
+          title: "Erreur de géolocalisation",
+          description: message,
+          variant: "destructive",
+        });
+      },
+      {
+        enableHighAccuracy: true,
+        timeout: 10000,
+        maximumAge: 300000, // 5 minutes
+      }
+    );
+  };
+
   // Test API connection
   const testConnection = async (apiKey: string, location: string) => {
     setIsTesting(true);
@@ -174,15 +260,33 @@ export default function WeatherSettings() {
 
             <div className="space-y-2">
               <Label htmlFor="location">Localisation</Label>
-              <Input
+              <div className="flex gap-2">
-                id="location"
+                <Input
-                name="location"
+                  id="location"
-                placeholder="Nancy, France"
+                  name="location"
-                defaultValue={settings?.location || "Nancy, France"}
+                  placeholder="Nancy, France"
-                required
+                  defaultValue={settings?.location || "Nancy, France"}
-              />
+                  required
+                  className="flex-1"
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={handleGeolocation}
+                  disabled={geoLocationMutation.isPending}
+                  className="px-3"
+                  title="Détecter ma localisation automatiquement"
+                >
+                  {geoLocationMutation.isPending ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <MapPin className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
               <p className="text-sm text-muted-foreground">
-                Ville ou région pour laquelle afficher la météo
+                Ville ou région pour laquelle afficher la météo. Cliquez sur 📍 pour détecter automatiquement votre localisation.
               </p>
             </div>