From c95df0a07b60db96a9f91d1c256d153e8772504a Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Mon, 2 May 2022 15:09:39 +0200 Subject: [PATCH] Use Config provider everywhere in app We can now load as much data as we want in the services and settings values. This solves the issue of using multiple localStorages boxes --- components/AppShelf/AddAppShelfItem.tsx | 4 +- components/AppShelf/AppShelf.tsx | 80 ++++++++++++----------- components/Config/LoadConfig.tsx | 10 +-- components/Config/SaveConfig.tsx | 8 ++- components/SearchBar/SearchBar.tsx | 24 ++----- components/Settings/SettingsMenu.tsx | 52 +++++---------- components/calendar/CalendarComponent.tsx | 8 +-- pages/_app.tsx | 6 +- 8 files changed, 83 insertions(+), 109 deletions(-) diff --git a/components/AppShelf/AddAppShelfItem.tsx b/components/AppShelf/AddAppShelfItem.tsx index dca90cad3..122a073fc 100644 --- a/components/AppShelf/AddAppShelfItem.tsx +++ b/components/AppShelf/AddAppShelfItem.tsx @@ -17,7 +17,7 @@ import { useForm } from '@mantine/hooks'; import { motion } from 'framer-motion'; import { useState } from 'react'; import { Apps } from 'tabler-icons-react'; -import { ServiceTypes } from '../../tools/types'; +import { ServiceType, ServiceTypeList } from '../../tools/types'; export default function AddItemShelfItem(props: any) { const { additem: addItem } = props; @@ -94,7 +94,7 @@ export default function AddItemShelfItem(props: any) { required searchable onChange={(value) => form.setFieldValue('type', value ?? 'Other')} - data={ServiceTypes} + data={ServiceTypeList} /> diff --git a/components/AppShelf/AppShelf.tsx b/components/AppShelf/AppShelf.tsx index 687ff854f..fb0533f17 100644 --- a/components/AppShelf/AppShelf.tsx +++ b/components/AppShelf/AppShelf.tsx @@ -15,8 +15,9 @@ import { showNotification } from '@mantine/notifications'; import { AlertCircle, Cross, X } from 'tabler-icons-react'; import AppShelfMenu from './AppShelfMenu'; import AddItemShelfItem from './AddAppShelfItem'; -import { useServices } from '../../tools/state'; +import { useConfig } from '../../tools/state'; import { pingQbittorrent } from '../../tools/api'; +import { Config } from '../../tools/types'; const useStyles = createStyles((theme) => ({ main: { @@ -32,52 +33,57 @@ const useStyles = createStyles((theme) => ({ })); const AppShelf = (props: any) => { - const { services, addService, removeService, setServicesState } = useServices(); + const { config, addService, removeService, setConfig } = useConfig(); const { classes } = useStyles(); const [hovering, setHovering] = useState('none'); + /* A hook that is used to load the config from local storage. */ useEffect(() => { - const localServices = localStorage.getItem('services'); - if (localServices) { - setServicesState(JSON.parse(localServices)); + const localConfig = localStorage.getItem('config'); + if (localConfig) { + setConfig(JSON.parse(localConfig)); } }, []); - services.forEach((service) => { - if (service.type === 'qBittorrent') { - pingQbittorrent(service); - } - }); + if (config.services && config.services.length === 0) { + config.services.forEach((service) => { + if (service.type === 'qBittorrent') { + pingQbittorrent(service); + } + }); + } return ( - {services.map((service, i) => ( - - { - setHovering(service.name); - }} - onHoverEnd={(e) => { - setHovering('none'); - }} - > - - - - - - - - - {service.name} + {config.services + ? config.services.map((service, i) => ( + + { + setHovering(service.name); + }} + onHoverEnd={(e) => { + setHovering('none'); + }} + > + + + + - - {service.name} - - - - - - ))} + + + + {service.name} + + + {service.name} + + + + + + )) + : null} ); diff --git a/components/Config/LoadConfig.tsx b/components/Config/LoadConfig.tsx index 117c7e248..6e7fe50c1 100644 --- a/components/Config/LoadConfig.tsx +++ b/components/Config/LoadConfig.tsx @@ -4,8 +4,8 @@ import { Dropzone, DropzoneStatus, FullScreenDropzone, IMAGE_MIME_TYPE } from '@ import { showNotification } from '@mantine/notifications'; import { useRef } from 'react'; import { useRouter } from 'next/router'; -import { useServices } from '../../tools/state'; -import { serviceItem } from '../../tools/types'; +import { useConfig } from '../../tools/state'; +import { Config, serviceItem } from '../../tools/types'; function getIconColor(status: DropzoneStatus, theme: MantineTheme) { return status.accepted @@ -48,7 +48,7 @@ export const dropzoneChildren = (status: DropzoneStatus, theme: MantineTheme) => ); export default function LoadConfigComponent(props: any) { - const { services, addService, removeService, setServicesState } = useServices(); + const { saveConfig, setConfig } = useConfig(); const theme = useMantineTheme(); const router = useRouter(); const openRef = useRef<() => void>(); @@ -58,7 +58,7 @@ export default function LoadConfigComponent(props: any) { onDrop={(files) => { files[0].text().then((e) => { try { - JSON.parse(e) as serviceItem[]; + JSON.parse(e) as Config; } catch (e) { showNotification({ autoClose: 5000, @@ -77,7 +77,7 @@ export default function LoadConfigComponent(props: any) { icon: , message: undefined, }); - setServicesState(JSON.parse(e)); + setConfig(JSON.parse(e)); }); }} accept={['application/json']} diff --git a/components/Config/SaveConfig.tsx b/components/Config/SaveConfig.tsx index 7fbf3e951..51025fee6 100644 --- a/components/Config/SaveConfig.tsx +++ b/components/Config/SaveConfig.tsx @@ -2,12 +2,14 @@ import { Anchor, Button, ThemeIcon, Tooltip } from '@mantine/core'; import fileDownload from 'js-file-download'; import { Dropzone, DropzoneStatus, IMAGE_MIME_TYPE } from '@mantine/dropzone'; import { Download } from 'tabler-icons-react'; +import { useConfig } from '../../tools/state'; export default function SaveConfigComponent(props: any) { + + const { config } = useConfig(); function onClick(e: any) { - const services = localStorage.getItem('services'); - if (services) { - fileDownload(JSON.stringify(JSON.parse(services), null, '\t'), 'services.json'); + if (config) { + fileDownload(JSON.stringify(config, null, '\t'), 'services.json'); } } return ( diff --git a/components/SearchBar/SearchBar.tsx b/components/SearchBar/SearchBar.tsx index 0cef310cf..cd236d7f3 100644 --- a/components/SearchBar/SearchBar.tsx +++ b/components/SearchBar/SearchBar.tsx @@ -19,38 +19,22 @@ import { InfoCircle, FileX, } from 'tabler-icons-react'; -import { loadSettings } from '../../tools/settings'; +import { useConfig } from '../../tools/state'; import { Settings } from '../../tools/types'; export default function SearchBar(props: any) { + const { config, setConfig } = useConfig(); const [opened, setOpened] = useState(false); const [icon, setIcon] = useState(); - const theme = useMantineTheme(); - const [config, setConfig] = useState({ - searchBar: true, - searchUrl: 'https://www.google.com/search?q=', - }); - - const querryUrl = config.searchUrl || 'https://www.google.com/search?q='; + const querryUrl = config.settings.searchUrl || 'https://www.google.com/search?q='; const form = useForm({ initialValues: { querry: '', }, }); - useEffect(() => { - const config = loadSettings('settings'); - if (config) { - showNotification({ - autoClose: 1000, - title: Config loaded, - message: undefined, - }); - setConfig(config); - } - }, []); - if (!config.searchBar) { + if (config.settings.searchBar == false) { return null; } diff --git a/components/Settings/SettingsMenu.tsx b/components/Settings/SettingsMenu.tsx index 1cbd9a8d7..aa2e4cf88 100644 --- a/components/Settings/SettingsMenu.tsx +++ b/components/Settings/SettingsMenu.tsx @@ -3,57 +3,39 @@ import { showNotification } from '@mantine/notifications'; import { motion } from 'framer-motion'; import { CSSProperties, useEffect, useState } from 'react'; import { Mail, Settings as SettingsIcon, X } from 'tabler-icons-react'; -import { loadSettings } from '../../tools/settings'; -import { Settings } from '../../tools/types'; +import { useConfig } from '../../tools/state'; import SaveConfigComponent from '../Config/SaveConfig'; function SettingsMenu(props: any) { - const [config, setConfig] = useState({ - searchUrl: 'https://www.google.com/search?q=', - searchBar: true, - }); + const { config, setConfig } = useConfig(); - useEffect(() => { - const config = loadSettings('settings'); - if (config) { - setConfig(config); - } - }, []); return ( { + defaultValue={config.settings.searchUrl} + onChange={(e) => setConfig({ ...config, - searchUrl: e.target.value, - }); - localStorage.setItem( - 'settings', - JSON.stringify({ - ...config, + settings: { + ...config.settings, searchUrl: e.target.value, - }) - ); - }} + }, + }) + } /> { + onChange={(e) => setConfig({ ...config, - searchBar: e.target.checked, - }); - localStorage.setItem( - 'settings', - JSON.stringify({ - ...config, - searchBar: e.target.checked, - }) - ); - }} - checked={config.searchBar} + settings: { + ...config.settings, + searchBar: e.currentTarget.checked, + }, + }) + } + checked={config.settings.searchBar} label="Enable search bar" /> diff --git a/components/calendar/CalendarComponent.tsx b/components/calendar/CalendarComponent.tsx index 5a1bbd3e6..0dc58a871 100644 --- a/components/calendar/CalendarComponent.tsx +++ b/components/calendar/CalendarComponent.tsx @@ -4,14 +4,14 @@ import { Calendar } from '@mantine/dates'; import dayjs from 'dayjs'; import MediaDisplay from './MediaDisplay'; import { medias } from './mediaExample'; -import { useServices } from '../../tools/state'; +import { useConfig } from '../../tools/state'; async function GetCalendars(endDate: Date) { // Load context - const { services, addService, removeService, setServicesState } = useServices(); + const { config, addService, removeService, setConfig } = useConfig(); // Load services that have the type to "Sonarr" or "Radarr" - const sonarrServices = services.filter((service) => service.type === 'Sonarr'); - const radarrServices = services.filter((service) => service.type === 'Radarr'); + const sonarrServices = config.services.filter((service) => service.type === 'Sonarr'); + const radarrServices = config.services.filter((service) => service.type === 'Radarr'); // Merge the two arrays const allServices = [...sonarrServices, ...radarrServices]; // Load the calendars for each service diff --git a/pages/_app.tsx b/pages/_app.tsx index d9bb4a12e..40824fc6a 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -6,7 +6,7 @@ import Head from 'next/head'; import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core'; import { NotificationsProvider } from '@mantine/notifications'; import Layout from '../components/layout/Layout'; -import { ServicesProvider } from '../tools/state'; +import { ConfigProvider } from '../tools/state'; export default function App(props: AppProps & { colorScheme: ColorScheme }) { const { Component, pageProps } = props; @@ -29,11 +29,11 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) { - + - +