Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: detect Next.js environment and adjust the AOI preset file paths #1311

Closed
wants to merge 2 commits into from
Closed

fix: detect Next.js environment and adjust the AOI preset file paths #1311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
52e4b15
Adjust base path depending on environment, formatting, removed excess…
dzole0311 Dec 10, 2024
f170ca1
Add util to check whether we're in Next.js environment, use the util
dzole0311 Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 18 additions & 13 deletions app/scripts/components/common/map/controls/hooks/use-preset-aoi.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,29 @@ import { Feature, Polygon } from 'geojson';
import { useCallback, useEffect, useState } from 'react';
import axios from 'axios';
import { getAoiAppropriateFeatures } from './use-custom-aoi';

const presetFilePath = `${process.env.PUBLIC_URL ?? ''}/public/geo-data/states/`;
const presetSuffix = `.geojson`;
import { isNextJs } from '$utils/utils';

function usePresetAOI(selectedState) {
const [error, setError] = useState<string|null>('');
const [error, setError] = useState<string | null>('');
const [isLoading, setIsLoading] = useState<boolean>(false);
const [features, setFeatures] = useState<Feature<Polygon>[] | null>(null);

useEffect(() => {
if (!selectedState) return;
const abortController = new AbortController(); // Create an instance of AbortController
const abortController = new AbortController();

async function loadData() {
setIsLoading(true);
try {
const res = await axios.get(`${presetFilePath}${selectedState}${presetSuffix}`, {
signal: abortController.signal // Pass the abort signal to Axios
// We're dynamically adjusting the base path based on the environment:
// 1. If running in Next.js, omit "/public" from the path
// 2. For legacy instances, we include "/public" as part of the path
const basePath = isNextJs()
? `/geo-data/states/`
: `${process.env.PUBLIC_URL ?? ''}/public/geo-data/states/`;

const res = await axios.get(`${basePath}${selectedState}.geojson`, {
signal: abortController.signal
dzole0311 marked this conversation as resolved.
Show resolved Hide resolved
});
setIsLoading(false);
const geojson = res.data;
Expand All @@ -29,14 +34,15 @@ function usePresetAOI(selectedState) {
}
const { simplifiedFeatures } = getAoiAppropriateFeatures(geojson);

setFeatures(simplifiedFeatures.map((feat, i) => ({
id: `${new Date().getTime().toString().slice(-4)}${i}`,
...feat
})));
setFeatures(
simplifiedFeatures.map((feat, i) => ({
id: `${new Date().getTime().toString().slice(-4)}${i}`,
...feat
}))
);
} catch (error) {
if (axios.isCancel(error)) {
setIsLoading(false);
// Request canceled
setError(error.message);
} else {
setError('Error: Unable to load data');
Expand All @@ -62,7 +68,6 @@ function usePresetAOI(selectedState) {
error,
reset
};

}

export default usePresetAOI;
8 changes: 8 additions & 0 deletions app/scripts/utils/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,3 +95,11 @@ export function composeVisuallyDisabled(
export function checkEnvFlag(value?: string): boolean {
return (value ?? '').toLowerCase() === 'true';
}

/**
* Helper to detect if code is running in a Next.js environment
* by checking for Next.js-specific 'next' property on window.
* Will return false on server-side and in non-Next.js environments
* @returns boolean indicating if running in Next.js
*/
export const isNextJs = () => 'next' in window;
Loading