Feature/geolocate region

.gitignore

@@ -12,3 +12,5 @@ preprocessing/data-import/consolidatedCsv.csv
 data/data++
 tmp
 preprocessing/geodata/maps/dist/mou/*.geojson
+firebase-functions/geodata/
+firebase-functions/static/

app/.env.template

@@ -0,0 +1,9 @@
+# local deployment
+# firebase emulators:start
+
+# VITE_APP_BASE_PATH="/iarsenic-staging/us-central1/default" # staging
+# VITE_APP_BASE_PATH="/iarsenic/us-central1/default"         # production
+
+# firebase deploy
+
+# VITE_APP_BASE_PATH="/default" # staging & production

frontEnd2024/functions/iarsenic-react/.gitignore → app/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

frontEnd2024/functions/iarsenic-react/package.json → app/package.json

@@ -17,6 +17,7 @@
     "@mui/icons-material": "^5.15.14",
     "@mui/material": "^5.15.14",
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
+    "dotenv": "^16.4.5",
     "react": "^18.2.0",
     "react-d3-speedometer": "^2.2.1",
     "react-dom": "^18.2.0",

app/src/config.tsx

@@ -0,0 +1,3 @@
+export default {
+    basePath: import.meta.env.VITE_APP_BASE_PATH || '',
+};

app/src/pages/Region/GeolocationButton.tsx

@@ -0,0 +1,173 @@
+import { Button, CircularProgress } from "@mui/material";
+import { useEffect, useState } from "react";
+import MyLocationIcon from '@mui/icons-material/MyLocation';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import { DropdownDistrict, DropdownDivision, DropdownUnion, DropdownUpazila, RegionKey } from "../../types";
+import config from "../../config";
+
+type props = {
+    dropdownData: DropdownDivision[],
+    setSelectedDivision: (selectedDivision: DropdownDivision) => void,
+    setSelectedDistrict: (selectedDistrict: DropdownDistrict) => void,
+    setSelectedUpazila: (selectedUpazila: DropdownUpazila) => void,
+    setSelectedUnion: (selectedUnion: DropdownUnion) => void,
+    setSelectedMouza: (selectedMouza: string) => void,
+}
+
+export default function GeolocationButton({
+    dropdownData,
+    setSelectedDivision,
+    setSelectedDistrict,
+    setSelectedUpazila,
+    setSelectedUnion,
+    setSelectedMouza,
+}: props): JSX.Element {
+    const [geolocation, setGeolocation] = useState<[number, number]>();
+    const [geolocationFailed, setGeolocationFailed] = useState<boolean>(false);
+    const [gettingRegionKey, setGettingRegionKey] = useState<boolean>(false);
+    const [regionNotFound, setRegionNotFound] = useState<boolean>(false);
+
+    function getGeolocation() {
+        setGettingRegionKey(true);
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                (position) => {
+                    const { latitude, longitude } = position.coords;
+                    console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
+                    console.log(`${latitude}, ${longitude}`);
+                    setGeolocation([latitude, longitude]);
+                },
+                (error) => {
+                    console.error("Error getting geolocation: ", error);
+                    setGeolocationFailed(true);
+                }
+            );
+        } else {
+            setGeolocationFailed(true);
+            console.error("Geolocation is not supported by this browser.");
+        }
+    }
+
+    async function setRegionFromGeolocation(geolocation: [number, number], dropdownData: DropdownDivision[]) {
+        const response = await fetch(
+            `${config.basePath}/api/gps-region?lat=${geolocation[0]}&lon=${geolocation[1]}`
+        );
+
+        if (response.status === 404) {
+            setGettingRegionKey(false);
+            setRegionNotFound(true);
+            return;
+        }
+
+        if (!response.ok) {
+            console.error("Error getting region from geolocation");
+            setGeolocationFailed(true);
+            setGettingRegionKey(false);
+            return;
+        }
+
+        const data = await response.json();
+
+        if (!data.regionKey) return;
+
+        const geoRegionKey = data.regionKey as RegionKey;
+        if (!geoRegionKey.division || !dropdownData) return;
+        const selectedDivision = dropdownData.find(d => d.division === geoRegionKey.division);
+
+        if (!selectedDivision) {
+            setGettingRegionKey(false);
+            return;
+        }
+        setSelectedDivision(selectedDivision);
+
+        const selectedDistrict = selectedDivision.districts.find(d => d.district === geoRegionKey.district);
+
+        if (!selectedDistrict) {
+            setGettingRegionKey(false);
+            return;
+        }
+        setSelectedDistrict(selectedDistrict);
+
+        const selectedUpazila = selectedDistrict.upazilas.find(u => u.upazila === geoRegionKey.upazila);
+
+        if (!selectedUpazila) {
+            setGettingRegionKey(false);
+            return;
+        }
+        setSelectedUpazila(selectedUpazila);
+
+        const selectedUnion = selectedUpazila.unions.find(u => u.union === geoRegionKey.union);
+
+        if (!selectedUnion) {
+            setGettingRegionKey(false);
+            return;
+        }
+        setSelectedUnion(selectedUnion);
+
+        if (!geoRegionKey.mouza) {
+            setGettingRegionKey(false);
+            return;
+        }
+        setSelectedMouza(geoRegionKey.mouza);
+        setGettingRegionKey(false);
+    }
+
+    useEffect(() => {
+        if (!geolocation) return;
+
+        setRegionFromGeolocation(geolocation, dropdownData);
+    }, [geolocation]);
+
+    if (geolocationFailed) {
+        return (
+            <Button
+                sx={{ height: '3rem' }}
+                variant='outlined'
+                startIcon={<ErrorOutlineIcon />}
+                onClick={getGeolocation}
+                disabled={true}
+            >
+                Geolocation not supported
+            </Button>
+        );
+    }
+
+    if (gettingRegionKey) {
+        return (
+            <Button
+                sx={{ height: '3rem' }}
+                variant='outlined'
+                startIcon={<CircularProgress size={20} />}
+                onClick={getGeolocation}
+                disabled={true}
+            >
+                Getting Region
+            </Button>
+        );
+    }
+
+    if (regionNotFound) {
+        return (
+            <Button
+                sx={{ height: '3rem' }}
+                variant='outlined'
+                startIcon={<ErrorOutlineIcon />}
+                onClick={getGeolocation}
+                disabled={true}
+            >
+                Region not found
+            </Button>
+        );
+    }
+
+    return (
+        <Button
+            sx={{ height: '3rem' }}
+            variant='outlined'
+            startIcon={<MyLocationIcon />}
+            onClick={getGeolocation}
+        >
+            Use Geolocation
+        </Button>
+    );
+}

frontEnd2024/functions/iarsenic-react/src/pages/Region/Region.tsx → app/src/pages/Region/Region.tsx

@@ -6,6 +6,7 @@ import { DropdownDistrict, DropdownDivision, DropdownUnion, DropdownUpazila, Reg
 import PredictorsStorage from "../../utils/PredictorsStorage";
 import EnglishRegionSelector from "./EnglishRegionSelector";
 import BengaliRegionSelector from "./BengaliRegionSelector";
+import GeolocationButton from "./GeolocationButton";
 
 export type RegionErrors = {
     division: boolean;
@@ -56,6 +57,7 @@ export default function Region(): JSX.Element {
         setRegionTranslations(data);
     }
 
+
     useEffect(() => {
         fetchDropdownData();
         fetchRegionTranslations();
@@ -73,6 +75,15 @@ export default function Region(): JSX.Element {
         <>
             <Typography alignSelf='center' variant="h4">Region</Typography>
 
+            <GeolocationButton
+                dropdownData={dropdownData}
+                setSelectedDivision={setSelectedDivision}
+                setSelectedDistrict={setSelectedDistrict}
+                setSelectedUpazila={setSelectedUpazila}
+                setSelectedUnion={setSelectedUnion}
+                setSelectedMouza={setSelectedMouza}
+            />
+
             <EnglishRegionSelector
                 dropdownData={dropdownData}
                 selectedDivision={selectedDivision}

app/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import { config as dotenvConfig } from 'dotenv';
+import { resolve } from 'path';
+
+// Load environment variables from .env file
+dotenvConfig({ path: resolve(__dirname, '.env') });
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  base: process.env.VITE_APP_BASE_PATH || '',
+});