🎨 Quality of life : Use debouncedValue

src/components/AppShelf/AddAppShelfItem.tsx

@@ -14,9 +14,10 @@ import {
   Text,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { IconApps as Apps } from '@tabler/icons';
 import { v4 as uuidv4 } from 'uuid';
+import { useDebouncedValue } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
 import { ServiceTypeList } from '../../tools/types';
 
@@ -134,6 +135,14 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
     },
   });
 
+  const [debounced, cancel] = useDebouncedValue(form.values.name, 250);
+  useEffect(() => {
+    if (form.values.name !== debounced) return;
+    MatchIcon(form.values.name, form);
+    MatchService(form.values.name, form);
+    MatchPort(form.values.name, form);
+  }, [debounced]);
+
   // Try to set const hostname to new URL(form.values.url).hostname)
   // If it fails, set it to the form.values.url
   let hostname = form.values.url;
@@ -186,14 +195,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
             required
             label="Service name"
             placeholder="Plex"
-            value={form.values.name}
-            onChange={(event) => {
-              form.setFieldValue('name', event.currentTarget.value);
-              MatchIcon(event.currentTarget.value, form);
-              MatchService(event.currentTarget.value, form);
-              MatchPort(event.currentTarget.value, form);
-            }}
-            error={form.errors.name && 'Invalid icon url'}
+            {...form.getInputProps('name')}
           />
 
           <TextInput

src/components/modules/search/SearchModule.tsx

@@ -1,11 +1,18 @@
-import { TextInput, Kbd, createStyles, Text, Popover } from '@mantine/core';
-import { useForm, useHotkeys } from '@mantine/hooks';
-import { useRef, useState } from 'react';
+import {
+  Kbd,
+  createStyles,
+  Text,
+  Popover,
+  TextInput,
+} from '@mantine/core';
+import { useDebouncedValue, useForm, useHotkeys } from '@mantine/hooks';
+import { useEffect, useRef, useState } from 'react';
 import {
   IconSearch as Search,
   IconBrandYoutube as BrandYoutube,
   IconDownload as Download,
 } from '@tabler/icons';
+import axios from 'axios';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 
@@ -29,11 +36,35 @@ export const SearchModule: IModule = {
 export default function SearchBar(props: any) {
   const { config, setConfig } = useConfig();
   const [opened, setOpened] = useState(false);
+  const [results, setOpenedResults] = useState(false);
   const [icon, setIcon] = useState(<Search />);
   const queryUrl = config.settings.searchUrl ?? 'https://www.google.com/search?q=';
   const textInput = useRef<HTMLInputElement>();
-  useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
+  // Find a service with the type of 'Overseerr'
+  const service = config.services.find((s) => s.type === 'Overseerr');
 
+  const form = useForm({
+    initialValues: {
+      query: '',
+    },
+  });
+
+  const [debounced, cancel] = useDebouncedValue(form.values.query, 250);
+  const [data, setData] = useState([]);
+  useEffect(() => {
+    if (form.values.query !== debounced || form.values.query === '') return;
+    setOpened(false);
+    setOpenedResults(true);
+    if (service) {
+      const serviceUrl = new URL(service.url);
+      axios
+        .post(`/api/modules/overseerr?query=${form.values.query}`, {
+          service,
+        })
+        .then((res) => setData(res.data.results ?? []));
+    }
+  }, [debounced]);
+  useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
   const { classes, cx } = useStyles();
   const rightSection = (
     <div className={classes.hide}>
@@ -43,12 +74,6 @@ export default function SearchBar(props: any) {
     </div>
   );
 
-  const form = useForm({
-    initialValues: {
-      query: '',
-    },
-  });
-
   // If enabled modules doesn't contain the module, return null
   // If module in enabled
 
@@ -57,6 +82,7 @@ export default function SearchBar(props: any) {
     return null;
   }
 
+  // Data with label as item.name
   return (
     <form
       onChange={() => {
@@ -89,30 +115,40 @@ export default function SearchBar(props: any) {
       })}
     >
       <Popover
-        opened={opened}
-        position="bottom"
-        placement="start"
-        width={260}
-        withArrow
-        radius="md"
-        trapFocus={false}
-        transition="pop-bottom-right"
-        onFocusCapture={() => setOpened(true)}
-        onBlurCapture={() => setOpened(false)}
+        opened={results}
         target={
-          <TextInput
-            variant="filled"
-            icon={icon}
-            ref={textInput}
-            rightSectionWidth={90}
-            rightSection={rightSection}
+          <Popover
+            opened={opened}
+            position="bottom"
+            placement="start"
+            width={260}
+            withArrow
             radius="md"
-            size="md"
-            styles={{ rightSection: { pointerEvents: 'none' } }}
-            placeholder="Search the web..."
-            {...props}
-            {...form.getInputProps('query')}
-          />
+            trapFocus={false}
+            transition="pop-bottom-right"
+            onFocusCapture={() => setOpened(true)}
+            onBlurCapture={() => setOpened(false)}
+            target={
+              <TextInput
+                variant="filled"
+                icon={icon}
+                ref={textInput}
+                rightSectionWidth={90}
+                rightSection={rightSection}
+                radius="md"
+                size="md"
+                styles={{ rightSection: { pointerEvents: 'none' } }}
+                placeholder="Search the web..."
+                {...props}
+                {...form.getInputProps('query')}
+              />
+            }
+          >
+            <Text>
+              tip: Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on
+              YouTube or for a Torrent respectively.
+            </Text>
+          </Popover>
         }
       >
         <Text>