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

Minor changes to styles and packages

Browse Source
This commit is contained in:
Sean Edmunds
2025-04-29 14:54:22 -05:00
parent 54b3336568
commit c3f0ff7c4d
15 changed files with 81 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
package-lock.json generated
View File

@@ -1,16 +1,17 @@
{
"name": "triggerfrontend",
"version": "0.0.0",
"version": "0.1.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "triggerfrontend",
"version": "0.0.0",
"version": "0.1.0",
"dependencies": {
"@hello-pangea/dnd": "^18.0.1",
"@mantine/core": "^7.17.5",
"@mantine/hooks": "^7.17.5",
"@mantine/notifications": "^7.17.5",
"@tanstack/react-query": "^5.74.4",
"@tanstack/react-query-devtools": "^5.74.6",
"@tanstack/react-query-persist-client": "^5.74.6",
@@ -21,7 +22,6 @@
"react-icons": "^5.5.0",
"react-query": "^3.39.3",
"react-router-dom": "^7.5.2",
"react-toastify": "^11.0.5",
"recharts": "^2.15.3"
},
"devDependencies": {
@@ -1225,6 +1225,31 @@
"react": "^18.x || ^19.x"
}
},
"node_modules/@mantine/notifications": {
"version": "7.17.5",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-7.17.5.tgz",
"integrity": "sha512-dLbrSm7ct97fb0Yv8ImVj9mVNkjnD/xkDCP1PANt/shM9xDh0TguqQTvborb+8Wxh1g+RtWVML/an5rVsHbKmg==",
"license": "MIT",
"dependencies": {
"@mantine/store": "7.17.5",
"react-transition-group": "4.4.5"
},
"peerDependencies": {
"@mantine/core": "7.17.5",
"@mantine/hooks": "7.17.5",
"react": "^18.x || ^19.x",
"react-dom": "^18.x || ^19.x"
}
},
"node_modules/@mantine/store": {
"version": "7.17.5",
"resolved": "https://registry.npmjs.org/@mantine/store/-/store-7.17.5.tgz",
"integrity": "sha512-HQzy4rBlUFyw+39TgiAV+TGuQivMWYeQlnMctKJlaxwVY5ZTdF2IpJ/JZcjkGrmrZvBwUQ8IOMFvt2eZc20P1Q==",
"license": "MIT",
"peerDependencies": {
"react": "^18.x || ^19.x"
}
},
"node_modules/@microsoft/api-extractor": {
"version": "7.52.1",
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.52.1.tgz",
@@ -4998,18 +5023,6 @@
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/react-toastify": {
"version": "11.0.5",
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
"integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
"dependencies": {
"clsx": "^2.1.1"
},
"peerDependencies": {
"react": "^18 || ^19",
"react-dom": "^18 || ^19"
}
},
"node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

2
package.json
View File

@@ -13,6 +13,7 @@
"@hello-pangea/dnd": "^18.0.1",
"@mantine/core": "^7.17.5",
"@mantine/hooks": "^7.17.5",
"@mantine/notifications": "^7.17.5",
"@tanstack/react-query": "^5.74.4",
"@tanstack/react-query-devtools": "^5.74.6",
"@tanstack/react-query-persist-client": "^5.74.6",
@@ -23,7 +24,6 @@
"react-icons": "^5.5.0",
"react-query": "^3.39.3",
"react-router-dom": "^7.5.2",
"react-toastify": "^11.0.5",
"recharts": "^2.15.3"
},
"devDependencies": {

10
src/App.tsx
View File

@@ -5,6 +5,7 @@ import {
createTheme,
mergeMantineTheme,
} from '@mantine/core';
import { Notifications } from '@mantine/notifications';
import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import {
@@ -16,10 +17,10 @@ import {
} from 'react-router-dom';
import { Loading, MainLayout } from './components';
import '@mantine/core/styles.css';
import '@mantine/notifications/styles.css';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import './index.css';
import { Homepage, Settings } from 'pages';
import { ToastContainer } from 'react-toastify';
import type { Theme, ThemePlaylist } from 'types';
function App() {
@@ -73,10 +74,8 @@ function App() {
if (themeName !== 'random') {
const temp = allThemes.find((t: Theme) => t.name === themeName);
setTheme(temp);
setLoaded(true);
} else {
handleThemeChange(allThemes, false);
setLoaded(true);
}
} else if (currentThemePlaylist === 'Time of Day') {
const themeList = JSON.parse(
@@ -89,7 +88,6 @@ function App() {
t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
),
);
setLoaded(true);
} else {
const themeList = JSON.parse(
themePlaylists.find((t: ThemePlaylist) => t.name === currentThemePlaylist)
@@ -97,9 +95,9 @@ function App() {
);
const filteredThemes = allThemes.filter((t: Theme) => themeList.includes(t.id));
setTheme('random');
setLoaded(true);
handleThemeChange(filteredThemes, false);
}
setLoaded(true);
}
}, [
isAllThemesFetched,
@@ -112,7 +110,7 @@ function App() {
<>
{theme && (
<MantineProvider theme={mantineTheme}>
<ToastContainer />
<Notifications />
<Loading loaded={loaded} />
<RouterProvider router={router} />
<ReactQueryDevtools initialIsOpen={false} />

62
src/hooks/useAPI.ts → src/hooks/useAPI.tsx
View File

@@ -1,6 +1,8 @@
import { Text } from '@mantine/core';
import { notifications } from '@mantine/notifications';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useRef } from 'react';
import { Flip, toast } from 'react-toastify';
import { FaCheck } from 'react-icons/fa';
import { VscLoading } from 'react-icons/vsc';
const url = `${import.meta.env.PROD ? import.meta.env.VITE_DOMAIN_PROD : import.meta.env.VITE_DOMAIN_DEV}/${import.meta.env.VITE_BASE_URL}`;
const headers: HeadersInit = {
@@ -40,21 +42,32 @@ export function useQueryAPI({ endpoint }: { endpoint: string }) {
}
export function useMutationAPI() {
const toastId = useRef<any>(null);
const notify = () => {
toastId.current = toast('Sending...', { position: 'bottom-right', autoClose: false });
};
const callEndpoint = async (
method: string,
endpoint: string,
body: object | undefined | null,
) => {
const id = notifications.show({
loading: true,
title: (
<Text fw={600} c={'var(--mantine-color-accent-0)'}>
{method} {endpoint}
</Text>
),
message: (
<Text c={'var(--mantine-color-primary-0)'}>
{body ? JSON.stringify(body) : 'Calling API...'}
</Text>
),
autoClose: false,
withCloseButton: false,
icon: <VscLoading size={24} />,
});
const options: { method: string; headers: HeadersInit | undefined; body: string } = {
method: method,
headers: headers,
body: JSON.stringify(body),
};
notify();
const response = await fetch(`${url}/${endpoint}`, options);
if (!response.ok) {
const responseData = await response.json();
@@ -68,11 +81,6 @@ export function useMutationAPI() {
loc: responseData.detail[0]?.loc,
type: responseData.detail[0]?.type,
});
toast.update(toastId.current, {
render: errorResponse,
type: 'error',
autoClose: 5000,
});
throw new Error(errorResponse);
}
if (typeof responseData.detail === 'object') {
@@ -83,11 +91,6 @@ export function useMutationAPI() {
endpoint: endpoint,
msg: responseData.detail.message,
});
toast.update(toastId.current, {
render: errorResponse,
type: 'error',
autoClose: 5000,
});
throw new Error(errorResponse);
}
const errorResponse = JSON.stringify({
@@ -97,18 +100,24 @@ export function useMutationAPI() {
endpoint: endpoint,
msg: responseData.detail,
});
toast.update(toastId.current, {
render: errorResponse,
type: 'error',
autoClose: 5000,
});
throw new Error(errorResponse);
}
toast.update(toastId.current, {
render: 'Success!',
autoClose: 2000,
transition: Flip,
setTimeout(() => {
notifications.update({
id: id,
loading: false,
title: (
<Text fw={600} c={'var(--mantine-color-accent-0)'}>
{method} Success!
</Text>
),
message: (
<Text c={'var(--mantine-color-primary-0)'}>Called endpoint {endpoint}</Text>
),
autoClose: 2500,
icon: <FaCheck size={24} />,
});
}, 2500);
return await response.json();
};
@@ -266,7 +275,6 @@ export function useFileUploadAPI() {
method: string;
endpoint: string;
body: object | FormData | undefined | null;
toastID?: string;
}) => callEndpoint(method, endpoint, body),
onMutate: () => {},
onSuccess: (variables) => {

4
src/index.css
View File

@@ -1,5 +1 @@
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap");
.Toastify__toast-theme--light {
backdrop-filter: blur(10px) !important;
}

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

@@ -18,7 +18,6 @@ import { useEffect, useState } from 'react';
import { FaDice, FaSync } from 'react-icons/fa';
import { FiMenu, FiPower, FiSettings, FiShuffle } from 'react-icons/fi';
import { useNavigate } from 'react-router-dom';
import { toast } from 'react-toastify';
import {
actionIconClasses,
buttonClasses,
@@ -50,7 +49,6 @@ function SettingsButton() {
const [selectedClient] = useState<WolClient>(wolClientData?.[0]);
const [overlayOpened, setOverlayOpened] = useState(false);
const navigate = useNavigate();
const notify = (notification: any) => toast(notification, { position: 'bottom-right' });
const {
currentTheme,
setCurrentTheme,
@@ -150,7 +148,6 @@ function SettingsButton() {
disabled={!wolClients?.length || selectedClient === null}
onClick={() => {
handleWakeRequest();
notify('Wake command sent');
}}
>
<Stack gap={0} align='center'>

2
src/pages/settings/components/Applications/DebouncedApplication.tsx
View File

@@ -85,7 +85,7 @@ function DebouncedApplication({
openModal();
}}
>
<FiTrash />
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
<Tooltip

2
src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
View File

@@ -73,7 +73,7 @@ function DebouncedBookmarkItem({
openModal();
}}
>
<FiTrash />
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
<Group w={'100%'} justify='center'>

2
src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
View File

@@ -180,7 +180,7 @@ function DebouncedGroupSettingsItem({
openModal();
}}
>
<FiTrash />
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
</Group>

2
src/pages/settings/components/Messages/DebouncedMessage.tsx
View File

@@ -55,7 +55,7 @@ function DebouncedMessage({
openModal();
}}
>
<FiTrash />
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
<TextInput

2
src/pages/settings/components/Search/DebouncedSearchProvider.tsx
View File

@@ -78,7 +78,7 @@ function DebouncedSearchProvider({
openModal();
}}
>
<FiTrash />
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
<Stack>

10
src/pages/settings/components/Shared/DeleteItemModal.tsx
View File

@@ -37,7 +37,7 @@ function DeleteItemModal({
<Modal.Body pb={'2rem'}>
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
{body}
<Group w={'100%'} justify='center' bottom={8}>
<Group justify='center' mt={'-1.5rem'}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
@@ -48,13 +48,7 @@ function DeleteItemModal({
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'white' } }}
onClick={handleClose}
>
Cancel
</Button>
<Button onClick={handleClose}>Cancel</Button>
</Group>
</Card>
</Modal.Body>

2
src/pages/settings/components/Theming/ThemePlaylistCard.tsx
View File

@@ -225,6 +225,7 @@ function ThemePlaylistCard({
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-primary-0)',
borderRadius: '4px',
zIndex: 160,
}}
>
Count: {themeList.length}
@@ -252,6 +253,7 @@ function ThemePlaylistCard({
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-primary-0)',
borderRadius: '4px',
zIndex: 160,
}}
>
Timed Themes

2
src/pages/settings/components/WoL/DebouncedWolClient.tsx
View File

@@ -76,7 +76,7 @@ function DebouncedWolClient({
openModal();
}}
>
<FiTrash />
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
<Group w={'100%'} justify='center'>

4
vite.config.ts
View File

@@ -13,14 +13,14 @@ export default defineConfig(({ mode }) => {
reactIconsSi: ['react-icons/si'],
reactIconsFa6: ['react-icons/fa6'],
reactIconsVsc: ['react-icons/vsc'],
mantine: ['@mantine/core', '@mantine/hooks'],
mantine: ['@mantine/core', '@mantine/hooks', '@mantine/notifications'],
tanstack: [
'@tanstack/react-query',
'@tanstack/react-query-devtools',
'@tanstack/react-query-persist-client',
],
recharts: ['recharts'],
utils: ['@hello-pangea/dnd', 'react-toastify', 'jotai'],
utils: ['@hello-pangea/dnd', 'jotai'],
},
},
},