Removed hardcoded urls
3
.env
Normal 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
@@ -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",
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 3.9 MiB After Width: | Height: | Size: 3.9 MiB |
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 6.1 MiB After Width: | Height: | Size: 6.1 MiB |
|
Before Width: | Height: | Size: 199 KiB After Width: | Height: | Size: 199 KiB |
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 118 KiB |
@@ -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: {
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
59
src/pages/homepage/components/HelpModal.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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}>
|
||||||
|
|||||||
72
src/pages/homepage/components/WeatherModal.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
6
src/pages/homepage/types/weather.d.ts
vendored
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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,
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
}
|
||||||
});
|
});
|
||||||
|
|||||||