smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Refactor

Browse Source
This commit is contained in:
Sean Edmunds
2024-12-06 15:33:58 -06:00
parent 00c141d8d7
commit 33813a34fb
48 changed files with 2188 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/pages/homepage/Homepage.tsx
View File

@@ -1,18 +1,16 @@
import { Stack } from '@mantine/core';
import { useDisclosure, useLocalStorage } from '@mantine/hooks';
import { date, greet, useQueryAPI, useWeatherAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { useQueryAPI, useWeatherAPI } from '../../hooks/useAPI';
import stackClasses from '../../styles/Stack.module.css';
import Applications from './components/Applications';
import Bookmarks from './components/Bookmarks';
import Header from './components/Header';
import Search from './components/Search';
import { stackClasses } from 'styles';
import type { CurrentWeather, OutlookWeather } from 'types';
import Applications from './components/Applications/Applications';
import Bookmarks from './components/Bookmarks/Bookmarks';
import Header from './components/Header/Header';
import Search from './components/Search/Search';
import SettingsButton from './components/SettingsButton';
import type { CurrentWeather, OutlookWeather } from './types/weather';
export default function Homepage({ theme }: any) {
const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' });
const [displayedGreeting, setDisplayedGreeting] = useState('');
export function Homepage({ theme }: any) {
const [appFilter, setAppFilter] = useLocalStorage<[any]>({
key: 'appFilter',
defaultValue: ['All'],
@@ -21,8 +19,12 @@ export default function Homepage({ theme }: any) {
key: 'bookmarkFilter',
defaultValue: ['All'],
});
const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' });
const { data: basicWeather } = useWeatherAPI({ endpoint: 'baseline' });
const { data: weather } = useWeatherAPI({ endpoint: 'current' });
const { data: forecast } = useWeatherAPI({ endpoint: 'forecast' });
const { data: hourly } = useWeatherAPI({ endpoint: 'hourly' });
const [displayedGreeting, setDisplayedGreeting] = useState('');
const [current, setCurrent] = useState<CurrentWeather>({
icon: '',
temperature: 0,
@@ -45,42 +47,9 @@ export default function Homepage({ theme }: any) {
windDirection: 'N',
},
]);
const { data: forecast } = useWeatherAPI({ endpoint: 'forecast' });
const { data: hourly } = useWeatherAPI({ endpoint: 'hourly' });
const isMobile = window.matchMedia('(max-width: 600px)').matches;
const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
useDisclosure(false);
const isMobile = window.matchMedia('(max-width: 600px)').matches;
function date() {
const currentDate = new Date();
const dateOptions: Intl.DateTimeFormatOptions = !isMobile
? {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
}
: {};
const date = currentDate.toLocaleDateString('en-US', dateOptions);
return date;
}
function greet(list: any) {
const currentTime = new Date();
const greet = Math.floor(currentTime.getHours() / 6);
const easterEggChance = Math.floor(Math.random() * 100);
let timeBased: any = [];
let customGreetings: any = [];
for (const l of list) {
if (l.customGreeting === 0) {
timeBased = timeBased.concat(l);
} else {
customGreetings = customGreetings.concat(l);
}
}
if (easterEggChance > 10 || customGreetings.length === 0) {
return timeBased[greet].message;
}
return customGreetings[Math.floor(Math.random() * customGreetings.length)].message;
}
useEffect(() => {
if (data) {
@@ -160,12 +129,12 @@ export default function Homepage({ theme }: any) {
openWeatherModal={openWeatherModal}
/>
<Header
date={date()}
date={date(isMobile)}
greet={displayedGreeting}
isMobile={isMobile}
current={current}
outlook={outlook}
setCurrent={setCurrent}
outlook={outlook}
weather={weather}
basicWeather={basicWeather}
forecast={forecast}

11
src/pages/homepage/components/AppItem.tsx → src/pages/homepage/components/Applications/AppItem.tsx
View File

@@ -1,8 +1,7 @@
import { Icon } from '@iconify/react';
import { Box, Stack, Text } from '@mantine/core';
import { useState } from 'react';
import stacks from '../../../styles/Stack.module.css';
import texts from '../../../styles/Text.module.css';
import { stackClasses, textClasses } from 'styles';
function AppItem({ url, icon, name, isMobile }: any) {
const [textDecoration, setTextDecoration] = useState<string>('none');
@@ -13,7 +12,7 @@ function AppItem({ url, icon, name, isMobile }: any) {
href={`https://${url}`}
onMouseOver={() => setTextDecoration('underline')}
onMouseOut={() => setTextDecoration('none')}
className={stacks.appItemBox}
className={stackClasses.appItemBox}
>
<Stack
align={isMobile && 'center'}
@@ -38,12 +37,12 @@ function AppItem({ url, icon, name, isMobile }: any) {
gap: 0,
}}
>
<Text className={texts.appName} classNames={texts}>
<Text className={textClasses.appName} classNames={textClasses}>
{name}
</Text>
<Text
className={texts.appUrl}
classNames={texts}
className={textClasses.appUrl}
classNames={textClasses}
style={{
textDecoration: textDecoration,
}}

6
src/pages/homepage/components/Applications.tsx → src/pages/homepage/components/Applications/Applications.tsx
View File

@@ -1,7 +1,7 @@
import { Stack, Text } from '@mantine/core';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { useQueryAPI } from '../../../hooks/useAPI';
import texts from '../../../styles/Text.module.css';
import { textClasses } from 'styles';
import AppItem from './AppItem';
function Applications({ contentType, isMobile }: any) {
@@ -16,7 +16,7 @@ function Applications({ contentType, isMobile }: any) {
<>
{applications.length > 0 && contentType.length > 0 && (
<Stack id='apps' style={{ gap: 0 }}>
<Text className={texts.sectionTitle} classNames={texts}>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
Applications
</Text>
<Stack

6
src/pages/homepage/components/Bookmarks.tsx → src/pages/homepage/components/Bookmarks/Bookmarks.tsx
View File

@@ -1,7 +1,7 @@
import { Stack, Text } from '@mantine/core';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { useQueryAPI } from '../../../hooks/useAPI';
import texts from '../../../styles/Text.module.css';
import { textClasses } from 'styles';
import LinkGroups from './LinkGroups';
function Links({ contentType, isMobile }: any) {
@@ -27,7 +27,7 @@ function Links({ contentType, isMobile }: any) {
categories?.length > 0 &&
contentType.length > 0 && (
<Stack id='links' style={{ gap: 0 }}>
<Text className={texts.sectionTitle} classNames={texts}>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
Bookmarks
</Text>
<Stack

4
src/pages/homepage/components/LinkGroups.tsx → src/pages/homepage/components/Bookmarks/LinkGroups.tsx
View File

@@ -1,5 +1,5 @@
import { Stack, Text } from '@mantine/core';
import texts from '../../../styles/Text.module.css';
import { textClasses } from 'styles';
import LinkItem from './LinkItem';
function LinkGroups({ links, category, isMobile }: any) {
@@ -12,7 +12,7 @@ function LinkGroups({ links, category, isMobile }: any) {
overflow: 'hidden',
}}
>
<Text className={texts.linkCategory} classNames={texts}>
<Text className={textClasses.linkCategory} classNames={textClasses}>
{category}
</Text>
{links?.map((link: any) => (

8
src/pages/homepage/components/LinkItem.tsx → src/pages/homepage/components/Bookmarks/LinkItem.tsx
View File

@@ -1,11 +1,11 @@
import { Text } from '@mantine/core';
import texts from '../../../styles/Text.module.css';
import { textClasses } from 'styles';
function LinkItem({ link, isMobile }: any) {
function LinkItem({ link }: any) {
return (
<Text
className={texts.linkItem}
classNames={texts}
className={textClasses.linkItem}
classNames={textClasses}
component='a'
href={link.url}
style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}

4
src/pages/homepage/components/Header.tsx → src/pages/homepage/components/Header/Header.tsx
View File

@@ -1,7 +1,7 @@
import { Group, Stack, Text } from '@mantine/core';
import { WeatherModal } from 'components';
import { useEffect, useState } from 'react';
import { textClasses } from '../../../styles';
import WeatherModal from './WeatherModal';
import { textClasses } from 'styles';
function Header({
greet,

59
src/pages/homepage/components/HelpModal.tsx
View File

@@ -1,59 +0,0 @@
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={'60%'}
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>
);
}

120
src/pages/homepage/components/HourlyCard.tsx
View File

@@ -1,120 +0,0 @@
import { Icon } from '@iconify/react/dist/iconify.js';
import { Box, Card, Center, Group, Image, Stack, Text } from '@mantine/core';
export enum WindDirection {
N = 0,
NE = 45,
E = 90,
SE = 135,
S = 180,
SW = 225,
W = 270,
NW = 315,
}
export default function HourlyCard({ weather }: any) {
return (
<Stack gap={0} align='center'>
<Card
style={{
height: '8rem',
width: '4rem',
backgroundColor: 'var(--color-text-pri)',
background: 'rgba(255, 255, 255, 0.6)',
padding: 0,
margin: 0,
}}
>
<Stack gap={0} h={'100%'} w={'100%'} align='center'>
<Stack gap={0} align='center'>
<Text mb={-6} fz={12} style={{ zIndex: 2 }}>
{new Date(weather.startTime).toLocaleString('en-US', {
weekday: 'short',
month: 'numeric',
day: 'numeric',
})}
</Text>
<Text fz={12} style={{ zIndex: 2 }}>
{new Date(weather.startTime).toLocaleTimeString('en-US', {
hour: 'numeric',
minute: 'numeric',
})}
</Text>
<Stack gap={0} align='center'>
<Box
style={{
position: 'absolute',
width: '56px',
height: '56px',
backgroundColor: 'transparent',
boxShadow:
'inset 0px 0px 10px 3px rgba(255, 255, 255, 1), 0px 0px 10px 0px rgba(255, 255, 255, .6)',
zIndex: 1,
borderRadius: '100%',
borderStyle: 'none',
border: '0px solid',
}}
/>
<Image
src={weather.icon}
style={{
zIndex: 0,
borderRadius: '100%',
border: '0px solid',
borderStyle: 'none',
}}
/>
</Stack>
</Stack>
<Stack gap={0} align='center' style={{ zIndex: 1 }}>
<Center>
<Icon
icon={'mdi:navigation'}
style={{
position: 'absolute',
transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
}}
/>
<Icon fontSize={28} icon={'mdi:circle-outline'} />
</Center>
<Text mt={-6} fz={12}>
{weather.windSpeed}
</Text>
</Stack>
</Stack>
</Card>
<Text
mt={4}
w={'100%'}
fz={14}
style={{
textAlign: 'center',
borderRadius: '4px',
background: 'rgba(0, 0, 0, 0.6)',
}}
>
{weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity.value}%
</Text>
<Text
mt={4}
w={'100%'}
fz={14}
style={{
textAlign: 'center',
borderRadius: '4px',
background: 'rgba(0, 0, 0, 0.6)',
}}
>
<Group gap={0} justify='center'>
<Icon
icon={'mdi:drop'}
style={{
transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
}}
/>
{`${weather.probabilityOfPrecipitation.value * 10}`}%
</Group>
</Text>
</Stack>
);
}

34
src/pages/homepage/components/MessageInfo.jsx
View File

@@ -1,34 +0,0 @@
import { useEffect, useState } from 'react';
import Messages from '../../../components/Messages';
import useQueryAPI from '../../../hooks/useAPI';
function MessageInfo() {
const messageData = useQueryAPI({ endpoint: 'api/messages' });
const [greetings, setGreetings] = useState([]);
useEffect(() => {
if (!messageData.isFetching) {
setGreetings(messageData.data);
}
}, [messageData.isFetching]);
return (
<>
{greetings && (
<div id='messageForm'>
{greetings.map((greeting, index) => (
<Messages
key={greeting.id}
group={index + 1}
index={greeting.index}
greeting={greeting.message}
easterEgg={greeting.customGreeting}
/>
))}
</div>
)}
</>
);
}
export default MessageInfo;

12
src/pages/homepage/components/Provider.jsx
View File

@@ -1,12 +0,0 @@
function Provider(props) {
return (
<tr>
<td>
<a href={props.provider.url}>{props.provider.name}</a>
</td>
<td>{props.provider.prefix}</td>
</tr>
);
}
export default Provider;

25
src/pages/homepage/components/Search.tsx → src/pages/homepage/components/Search/Search.tsx
View File

@@ -1,10 +1,10 @@
import { Stack, TextInput } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useState } from 'react';
import { useQueryAPI } from '../../../hooks';
import { textInputClasses } from '../../../styles';
import HelpModal from './HelpModal';
import WeatherModal from './WeatherModal';
import { HelpModal } from '../../../../components/HelpModal/HelpModal';
import { WeatherModal } from '../../../../components/WeatherModal/WeatherModal';
import { containsProtocol, useQueryAPI, validURL } from '../../../../hooks';
import { textInputClasses } from '../../../../styles';
export default function Search({
current,
@@ -52,23 +52,6 @@ export default function Search({
}
};
function validURL(str: any) {
const pattern = new RegExp(
'^(https?:\\/\\/)?' + // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
'(\\#[-a-z\\d_]*)?$',
'i',
); // fragment locator
return !!pattern.test(str);
}
function containsProtocol(str: any) {
const pattern = /^(https?:\/\/).*/i;
return !!pattern.test(str);
}
return (
<Stack
style={{

24
src/pages/homepage/components/SettingsButton.tsx
View File

@@ -1,18 +1,14 @@
import { Button, Menu, MultiSelect, NavLink } from '@mantine/core';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiMenu, FiMonitor } from 'react-icons/fi';
import { useQueryAPI } from '../../../hooks/useAPI';
import button from '../../../styles/Button.module.css';
import menu from '../../../styles/Menu.module.css';
import navLink from '../../../styles/NavLink.module.css';
import selectClasses from '../../../styles/Select.module.css';
import { buttonClasses, menuClasses, navLinkClasses, selectClasses } from 'styles';
function SettingsButton({
appFilter,
setAppFilter,
bookmarkFilter,
setBookmarkFilter,
theme,
}: any) {
const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
@@ -38,29 +34,29 @@ function SettingsButton({
return (
<Menu withinPortal={false} withArrow shadow='md' position='top'>
<Menu.Target>
<Button className={button.settingsButton} classNames={button}>
<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
<FiMenu />
</Button>
</Menu.Target>
<Menu.Dropdown className={menu.dropdown}>
<Menu.Dropdown className={menuClasses.dropdown}>
<NavLink
label='Settings'
component='a'
href={`/${import.meta.env.VITE_BASE_URL}/settings`}
className={navLink.defaultNavLink}
classNames={navLink}
className={navLinkClasses.defaultNavLink}
classNames={navLinkClasses}
/>
<NavLink
label='Quick Actions'
className={navLink.defaultNavLink}
classNames={navLink}
className={navLinkClasses.defaultNavLink}
classNames={navLinkClasses}
>
<NavLink
label='Wake Dakota'
leftSection={<FiMonitor />}
onClick={() => runWakeCommand()}
className={navLink.defaultNavLink}
classNames={navLink}
className={navLinkClasses.defaultNavLink}
classNames={navLinkClasses}
/>
</NavLink>
<MultiSelect

60
src/pages/homepage/components/SmallOutlookCard.tsx
View File

@@ -1,60 +0,0 @@
import { Icon } from '@iconify/react/dist/iconify.js';
import { Box, Center, Image, Overlay, Stack, Text } from '@mantine/core';
export enum WindDirection {
N = 0,
NE = 45,
E = 90,
SE = 135,
S = 180,
SW = 225,
W = 270,
NW = 315,
}
export default function SmallOutlookCard({ weather }: any) {
return (
<Center display={'flex'}>
<Box pos={'relative'} style={{ zIndex: -1 }}>
<Image radius={'lg'} src={weather.icon} />
<Overlay
color='black'
gradient='linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0.35))'
zIndex={0}
radius={'lg'}
/>
</Box>
<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}>
<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
<Center>
<Icon
icon={'mdi:navigation'}
style={{
position: 'absolute',
transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
}}
/>
<Icon fontSize={32} icon={'mdi:circle-outline'} />
</Center>
<Text mt={-6} fz={12}>
{weather.windSpeed}
</Text>
</Stack>
<Stack gap={0} pos={'absolute'} bottom={8}>
<Text mt={-4} mb={-4} fz={14}>
Precip:
</Text>
<Text mt={-8} mb={-8} p={0} fz={24}>
{weather.precipitation}%
</Text>
<Text mt={-4} mb={-4} fz={14}>
{weather.isDayTime ? 'High of:' : 'Low of:'}
</Text>
<Text mt={-8} mb={-8} p={0} fz={36}>
{weather.temperature}°F
</Text>
</Stack>
</Stack>
</Center>
);
}

58
src/pages/homepage/components/SmallWeatherCard.tsx
View File

@@ -1,58 +0,0 @@
import { Icon } from '@iconify/react/dist/iconify.js';
import { Box, Center, Group, Image, Overlay, Stack, Text } from '@mantine/core';
export default function SmallWeatherCard({ weather }: any) {
return (
<Center display={'flex'}>
<Box pos={'relative'} style={{ zIndex: -1 }}>
<Image radius={'lg'} src={weather.icon} />
<Overlay
color='black'
gradient='linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0.35))'
zIndex={0}
radius={'lg'}
/>
</Box>
<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}>
<Text mb={-8} p={0} fz={12}>
{weather.highTemp}°F/{weather.lowTemp}°F
</Text>
<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
{weather.precipitation !== 'N/A' && (
<Group gap={0}>
<Icon icon={'mdi:weather-pouring'} height={32} width={32} />
<Text>{weather.precipitation} mm</Text>
</Group>
)}
{weather.precipitation === 'N/A' && (
<Icon icon={'mdi:white-balance-sunny'} height={32} width={32} />
)}
<Center>
<Icon
icon={'mdi:navigation'}
style={{
position: 'absolute',
transform: `rotate(${weather.windDirection}deg)`,
}}
/>
<Icon fontSize={32} icon={'mdi:circle-outline'} />
</Center>
<Text mt={-6} fz={12}>
{weather.windSpeed} mph
</Text>
</Stack>
<Stack gap={0} pos={'absolute'} bottom={8}>
<Text mt={-8} mb={-8} p={0} fz={36}>
{weather.temperature}°F
</Text>
<Text mt={-8} fz={12}>
Feels like: {weather.heatIndex}°F
</Text>
<Text mt={-6} fz={12}>
Humidity: {weather.humidity}%
</Text>
</Stack>
</Stack>
</Center>
);
}

111
src/pages/homepage/components/WeatherModal.tsx
View File

@@ -1,111 +0,0 @@
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 { useEffect, useState } from 'react';
import { appTheme } from '../../../contexts/theme';
import HourlyCard from './HourlyCard';
export default function WeatherModal({
current,
outlook,
hourly,
closeWeatherModal,
weatherModalOpened,
setValue,
setProviderLabel,
setProviderURL,
}: any) {
const [theme, setTheme] = useAtom(appTheme);
const [hourlyForecast, setHourlyForecast] = useState<any>([]);
const [sunset, setSunset] = useState(100);
useEffect(() => {
if (hourly) {
setHourlyForecast(hourly.properties.periods.slice(1, 13));
}
}, [hourly]);
useEffect(() => {
if (hourlyForecast) {
setSunset(
(hourlyForecast.findIndex((item: any) => item.isDaytime === false) / 12) * 100,
);
}
}, [hourlyForecast]);
return (
<Modal.Root
size={'60%'}
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>
<Group gap={0} w={'100%'} align='center' justify='center'>
<Stack gap={0} align='center'>
<h3 style={{ padding: 0, margin: 0 }}>Currently</h3>
<Stack>
<SmallWeatherCard weather={current} />
</Stack>
</Stack>
<Divider orientation='vertical' mx={16} 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>
</Group>
<Divider orientation='horizontal' mx={8} color={theme.accentColor} />
<Group
style={{
background:
hourlyForecast.length > 0 && hourlyForecast[0].isDaytime
? `linear-gradient(90deg, rgba(245, 225, 171, 0.85) ${sunset - 5}%, rgba(35, 28, 42, 0.85) ${sunset + 5}%)`
: `linear-gradient(90deg, rgba(35, 28, 42, 0.85)${sunset - 5}%, rgba(245, 225, 171, 0.85)${sunset + 5}%)`,
padding: '.5rem',
borderRadius: '.5rem',
}}
>
{hourlyForecast.length > 0 &&
hourlyForecast.map((h: any) => {
return <HourlyCard key={h.time} weather={h} />;
})}
</Group>
</Stack>
</Center>
</Modal.Body>
</Modal.Content>
</Modal.Root>
);
}

21
src/pages/homepage/types/weather.d.ts vendored
View File

@@ -1,21 +0,0 @@
export interface CurrentWeather {
icon: string;
temperature: number;
highTemp: number;
lowTemp: number;
precipitation: string;
humidity: number;
heatIndex: number;
windSpeed: number;
windDirection: number;
}
export interface OutlookWeather {
name: string;
icon: string;
isDayTime: boolean;
temperature: number;
precipitation: number;
windSpeed: string;
windDirection: string;
}

2
src/pages/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { Homepage } from './homepage/Homepage';
export { Settings } from './settings/Settings';

5
src/pages/settings/Settings.tsx
View File

@@ -1,7 +1,6 @@
import { ActionIcon, Group, Stack, Tabs, Text } from '@mantine/core';
import { FiArrowLeftCircle } from 'react-icons/fi';
import { actionIconClasses, textClasses } from '../../styles';
import tabClasses from '../../styles/Tabs.module.css';
import { actionIconClasses, tabClasses, textClasses } from 'styles';
import Applications from './components/Applications';
import Bookmarks from './components/Bookmarks';
import Categories from './components/Categories';
@@ -10,7 +9,7 @@ import Personalization from './components/Personalization';
import SearchProviders from './components/SearchProviders';
import Themes from './components/Themes';
function Settings({ theme }: any) {
export function Settings({ theme }: any) {
return (
<Stack h={'100vh'} px={'2rem'}>
<Group gap={0}>

7
src/pages/settings/components/Applications.tsx
View File

@@ -1,9 +1,8 @@
import { Stack, Text } from '@mantine/core';
import { ApplicationColumns, DataTable } from 'components';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { DataTable } from '../../../DataTable/DataTable';
import ApplicationColumns from '../../../DataTable/columns/ApplicationColumns';
import { useQueryAPI } from '../../../hooks/useAPI';
import { textClasses } from '../../../styles';
import { textClasses } from 'styles';
const ApplicationSettings = () => {
const endpoint = 'api/apps';

17
src/pages/settings/components/Bookmarks.tsx
View File

@@ -1,23 +1,16 @@
import { Stack, Text } from '@mantine/core';
import { BookmarkColumns, DataTable } from 'components';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { DataTable } from '../../../DataTable/DataTable';
import BookmarkColumns from '../../../DataTable/columns/BookmarkColumns';
import { useQueryAPI } from '../../../hooks/useAPI';
import { textClasses } from '../../../styles';
import { textClasses } from 'styles';
const BookmarkSettings = () => {
const endpoint = 'api/links';
const { data, isFetching, isLoading, isFetched } = useQueryAPI({
endpoint: endpoint,
});
const {
data: groupData,
isFetching: groupDataIsFetching,
isLoading: groupDataIsLoading,
isFetched: groupDataIsFetched,
} = useQueryAPI({ endpoint: 'api/categories' });
const { data: groupData } = useQueryAPI({ endpoint: 'api/categories' });
const [bookmarkData, setBookmarkData] = useState<any>([]);
const [groups, setGroups] = useState([]);
const [fullyFetched, setFullyFetched] = useState(false);
useEffect(() => {
if (isFetched) {
@@ -31,7 +24,6 @@ const BookmarkSettings = () => {
return category.categoryName;
});
setGroups(groupList);
setFullyFetched(true);
}
}, [groupData]);
return (
@@ -46,7 +38,6 @@ const BookmarkSettings = () => {
isFetching={isFetching}
isLoading={isLoading}
endpoint={endpoint}
grouping='category'
/>
</Stack>
);

3
src/pages/settings/components/Categories.tsx
View File

@@ -1,7 +1,6 @@
import { Stack, Text } from '@mantine/core';
import { CategoryColumns, DataTable } from 'components';
import { useEffect, useState } from 'react';
import { DataTable } from '../../../DataTable/DataTable';
import CategoryColumns from '../../../DataTable/columns/CategoryColumns';
import { useQueryAPI } from '../../../hooks/useAPI';
import { textClasses } from '../../../styles';
const CategorySettings = () => {

7
src/pages/settings/components/Messages.tsx
View File

@@ -1,9 +1,8 @@
import { Stack, Text } from '@mantine/core';
import { DataTable, MessagesColumns } from 'components';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { DataTable } from '../../../DataTable/DataTable';
import MessagesColumns from '../../../DataTable/columns/MessagesColumns';
import { useQueryAPI } from '../../../hooks/useAPI';
import { textClasses } from '../../../styles';
import { textClasses } from 'styles';
const MessageSettings = () => {
const endpoint = 'api/messages';
const { data, isFetching, isLoading, isFetched } = useQueryAPI({

7
src/pages/settings/components/Personalization.tsx
View File

@@ -1,9 +1,8 @@
import { Text } from '@mantine/core';
import { DataTable, PersonalizationColumns } from 'components';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { DataTable } from '../../../DataTable/DataTable';
import PersonalizationColumns from '../../../DataTable/columns/PersonalizationColumns';
import { useQueryAPI } from '../../../hooks/useAPI';
import { textClasses } from '../../../styles';
import { textClasses } from 'styles';
const PersonalizationSettings = () => {
const endpoint = 'api/personalData';
const { data, isFetching, isLoading, isFetched } = useQueryAPI({

8
src/pages/settings/components/SearchProviders.tsx
View File

@@ -1,9 +1,9 @@
import { Stack, Text } from '@mantine/core';
import { DataTable, SearchProviderColumns } from 'components';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { DataTable } from '../../../DataTable/DataTable';
import SearchProviderColumns from '../../../DataTable/columns/SearchProviderColumns';
import { useQueryAPI } from '../../../hooks/useAPI';
import { textClasses } from '../../../styles';
import { textClasses } from 'styles';
const SearchProviderSettings = () => {
const endpoint = 'api/providers';
const { data, isFetching, isLoading, isFetched } = useQueryAPI({

2
src/pages/settings/components/ThemeModalContent.tsx
View File

@@ -1,7 +1,7 @@
import { Icon } from '@iconify/react/dist/iconify.js';
import { Box, Group, Stack, Text } from '@mantine/core';
import { useState } from 'react';
import { stackClasses } from '../../../styles';
import { stackClasses } from 'styles';
export default function ThemeModalContent({ selectedTheme }: any) {
const ExampleApp = (previewTheme: any) => {

15
src/pages/settings/components/Themes.tsx
View File

@@ -12,25 +12,20 @@ import {
TextInput,
} from '@mantine/core';
import { useDisclosure, useLocalStorage } from '@mantine/hooks';
import { useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiEdit, FiPlus, FiSave, FiTrash, FiX } from 'react-icons/fi';
import { useMutationAPI, useQueryAPI } from '../../../hooks/useAPI';
import '@mantine/core/styles/ModalBase.css';
import '@mantine/core/styles/Modal.css';
import { modals } from '@mantine/modals';
import {
actionIconClasses,
buttonClasses,
modalClasses,
textClasses,
} from '../../../styles';
import { actionIconClasses, buttonClasses, modalClasses, textClasses } from 'styles';
import ThemeModalContent from './ThemeModalContent';
function ThemesSettings({ theme }: any) {
const [opened, { open, close }] = useDisclosure(false);
const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
const [colorId, setColorId] = useState<string>('');
const [colorValue, setColorValue] = useState('#000000');
const [value, setValue] = useLocalStorage<any>({
const [_, setValue] = useLocalStorage<any>({
key: 'theme',
defaultValue: 'blackboard',
});
@@ -39,8 +34,8 @@ function ThemesSettings({ theme }: any) {
});
const [themesList, setThemesList] = useState([]);
const [selectedTheme, setSelectedTheme] = useState<any>({});
const { mutateAsync: createTheme, isPending: isCreatingTheme } = useMutationAPI();
const { mutateAsync: deleteTheme, isPending: isDeletingTheme } = useMutationAPI();
const { mutateAsync: createTheme } = useMutationAPI();
const { mutateAsync: deleteTheme } = useMutationAPI();
useEffect(() => {
if (isFetched) {
setThemesList(data);