From 9430db990b619bdd7768ffecda3b3411acc3fcca Mon Sep 17 00:00:00 2001 From: Sean Edmunds Date: Thu, 30 Jan 2025 17:00:26 -0600 Subject: [PATCH] Standardized --- src/App.tsx | 33 ++++++++++--------- src/components/WeatherModal/WeatherModal.tsx | 19 ++++++----- src/hooks/useCommonHooks.ts | 1 + src/pages/homepage/Homepage.tsx | 30 ++++++++--------- .../components/Applications/Applications.tsx | 3 +- .../components/Bookmarks/Bookmarks.tsx | 4 +-- .../homepage/components/Header/Header.tsx | 5 +-- .../homepage/components/Search/Search.tsx | 19 +++++------ .../homepage/components/SettingsButton.tsx | 10 +++--- src/pages/settings/Settings.tsx | 1 + .../settings/components/Applications.tsx | 2 +- src/pages/settings/components/Bookmarks.tsx | 4 +-- src/pages/settings/components/Categories.tsx | 2 +- src/pages/settings/components/Messages.tsx | 1 + .../settings/components/Personalization.tsx | 2 ++ .../settings/components/SearchProviders.tsx | 1 - src/pages/settings/components/ThemeCard.tsx | 1 + src/pages/settings/components/ThemeModal.tsx | 1 + .../settings/components/ThemeModalContent.tsx | 2 ++ src/pages/settings/components/Themes.tsx | 28 ++++++++-------- 20 files changed, 89 insertions(+), 80 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index b6c76d1..1311cf4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -28,16 +28,12 @@ function App() { endpoint: 'api/themes', }); const { theme, setTheme, themeName, handleThemeChange } = useCommonHooks(); - useEffect(() => { - if (allThemes && themeName) { - if (themeName !== 'random') { - const temp = allThemes.find((t: any) => t.name === themeName); - setTheme(temp); - } else { - handleThemeChange(allThemes, false); - } - } - }, [isAllThemesFetched, themeName]); + const overrides = createTheme({ + white: theme?.backgroundColor, + fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif', + }); + const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides); + const router = createBrowserRouter( createRoutesFromElements( @@ -55,11 +51,18 @@ function App() { , ), ); - const overrides = createTheme({ - white: theme?.backgroundColor, - fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif', - }); - const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides); + + useEffect(() => { + if (allThemes && themeName) { + if (themeName !== 'random') { + const temp = allThemes.find((t: any) => t.name === themeName); + setTheme(temp); + } else { + handleThemeChange(allThemes, false); + } + } + }, [isAllThemesFetched, themeName]); + return ( <> {theme && ( diff --git a/src/components/WeatherModal/WeatherModal.tsx b/src/components/WeatherModal/WeatherModal.tsx index a002e4c..0e0078a 100644 --- a/src/components/WeatherModal/WeatherModal.tsx +++ b/src/components/WeatherModal/WeatherModal.tsx @@ -14,25 +14,27 @@ export function WeatherModal({ closeWeatherModal, weatherModalOpened, }: any) { - const { data: personal, isFetched: personalIsFetched } = useQueryAPI({ + const { data: personalData, isFetched: personalIsFetched } = useQueryAPI({ endpoint: 'api/personalData', }); - const [personalData, setPersonalData] = useState([]); const { data: hourly } = useWeatherAPI({ endpoint: 'hourly', office: points?.properties.gridId, x: points?.properties.gridX, y: points?.properties.gridY, }); - useEffect(() => { - if (personal && personalIsFetched) { - setPersonalData(personal); - } - }, [personal, personalIsFetched]); + const [personal, setPersonal] = useState([]); const [hourlyForecast, setHourlyForecast] = useState([]); const [sunset, setSunset] = useState(100); const { theme, isMobile, setProviderLabel, setSearchValue, setProviderURL } = useCommonHooks(); + + useEffect(() => { + if (personalData && personalIsFetched) { + setPersonal(personalData); + } + }, [personalData, personalIsFetched]); + useEffect(() => { if (hourly) { setHourlyForecast(hourly.properties.periods.slice(1, 13)); @@ -51,6 +53,7 @@ export function WeatherModal({ ); } }, [hourlyForecast]); + return ( - {personalData?.[0]?.physicalAddress} + {personal?.[0]?.physicalAddress} diff --git a/src/hooks/useCommonHooks.ts b/src/hooks/useCommonHooks.ts index 50e2e9f..7388a64 100644 --- a/src/hooks/useCommonHooks.ts +++ b/src/hooks/useCommonHooks.ts @@ -25,6 +25,7 @@ export function useCommonHooks() { const [searchValue, setSearchValue] = useState(''); const [providerLabel, setProviderLabel] = useState('Google Search'); const [providerURL, setProviderURL] = useState('https://www.google.com/search?q='); + const handleThemeChange = (themes: any, save: any) => { const enabled = themes .filter((t: any) => t.randomEnabled) diff --git a/src/pages/homepage/Homepage.tsx b/src/pages/homepage/Homepage.tsx index 2fd202f..78a5fe5 100644 --- a/src/pages/homepage/Homepage.tsx +++ b/src/pages/homepage/Homepage.tsx @@ -14,7 +14,6 @@ export function Homepage() { const { data: personal, isFetched: personalIsFetched } = useQueryAPI({ endpoint: 'api/personalData', }); - const [personalData, setPersonalData] = useState([]); const { data: messageData, isFetching: isMessagesFetching, @@ -22,7 +21,21 @@ export function Homepage() { } = useQueryAPI({ endpoint: 'api/messages', }); + const [personalData, setPersonalData] = useState([]); const [messages, setMessages] = useState([]); + const [displayedGreeting, setDisplayedGreeting] = useState(''); + const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] = + useDisclosure(false); + const { appFilter, bookmarkFilter, isMobile } = useCommonHooks(); + const dateOptions: Intl.DateTimeFormatOptions = !isMobile + ? { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric', + } + : {}; + const date = new Date().toLocaleDateString('en-US', dateOptions); useEffect(() => { if (messageData && isMessagesFetched) { @@ -34,21 +47,6 @@ export function Homepage() { setPersonalData(personal); } }, [personal, personalIsFetched]); - const [displayedGreeting, setDisplayedGreeting] = useState(''); - const { appFilter, bookmarkFilter, isMobile } = useCommonHooks(); - - const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] = - useDisclosure(false); - - const dateOptions: Intl.DateTimeFormatOptions = !isMobile - ? { - weekday: 'long', - year: 'numeric', - month: 'long', - day: 'numeric', - } - : {}; - const date = new Date().toLocaleDateString('en-US', dateOptions); useEffect(() => { if (messages && personalData) { diff --git a/src/pages/homepage/components/Applications/Applications.tsx b/src/pages/homepage/components/Applications/Applications.tsx index df10cdd..e3e1282 100644 --- a/src/pages/homepage/components/Applications/Applications.tsx +++ b/src/pages/homepage/components/Applications/Applications.tsx @@ -8,14 +8,15 @@ function Applications({ contentType }: any) { const { data: apps, isFetching: isAppsFetching } = useQueryAPI({ endpoint: 'api/apps', }); - const { isMobile } = useCommonHooks(); const [applicationData, setApplicationData] = useState([]); + const { isMobile } = useCommonHooks(); useEffect(() => { if (apps && !isAppsFetching) { setApplicationData(apps); } }, [apps, isAppsFetching]); + return ( <> {applicationData.length > 0 && contentType.length > 0 && ( diff --git a/src/pages/homepage/components/Bookmarks/Bookmarks.tsx b/src/pages/homepage/components/Bookmarks/Bookmarks.tsx index 42f5e72..557e807 100644 --- a/src/pages/homepage/components/Bookmarks/Bookmarks.tsx +++ b/src/pages/homepage/components/Bookmarks/Bookmarks.tsx @@ -12,8 +12,9 @@ function Links({ contentType }: any) { endpoint: 'api/categories', }); const [bookmarkData, setBookmarkData] = useState([]); - const [groups, setGroups] = useState([]); + const { isMobile } = useCommonHooks(); + useEffect(() => { if (linkData && linksIsFetched) { setBookmarkData(linkData); @@ -28,7 +29,6 @@ function Links({ contentType }: any) { setGroups(groupList); } }, [groupData, groupsIsFetched]); - const { isMobile } = useCommonHooks(); return ( <> diff --git a/src/pages/homepage/components/Header/Header.tsx b/src/pages/homepage/components/Header/Header.tsx index 436a08f..46b8108 100644 --- a/src/pages/homepage/components/Header/Header.tsx +++ b/src/pages/homepage/components/Header/Header.tsx @@ -20,10 +20,10 @@ function Header({ const { data: personal, isFetched: personalIsFetched } = useQueryAPI({ endpoint: 'api/personalData', }); - const [personalData, setPersonalData] = useState([]); - const { isMobile } = useCommonHooks(); const [time, setTime] = useState(new Date()); + const { isMobile } = useCommonHooks(); + function fixDigits(k: any) { if (k < 10) { return `0${k}`; @@ -68,6 +68,7 @@ function Header({ }); } }, [weather, basicWeather]); + return ( ([]); - - useEffect(() => { - if (providers && providersIsFetched) { - setProviderData(providers); - } - }, [providers, providersIsFetched]); - + const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] = + useDisclosure(false); const { providerLabel, setProviderLabel, @@ -34,9 +28,6 @@ export default function Search({ setSearchValue, } = useCommonHooks(); - const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] = - useDisclosure(false); - const handleKeyPress = (item: any) => { let option = ''; let subtext = ''; @@ -78,6 +69,12 @@ export default function Search({ } }; + useEffect(() => { + if (providers && providersIsFetched) { + setProviderData(providers); + } + }, [providers, providersIsFetched]); + return ( ([]); + const { mutateAsync: wakeRequest } = useMutationAPI(); + const [allThemeData, setAllThemeData] = useState([]); const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]); + const [selectedClient, setSelectedClient] = useState(wolClients?.[0]); + const [overlayOpened, setOverlayOpened] = useState(false); const navigate = useNavigate(); + const notify = (notification: any) => toast(notification, { position: 'bottom-right' }); const { currentTheme, setCurrentTheme, @@ -50,10 +54,6 @@ function SettingsButton() { isMobile, } = useCommonHooks(); - const notify = (notification: any) => toast(notification, { position: 'bottom-right' }); - - const [selectedClient, setSelectedClient] = useState(wolClients?.[0]); - const [overlayOpened, setOverlayOpened] = useState(false); const handleWakeRequest = () => { wakeRequest({ method: 'POST', diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx index f596f12..ed2cbe0 100644 --- a/src/pages/settings/Settings.tsx +++ b/src/pages/settings/Settings.tsx @@ -25,6 +25,7 @@ import WolClients from './components/WolClients'; export function Settings() { const { isMobile } = useCommonHooks(); const navigate = useNavigate(); + return ( diff --git a/src/pages/settings/components/Applications.tsx b/src/pages/settings/components/Applications.tsx index acbf604..affa7a3 100644 --- a/src/pages/settings/components/Applications.tsx +++ b/src/pages/settings/components/Applications.tsx @@ -11,7 +11,7 @@ const ApplicationSettings = () => { isFetching: isAppsFetching, isLoading: isAppsLoading, } = useQueryAPI({ - endpoint: 'api/apps', + endpoint: endpoint, }); const [applicationData, setApplicationData] = useState([]); diff --git a/src/pages/settings/components/Bookmarks.tsx b/src/pages/settings/components/Bookmarks.tsx index df9038c..0c4b645 100644 --- a/src/pages/settings/components/Bookmarks.tsx +++ b/src/pages/settings/components/Bookmarks.tsx @@ -11,14 +11,14 @@ const BookmarkSettings = () => { isFetching: linksIsFetching, isLoading: linksIsLoading, } = useQueryAPI({ - endpoint: 'api/links', + endpoint: endpoint, }); const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({ endpoint: 'api/categories', }); const [bookmarkData, setBookmarkData] = useState([]); - const [groups, setGroups] = useState([]); + useEffect(() => { if (linkData && linksIsFetched) { setBookmarkData(linkData); diff --git a/src/pages/settings/components/Categories.tsx b/src/pages/settings/components/Categories.tsx index 9c01cfa..c5914bf 100644 --- a/src/pages/settings/components/Categories.tsx +++ b/src/pages/settings/components/Categories.tsx @@ -13,7 +13,6 @@ const CategorySettings = () => { } = useQueryAPI({ endpoint: endpoint, }); - const [groups, setGroups] = useState([]); useEffect(() => { @@ -24,6 +23,7 @@ const CategorySettings = () => { setGroups(groupList); } }, [groupData, groupsIsFetched]); + return ( diff --git a/src/pages/settings/components/Messages.tsx b/src/pages/settings/components/Messages.tsx index d76cb9b..eafb26d 100644 --- a/src/pages/settings/components/Messages.tsx +++ b/src/pages/settings/components/Messages.tsx @@ -20,6 +20,7 @@ const MessageSettings = () => { setMessages(messageData); } }, [messageData, isMessagesFetched]); + return ( diff --git a/src/pages/settings/components/Personalization.tsx b/src/pages/settings/components/Personalization.tsx index 767f014..7918808 100644 --- a/src/pages/settings/components/Personalization.tsx +++ b/src/pages/settings/components/Personalization.tsx @@ -14,11 +14,13 @@ const PersonalizationSettings = () => { endpoint: endpoint, }); const [personal, setPersonal] = useState([]); + useEffect(() => { if (personalData && personalIsFetched) { setPersonal(personalData); } }, [personalData, personalIsFetched]); + return ( <> diff --git a/src/pages/settings/components/SearchProviders.tsx b/src/pages/settings/components/SearchProviders.tsx index 22b5ee8..56f3546 100644 --- a/src/pages/settings/components/SearchProviders.tsx +++ b/src/pages/settings/components/SearchProviders.tsx @@ -14,7 +14,6 @@ const SearchProviderSettings = () => { } = useQueryAPI({ endpoint: endpoint, }); - const [providerData, setProviderData] = useState([]); useEffect(() => { diff --git a/src/pages/settings/components/ThemeCard.tsx b/src/pages/settings/components/ThemeCard.tsx index 0bf5583..2fef68c 100644 --- a/src/pages/settings/components/ThemeCard.tsx +++ b/src/pages/settings/components/ThemeCard.tsx @@ -14,6 +14,7 @@ function ThemeCard({ const [hover, setHover] = useState(false); const [shift, setShift] = useState(0); const { handleThemeChange, currentTheme, setCurrentTheme, theme } = useCommonHooks(); + return ( { const [textDecoration, setTextDecoration] = useState('none'); + return ( ); }; + return ( (''); - const [colorValue, setColorValue] = useState('#000000'); - - const [backgroundList, setBackgroundList] = useState(['None']); - const [selectedTheme, setSelectedTheme] = useState({}); const { mutateAsync: createTheme } = useMutationAPI(); const { mutateAsync: deleteTheme } = useMutationAPI(); - - const { currentTheme, setCurrentTheme, isMobile, theme } = useCommonHooks(); - - useEffect(() => { - if (backgroundData && isBackgroundFetched) { - setBackgroundList(['None', ...backgroundData]); - } - }, [backgroundData, isBackgroundFetched]); + const [opened, { open, close }] = useDisclosure(false); + const [colorId, setColorId] = useState(''); + const [colorValue, setColorValue] = useState('#000000'); + const [backgroundList, setBackgroundList] = useState(['None']); + const [selectedTheme, setSelectedTheme] = useState({}); + const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false); + const { currentTheme, setCurrentTheme, theme } = useCommonHooks(); const handleOpen = (theme: any) => { setSelectedTheme(theme); @@ -66,6 +58,12 @@ function ThemesSettings() { openDeleteConfirmModal(theme); close(); }; + + useEffect(() => { + if (backgroundData && isBackgroundFetched) { + setBackgroundList(['None', ...backgroundData]); + } + }, [backgroundData, isBackgroundFetched]); return ( <>