Merge pull request #9 from ajnart/ajnart/issue2

Ajnart/issue2

components/Settings/SettingsMenu.tsx

@@ -1,4 +1,14 @@
-import { ActionIcon, Group, Modal, Switch, Title, Text, Tooltip, TextInput } from '@mantine/core';
+import {
+  ActionIcon,
+  Group,
+  Modal,
+  Switch,
+  Title,
+  Text,
+  Tooltip,
+  TextInput,
+  SegmentedControl,
+} from '@mantine/core';
 import { useState } from 'react';
 import { Settings as SettingsIcon } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
@@ -6,22 +16,35 @@ import SaveConfigComponent from '../Config/SaveConfig';
 
 function SettingsMenu(props: any) {
   const { config, setConfig } = useConfig();
-
+  const matches = [
+    { label: 'Google', value: 'https://google.com/search?q=' },
+    { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
+    { label: 'Bing', value: 'https://bing.com/search?q=' },
+  ];
   return (
     <Group direction="column" grow>
-      <TextInput
-        label="Search bar querry url"
-        defaultValue={config.settings.searchUrl}
-        onChange={(e) =>
-          setConfig({
-            ...config,
-            settings: {
-              ...config.settings,
-              searchUrl: e.target.value,
-            },
-          })
-        }
-      />
+      <Group>
+        <SegmentedControl
+          title="Search engine"
+          defaultValue={
+            // Match config.settings.searchUrl with a key in the matches array
+            matches.find((match) => match.value === config.settings.searchUrl)?.value || 'Google'
+          }
+          onChange={
+            // Set config.settings.searchUrl to the value of the selected item
+            (e) =>
+              setConfig({
+                ...config,
+                settings: {
+                  ...config.settings,
+                  searchUrl: e,
+                },
+              })
+          }
+          data={matches}
+        />
+        <Text>Search engine</Text>
+      </Group>
       <Group direction="column">
         <Switch
           onChange={(e) =>

components/calendar/CalendarComponent.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-children-prop */
-import { Indicator, Popover, Box, ScrollArea, Divider } from '@mantine/core';
+import { Popover, Box, ScrollArea, Divider, Indicator } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
 import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay';
@@ -21,18 +21,18 @@ export default function CalendarComponent(props: any) {
     const sonarrService = filtered.filter((service) => service.type === 'Sonarr').at(0);
     const radarrService = filtered.filter((service) => service.type === 'Radarr').at(0);
     const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
-    if (sonarrService) {
+    if (sonarrService && sonarrService.apiKey) {
       fetch(
         `${sonarrService?.url}api/calendar?apikey=${sonarrService?.apiKey}&end=${nextMonth}`
       ).then((response) => {
-        response.json().then((data) => setSonarrMedias(data));
+        response.ok && response.json().then((data) => setSonarrMedias(data));
       });
     }
-    if (radarrService) {
+    if (radarrService && radarrService.apiKey) {
       fetch(
         `${radarrService?.url}api/v3/calendar?apikey=${radarrService?.apiKey}&end=${nextMonth}`
       ).then((response) => {
-        response.json().then((data) => setRadarrMedias(data));
+        response.ok && response.json().then((data) => setRadarrMedias(data));
       });
     }
   }, [config.services]);