Merge branch 'dev' into dnd

KingLego2006 · May 23, 2022 · 19bd14c · 19bd14c
2 parents b69343a + 225f910
commit 19bd14c
Show file tree

Hide file tree

Showing 17 changed files with 1,767 additions and 1,720 deletions.
diff --git a/package.json b/package.json
@@ -1,93 +1,95 @@
 {
-  "name": "homarr",
-  "version": "0.4.0",
-  "private": "false",
-  "description": "Homarr - A homepage for your server.",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ajnart/homarr"
-  },
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "analyze": "ANALYZE=true next build",
-    "start": "next start",
-    "typecheck": "tsc --noEmit",
-    "export": "next build && next export",
-    "lint": "next lint",
-    "jest": "jest",
-    "jest:watch": "jest --watch",
-    "prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
-    "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
-    "test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
-    "storybook": "start-storybook -p 7001",
-    "storybook:build": "build-storybook",
-    "ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
-  },
-  "dependencies": {
+	"name": "homarr",
+	"version": "0.4.0",
+	"private": "false",
+	"description": "Homarr - A homepage for your server.",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/ajnart/homarr"
+	},
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"analyze": "ANALYZE=true next build",
+		"start": "next start",
+		"typecheck": "tsc --noEmit",
+		"export": "next build && next export",
+		"lint": "next lint",
+		"jest": "jest",
+		"jest:watch": "jest --watch",
+		"prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
+		"prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
+		"test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
+		"storybook": "start-storybook -p 7001",
+		"storybook:build": "build-storybook",
+		"ci": "yarn test && yarn lint --fix && yarn typecheck && yarn prettier:write"
+	},
+	"dependencies": {
     "@dnd-kit/core": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.0",
-    "@mantine/core": "^4.2.4",
-    "@mantine/dates": "^4.2.4",
-    "@mantine/dropzone": "^4.2.4",
-    "@mantine/form": "^4.2.4",
-    "@mantine/hooks": "^4.2.4",
-    "@mantine/modals": "^4.2.4",
-    "@mantine/next": "^4.2.4",
-    "@mantine/notifications": "^4.2.4",
-    "@mantine/prism": "^4.2.4",
-    "@mantine/rte": "^4.2.4",
-    "@mantine/spotlight": "^4.2.4",
-    "@modulz/radix-icons": "^4.0.0",
-    "axios": "^0.27.2",
-    "cookies-next": "^2.0.4",
-    "dayjs": "^1.11.2",
-    "framer-motion": "^6.3.1",
-    "js-file-download": "^0.4.12",
-    "next": "12.1.5-canary.4",
-    "prism-react-renderer": "^1.3.1",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
-    "tabler-icons-react": "^1.46.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.17.8",
-    "@next/bundle-analyzer": "^12.1.4",
-    "@next/eslint-plugin-next": "^12.1.4",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/react": "^6.4.22",
-    "@testing-library/dom": "^8.12.0",
-    "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^14.0.4",
-    "@types/jest": "^27.4.1",
-    "@types/node": "^17.0.23",
-    "@types/react": "17.0.43",
-    "@typescript-eslint/eslint-plugin": "^5.16.0",
-    "@typescript-eslint/parser": "^5.16.0",
-    "babel-loader": "^8.2.4",
-    "eslint": "^8.11.0",
-    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "^16.1.4",
-    "eslint-config-mantine": "1.1.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest": "^26.1.3",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.5.11",
-    "eslint-plugin-testing-library": "^5.2.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
-    "jest": "^27.5.1",
-    "prettier": "^2.6.2",
-    "storybook-addon-mock": "^2.3.2",
-    "storybook-addon-turbo-build": "^1.1.0",
-    "storybook-dark-mode": "^1.0.9",
-    "ts-jest": "^27.1.4",
-    "typescript": "4.6.3"
-  },
-  "resolutions": {
-    "@types/react": "17.0.30"
-  }
+		"@mantine/core": "^4.2.4",
+		"@mantine/dates": "^4.2.4",
+		"@mantine/dropzone": "^4.2.4",
+		"@mantine/form": "^4.2.4",
+		"@mantine/hooks": "^4.2.4",
+		"@mantine/modals": "^4.2.4",
+		"@mantine/next": "^4.2.4",
+		"@mantine/notifications": "^4.2.4",
+		"@mantine/prism": "^4.2.4",
+		"@mantine/rte": "^4.2.4",
+		"@mantine/spotlight": "^4.2.4",
+		"@modulz/radix-icons": "^4.0.0",
+		"axios": "^0.27.2",
+		"cookies-next": "^2.0.4",
+		"dayjs": "^1.11.2",
+		"framer-motion": "^6.3.1",
+		"js-file-download": "^0.4.12",
+		"next": "12.1.5-canary.4",
+		"prism-react-renderer": "^1.3.1",
+		"react": "18.0.0",
+		"react-dom": "18.0.0",
+		"tabler-icons-react": "^1.46.0",
+		"uuid": "^8.3.2"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.17.8",
+		"@next/bundle-analyzer": "^12.1.4",
+		"@next/eslint-plugin-next": "^12.1.4",
+		"@storybook/addon-essentials": "^6.4.22",
+		"@storybook/addon-links": "^6.4.22",
+		"@storybook/react": "^6.4.22",
+		"@testing-library/dom": "^8.12.0",
+		"@testing-library/jest-dom": "^5.16.3",
+		"@testing-library/react": "^13.0.0",
+		"@testing-library/user-event": "^14.0.4",
+		"@types/jest": "^27.4.1",
+		"@types/node": "^17.0.23",
+		"@types/react": "17.0.43",
+		"@types/uuid": "^8.3.4",
+		"@typescript-eslint/eslint-plugin": "^5.16.0",
+		"@typescript-eslint/parser": "^5.16.0",
+		"babel-loader": "^8.2.4",
+		"eslint": "^8.11.0",
+		"eslint-config-airbnb": "19.0.4",
+		"eslint-config-airbnb-typescript": "^16.1.4",
+		"eslint-config-mantine": "1.1.0",
+		"eslint-plugin-import": "^2.25.4",
+		"eslint-plugin-jest": "^26.1.3",
+		"eslint-plugin-jsx-a11y": "^6.5.1",
+		"eslint-plugin-react": "^7.29.4",
+		"eslint-plugin-react-hooks": "^4.3.0",
+		"eslint-plugin-storybook": "^0.5.11",
+		"eslint-plugin-testing-library": "^5.2.0",
+		"eslint-plugin-unused-imports": "^2.0.0",
+		"jest": "^27.5.1",
+		"prettier": "^2.6.2",
+		"storybook-addon-mock": "^2.3.2",
+		"storybook-addon-turbo-build": "^1.1.0",
+		"storybook-dark-mode": "^1.0.9",
+		"ts-jest": "^27.1.4",
+		"typescript": "4.6.3"
+	},
+	"resolutions": {
+		"@types/react": "17.0.30"
+	}
 }
diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -14,6 +14,7 @@ import {
 import { useForm } from '@mantine/form';
 import { useState } from 'react';
 import { Apps } from 'tabler-icons-react';
+import { v4 as uuidv4 } from 'uuid';
 import { useConfig } from '../../tools/state';
 import { ServiceTypeList } from '../../tools/types';
 
@@ -67,7 +68,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
 
   const form = useForm({
     initialValues: {
-      id: props.id ?? crypto.randomUUID(),
+      id: props.id ?? uuidv4(),
       type: props.type ?? 'Other',
       name: props.name ?? '',
       icon: props.icon ?? '/favicon.svg',

diff --git 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 (
     <Group direction="column">
       {modules.map((module) => (
         <Switch
           key={module.title}
           size="md"
-          checked={enabledModules.includes(module.title)}
+          checked={config.modules?.[module.title]?.enabled ?? false}
           label={`Enable ${module.title} module`}
           onChange={(e) => {
-            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/calendar/CalendarModule.tsx b/src/components/modules/calendar/CalendarModule.tsx
@@ -33,22 +33,22 @@ export default function CalendarComponent(props: any) {
     const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
     if (sonarrService && sonarrService.apiKey) {
       const baseUrl = new URL(sonarrService.url).origin;
-      fetch(
-        `${baseUrl}/api/calendar?apikey=${sonarrService?.apiKey}&end=${nextMonth}`
-      ).then((response) => {
-        response.ok &&
-          response.json().then((data) => {
-            setSonarrMedias(data);
-            showNotification({
-              title: 'Sonarr',
-              icon: <Check />,
-              color: 'green',
-              autoClose: 1500,
-              radius: 'md',
-              message: `Loaded ${data.length} releases`,
+      fetch(`${baseUrl}/api/calendar?apikey=${sonarrService?.apiKey}&end=${nextMonth}`).then(
+        (response) => {
+          response.ok &&
+            response.json().then((data) => {
+              setSonarrMedias(data);
+              showNotification({
+                title: 'Sonarr',
+                icon: <Check />,
+                color: 'green',
+                autoClose: 1500,
+                radius: 'md',
+                message: `Loaded ${data.length} releases`,
+              });
             });
-          });
-      });
+        }
+      );
     }
     if (radarrService && radarrService.apiKey) {
       const baseUrl = new URL(radarrService.url).origin;

diff --git a/src/components/modules/date/DateModule.tsx b/src/components/modules/date/DateModule.tsx
@@ -21,13 +21,8 @@ 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 formatString = isFullTime ? 'HH:mm' : 'h:mm a';
+  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 :)
   useEffect(() => {

diff --git 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(
           <Switch
             defaultChecked={
               // Set default checked to the value of the option if it exists
-              config.settings[optionName] ??
-              (module.options && module.options[keys[index]].value) ??
-              false
+              moduleInConfig?.options?.[keys[index]]?.value ?? false
             }
-            defaultValue={config.settings[optionName] ?? false}
             key={keys[index]}
             onClick={(e) => {
               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
@@ -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
@@ -19,8 +19,9 @@ export default function PingComponent(props: any) {
 
   const { url }: { url: string } = props;
   const [isOnline, setOnline] = useState<State>('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 (