🚧 WIP on Overseerr integration

src/modules/search/SearchModule.tsx

@@ -1,14 +1,18 @@
-import { Kbd, createStyles, Autocomplete } from '@mantine/core';
+import { Kbd, createStyles, Autocomplete, ScrollArea, Popover, Divider } from '@mantine/core';
 import { useDebouncedValue, useForm, useHotkeys } from '@mantine/hooks';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   IconSearch as Search,
   IconBrandYoutube as BrandYoutube,
   IconDownload as Download,
+  IconMovie,
 } from '@tabler/icons';
 import axios from 'axios';
+import { showNotification } from '@mantine/notifications';
 import { useConfig } from '../../tools/state';
 import { IModule } from '../ModuleTypes';
+import { OverseerrModule } from '../overseerr';
+import OverseerrMediaDisplay from '../overseerr/OverseerrMediaDisplay';
 
 const useStyles = createStyles((theme) => ({
   hide: {
@@ -22,48 +26,72 @@ const useStyles = createStyles((theme) => ({
 
 export const SearchModule: IModule = {
   title: 'Search Bar',
-  description: 'Show the current time and date in a card',
+  description: 'Search bar to search the web, youtube, torrents or overseerr',
   icon: Search,
   component: SearchBar,
 };
 
 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 { classes, cx } = useStyles();
+  // Config
+  const { config } = useConfig();
+  const isModuleEnabled = config.modules?.[SearchModule.title]?.enabled ?? false;
+  const isOverseerrEnabled = config.modules?.[OverseerrModule.title]?.enabled ?? false;
+  const OverseerrService = config.services.find((service) => service.type === 'Overseerr');
   const queryUrl = config.settings.searchUrl ?? 'https://www.google.com/search?q=';
+
+  const [OverseerrResults, setOverseerrResults] = useState<any[]>([]);
+  const [icon, setIcon] = useState(<Search />);
+  const [results, setResults] = useState<any[]>([]);
+  const [opened, setOpened] = useState(false);
+
   const textInput = useRef<HTMLInputElement>();
-  // Find a service with the type of 'Overseerr'
+  useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
+
   const form = useForm({
     initialValues: {
       query: '',
     },
   });
-
   const [debounced, cancel] = useDebouncedValue(form.values.query, 250);
-  const [results, setResults] = useState<any[]>([]);
+
   useEffect(() => {
-    if (form.values.query !== debounced || form.values.query === '') return;
-    axios
-      .get(`/api/modules/search?q=${form.values.query}`)
-      .then((res) => setResults(res.data ?? []));
+    if (OverseerrService === undefined && isOverseerrEnabled) {
+      showNotification({
+        title: 'Overseerr integration',
+        message: 'Module enabled but no service is configured with the type "Overseerr"',
+        color: 'red',
+      });
+    }
+  }, [OverseerrService, isOverseerrEnabled]);
+
+  useEffect(() => {
+    if (
+      form.values.query !== debounced ||
+      form.values.query === '' ||
+      (form.values.query.startsWith('!') && !form.values.query.startsWith('!os'))
+    ) {
+      return;
+    }
+    if (form.values.query.startsWith('!os')) {
+      axios
+        .get(
+          `/api/modules/overseerr?query=${form.values.query.replace('!os ', '')}&id=${
+            OverseerrService?.id
+          }`
+        )
+        .then((res) => {
+          setOverseerrResults(res.data.results ?? []);
+        });
+    } else {
+      setOverseerrResults([]);
+      axios
+        .get(`/api/modules/search?q=${form.values.query}`)
+        .then((res) => setResults(res.data ?? []));
+    }
   }, [debounced]);
-  useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
-  const { classes, cx } = useStyles();
-  const rightSection = (
-    <div className={classes.hide}>
-      <Kbd>Ctrl</Kbd>
-      <span style={{ margin: '0 5px' }}>+</span>
-      <Kbd>K</Kbd>
-    </div>
-  );
 
-  // If enabled modules doesn't contain the module, return null
-  // If module in enabled
-
-  const exists = config.modules?.[SearchModule.title]?.enabled ?? false;
-  if (!exists) {
+  if (!isModuleEnabled) {
     return null;
   }
 
@@ -76,53 +104,86 @@ export default function SearchBar(props: any) {
       onChange={() => {
         // If query contains !yt or !t add "Searching on YouTube" or "Searching torrent"
         const query = form.values.query.trim();
-        const isYoutube = query.startsWith('!yt');
-        const isTorrent = query.startsWith('!t');
-        if (isYoutube) {
-          setIcon(<BrandYoutube size={22} />);
-        } else if (isTorrent) {
-          setIcon(<Download size={22} />);
-        } else {
-          setIcon(<Search size={22} />);
+        switch (query.substring(0, 3)) {
+          case '!yt':
+            setIcon(<BrandYoutube />);
+            break;
+          case '!t ':
+            setIcon(<Download />);
+            break;
+          case '!os':
+            setIcon(<IconMovie />);
+            break;
+          default:
+            setIcon(<Search />);
+            break;
         }
       }}
       onSubmit={form.onSubmit((values) => {
         const query = values.query.trim();
-        const isYoutube = query.startsWith('!yt');
-        const isTorrent = query.startsWith('!t');
-        form.setValues({ query: '' });
         setTimeout(() => {
-          if (isYoutube) {
-            window.open(`https://www.youtube.com/results?search_query=${query.substring(4)}`);
-          } else if (isTorrent) {
-            window.open(`https://bitsearch.to/search?q=${query.substring(4)}`);
-          } else {
-            window.open(
-              `${
-                queryUrl.includes('%s')
-                  ? queryUrl.replace('%s', values.query)
-                  : queryUrl + values.query
-              }`
-            );
+          form.setValues({ query: '' });
+          switch (query.substring(0, 3)) {
+            case '!yt':
+              window.open(`https://www.youtube.com/results?search_query=${query.substring(3)}`);
+              break;
+            case '!t ':
+              window.open(`https://www.torrentdownloads.me/search/?search=${query.substring(3)}`);
+              break;
+            case '!os':
+              break;
+            default:
+              window.open(
+                `${queryUrl.includes('%s') ? queryUrl.replace('%s', query) : `${queryUrl}${query}`}`
+              );
+              break;
           }
-        }, 20);
+        }, 500);
       })}
     >
-      <Autocomplete
-        autoFocus
-        variant="filled"
-        data={autocompleteData}
-        icon={icon}
-        ref={textInput}
-        rightSectionWidth={90}
-        rightSection={rightSection}
+      <Popover
+        opened={opened}
+        position="bottom"
+        placement="start"
+        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={
+          <Autocomplete
+            autoFocus
+            variant="filled"
+            data={autocompleteData}
+            icon={icon}
+            ref={textInput}
+            rightSectionWidth={90}
+            rightSection={
+              <div className={classes.hide}>
+                <Kbd>Ctrl</Kbd>
+                <span style={{ margin: '0 5px' }}>+</span>
+                <Kbd>K</Kbd>
+              </div>
+            }
+            radius="md"
+            size="md"
+            styles={{ rightSection: { pointerEvents: 'none' } }}
+            placeholder="Search the web..."
+            {...props}
+            {...form.getInputProps('query')}
+          />
+        }
+      >
+        <ScrollArea style={{ height: 400 }} offsetScrollbars>
+          {OverseerrResults.slice(0, 5).map((result, index) => (
+            <React.Fragment key={index}>
+              <OverseerrMediaDisplay key={result.id} media={result} />
+              {index < OverseerrResults.length - 1 && <Divider variant="dashed" my="xl" />}
+            </React.Fragment>
+          ))}
+        </ScrollArea>
+      </Popover>
     </form>
   );
 }