From 4cb85391432443cdb160979362c30ff0b54095f9 Mon Sep 17 00:00:00 2001
From: ajnart <thomascamlong@gmail.com>
Date: Tue, 17 May 2022 02:04:44 +0200
Subject: [PATCH] :sparkles: Make the search bar a module

Resolves #118
---
 src/components/AppShelf/AppShelf.tsx             | 11 +----------
 src/components/Settings/SettingsMenu.tsx         | 16 ----------------
 src/components/layout/Header.tsx                 |  2 +-
 src/components/modules/index.ts                  |  1 +
 .../search/SearchModule.story.tsx}               |  2 +-
 .../search/SearchModule.tsx}                     | 16 ++++++++++++----
 src/components/modules/search/index.ts           |  1 +
 7 files changed, 17 insertions(+), 32 deletions(-)
 rename src/components/{SearchBar/SearchBar.story.tsx => modules/search/SearchModule.story.tsx} (78%)
 rename src/components/{SearchBar/SearchBar.tsx => modules/search/SearchModule.tsx} (86%)
 create mode 100644 src/components/modules/search/index.ts

diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx
index ccf7dea5c..28fa7bf64 100644
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/src/components/AppShelf/AppShelf.tsx
@@ -1,15 +1,6 @@
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
-import {
-  Text,
-  AspectRatio,
-  Card,
-  Image,
-  useMantineTheme,
-  Center,
-  Grid,
-  createStyles,
-} from '@mantine/core';
+import { Text, AspectRatio, Card, Image, Center, Grid, createStyles } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import AppShelfMenu from './AppShelfMenu';
diff --git a/src/components/Settings/SettingsMenu.tsx b/src/components/Settings/SettingsMenu.tsx
index 2f821a4ef..cbd30c987 100644
--- a/src/components/Settings/SettingsMenu.tsx
+++ b/src/components/Settings/SettingsMenu.tsx
@@ -90,22 +90,6 @@ function SettingsMenu(props: any) {
           />
         )}
       </Group>
-      <Group direction="column">
-        <Switch
-          size="md"
-          onChange={(e) =>
-            setConfig({
-              ...config,
-              settings: {
-                ...config.settings,
-                searchBar: e.currentTarget.checked,
-              },
-            })
-          }
-          checked={config.settings.searchBar}
-          label="Enable search bar"
-        />
-      </Group>
       <ModuleEnabler />
       <ColorSchemeSwitch />
       <ConfigChanger />
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index f319c4c0e..28ed95f46 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { createStyles, Header as Head, Group, Box } from '@mantine/core';
 import { Logo } from './Logo';
-import SearchBar from '../SearchBar/SearchBar';
+import SearchBar from '../modules/search/SearchModule';
 import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
 
diff --git a/src/components/modules/index.ts b/src/components/modules/index.ts
index b8817cb83..a3dce87be 100644
--- a/src/components/modules/index.ts
+++ b/src/components/modules/index.ts
@@ -1,2 +1,3 @@
 export * from './date';
 export * from './calendar';
+export * from './search';
diff --git a/src/components/SearchBar/SearchBar.story.tsx b/src/components/modules/search/SearchModule.story.tsx
similarity index 78%
rename from src/components/SearchBar/SearchBar.story.tsx
rename to src/components/modules/search/SearchModule.story.tsx
index 3e19c4e2d..cbd7b64c2 100644
--- a/src/components/SearchBar/SearchBar.story.tsx
+++ b/src/components/modules/search/SearchModule.story.tsx
@@ -1,4 +1,4 @@
-import SearchBar from './SearchBar';
+import SearchBar from './SearchModule';
 
 export default {
   title: 'Search bar',
diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/modules/search/SearchModule.tsx
similarity index 86%
rename from src/components/SearchBar/SearchBar.tsx
rename to src/components/modules/search/SearchModule.tsx
index 7018dc18f..03c230d0c 100644
--- a/src/components/SearchBar/SearchBar.tsx
+++ b/src/components/modules/search/SearchModule.tsx
@@ -1,8 +1,9 @@
-import { TextInput, Kbd, createStyles, useMantineTheme, Text, Popover } from '@mantine/core';
+import { TextInput, Kbd, createStyles, Text, Popover } from '@mantine/core';
 import { useForm, useHotkeys } from '@mantine/hooks';
 import { useRef, useState } from 'react';
 import { Search, BrandYoutube, Download } from 'tabler-icons-react';
-import { useConfig } from '../../tools/state';
+import { useConfig } from '../../../tools/state';
+import { IModule } from '../modules';
 
 const useStyles = createStyles((theme) => ({
   hide: {
@@ -14,6 +15,13 @@ const useStyles = createStyles((theme) => ({
   },
 }));
 
+export const SearchModule: IModule = {
+  title: 'Search Bar',
+  description: 'Show the current time and date in a card',
+  icon: Search,
+  component: SearchBar,
+};
+
 export default function SearchBar(props: any) {
   const { config, setConfig } = useConfig();
   const [opened, setOpened] = useState(false);
@@ -23,7 +31,6 @@ export default function SearchBar(props: any) {
   useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
 
   const { classes, cx } = useStyles();
-  const theme = useMantineTheme();
   const rightSection = (
     <div className={classes.hide}>
       <Kbd>Ctrl</Kbd>
@@ -38,7 +45,8 @@ export default function SearchBar(props: any) {
     },
   });
 
-  if (config.settings.searchBar === false) {
+  // If enabled modules doesn't contain the module, return null
+  if (!config.settings.enabledModules.includes(SearchModule.title)) {
     return null;
   }
 
diff --git a/src/components/modules/search/index.ts b/src/components/modules/search/index.ts
new file mode 100644
index 000000000..eda41643a
--- /dev/null
+++ b/src/components/modules/search/index.ts
@@ -0,0 +1 @@
+export { SearchModule } from './SearchModule';