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');
- }}
- >
-
-
-
-
-
-
-
-
-
+ {config.services
+ ? config.services.map((service, i) => (
+
+ {
+ setHovering(service.name);
+ }}
+ onHoverEnd={(e) => {
+ setHovering('none');
+ }}
+ >
+
+
+
+
-
- {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 }) {
-
+
-
+