Removed hardcoded urls

This commit is contained in:
Sean Edmunds
2024-12-04 13:44:35 -06:00
parent 85e9c9134a
commit 1fca2b7688
16 changed files with 262 additions and 178 deletions

3
.env Normal file
View File

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

28
package-lock.json generated
View File

@@ -21,6 +21,7 @@
"@tanstack/react-query-persist-client": "^5.51.23", "@tanstack/react-query-persist-client": "^5.51.23",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"dayjs": "^1.11.12", "dayjs": "^1.11.12",
"dotenv": "^16.4.7",
"idb-keyval": "^6.2.1", "idb-keyval": "^6.2.1",
"jotai": "^2.9.3", "jotai": "^2.9.3",
"mantine-react-table": "^2.0.0-beta.6", "mantine-react-table": "^2.0.0-beta.6",
@@ -32,6 +33,7 @@
"react-toastify": "^10.0.5" "react-toastify": "^10.0.5"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^22.10.1",
"@types/react": "^18.3.3", "@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0", "@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^8.1.0", "@typescript-eslint/eslint-plugin": "^8.1.0",
@@ -1706,6 +1708,15 @@
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
"dev": true "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": { "node_modules/@types/parse-json": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -2261,6 +2272,17 @@
"node": ">=8" "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": { "node_modules/electron-to-chromium": {
"version": "1.4.768", "version": "1.4.768",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.768.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.768.tgz",
@@ -4064,6 +4086,12 @@
"node": ">=14.17" "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": { "node_modules/unload": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz", "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",

View File

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

View File

Before

Width:  |  Height:  |  Size: 3.9 MiB

After

Width:  |  Height:  |  Size: 3.9 MiB

View File

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

View File

Before

Width:  |  Height:  |  Size: 6.1 MiB

After

Width:  |  Height:  |  Size: 6.1 MiB

View File

Before

Width:  |  Height:  |  Size: 199 KiB

After

Width:  |  Height:  |  Size: 199 KiB

View File

Before

Width:  |  Height:  |  Size: 118 KiB

After

Width:  |  Height:  |  Size: 118 KiB

View File

@@ -7,9 +7,10 @@ import {
import { useCallback } from 'react'; import { useCallback } from 'react';
import { toast } from 'react-toastify'; 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 }) { export function useQueryAPI({ endpoint }: { endpoint: string }) {
const callEndpoint = async (endpoint: string) => { const callEndpoint = async (endpoint: string) => {
const url = `http://localhost:5000/trigger/${endpoint}`;
const options: object = { const options: object = {
method: 'GET', method: 'GET',
headers: { 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) { if (!response.ok) {
throw new Error(`${response.status} ${response.statusText}`); throw new Error(`${response.status} ${response.statusText}`);
} }
@@ -38,13 +39,13 @@ export function useQueryAPI({ endpoint }: { endpoint: string }) {
export function useWeatherAPI({ endpoint }: { endpoint: string }) { export function useWeatherAPI({ endpoint }: { endpoint: string }) {
let url = ''; let url = '';
if (endpoint === 'baseline') { if (endpoint === 'baseline') {
url = 'https://api.weather.gov/gridpoints/HGX/55,96'; url = 'https://api.weather.gov/gridpoints/HGX/55,96';
} else if (endpoint === 'current') { } else if (endpoint === 'current') {
url = 'https://api.weather.gov/stations/KSGR/observations'; url = 'https://api.weather.gov/stations/KSGR/observations';
} else if (endpoint === 'forecast') { } else if (endpoint === 'forecast') {
url = 'https://api.weather.gov/gridpoints/HGX/55,96/forecast'; url = 'https://api.weather.gov/gridpoints/HGX/55,96/forecast';
} }
const callEndpoint = async (endpoint: string) => { const callEndpoint = async (endpoint: string) => {
const options: object = { const options: object = {
method: 'GET', method: 'GET',
@@ -77,7 +78,6 @@ export function useMutationAPI() {
endpoint: string, endpoint: string,
body: object | undefined | null, body: object | undefined | null,
) => { ) => {
const url = `http://localhost:5000/trigger/${endpoint}`;
const options: any = { const options: any = {
method: method, method: method,
headers: { headers: {
@@ -158,7 +158,6 @@ export function useFileUploadAPI() {
endpoint: string, endpoint: string,
body?: object | FormData | undefined | null, body?: object | FormData | undefined | null,
) => { ) => {
const url = `http://localhost:5000/trigger/${endpoint}`;
const options = { const options = {
method: method, method: method,
@@ -231,19 +230,19 @@ export function useFetchAllRecordsAPI({ endpoint }: { endpoint: string }) {
const fetchPage = async (page: number, retryCount = 0): Promise<any> => { const fetchPage = async (page: number, retryCount = 0): Promise<any> => {
// Start building the URL // 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 // Check and append custom query parameters from the endpoint
const customParams = new URLSearchParams(endpoint.split('?')[1]); const customParams = new URLSearchParams(endpoint.split('?')[1]);
for (const [key, value] of customParams) { for (const [key, value] of customParams) {
if (!url.searchParams.has(key)) { if (!urlObject.searchParams.has(key)) {
url.searchParams.append(key, value); urlObject.searchParams.append(key, value);
} }
} }
// Add 'page' and 'size' parameters // Add 'page' and 'size' parameters
url.searchParams.set('page', page.toString()); // Use 'set' to ensure uniqueness urlObject.searchParams.set('page', page.toString()); // Use 'set' to ensure uniqueness
url.searchParams.set('size', pageSize.toString()); urlObject.searchParams.set('size', pageSize.toString());
const options: any = { const options: any = {
method: 'GET', method: 'GET',
@@ -345,7 +344,6 @@ interface DownloadFileOptions {
export function useDownloadFile() { export function useDownloadFile() {
const downloadFile = useCallback( const downloadFile = useCallback(
async ({ endpoint, file_name }: DownloadFileOptions) => { async ({ endpoint, file_name }: DownloadFileOptions) => {
const url = `http://localhost:5000/trigger/${endpoint}`;
const options: any = { const options: any = {
method: 'GET', method: 'GET',
headers: { headers: {
@@ -426,7 +424,6 @@ export const useFetchInfiniteQuery = ({
const queryKey = ['GET', endpoint]; const queryKey = ['GET', endpoint];
const fetchInfiniteQuery = async (endpoint: string) => { const fetchInfiniteQuery = async (endpoint: string) => {
const url = `http://localhost:5000/trigger/${endpoint}`;
const requestOptions: any = { const requestOptions: any = {
method: 'GET', method: 'GET',
headers: { headers: {

View File

@@ -1,7 +1,7 @@
import { Group, Stack, Text } from '@mantine/core'; import { Group, Stack, Text } from '@mantine/core';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { textClasses } from '../../../styles';
import { useWeatherAPI } from '../../../hooks'; import { useWeatherAPI } from '../../../hooks';
import { textClasses } from '../../../styles';
function Header({ greet, date, isMobile }: any) { function Header({ greet, date, isMobile }: any) {
const [time, setTime] = useState(new Date()); const [time, setTime] = useState(new Date());
@@ -105,32 +105,28 @@ function Header({ greet, date, isMobile }: any) {
width: '100%', width: '100%',
gap: 0, gap: 0,
}} }}
> >
{!isMobile && ( {!isMobile && (
<Group gap={0} align='end' style={{ display: 'flex' }}> <Group gap={0} align='end' style={{ display: 'flex' }}>
<Text <Text
component='h2' component='h2'
mr={4} mr={4}
className={textClasses.dateTime} className={textClasses.dateTime}
classNames={textClasses} classNames={textClasses}
> >
{current.temperature}°F {current.temperature}°F
</Text> </Text>
<Text <Text
mb={6} mb={6}
className={textClasses.dateTime} className={textClasses.dateTime}
classNames={textClasses} classNames={textClasses}
fz={14} fz={14}
> >
{current.highTemp}°F/{current.lowTemp}°F {current.highTemp}°F/{current.lowTemp}°F
</Text> </Text>
</Group> </Group>
)} )}
<Text <Text component='h2' className={textClasses.dateTime} classNames={textClasses}>
component='h2'
className={textClasses.dateTime}
classNames={textClasses}
>
{`${ {`${
time.getHours() === 0 time.getHours() === 0
? 12 ? 12

View File

@@ -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>
);
}

View File

@@ -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 { useDisclosure } from '@mantine/hooks';
import { useAtom } from 'jotai';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { appTheme } from '../../../contexts/theme';
import { useQueryAPI, useWeatherAPI } from '../../../hooks'; import { useQueryAPI, useWeatherAPI } from '../../../hooks';
import { modalClasses, textInputClasses } from '../../../styles'; import { textInputClasses } from '../../../styles';
import SmallWeatherCard from './SmallWeatherCard'; import HelpModal from './HelpModal';
import SmallOutlookCard from './SmallOutlookCard'; import WeatherModal from './WeatherModal';
export default function Search() { export default function Search() {
const { data: providers } = useQueryAPI({ endpoint: 'api/providers' }); const { data: providers } = useQueryAPI({ endpoint: 'api/providers' });
@@ -31,8 +29,8 @@ export default function Search() {
temperature: 0, temperature: 0,
precipitation: 0, precipitation: 0,
windSpeed: '0 mph', windSpeed: '0 mph',
windDirection: 'N' windDirection: 'N',
} },
]); ]);
const { data: forecast } = useWeatherAPI({ endpoint: 'forecast' }); const { data: forecast } = useWeatherAPI({ endpoint: 'forecast' });
const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] = const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
@@ -42,7 +40,6 @@ export default function Search() {
const [providerLabel, setProviderLabel] = useState('Google Search'); const [providerLabel, setProviderLabel] = useState('Google Search');
const [providerURL, setProviderURL] = useState('https://www.google.com/search?q='); const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
const [value, setValue] = useState(''); const [value, setValue] = useState('');
const [theme, setTheme] = useAtom(appTheme);
const handleKeyPress = (item: any) => { const handleKeyPress = (item: any) => {
let option = ''; let option = '';
let subtext = ''; let subtext = '';
@@ -93,7 +90,6 @@ export default function Search() {
useEffect(() => { useEffect(() => {
if (weather && basicWeather) { if (weather && basicWeather) {
console.log(weather.features[0])
setCurrent({ setCurrent({
icon: weather.features[0].properties.icon?.replace('medium', 'large') || '', icon: weather.features[0].properties.icon?.replace('medium', 'large') || '',
temperature: Math.round( temperature: Math.round(
@@ -125,22 +121,26 @@ export default function Search() {
icon: forecast.properties.periods[0].icon.replace('medium', 'large'), icon: forecast.properties.periods[0].icon.replace('medium', 'large'),
isDayTime: forecast.properties.periods[0].isDaytime, isDayTime: forecast.properties.periods[0].isDaytime,
temperature: forecast.properties.periods[0].temperature, 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, windSpeed: forecast.properties.periods[0].windSpeed,
windDirection: forecast.properties.periods[0].windDirection windDirection: forecast.properties.periods[0].windDirection,
}, },
{ {
name: forecast.properties.periods[1].name, name: forecast.properties.periods[1].name,
icon: forecast.properties.periods[1].icon.replace('medium', 'large'), icon: forecast.properties.periods[1].icon.replace('medium', 'large'),
isDayTime: forecast.properties.periods[1].isDaytime, isDayTime: forecast.properties.periods[1].isDaytime,
temperature: forecast.properties.periods[1].temperature, 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, windSpeed: forecast.properties.periods[1].windSpeed,
windDirection: forecast.properties.periods[1].windDirection windDirection: forecast.properties.periods[1].windDirection,
} },
]); ]);
} }
}, [forecast]) }, [forecast]);
return ( return (
<Stack <Stack
style={{ style={{
@@ -190,99 +190,23 @@ export default function Search() {
} }
}} }}
/> />
<Modal.Root <HelpModal
size={'50%'} providers={providers}
className={modalClasses.helpModal} providerModalOpened={providerModalOpened}
classNames={modalClasses} closeProviderModal={closeProviderModal}
opened={providerModalOpened} setValue={setValue}
onClose={() => { setProviderLabel={setProviderLabel}
closeProviderModal(); setProviderURL={setProviderURL}
setValue(''); />
setProviderLabel('Google Search'); <WeatherModal
setProviderURL('https://www.google.com/search?q='); current={current}
}} outlook={outlook}
style={{ closeWeatherModal={closeWeatherModal}
'--color-text-pri': theme.primaryColor, weatherModalOpened={weatherModalOpened}
'--color-text-acc': theme.accentColor, setValue={setValue}
'--color-background': theme.backgroundColor, setProviderLabel={setProviderLabel}
'--color-border': theme.borderColor, setProviderURL={setProviderURL}
'--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>
</Stack> </Stack>
); );
} }

View File

@@ -14,9 +14,9 @@ export default function SmallWeatherCard({ weather }: any) {
/> />
</Box> </Box>
<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}> <Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}>
<Text mb={-8} p={0} fz={12}> <Text mb={-8} p={0} fz={12}>
{weather.highTemp}°F/{weather.lowTemp}°F {weather.highTemp}°F/{weather.lowTemp}°F
</Text> </Text>
<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}> <Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
{weather.precipitation !== 'N/A' && ( {weather.precipitation !== 'N/A' && (
<Group gap={0}> <Group gap={0}>

View File

@@ -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>
);
}

View File

@@ -1,4 +1,4 @@
interface CurrentWeather{ interface CurrentWeather {
icon: string; icon: string;
temperature: number; temperature: number;
highTemp: number; highTemp: number;
@@ -10,7 +10,7 @@ interface CurrentWeather{
windDirection: number; windDirection: number;
} }
interface OutlookWeather{ interface OutlookWeather {
name: string; name: string;
icon: string; icon: string;
isDayTime: boolean; isDayTime: boolean;
@@ -18,4 +18,4 @@ interface OutlookWeather{
precipitation: number; precipitation: number;
windSpeed: string; windSpeed: string;
windDirection: string; windDirection: string;
} }

View File

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