fix: prevent intro box from displaying when filtering files

slater-notes · Apr 29, 2021 · 1f80bf7 · 1f80bf7
1 parent 8df3366
commit 1f80bf7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/src/containers/Sidebar/Files/FilterFiles.tsx b/src/containers/Sidebar/Files/FilterFiles.tsx
@@ -2,7 +2,7 @@ import { FormControl, makeStyles } from '@material-ui/core';
 import SingleLineInput from '../../../components/Input/SingleLineInput';
 
 interface Props {
-  onChange: (input: string) => void;
+  onChange: (input: string | null) => void;
 }
 
 const FilterFiles = (props: Props) => {
@@ -15,7 +15,10 @@ const FilterFiles = (props: Props) => {
         variant='outlined'
         autoComplete='off'
         size='small'
-        onChange={(e) => props.onChange(e.currentTarget.value)}
+        onChange={(e) => {
+          const { value } = e.currentTarget;
+          props.onChange(value === '' ? null : value);
+        }}
       />
     </FormControl>
   );

diff --git a/src/containers/Sidebar/Files/index.tsx b/src/containers/Sidebar/Files/index.tsx
@@ -14,7 +14,7 @@ const Files = () => {
   const theme = useTheme();
   const classes = useStyles();
 
-  const [filter, setFilter] = React.useState<string>('');
+  const [filter, setFilter] = React.useState<string | null>(null);
   const [emptyTrashConfirm, setEmptyTrashConfirm] = React.useState(false);
 
   const fileCollection = useStoreState((s) => s.fileCollection);
@@ -28,7 +28,7 @@ const Files = () => {
   // Reset filter when changing folders
   React.useEffect(() => {
     if (activeFolderId !== 'all') {
-      setFilter('');
+      setFilter(null);
     }
     // eslint-disable-next-line
   }, [activeFolderId]);
@@ -77,13 +77,13 @@ const Files = () => {
       case 'all':
         return {
           key: '0',
-          primaryText: (
+          primaryText: filter ? (
+            <Box color={theme.palette.text.hint}>Empty result.</Box>
+          ) : (
             <NotifBox>
-              <>
-                You don't have any notes yet.
-                <br />
-                Press the <b>New Note</b> button to add a new note.
-              </>
+              You don't have any notes yet.
+              <br />
+              Press the <b>New Note</b> button to add a new note.
             </NotifBox>
           ),
         };