From af2e0235bf1218e359725fe656e07d85bb672ec3 Mon Sep 17 00:00:00 2001 From: ajnart Date: Sun, 22 May 2022 20:42:10 +0200 Subject: [PATCH] :sparkles: Add new config format Should be WAAAAY easier to work with modules now --- src/components/Settings/ModuleEnabler.tsx | 29 ++++++---------- src/components/modules/date/DateModule.tsx | 7 +--- src/components/modules/moduleWrapper.tsx | 27 ++++++++------- src/components/modules/modules.tsx | 2 +- src/components/modules/ping/PingModule.tsx | 5 +-- .../modules/search/SearchModule.tsx | 5 ++- .../modules/weather/WeatherModule.tsx | 8 ++--- src/pages/[slug].tsx | 4 +-- src/pages/index.tsx | 3 +- src/pages/tryconfig.tsx | 33 +++++++++++++++++++ src/tools/state.tsx | 8 ++--- src/tools/types.ts | 33 ++++++++++++------- 12 files changed, 99 insertions(+), 65 deletions(-) create mode 100644 src/pages/tryconfig.tsx diff --git a/src/components/Settings/ModuleEnabler.tsx b/src/components/Settings/ModuleEnabler.tsx index 52bf05ed1..c3b69f7e7 100644 --- a/src/components/Settings/ModuleEnabler.tsx +++ b/src/components/Settings/ModuleEnabler.tsx @@ -5,34 +5,25 @@ import { useConfig } from '../../tools/state'; export default function ModuleEnabler(props: any) { const { config, setConfig } = useConfig(); const modules = Object.values(Modules).map((module) => module); - const enabledModules = config.settings.enabledModules ?? []; - modules.filter((module) => enabledModules.includes(module.title)); return ( {modules.map((module) => ( { - if (e.currentTarget.checked) { - setConfig({ - ...config, - settings: { - ...config.settings, - enabledModules: [...enabledModules, module.title], + setConfig({ + ...config, + modules: { + ...config.modules, + [module.title]: { + ...config.modules?.[module.title], + enabled: e.currentTarget.checked, }, - }); - } else { - setConfig({ - ...config, - settings: { - ...config.settings, - enabledModules: enabledModules.filter((m) => m !== module.title), - }, - }); - } + }, + }); }} /> ))} diff --git a/src/components/modules/date/DateModule.tsx b/src/components/modules/date/DateModule.tsx index bb4a6bd12..b880d414a 100644 --- a/src/components/modules/date/DateModule.tsx +++ b/src/components/modules/date/DateModule.tsx @@ -21,12 +21,7 @@ export const DateModule: IModule = { export default function DateComponent(props: any) { const [date, setDate] = useState(new Date()); const { config } = useConfig(); - const hours = date.getHours(); - const minutes = date.getMinutes(); - const isFullTime = - config.settings[`${DateModule.title}.full`] === undefined - ? true - : config.settings[`${DateModule.title}.full`]; + const isFullTime = config?.modules?.[DateModule.title]?.options?.full?.value ?? false; const formatString = isFullTime ? 'HH:mm' : 'h:mm A'; // Change date on minute change // Note: Using 10 000ms instead of 1000ms to chill a little :) diff --git a/src/components/modules/moduleWrapper.tsx b/src/components/modules/moduleWrapper.tsx index 4419ecdc8..dada02e2e 100644 --- a/src/components/modules/moduleWrapper.tsx +++ b/src/components/modules/moduleWrapper.tsx @@ -5,9 +5,9 @@ import { IModule } from './modules'; export function ModuleWrapper(props: any) { const { module }: { module: IModule } = props; const { config, setConfig } = useConfig(); - const enabledModules = config.settings.enabledModules ?? []; + const enabledModules = config.modules ?? {}; // Remove 'Module' from enabled modules titles - const isShown = enabledModules.includes(module.title); + const isShown = enabledModules[module.title]?.enabled ?? false; const theme = useMantineTheme(); const items: JSX.Element[] = []; if (module.options) { @@ -18,25 +18,31 @@ export function ModuleWrapper(props: any) { // Loop over all the types with a for each loop types.forEach((type, index) => { const optionName = `${module.title}.${keys[index]}`; + const moduleInConfig = config.modules?.[module.title]; // TODO: Add support for other types if (type === 'boolean') { items.push( { setConfig({ ...config, - settings: { - ...config.settings, - enabledModules: [...config.settings.enabledModules], - [optionName]: e.currentTarget.checked, + modules: { + ...config.modules, + [module.title]: { + ...config.modules[module.title], + options: { + ...config.modules[module.title].options, + [keys[index]]: { + ...config.modules[module.title].options?.[keys[index]], + value: e.currentTarget.checked, + }, + }, + }, }, }); }} @@ -46,7 +52,6 @@ export function ModuleWrapper(props: any) { } }); } - // Sussy baka if (!isShown) { return null; } diff --git a/src/components/modules/modules.tsx b/src/components/modules/modules.tsx index c3c3ef1dd..74e3f7c2a 100644 --- a/src/components/modules/modules.tsx +++ b/src/components/modules/modules.tsx @@ -14,7 +14,7 @@ interface Option { [x: string]: OptionValues; } -interface OptionValues { +export interface OptionValues { name: string; value: boolean; } diff --git a/src/components/modules/ping/PingModule.tsx b/src/components/modules/ping/PingModule.tsx index 5fbce814a..5f97e658f 100644 --- a/src/components/modules/ping/PingModule.tsx +++ b/src/components/modules/ping/PingModule.tsx @@ -19,8 +19,9 @@ export default function PingComponent(props: any) { const { url }: { url: string } = props; const [isOnline, setOnline] = useState('loading'); + const exists = config.modules?.[PingModule.title]?.enabled ?? false; useEffect(() => { - if (!config.settings.enabledModules.includes('Ping Services')) { + if (!exists) { return; } axios @@ -32,7 +33,7 @@ export default function PingComponent(props: any) { setOnline('down'); }); }, []); - if (!config.settings.enabledModules.includes('Ping Services')) { + if (!exists) { return null; } return ( diff --git a/src/components/modules/search/SearchModule.tsx b/src/components/modules/search/SearchModule.tsx index aa7698e61..ced4d9fb5 100644 --- a/src/components/modules/search/SearchModule.tsx +++ b/src/components/modules/search/SearchModule.tsx @@ -46,7 +46,10 @@ export default function SearchBar(props: any) { }); // If enabled modules doesn't contain the module, return null - if (!config.settings.enabledModules.includes(SearchModule.title)) { + // If module in enabled + + const exists = config.modules?.[SearchModule.title]?.enabled ?? false; + if (!exists) { return null; } diff --git a/src/components/modules/weather/WeatherModule.tsx b/src/components/modules/weather/WeatherModule.tsx index 5066bb74e..dd08d3e79 100644 --- a/src/components/modules/weather/WeatherModule.tsx +++ b/src/components/modules/weather/WeatherModule.tsx @@ -132,9 +132,7 @@ export default function WeatherComponent(props: any) { const { config } = useConfig(); const [weather, setWeather] = useState({} as WeatherResponse); const isFahrenheit: boolean = - config.settings[`${WeatherModule.title}.freedomunit`] === undefined - ? false - : config.settings[`${WeatherModule.title}.freedomunit`]; + config?.modules?.[WeatherModule.title]?.options?.freedomunit?.value ?? false; if ('geolocation' in navigator && location.lat === 0 && location.lng === 0) { navigator.geolocation.getCurrentPosition((position) => { @@ -163,10 +161,10 @@ export default function WeatherComponent(props: any) { - {weather.daily.temperature_2m_max[0]}°C + {usePerferedUnit(weather.daily.temperature_2m_max[0])} - {weather.daily.temperature_2m_min[0]}°C + {usePerferedUnit(weather.daily.temperature_2m_min[0])} diff --git a/src/pages/[slug].tsx b/src/pages/[slug].tsx index 3ea48f139..d2577e01a 100644 --- a/src/pages/[slug].tsx +++ b/src/pages/[slug].tsx @@ -20,12 +20,12 @@ export async function getServerSideProps( return { props: { config: { - name: '', + name: 'Default config', services: [], settings: { - enabledModules: [], searchUrl: 'https://www.google.com/search?q=', }, + modules: {}, }, }, }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e2d9c2c4a..c9c344e5f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -27,10 +27,9 @@ export async function getServerSideProps({ name: cookie.toString(), services: [], settings: { - enabledModules: [], - searchBar: true, searchUrl: 'https://www.google.com/search?q=', }, + modules: {}, }, }, }; diff --git a/src/pages/tryconfig.tsx b/src/pages/tryconfig.tsx new file mode 100644 index 000000000..55c266c92 --- /dev/null +++ b/src/pages/tryconfig.tsx @@ -0,0 +1,33 @@ +import { Button } from '@mantine/core'; +import { Prism } from '@mantine/prism'; +import { useState } from 'react'; +import { DateModule } from '../components/modules'; +import { useConfig } from '../tools/state'; + +export default function TryConfig(props: any) { + const { config } = useConfig(); + const [tempConfig, setTempConfig] = useState(config); + return ( + <> + {JSON.stringify(tempConfig, null, 2)} + + + ); +} diff --git a/src/tools/state.tsx b/src/tools/state.tsx index 64a99b48d..229fb3191 100644 --- a/src/tools/state.tsx +++ b/src/tools/state.tsx @@ -17,10 +17,9 @@ const configContext = createContext({ name: 'default', services: [], settings: { - searchBar: true, - searchUrl: 'https://www.google.com/search?q=', - enabledModules: [], + searchUrl: 'https://google.com/search?q=', }, + modules: {}, }, setConfig: () => {}, loadConfig: async (name: string) => {}, @@ -44,10 +43,9 @@ export function ConfigProvider({ children }: Props) { name: 'default', services: [], settings: { - searchBar: true, searchUrl: 'https://www.google.com/search?q=', - enabledModules: [], }, + modules: {}, }); async function loadConfig(configName: string) { diff --git a/src/tools/types.ts b/src/tools/types.ts index 3dbceb071..92a56f8fc 100644 --- a/src/tools/types.ts +++ b/src/tools/types.ts @@ -1,32 +1,43 @@ +import { OptionValues } from '../components/modules/modules'; + export interface Settings { searchUrl: string; - enabledModules: string[]; - [key: string]: any; } export interface Config { name: string; services: serviceItem[]; settings: Settings; + modules: { + [key: string]: ConfigModule; + }; +} + +interface ConfigModule { + title: string; + enabled: boolean; + options: { + [key: string]: OptionValues; + }; } export const ServiceTypeList = [ 'Other', - 'Sonarr', - 'Radarr', - 'Lidarr', - 'qBittorrent', - 'Plex', 'Emby', + 'Lidarr', + 'Plex', + 'Radarr', + 'Sonarr', + 'qBittorrent', ]; export type ServiceType = | 'Other' - | 'Sonarr' - | 'Radarr' + | 'Emby' | 'Lidarr' - | 'qBittorrent' | 'Plex' - | 'Emby'; + | 'Radarr' + | 'Sonarr' + | 'qBittorrent'; export interface serviceItem { id: string;