Merge pull request #19 from Gabi1M/maint/add-search-in-top-bar

Move name filter into header
Gabi1M · May 20, 2023 · 51eb27d · 51eb27d
2 parents 3471378 + 2c064e9
commit 51eb27d
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 22 deletions.
diff --git a/src/meridian/generic/drawerPage.tsx b/src/meridian/generic/drawerPage.tsx
@@ -11,10 +11,11 @@ import { ColorSchemeToggle } from './colorSchemeToggle';
 interface Props {
     children: React.ReactNode;
     drawerContent?: React.ReactNode;
+    headerLeftContent?: React.ReactNode;
     headerRightContent?: React.ReactNode;
 }
 
-const DrawerPage = ({ children, drawerContent, headerRightContent }: Props) => {
+const DrawerPage = ({ children, drawerContent, headerLeftContent, headerRightContent }: Props) => {
     const styles = useStyles();
     const [opened, setOpened] = useState(false);
 
@@ -35,6 +36,7 @@ const DrawerPage = ({ children, drawerContent, headerRightContent }: Props) => {
                 <ActionIcon onClick={() => setOpened(true)}>
                     <Menu2 />
                 </ActionIcon>
+                {headerLeftContent}
                 <Box className={styles.classes.space} />
                 <ColorSchemeToggle />
                 {headerRightContent}

diff --git a/src/meridian/home/drawerContent.tsx b/src/meridian/home/drawerContent.tsx
@@ -3,15 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { t } from '@lingui/macro';
 
-import {
-    Box,
-    LoadingOverlay,
-    MultiSelect,
-    Text,
-    TextInput,
-    Title,
-    createStyles,
-} from '@mantine/core';
+import { Box, LoadingOverlay, MultiSelect, Text, Title, createStyles } from '@mantine/core';
 
 import { selectMainData } from 'meridian/mainData';
 import { TorrentFilters, TorrentStateDescription } from 'meridian/models';
@@ -40,8 +32,6 @@ const DrawerContent = () => {
     );
 
     const handlers = {
-        name: (value: React.ChangeEvent<HTMLInputElement>) =>
-            onTorrentFilterChanged('name', value.target.value),
         states: (value: string[]) => onTorrentFilterChanged('states', value),
         categories: (value: string[]) => onTorrentFilterChanged('categories', value),
         tags: (value: string[]) => onTorrentFilterChanged('tags', value),
@@ -62,12 +52,6 @@ const DrawerContent = () => {
                 <Text size='xl'>{text}</Text>
             </Box>
             <Title order={4} align='center'>{t`Filters`}</Title>
-            <TextInput
-                label={t`Name`}
-                placeholder={t`Enter a name`}
-                value={torrentFilters.name}
-                onChange={handlers['name']}
-            />
             <MultiSelect
                 label={t`States`}
                 placeholder={t`All`}

diff --git a/src/meridian/home/homePage.tsx b/src/meridian/home/homePage.tsx
@@ -1,11 +1,14 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
-import { Box, Pagination, createStyles } from '@mantine/core';
+import { t } from '@lingui/macro';
+
+import { Box, Pagination, TextInput, createStyles } from '@mantine/core';
 
 import { DrawerPage, ScrollToTopAffix } from 'meridian/generic';
 import { selectSettings } from 'meridian/settings';
 import { TorrentCard } from 'meridian/torrent';
+import { createSetTorrentFiltersAction, selectTorrentFilters } from 'meridian/torrentFilters';
 
 import DrawerContent from './drawerContent';
 import HeaderContent from './headerContent';
@@ -38,6 +41,34 @@ const PaginationContainer = ({
     );
 };
 
+const HeaderLeftContent = () => {
+    const dispatch = useDispatch();
+    const torrentFilters = useSelector(selectTorrentFilters);
+
+    const onNameChanged = useCallback(
+        (value: React.ChangeEvent<HTMLInputElement>) => {
+            dispatch(
+                createSetTorrentFiltersAction({
+                    ...torrentFilters,
+                    name: value.target.value,
+                }),
+            );
+        },
+        [dispatch, torrentFilters],
+    );
+
+    return (
+        <Box>
+            <TextInput
+                ml='xl'
+                placeholder={t`Enter a name`}
+                value={torrentFilters.name}
+                onChange={onNameChanged}
+            />
+        </Box>
+    );
+};
+
 const HomePage = () => {
     const styles = useStyles();
     const torrents = useFilteredTorrents();
@@ -52,7 +83,11 @@ const HomePage = () => {
         useManageSelection();
 
     return (
-        <DrawerPage headerRightContent={<HeaderContent />} drawerContent={<DrawerContent />}>
+        <DrawerPage
+            headerLeftContent={<HeaderLeftContent />}
+            headerRightContent={<HeaderContent />}
+            drawerContent={<DrawerContent />}
+        >
             <Box className={styles.classes.root}>
                 {currentItems.map((torrent) => (
                     <TorrentCard