Removed hardcoded urls

.env

@@ -0,0 +1,3 @@
+VITE_DOMAIN_DEV='http://localhost:5000'
+VITE_DOMAIN_PROD='https://sean.bet/trigger'
+VITE_BASE_URL='trigger'

package-lock.json

@@ -21,6 +21,7 @@
 				"@tanstack/react-query-persist-client": "^5.51.23",
 				"clsx": "^2.1.1",
 				"dayjs": "^1.11.12",
+				"dotenv": "^16.4.7",
 				"idb-keyval": "^6.2.1",
 				"jotai": "^2.9.3",
 				"mantine-react-table": "^2.0.0-beta.6",
@@ -32,6 +33,7 @@
 				"react-toastify": "^10.0.5"
 			},
 			"devDependencies": {
+				"@types/node": "^22.10.1",
 				"@types/react": "^18.3.3",
 				"@types/react-dom": "^18.3.0",
 				"@typescript-eslint/eslint-plugin": "^8.1.0",
@@ -1706,6 +1708,15 @@
 			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
 			"dev": true
 		},
+		"node_modules/@types/node": {
+			"version": "22.10.1",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
+			"integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
+			"dev": true,
+			"dependencies": {
+				"undici-types": "~6.20.0"
+			}
+		},
 		"node_modules/@types/parse-json": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -2261,6 +2272,17 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/dotenv": {
+			"version": "16.4.7",
+			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
+			"integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://dotenvx.com"
+			}
+		},
 		"node_modules/electron-to-chromium": {
 			"version": "1.4.768",
 			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.768.tgz",
@@ -4064,6 +4086,12 @@
 				"node": ">=14.17"
 			}
 		},
+		"node_modules/undici-types": {
+			"version": "6.20.0",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+			"integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+			"dev": true
+		},
 		"node_modules/unload": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",

package.json

@@ -23,6 +23,7 @@
 		"@tanstack/react-query-persist-client": "^5.51.23",
 		"clsx": "^2.1.1",
 		"dayjs": "^1.11.12",
+		"dotenv": "^16.4.7",
 		"idb-keyval": "^6.2.1",
 		"jotai": "^2.9.3",
 		"mantine-react-table": "^2.0.0-beta.6",
@@ -34,6 +35,7 @@
 		"react-toastify": "^10.0.5"
 	},
 	"devDependencies": {
+		"@types/node": "^22.10.1",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
 		"@typescript-eslint/eslint-plugin": "^8.1.0",

src/hooks/useAPI.ts

@@ -7,9 +7,10 @@ import {
 import { useCallback } from 'react';
 import { toast } from 'react-toastify';
 
+const url = `${import.meta.env.prod ? import.meta.env.VITE_DOMAIN_PROD : import.meta.env.VITE_DOMAIN_DEV}/${import.meta.env.VITE_BASE_URL}`;
+
 export function useQueryAPI({ endpoint }: { endpoint: string }) {
 	const callEndpoint = async (endpoint: string) => {
-		const url = `http://localhost:5000/trigger/${endpoint}`;
 		const options: object = {
 			method: 'GET',
 			headers: {
@@ -23,7 +24,7 @@ export function useQueryAPI({ endpoint }: { endpoint: string }) {
 			},
 		};
 
-		const response = await fetch(url, options);
+		const response = await fetch(`${url}/${endpoint}`, options);
 		if (!response.ok) {
 			throw new Error(`${response.status} ${response.statusText}`);
 		}
@@ -77,7 +78,6 @@ export function useMutationAPI() {
 		endpoint: string,
 		body: object | undefined | null,
 	) => {
-		const url = `http://localhost:5000/trigger/${endpoint}`;
 		const options: any = {
 			method: method,
 			headers: {
@@ -158,7 +158,6 @@ export function useFileUploadAPI() {
 		endpoint: string,
 		body?: object | FormData | undefined | null,
 	) => {
-		const url = `http://localhost:5000/trigger/${endpoint}`;
 
 		const options = {
 			method: method,
@@ -231,19 +230,19 @@ export function useFetchAllRecordsAPI({ endpoint }: { endpoint: string }) {
 
 	const fetchPage = async (page: number, retryCount = 0): Promise<any> => {
 		// Start building the URL
-		const url = new URL(`http://localhost:5000/trigger/${endpoint}`);
+		const urlObject = new URL(`${url}/${endpoint}`);
 
 		// Check and append custom query parameters from the endpoint
 		const customParams = new URLSearchParams(endpoint.split('?')[1]);
 		for (const [key, value] of customParams) {
-			if (!url.searchParams.has(key)) {
-				url.searchParams.append(key, value);
+			if (!urlObject.searchParams.has(key)) {
+				urlObject.searchParams.append(key, value);
 			}
 		}
 
 		// Add 'page' and 'size' parameters
-		url.searchParams.set('page', page.toString()); // Use 'set' to ensure uniqueness
-		url.searchParams.set('size', pageSize.toString());
+		urlObject.searchParams.set('page', page.toString()); // Use 'set' to ensure uniqueness
+		urlObject.searchParams.set('size', pageSize.toString());
 
 		const options: any = {
 			method: 'GET',
@@ -345,7 +344,6 @@ interface DownloadFileOptions {
 export function useDownloadFile() {
 	const downloadFile = useCallback(
 		async ({ endpoint, file_name }: DownloadFileOptions) => {
-			const url = `http://localhost:5000/trigger/${endpoint}`;
 			const options: any = {
 				method: 'GET',
 				headers: {
@@ -426,7 +424,6 @@ export const useFetchInfiniteQuery = ({
 	const queryKey = ['GET', endpoint];
 
 	const fetchInfiniteQuery = async (endpoint: string) => {
-		const url = `http://localhost:5000/trigger/${endpoint}`;
 		const requestOptions: any = {
 			method: 'GET',
 			headers: {

src/pages/homepage/components/Header.tsx

@@ -1,7 +1,7 @@
 import { Group, Stack, Text } from '@mantine/core';
 import { useEffect, useState } from 'react';
-import { textClasses } from '../../../styles';
 import { useWeatherAPI } from '../../../hooks';
+import { textClasses } from '../../../styles';
 
 function Header({ greet, date, isMobile }: any) {
 	const [time, setTime] = useState(new Date());
@@ -126,11 +126,7 @@ function Header({ greet, date, isMobile }: any) {
 							</Text>
 						</Group>
 					)}
-					<Text
-						component='h2'
-						className={textClasses.dateTime}
-						classNames={textClasses}
-					>
+					<Text component='h2' className={textClasses.dateTime} classNames={textClasses}>
 						{`${
 							time.getHours() === 0
 								? 12

src/pages/homepage/components/HelpModal.tsx

@@ -0,0 +1,59 @@
+import { Divider, Group, Modal, Stack, Text } from '@mantine/core';
+import { useAtom } from 'jotai';
+import { appTheme } from '../../../contexts/theme';
+import { modalClasses } from '../../../styles';
+
+export default function HelpModal({
+	setValue,
+	setProviderLabel,
+	setProviderURL,
+	providers,
+	providerModalOpened,
+	closeProviderModal,
+}: any) {
+	const [theme, setTheme] = useAtom(appTheme);
+	return (
+		<Modal.Root
+			size={'50%'}
+			className={modalClasses.helpModal}
+			classNames={modalClasses}
+			opened={providerModalOpened}
+			onClose={() => {
+				closeProviderModal();
+				setValue('');
+				setProviderLabel('Google Search');
+				setProviderURL('https://www.google.com/search?q=');
+			}}
+			style={{
+				'--color-text-pri': theme.primaryColor,
+				'--color-text-acc': theme.accentColor,
+				'--color-background': theme.backgroundColor,
+				'--color-border': theme.borderColor,
+				'--color-search-background': theme.searchColor,
+				'--image-background': `url(${theme.backgroundImage})`,
+			}}
+			closeOnEscape
+			closeOnClickOutside
+		>
+			<Modal.Overlay />
+			<Modal.Content>
+				<Modal.Header>
+					<Modal.Title>Help info</Modal.Title>
+					<Modal.CloseButton />
+				</Modal.Header>
+				<Modal.Body pb={'2rem'}>
+					<Stack gap={0} w={'100%'} align='center'>
+						<h3 style={{ padding: 0, margin: 0 }}>Search Providers</h3>
+						<Divider py={8} w={'65%'} color={theme.accentColor} />
+						{providers?.map((provider: any) => (
+							<Group key={provider.prefix} gap={0} w={'50%'} justify='space-between'>
+								<Text>{provider.prefix}</Text>
+								<Text>{provider.name}</Text>
+							</Group>
+						))}
+					</Stack>
+				</Modal.Body>
+			</Modal.Content>
+		</Modal.Root>
+	);
+}

src/pages/homepage/components/Search.tsx

@@ -1,12 +1,10 @@
-import { Center, Divider, Group, Modal, Stack, Text, TextInput } from '@mantine/core';
+import { Stack, TextInput } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { useAtom } from 'jotai';
 import { useEffect, useState } from 'react';
-import { appTheme } from '../../../contexts/theme';
 import { useQueryAPI, useWeatherAPI } from '../../../hooks';
-import { modalClasses, textInputClasses } from '../../../styles';
-import SmallWeatherCard from './SmallWeatherCard';
-import SmallOutlookCard from './SmallOutlookCard';
+import { textInputClasses } from '../../../styles';
+import HelpModal from './HelpModal';
+import WeatherModal from './WeatherModal';
 
 export default function Search() {
 	const { data: providers } = useQueryAPI({ endpoint: 'api/providers' });
@@ -31,8 +29,8 @@ export default function Search() {
 			temperature: 0,
 			precipitation: 0,
 			windSpeed: '0 mph',
-			windDirection: 'N'
-		}
+			windDirection: 'N',
+		},
 	]);
 	const { data: forecast } = useWeatherAPI({ endpoint: 'forecast' });
 	const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
@@ -42,7 +40,6 @@ export default function Search() {
 	const [providerLabel, setProviderLabel] = useState('Google Search');
 	const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
 	const [value, setValue] = useState('');
-	const [theme, setTheme] = useAtom(appTheme);
 	const handleKeyPress = (item: any) => {
 		let option = '';
 		let subtext = '';
@@ -93,7 +90,6 @@ export default function Search() {
 
 	useEffect(() => {
 		if (weather && basicWeather) {
-			console.log(weather.features[0])
 			setCurrent({
 				icon: weather.features[0].properties.icon?.replace('medium', 'large') || '',
 				temperature: Math.round(
@@ -125,22 +121,26 @@ export default function Search() {
 					icon: forecast.properties.periods[0].icon.replace('medium', 'large'),
 					isDayTime: forecast.properties.periods[0].isDaytime,
 					temperature: forecast.properties.periods[0].temperature,
-					precipitation: Math.round(forecast.properties.periods[0].probabilityOfPrecipitation.value),
+					precipitation: Math.round(
+						forecast.properties.periods[0].probabilityOfPrecipitation.value,
+					),
 					windSpeed: forecast.properties.periods[0].windSpeed,
-					windDirection: forecast.properties.periods[0].windDirection
+					windDirection: forecast.properties.periods[0].windDirection,
 				},
 				{
 					name: forecast.properties.periods[1].name,
 					icon: forecast.properties.periods[1].icon.replace('medium', 'large'),
 					isDayTime: forecast.properties.periods[1].isDaytime,
 					temperature: forecast.properties.periods[1].temperature,
-					precipitation: Math.round(forecast.properties.periods[1].probabilityOfPrecipitation.value),
+					precipitation: Math.round(
+						forecast.properties.periods[1].probabilityOfPrecipitation.value,
+					),
 					windSpeed: forecast.properties.periods[1].windSpeed,
-					windDirection: forecast.properties.periods[1].windDirection
-				}
+					windDirection: forecast.properties.periods[1].windDirection,
+				},
 			]);
 		}
-	}, [forecast])
+	}, [forecast]);
 	return (
 		<Stack
 			style={{
@@ -190,99 +190,23 @@ export default function Search() {
 					}
 				}}
 			/>
-			<Modal.Root
-				size={'50%'}
-				className={modalClasses.helpModal}
-				classNames={modalClasses}
-				opened={providerModalOpened}
-				onClose={() => {
-					closeProviderModal();
-					setValue('');
-					setProviderLabel('Google Search');
-					setProviderURL('https://www.google.com/search?q=');
-				}}
-				style={{
-					'--color-text-pri': theme.primaryColor,
-					'--color-text-acc': theme.accentColor,
-					'--color-background': theme.backgroundColor,
-					'--color-border': theme.borderColor,
-					'--color-search-background': theme.searchColor,
-					'--image-background': `url(${theme.backgroundImage})`,
-				}}
-				closeOnEscape
-				closeOnClickOutside
-			>
-				<Modal.Overlay />
-				<Modal.Content>
-					<Modal.Header>
-						<Modal.Title>Help info</Modal.Title>
-						<Modal.CloseButton />
-					</Modal.Header>
-					<Modal.Body pb={'2rem'}>
-						<Stack gap={0} w={'100%'} align='center'>
-							<h3 style={{ padding: 0, margin: 0 }}>Search Providers</h3>
-							<Divider py={8} w={'65%'} color={theme.accentColor} />
-							{providers?.map((provider: any) => (
-								<Group key={provider.prefix} gap={0} w={'50%'} justify='space-between'>
-									<Text>{provider.prefix}</Text>
-									<Text>{provider.name}</Text>
-								</Group>
-							))}
-						</Stack>
-					</Modal.Body>
-				</Modal.Content>
-			</Modal.Root>
-			<Modal.Root
-				size={'50%'}
-				className={modalClasses.helpModal}
-				classNames={modalClasses}
-				opened={weatherModalOpened}
-				onClose={() => {
-					closeWeatherModal();
-					setValue('');
-					setProviderLabel('Google Search');
-					setProviderURL('https://www.google.com/search?q=');
-				}}
-				style={{
-					'--color-text-pri': theme.primaryColor,
-					'--color-text-acc': theme.accentColor,
-					'--color-background': theme.backgroundColor,
-					'--color-border': theme.borderColor,
-					'--color-search-background': theme.searchColor,
-					'--image-background': `url(${theme.backgroundImage})`,
-				}}
-				closeOnEscape
-				closeOnClickOutside
-			>
-				<Modal.Overlay />
-				<Modal.Content>
-					<Modal.Header>
-						<Modal.Title>Weather Forecast</Modal.Title>
-						<Modal.CloseButton />
-					</Modal.Header>
-					<Modal.Body pb={'2rem'}>
-						<Center w={'100%'}>
-							<Stack gap={0} align='center'>
-								<h3 style={{ padding: 0, margin: 0 }}>Currently</h3>
-								<Stack>
-									<SmallWeatherCard weather={current} />
-								</Stack>
-							</Stack>
-							<Divider orientation='vertical' mx={8} color={theme.accentColor} />
-							<Group gap={0}>
-								{outlook.map((o: any) => (
-									<Stack key={o.name} gap={0} align='center'>
-										<h3 style={{ padding: 0, margin: 0 }}>{o.name}</h3>
-										<Stack>
-											<SmallOutlookCard weather={o} />
-										</Stack>
-									</Stack>
-								))}
-							</Group>
-						</Center>
-					</Modal.Body>
-				</Modal.Content>
-			</Modal.Root>
+			<HelpModal
+				providers={providers}
+				providerModalOpened={providerModalOpened}
+				closeProviderModal={closeProviderModal}
+				setValue={setValue}
+				setProviderLabel={setProviderLabel}
+				setProviderURL={setProviderURL}
+			/>
+			<WeatherModal
+				current={current}
+				outlook={outlook}
+				closeWeatherModal={closeWeatherModal}
+				weatherModalOpened={weatherModalOpened}
+				setValue={setValue}
+				setProviderLabel={setProviderLabel}
+				setProviderURL={setProviderURL}
+			/>
 		</Stack>
 	);
 }

src/pages/homepage/components/WeatherModal.tsx

@@ -0,0 +1,72 @@
+import { Center, Divider, Group, Modal, Stack } from '@mantine/core';
+import { useAtom } from 'jotai';
+import { modalClasses } from '../../../styles';
+import SmallOutlookCard from './SmallOutlookCard';
+import SmallWeatherCard from './SmallWeatherCard';
+
+import { appTheme } from '../../../contexts/theme';
+
+export default function WeatherModal({
+	current,
+	outlook,
+	closeWeatherModal,
+	weatherModalOpened,
+	setValue,
+	setProviderLabel,
+	setProviderURL,
+}: any) {
+	const [theme, setTheme] = useAtom(appTheme);
+	return (
+		<Modal.Root
+			size={'50%'}
+			className={modalClasses.helpModal}
+			classNames={modalClasses}
+			opened={weatherModalOpened}
+			onClose={() => {
+				closeWeatherModal();
+				setValue('');
+				setProviderLabel('Google Search');
+				setProviderURL('https://www.google.com/search?q=');
+			}}
+			style={{
+				'--color-text-pri': theme.primaryColor,
+				'--color-text-acc': theme.accentColor,
+				'--color-background': theme.backgroundColor,
+				'--color-border': theme.borderColor,
+				'--color-search-background': theme.searchColor,
+				'--image-background': `url(${theme.backgroundImage})`,
+			}}
+			closeOnEscape
+			closeOnClickOutside
+		>
+			<Modal.Overlay />
+			<Modal.Content>
+				<Modal.Header>
+					<Modal.Title>Weather Forecast</Modal.Title>
+					<Modal.CloseButton />
+				</Modal.Header>
+				<Modal.Body pb={'2rem'}>
+					<Center w={'100%'}>
+						<Stack gap={0} align='center'>
+							<h3 style={{ padding: 0, margin: 0 }}>Currently</h3>
+							<Stack>
+								<SmallWeatherCard weather={current} />
+							</Stack>
+						</Stack>
+						<Divider orientation='vertical' mx={8} color={theme.accentColor} />
+						<Group gap={8}>
+							{outlook.map((o: any) => (
+								<Stack key={o.name} gap={0} align='center'>
+									<h3 style={{ padding: 0, margin: 0 }}>{o.name}</h3>
+									<Stack>
+										<SmallOutlookCard weather={o} />
+									</Stack>
+								</Stack>
+							))}
+						</Group>
+					</Center>
+				</Modal.Body>
+			</Modal.Content>
+		</Modal.Root>
+	);
+}

vite.config.ts

@@ -1,15 +1,17 @@
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({mode}) => {
+	const env = loadEnv(mode, process.cwd());
+	return {
 		plugins: [react()],
 		server: {
 			port: 3000,
 			host: '0.0.0.0',
 			proxy: {
 				'/api': {
-				target: 'http://localhost:5000/trigger',
+					target: `http://localhost:5000/${env.VITE_BASE_URL}`,
 					changeOrigin: false,
 					secure: false,
 				},
@@ -26,4 +28,5 @@ export default defineConfig({
 				},
 			},
 		},
+}
 });