From c3f0ff7c4d5b5298e7725bf507aea22125c47125 Mon Sep 17 00:00:00 2001 From: Sean Edmunds Date: Tue, 29 Apr 2025 14:54:22 -0500 Subject: [PATCH] Minor changes to styles and packages --- package-lock.json | 43 ++++++++----- package.json | 2 +- src/App.tsx | 10 ++- src/hooks/{useAPI.ts => useAPI.tsx} | 64 +++++++++++-------- src/index.css | 4 -- .../SettingsButton/SettingsButton.tsx | 3 - .../Applications/DebouncedApplication.tsx | 2 +- .../Bookmarks/DebouncedBookmarkItem.tsx | 2 +- .../Bookmarks/DebouncedGroupSettingsItem.tsx | 2 +- .../components/Messages/DebouncedMessage.tsx | 2 +- .../Search/DebouncedSearchProvider.tsx | 2 +- .../components/Shared/DeleteItemModal.tsx | 10 +-- .../components/Theming/ThemePlaylistCard.tsx | 2 + .../components/WoL/DebouncedWolClient.tsx | 2 +- vite.config.ts | 4 +- 15 files changed, 81 insertions(+), 73 deletions(-) rename src/hooks/{useAPI.ts => useAPI.tsx} (88%) diff --git a/package-lock.json b/package-lock.json index 7deabca..a916c0e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index e2a9fa1..52c658a 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/App.tsx b/src/App.tsx index ea12084..8a6db75 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 && ( - + diff --git a/src/hooks/useAPI.ts b/src/hooks/useAPI.tsx similarity index 88% rename from src/hooks/useAPI.ts rename to src/hooks/useAPI.tsx index 7f39a13..1293b15 100644 --- a/src/hooks/useAPI.ts +++ b/src/hooks/useAPI.tsx @@ -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(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: ( + + {method} {endpoint} + + ), + message: ( + + {body ? JSON.stringify(body) : 'Calling API...'} + + ), + autoClose: false, + withCloseButton: false, + icon: , + }); 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: ( + + {method} Success! + + ), + message: ( + Called endpoint {endpoint} + ), + autoClose: 2500, + icon: , + }); + }, 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) => { diff --git a/src/index.css b/src/index.css index 453e692..2e9cb95 100644 --- a/src/index.css +++ b/src/index.css @@ -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; -} diff --git a/src/pages/homepage/components/SettingsButton/SettingsButton.tsx b/src/pages/homepage/components/SettingsButton/SettingsButton.tsx index cdece57..a86b2d3 100644 --- a/src/pages/homepage/components/SettingsButton/SettingsButton.tsx +++ b/src/pages/homepage/components/SettingsButton/SettingsButton.tsx @@ -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(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'); }} > diff --git a/src/pages/settings/components/Applications/DebouncedApplication.tsx b/src/pages/settings/components/Applications/DebouncedApplication.tsx index a1c1e7d..0c3faf9 100644 --- a/src/pages/settings/components/Applications/DebouncedApplication.tsx +++ b/src/pages/settings/components/Applications/DebouncedApplication.tsx @@ -85,7 +85,7 @@ function DebouncedApplication({ openModal(); }} > - + - + diff --git a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx index 7e056c4..632d5dd 100644 --- a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx +++ b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx @@ -180,7 +180,7 @@ function DebouncedGroupSettingsItem({ openModal(); }} > - + diff --git a/src/pages/settings/components/Messages/DebouncedMessage.tsx b/src/pages/settings/components/Messages/DebouncedMessage.tsx index a0b2c30..bf47eec 100644 --- a/src/pages/settings/components/Messages/DebouncedMessage.tsx +++ b/src/pages/settings/components/Messages/DebouncedMessage.tsx @@ -55,7 +55,7 @@ function DebouncedMessage({ openModal(); }} > - + - + diff --git a/src/pages/settings/components/Shared/DeleteItemModal.tsx b/src/pages/settings/components/Shared/DeleteItemModal.tsx index f2688d0..cdd7de7 100644 --- a/src/pages/settings/components/Shared/DeleteItemModal.tsx +++ b/src/pages/settings/components/Shared/DeleteItemModal.tsx @@ -37,7 +37,7 @@ function DeleteItemModal({ {body} - + - + diff --git a/src/pages/settings/components/Theming/ThemePlaylistCard.tsx b/src/pages/settings/components/Theming/ThemePlaylistCard.tsx index 82e48d7..79e898b 100644 --- a/src/pages/settings/components/Theming/ThemePlaylistCard.tsx +++ b/src/pages/settings/components/Theming/ThemePlaylistCard.tsx @@ -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 diff --git a/src/pages/settings/components/WoL/DebouncedWolClient.tsx b/src/pages/settings/components/WoL/DebouncedWolClient.tsx index 3a4dca9..50bfa40 100644 --- a/src/pages/settings/components/WoL/DebouncedWolClient.tsx +++ b/src/pages/settings/components/WoL/DebouncedWolClient.tsx @@ -76,7 +76,7 @@ function DebouncedWolClient({ openModal(); }} > - + diff --git a/vite.config.ts b/vite.config.ts index 4b290b7..52fcd64 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -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'], }, }, },