chore: Remove debounced search (#2625)

* Remove debounced search

* fix hover color on filter options

app/scenes/Search/components/SearchField.js

@@ -1,97 +0,0 @@
-// @flow
-import { SearchIcon } from "outline-icons";
-import * as React from "react";
-import styled, { withTheme } from "styled-components";
-import Flex from "components/Flex";
-import { type Theme } from "types";
-
-type Props = {
-  onChange: (string) => void,
-  defaultValue?: string,
-  placeholder?: string,
-  theme: Theme,
-};
-
-class SearchField extends React.Component<Props> {
-  input: ?HTMLInputElement;
-
-  componentDidMount() {
-    if (this.props && this.input) {
-      // ensure that focus is placed at end of input
-      const len = (this.props.defaultValue || "").length;
-      this.input.setSelectionRange(len, len);
-    }
-  }
-
-  handleChange = (ev: SyntheticEvent<HTMLInputElement>) => {
-    this.props.onChange(ev.currentTarget.value ? ev.currentTarget.value : "");
-  };
-
-  focusInput = (ev: SyntheticEvent<>) => {
-    if (this.input) this.input.focus();
-  };
-
-  render() {
-    return (
-      <Field align="center">
-        <StyledIcon
-          type="Search"
-          size={46}
-          color={this.props.theme.textTertiary}
-          onClick={this.focusInput}
-        />
-        <StyledInput
-          {...this.props}
-          ref={(ref) => (this.input = ref)}
-          onChange={this.handleChange}
-          spellCheck="false"
-          placeholder={this.props.placeholder}
-          type="search"
-          autoFocus
-        />
-      </Field>
-    );
-  }
-}
-
-const Field = styled(Flex)`
-  position: relative;
-  margin-bottom: 8px;
-`;
-
-const StyledInput = styled.input`
-  width: 100%;
-  padding: 10px 10px 10px 60px;
-  font-size: 36px;
-  font-weight: 400;
-  outline: none;
-  border: 0;
-  background: ${(props) => props.theme.sidebarBackground};
-  transition: ${(props) => props.theme.backgroundTransition};
-  border-radius: 4px;
-
-  color: ${(props) => props.theme.text};
-
-  ::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-  }
-  ::-webkit-input-placeholder {
-    color: ${(props) => props.theme.placeholder};
-  }
-  :-moz-placeholder {
-    color: ${(props) => props.theme.placeholder};
-  }
-  ::-moz-placeholder {
-    color: ${(props) => props.theme.placeholder};
-  }
-  :-ms-input-placeholder {
-    color: ${(props) => props.theme.placeholder};
-  }
-`;
-
-const StyledIcon = styled(SearchIcon)`
-  position: absolute;
-  left: 8px;
-`;
-
-export default withTheme(SearchField);

app/scenes/Search/components/SearchInput.js

@@ -0,0 +1,86 @@
+// @flow
+import { SearchIcon } from "outline-icons";
+import * as React from "react";
+import styled, { useTheme } from "styled-components";
+import Flex from "components/Flex";
+
+type Props = {
+  defaultValue?: string,
+  placeholder?: string,
+};
+
+function SearchInput({ defaultValue, ...rest }: Props) {
+  const theme = useTheme();
+  const inputRef = React.useRef();
+
+  React.useEffect(() => {
+    // ensure that focus is placed at end of input
+    const len = (defaultValue || "").length;
+    inputRef.current?.setSelectionRange(len, len);
+  }, [defaultValue]);
+
+  const focusInput = React.useCallback((ev: SyntheticEvent<>) => {
+    inputRef.current?.focus();
+  }, []);
+
+  return (
+    <Wrapper align="center">
+      <StyledIcon
+        type="Search"
+        size={46}
+        color={theme.textTertiary}
+        onClick={focusInput}
+      />
+      <StyledInput
+        {...rest}
+        defaultValue={defaultValue}
+        ref={inputRef}
+        spellCheck="false"
+        type="search"
+        autoFocus
+      />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled(Flex)`
+  position: relative;
+  margin-bottom: 8px;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  padding: 10px 10px 10px 60px;
+  font-size: 36px;
+  font-weight: 400;
+  outline: none;
+  border: 0;
+  background: ${(props) => props.theme.sidebarBackground};
+  transition: ${(props) => props.theme.backgroundTransition};
+  border-radius: 4px;
+
+  color: ${(props) => props.theme.text};
+
+  ::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+  ::-webkit-input-placeholder {
+    color: ${(props) => props.theme.placeholder};
+  }
+  :-moz-placeholder {
+    color: ${(props) => props.theme.placeholder};
+  }
+  ::-moz-placeholder {
+    color: ${(props) => props.theme.placeholder};
+  }
+  :-ms-input-placeholder {
+    color: ${(props) => props.theme.placeholder};
+  }
+`;
+
+const StyledIcon = styled(SearchIcon)`
+  position: absolute;
+  left: 8px;
+`;
+
+export default SearchInput;