From 4e9df7256b47e211417a86460ed03a8e7c4f6b85 Mon Sep 17 00:00:00 2001 From: Sean Edmunds Date: Tue, 15 Apr 2025 22:16:27 -0500 Subject: [PATCH] More typing --- src/App.tsx | 2 +- src/components/Loading.tsx | 2 +- src/components/ThemeProvider.tsx | 3 +- src/hooks/useCommonHooks.ts | 13 ++++--- .../homepage/components/Search/Search.tsx | 4 +- .../Applications/AppSettingsItem.tsx | 14 ++++++- .../Applications/DebouncedApplication.tsx | 2 +- .../Bookmarks/BookmarkSettingsItem.tsx | 3 +- .../Bookmarks/DebouncedBookmarkItem.tsx | 2 +- .../Bookmarks/DebouncedGroupSettingsItem.tsx | 14 ++++--- .../components/Messages/DebouncedMessage.tsx | 11 +++++- .../settings/components/Messages/Messages.tsx | 3 +- .../Search/DebouncedSearchProvider.tsx | 8 +++- .../Search/SearchProviderSettingsItem.tsx | 3 +- .../components/Shared/AddItemModal.tsx | 20 ++++++++-- .../components/Shared/DeleteItemModal.tsx | 12 +++++- .../components/Shared/SettingsHeader.tsx | 28 ++++++++++---- .../settings/components/Theming/ThemeCard.tsx | 18 +++++++-- .../components/Theming/ThemeMiniCard.tsx | 23 ++++++++---- .../components/Theming/ThemeModal.tsx | 37 ++++++++++--------- .../components/Theming/ThemeModalContent.tsx | 15 +++----- .../components/Theming/ThemePlaylistCard.tsx | 25 +++++++++---- .../components/Theming/ThemePlaylistModal.tsx | 34 +++++++++-------- .../components/Theming/ThemePlaylists.tsx | 9 ++--- .../settings/components/Theming/Themes.tsx | 28 ++++++++++++-- .../components/WoL/DebouncedWolClient.tsx | 9 ++++- .../components/WoL/WolClientSettingsItem.tsx | 3 +- 27 files changed, 235 insertions(+), 110 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 5e2d3b1..113e344 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -30,7 +30,7 @@ function App() { }); const { theme, setTheme, themeName, handleThemeChange, currentThemePlaylist } = useCommonHooks(); - const [loaded, setLoaded] = useState(false); + const [loaded, setLoaded] = useState(false); const overrides = createTheme({ white: theme?.backgroundColor, fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif', diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx index bc1679f..3316950 100644 --- a/src/components/Loading.tsx +++ b/src/components/Loading.tsx @@ -1,7 +1,7 @@ import { Stack } from '@mantine/core'; import { stackClasses } from 'styles'; -export function Loading({ loaded }: any) { +export function Loading({ loaded }: { loaded: boolean }) { return ( { + const reorder = (list: any, startIndex: number, endIndex: number) => { const result = Array.from(list); const [removed]: any = result.splice(startIndex, 1); result.splice(endIndex, 0, removed); return result; }; - const handleThemeChange = (themes: any, save: any) => { + const handleThemeChange = (themes: Theme[], save: boolean) => { const enabled = themes - .filter((t: any) => t.randomEnabled) - .filter((t: any) => t.name !== theme.name); + .filter((t: Theme) => t.randomEnabled) + .filter((t: Theme) => t.name !== theme.name); if (enabled.length === 0) { setTheme(themes[0]); save && setThemeName(themes[0].name); @@ -105,11 +106,11 @@ export function useCommonHooks() { } }; - const handleDelete = (item: any, endpoint: any) => { + const handleDelete = (item: any, endpoint: string) => { mutateAsync({ method: 'DELETE', endpoint: endpoint, body: item }); }; - function fixDigits(k: any) { + function fixDigits(k: number) { if (k < 10) { return `0${k}`; } diff --git a/src/pages/homepage/components/Search/Search.tsx b/src/pages/homepage/components/Search/Search.tsx index 16df514..0582697 100644 --- a/src/pages/homepage/components/Search/Search.tsx +++ b/src/pages/homepage/components/Search/Search.tsx @@ -63,8 +63,8 @@ export default function Search({ const handleSearchHistoryItem = (item: any) => { const url = - providers.find((provider: any) => provider.prefix === item.option.prefix)?.url ?? - 'https://www.google.com/search?q='; + providers.find((provider: Provider) => provider.prefix === item.option.prefix) + ?.url ?? 'https://www.google.com/search?q='; open(`${url}${item.option.searchTerm}`, '_self'); }; diff --git a/src/pages/settings/components/Applications/AppSettingsItem.tsx b/src/pages/settings/components/Applications/AppSettingsItem.tsx index 0302833..b3a400a 100644 --- a/src/pages/settings/components/Applications/AppSettingsItem.tsx +++ b/src/pages/settings/components/Applications/AppSettingsItem.tsx @@ -4,7 +4,19 @@ import { useState } from 'react'; import { FiAlertCircle } from 'react-icons/fi'; import { actionIconClasses, boxClasses, textClasses } from 'styles'; -function AppSettingsItem({ url, icon, name, enabled, allIcons }: any) { +function AppSettingsItem({ + url, + icon, + name, + enabled, + allIcons, +}: { + url: string; + icon: string; + name: string; + enabled: number; + allIcons: any; +}) { const Icon = allIcons[icon]; const [textDecoration, setTextDecoration] = useState('none'); const [hover, setHover] = useState(false); diff --git a/src/pages/settings/components/Applications/DebouncedApplication.tsx b/src/pages/settings/components/Applications/DebouncedApplication.tsx index f3112de..a609376 100644 --- a/src/pages/settings/components/Applications/DebouncedApplication.tsx +++ b/src/pages/settings/components/Applications/DebouncedApplication.tsx @@ -22,7 +22,7 @@ function DebouncedApplication({ application, setIsOpen, allIcons, -}: { application: Application; setIsOpen: any; allIcons: any }) { +}: { application: Application; setIsOpen: (isOpen: boolean) => void; allIcons: any }) { const { theme, handleDelete } = useCommonHooks(); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const { mutateAsync } = useMutationAPI(); diff --git a/src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx b/src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx index 2252698..40ead35 100644 --- a/src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx +++ b/src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx @@ -1,8 +1,9 @@ import { ActionIcon, Box, Group, Text } from '@mantine/core'; import { useState } from 'react'; import { FiEdit } from 'react-icons/fi'; +import type { Bookmark } from 'types'; -function BookmarkSettingsItem({ bookmark }: any) { +function BookmarkSettingsItem({ bookmark }: { bookmark: Bookmark }) { const [hover, setHover] = useState(false); return ( void }) { const { theme, handleDelete } = useCommonHooks(); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const { mutateAsync } = useMutationAPI(); diff --git a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx index eff3a0e..f35632b 100644 --- a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx +++ b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx @@ -1,4 +1,10 @@ -import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'; +import { + DragDropContext, + Draggable, + type DraggableProvided, + Droppable, + type DroppableProvided, +} from '@hello-pangea/dnd'; import { ActionIcon, Box, @@ -212,7 +218,7 @@ function DebouncedGroupSettingsItem({ - {(provided) => ( + {(provided: DroppableProvided) => ( {bookmarks.map((bookmark: Bookmark) => ( - {(provided: any) => ( + {(provided: DraggableProvided) => ( - {provided.placeholder} )} ))} - {provided.placeholder} )} diff --git a/src/pages/settings/components/Messages/DebouncedMessage.tsx b/src/pages/settings/components/Messages/DebouncedMessage.tsx index 3795a91..d6c04d5 100644 --- a/src/pages/settings/components/Messages/DebouncedMessage.tsx +++ b/src/pages/settings/components/Messages/DebouncedMessage.tsx @@ -12,9 +12,18 @@ import { useDisclosure } from '@mantine/hooks'; import { useCommonHooks } from 'hooks'; import { FiTrash } from 'react-icons/fi'; import { cardClasses, textInputClasses } from 'styles'; +import type { Message } from 'types'; import DeleteItemModal from '../Shared/DeleteItemModal'; -function DebouncedMessage({ label, message, setMessage }: any) { +function DebouncedMessage({ + label, + message, + setMessage, +}: { + label: string; + message: Message; + setMessage: (message: Message) => void; +}) { const { theme, handleDelete } = useCommonHooks(); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); return ( diff --git a/src/pages/settings/components/Messages/Messages.tsx b/src/pages/settings/components/Messages/Messages.tsx index a6a18b3..615155b 100644 --- a/src/pages/settings/components/Messages/Messages.tsx +++ b/src/pages/settings/components/Messages/Messages.tsx @@ -1,12 +1,13 @@ import { Button, Divider, Grid, GridCol, Group, Stack, TextInput } from '@mantine/core'; import { useDebouncedValue, useDisclosure } from '@mantine/hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; -import DebouncedMessage from 'pages/settings/components/Messages/DebouncedMessage'; import { useEffect, useState } from 'react'; import { textInputClasses } from 'styles'; import type { Message } from 'types'; import AddItemModal from '../Shared/AddItemModal'; import SettingsHeader from '../Shared/SettingsHeader'; +import DebouncedMessage from './DebouncedMessage'; + const MessageSettings = () => { const endpoint = 'api/messages'; const { data: messageData, isFetched: isMessagesFetched } = useQueryAPI({ diff --git a/src/pages/settings/components/Search/DebouncedSearchProvider.tsx b/src/pages/settings/components/Search/DebouncedSearchProvider.tsx index 66f1c19..8e49247 100644 --- a/src/pages/settings/components/Search/DebouncedSearchProvider.tsx +++ b/src/pages/settings/components/Search/DebouncedSearchProvider.tsx @@ -16,7 +16,13 @@ import { cardClasses, textInputClasses } from 'styles'; import type { Provider } from 'types'; import DeleteItemModal from '../Shared/DeleteItemModal'; -function DebouncedSearchProvider({ searchProvider, setIsOpen }: any) { +function DebouncedSearchProvider({ + searchProvider, + setIsOpen, +}: { + searchProvider: Provider; + setIsOpen: (isOpen: boolean) => void; +}) { const { theme, handleDelete } = useCommonHooks(); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const { mutateAsync } = useMutationAPI(); diff --git a/src/pages/settings/components/Search/SearchProviderSettingsItem.tsx b/src/pages/settings/components/Search/SearchProviderSettingsItem.tsx index 72c93ff..6512609 100644 --- a/src/pages/settings/components/Search/SearchProviderSettingsItem.tsx +++ b/src/pages/settings/components/Search/SearchProviderSettingsItem.tsx @@ -1,8 +1,9 @@ import { Card, Stack, Text } from '@mantine/core'; import HintItem from 'components/HelpModal/HintItem'; import { cardClasses } from 'styles'; +import type { Provider } from 'types'; -function SearchProviderSettingsItem({ provider }: any) { +function SearchProviderSettingsItem({ provider }: { provider: Provider }) { return ( diff --git a/src/pages/settings/components/Shared/AddItemModal.tsx b/src/pages/settings/components/Shared/AddItemModal.tsx index c7f9b6d..0a34084 100644 --- a/src/pages/settings/components/Shared/AddItemModal.tsx +++ b/src/pages/settings/components/Shared/AddItemModal.tsx @@ -1,8 +1,19 @@ import { Card, Modal } from '@mantine/core'; import { useCommonHooks } from 'hooks'; +import type React from 'react'; import { cardClasses, modalClasses } from 'styles'; -function AddItemModal({ modalOpened, handleClose, body, title }: any) { +function AddItemModal({ + modalOpened, + handleClose, + body, + title, +}: { + modalOpened: boolean; + handleClose: () => void; + body: React.ReactNode; + title: string; +}) { const { isMobile, modalStyle } = useCommonHooks(); return ( void; + body: React.ReactNode; + title: string; +}) { const { isMobile, modalStyle } = useCommonHooks(); return ( void; + title: string; + tooltip: any; + searchValue: string; + setSearchValue: (searchValue: string) => void; + searchPlaceholder: string; +}) { const { isMobile, theme, modalStyle } = useCommonHooks(); return ( void; + allThemes: Theme[]; + themePlaylists: any; +}) { const [hover, setHover] = useState(false); const [shiftEdit, setShiftEdit] = useState(0); const [shiftShuffle, setShiftShuffle] = useState(0); @@ -263,11 +273,11 @@ function ThemeCard({ cardTheme, handleOpen, allThemes, themePlaylists }: any) { { const themeList = JSON.parse( - themePlaylists.find( + themePlaylists?.find( (t: ThemePlaylist) => t.name === currentThemePlaylist, ).themeList, ); - const filteredThemes = allThemes.filter((t: any) => + const filteredThemes = allThemes.filter((t: Theme) => themeList.includes(t.id), ); handleThemeChange(filteredThemes, false); diff --git a/src/pages/settings/components/Theming/ThemeMiniCard.tsx b/src/pages/settings/components/Theming/ThemeMiniCard.tsx index feb7329..242e0c6 100644 --- a/src/pages/settings/components/Theming/ThemeMiniCard.tsx +++ b/src/pages/settings/components/Theming/ThemeMiniCard.tsx @@ -1,6 +1,13 @@ import { Group, Text } from '@mantine/core'; -function ThemeMiniCard({ allThemes, item }: any) { - const theme = allThemes.find((theme: any) => theme.id === item); +import type { Theme } from 'types'; +function ThemeMiniCard({ + allThemes, + item, +}: { + allThemes: Theme[]; + item: number; +}) { + const theme = allThemes.find((theme: Theme) => theme.id === item); return ( - {allThemes.find((theme: any) => theme.id === item)?.name} + {allThemes.find((theme: Theme) => theme.id === item)?.name} ); diff --git a/src/pages/settings/components/Theming/ThemeModal.tsx b/src/pages/settings/components/Theming/ThemeModal.tsx index 4d66a75..2124a70 100644 --- a/src/pages/settings/components/Theming/ThemeModal.tsx +++ b/src/pages/settings/components/Theming/ThemeModal.tsx @@ -15,6 +15,7 @@ import { useCommonHooks } from 'hooks'; import { useEffect, useRef, useState } from 'react'; import { FiSave, FiX } from 'react-icons/fi'; import { modalClasses, textClasses, textInputClasses } from 'styles'; +import type { Theme } from 'types'; import ThemeModalContent from './ThemeModalContent'; function ThemeModal({ @@ -22,38 +23,40 @@ function ThemeModal({ handleClose, selectedTheme, setSelectedTheme, - setColorId, colorId, + setColorId, + colorValue, setColorValue, openPicker, backgroundList, pickerOpen, - colorValue, closePicker, handleSaveTheme, -}: any) { +}: { + opened: boolean; + handleClose: () => void; + selectedTheme: Theme; + setSelectedTheme: (selectedTheme: Theme) => void; + colorId: string; + setColorId: (colorId: string) => void; + colorValue: string; + setColorValue: (colorValue: string) => void; + openPicker: () => void; + backgroundList: string[]; + pickerOpen: boolean; + closePicker: () => void; + handleSaveTheme: () => void; +}) { const { theme, isMobile } = useCommonHooks(); const viewportRef = useRef(null); const [query, setQuery] = useState(''); const [hovered, setHovered] = useState(-1); - const filtered = backgroundList.filter((item: any) => + const filtered = backgroundList.filter((item: string) => item.toLowerCase().includes(query.toLowerCase()), ); - if (selectedTheme.name === undefined) { - setSelectedTheme({ - id: undefined, - name: 'default', - backgroundImage: 'none', - backgroundColor: '#EEEEEE', - searchColor: '#00000033', - primaryColor: '#222222', - accentColor: '#5c5c5c', - borderColor: '#5c5c5c', - }); - } const re = /(?:\.([^.]+))?$/; - const items = filtered.map((item: any, index: any) => ( + const items = filtered.map((item: string, index: number) => ( { +export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) { + const ExampleApp = ({ theme }: { theme: Theme }) => { const [textDecoration, setTextDecoration] = useState('none'); return ( @@ -22,11 +23,7 @@ export default function ThemeModalContent({ selectedTheme }: any) { paddingTop: '15px', }} > - + void; + allThemes: Theme[]; +}) { const [hover, setHover] = useState(false); const { setThemeName, setCurrentThemePlaylist, theme, handleDelete } = useCommonHooks(); const syncableLists = ['All', 'Backgrounds', 'No Backgrounds']; @@ -36,7 +45,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) { > @@ -120,7 +129,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) { body: { id: cardPlaylist.id, name: 'All', - themeList: JSON.stringify(allThemes.map((theme: any) => theme.id)), + themeList: JSON.stringify(allThemes.map((theme: Theme) => theme.id)), }, }); } @@ -134,9 +143,9 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) { themeList: JSON.stringify( allThemes .filter( - (theme: any) => theme.backgroundImage.toLowerCase() !== 'none', + (theme: Theme) => theme.backgroundImage.toLowerCase() !== 'none', ) - .map((theme: any) => theme.id), + .map((theme: Theme) => theme.id), ), }, }); @@ -151,9 +160,9 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) { themeList: JSON.stringify( allThemes .filter( - (theme: any) => theme.backgroundImage.toLowerCase() === 'none', + (theme: Theme) => theme.backgroundImage.toLowerCase() === 'none', ) - .map((theme: any) => theme.id), + .map((theme: Theme) => theme.id), ), }, }); @@ -243,7 +252,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) { {themeList.length > 0 && - themeList.map((item: any) => { + themeList.map((item: number) => { return ( ); diff --git a/src/pages/settings/components/Theming/ThemePlaylistModal.tsx b/src/pages/settings/components/Theming/ThemePlaylistModal.tsx index 7437f49..939a079 100644 --- a/src/pages/settings/components/Theming/ThemePlaylistModal.tsx +++ b/src/pages/settings/components/Theming/ThemePlaylistModal.tsx @@ -12,6 +12,7 @@ import { import { useCommonHooks } from 'hooks'; import { useEffect, useState } from 'react'; import { modalClasses, selectClasses, textInputClasses } from 'styles'; +import type { Theme } from 'types'; import ThemeMiniCard from './ThemeMiniCard'; function ThemePlaylistModal({ @@ -22,8 +23,16 @@ function ThemePlaylistModal({ setSelectedPlaylist, handleSavePlaylist, allThemes, -}: any) { - const { theme, isMobile } = useCommonHooks(); +}: { + opened: boolean; + handleClose: () => void; + createPlaylist: any; + selectedPlaylist: any; + setSelectedPlaylist: (selectedPlaylist: any) => void; + handleSavePlaylist: () => void; + allThemes: Theme[]; +}) { + const { theme, isMobile, modalStyle } = useCommonHooks(); const [themeList, setThemeList] = useState('[]'); useEffect(() => { if (selectedPlaylist.themeList) { @@ -50,14 +59,7 @@ function ThemePlaylistModal({ handleClose(); setThemeList('[]'); }} - 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}")`, - }} + style={modalStyle} > @@ -95,7 +97,7 @@ function ThemePlaylistModal({ labelProps={{ display: 'none' }} placeholder='Select Theme' defaultValue={themeList['0']} - data={allThemes?.map((theme: any) => { + data={allThemes?.map((theme: Theme) => { return { value: `${theme.id}`, label: theme.name, @@ -128,7 +130,7 @@ function ThemePlaylistModal({ labelProps={{ display: 'none' }} placeholder='Select Theme' defaultValue={themeList['1']} - data={allThemes?.map((theme: any) => { + data={allThemes?.map((theme: Theme) => { return { value: `${theme.id}`, label: theme.name, @@ -161,7 +163,7 @@ function ThemePlaylistModal({ labelProps={{ display: 'none' }} placeholder='Select Theme' defaultValue={themeList['2']} - data={allThemes?.map((theme: any) => { + data={allThemes?.map((theme: Theme) => { return { value: `${theme.id}`, label: theme.name, @@ -194,7 +196,7 @@ function ThemePlaylistModal({ labelProps={{ display: 'none' }} placeholder='Select Theme' defaultValue={themeList['3']} - data={allThemes?.map((theme: any) => { + data={allThemes?.map((theme: Theme) => { return { value: `${theme.id}`, label: theme.name, @@ -225,7 +227,7 @@ function ThemePlaylistModal({ ) : ( {selectedPlaylist.name !== 'Time of Day' && - allThemes?.map((miniTheme: any) => { + allThemes.map((miniTheme: Theme) => { const newThemeList = themeList; return ( - + ); })} diff --git a/src/pages/settings/components/Theming/ThemePlaylists.tsx b/src/pages/settings/components/Theming/ThemePlaylists.tsx index a75cd4d..8713680 100644 --- a/src/pages/settings/components/Theming/ThemePlaylists.tsx +++ b/src/pages/settings/components/Theming/ThemePlaylists.tsx @@ -21,12 +21,11 @@ function ThemePlaylists() { const { mutateAsync } = useMutationAPI(); const [opened, { open, close }] = useDisclosure(false); const [selectedPlaylist, setSelectedPlaylist] = useState({}); - const { currentThemePlaylist, setCurrentThemePlaylist, theme, isMobile } = - useCommonHooks(); + const { currentThemePlaylist, theme, isMobile } = useCommonHooks(); const [searchValue, setSearchValue] = useState(''); const [debouncedSearch] = useDebouncedValue(searchValue, 500); - const handleOpen = (playlist: any) => { + const handleOpen = (playlist: ThemePlaylist) => { setSelectedPlaylist(playlist); open(); }; @@ -106,8 +105,6 @@ function ThemePlaylists() { @@ -131,7 +128,7 @@ function ThemePlaylists() { ?.filter((a: ThemePlaylist) => a.name.toLowerCase().includes(debouncedSearch.toLowerCase()), ) - .sort((a: any, b: any) => (a.name > b.name ? 1 : -1)) + .sort((a: ThemePlaylist, b: ThemePlaylist) => (a.name > b.name ? 1 : -1)) .map((cardPlaylist: ThemePlaylist) => { return ( diff --git a/src/pages/settings/components/Theming/Themes.tsx b/src/pages/settings/components/Theming/Themes.tsx index 0e7c7e8..a222771 100644 --- a/src/pages/settings/components/Theming/Themes.tsx +++ b/src/pages/settings/components/Theming/Themes.tsx @@ -9,6 +9,7 @@ import type { Theme } from 'types'; import SettingsHeader from '../Shared/SettingsHeader'; import ThemeCard from './ThemeCard'; import ThemeModal from './ThemeModal'; + function ThemesSettings() { const themesEndpoint = 'api/themes'; const backgroundsEndpoint = 'api/backgrounds'; @@ -26,7 +27,17 @@ function ThemesSettings() { const [colorId, setColorId] = useState(''); const [colorValue, setColorValue] = useState('#000000'); const [backgroundList, setBackgroundList] = useState(['None']); - const [selectedTheme, setSelectedTheme] = useState({}); + const [selectedTheme, setSelectedTheme] = useState({ + id: undefined, + name: 'default', + backgroundImage: 'none', + backgroundColor: '#EEEEEE', + searchColor: '#00000033', + primaryColor: '#222222', + accentColor: '#5c5c5c', + borderColor: '#5c5c5c', + randomEnabled: 0, + }); const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false); const [searchValue, setSearchValue] = useState(''); const [debouncedSearch] = useDebouncedValue(searchValue, 500); @@ -41,12 +52,22 @@ function ThemesSettings() { const handleClose = () => { close(); closePicker(); - setSelectedTheme({}); + setSelectedTheme({ + id: undefined, + name: 'default', + backgroundImage: 'none', + backgroundColor: '#EEEEEE', + searchColor: '#00000033', + primaryColor: '#222222', + accentColor: '#5c5c5c', + borderColor: '#5c5c5c', + randomEnabled: 0, + }); }; const handleSaveTheme = () => { mutateAsync({ - method: selectedTheme.id === undefined ? 'POST' : 'PATCH', + method: selectedTheme?.id === undefined ? 'POST' : 'PATCH', endpoint: themesEndpoint, body: selectedTheme, }); @@ -65,7 +86,6 @@ function ThemesSettings() { handleClose={handleClose} selectedTheme={selectedTheme} setSelectedTheme={setSelectedTheme} - theme={theme} setColorId={setColorId} colorId={colorId} setColorValue={setColorValue} diff --git a/src/pages/settings/components/WoL/DebouncedWolClient.tsx b/src/pages/settings/components/WoL/DebouncedWolClient.tsx index 6d5a3ca..c102d41 100644 --- a/src/pages/settings/components/WoL/DebouncedWolClient.tsx +++ b/src/pages/settings/components/WoL/DebouncedWolClient.tsx @@ -13,9 +13,16 @@ import { useCommonHooks, useMutationAPI } from 'hooks'; import { useEffect, useState } from 'react'; import { FiTrash } from 'react-icons/fi'; import { cardClasses, textInputClasses } from 'styles'; +import type { WolClient } from 'types'; import DeleteItemModal from '../Shared/DeleteItemModal'; -function DebouncedWolClient({ wolClient, setIsOpen }: any) { +function DebouncedWolClient({ + wolClient, + setIsOpen, +}: { + wolClient: WolClient; + setIsOpen: (isOpen: boolean) => void; +}) { const { theme, handleDelete } = useCommonHooks(); const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false); const { mutateAsync } = useMutationAPI(); diff --git a/src/pages/settings/components/WoL/WolClientSettingsItem.tsx b/src/pages/settings/components/WoL/WolClientSettingsItem.tsx index 89a5863..0eedfb5 100644 --- a/src/pages/settings/components/WoL/WolClientSettingsItem.tsx +++ b/src/pages/settings/components/WoL/WolClientSettingsItem.tsx @@ -1,8 +1,9 @@ import { Card, Stack, Text } from '@mantine/core'; import { FaLaptop } from 'react-icons/fa'; import { cardClasses } from 'styles'; +import type { WolClient } from 'types'; -function WolClientSettingsItem({ client }: any) { +function WolClientSettingsItem({ client }: { client: WolClient }) { return (