Refactor DocSearch to functional component with hooks (codesandbox#1940)

Author: MichaelDeBoey

packages/homepage/src/components/DocSearch.js

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
 import Input from '@codesandbox/common/lib/components/Input';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import DocSearchStyle from '../css/docSearch';
 
@@ -10,53 +10,48 @@ const StyledInput = styled(Input)`
   padding-left: 8px;
   border-radius: 4px;
   padding-right: 30px;
-  box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.25);
 
   &:focus,
   &:hover {
     border: 1px solid #0d7bc9;
-    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.6);
+    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.6);
   }
 `;
 
-class DocSearch extends Component {
-  state = {
-    enabled: true,
-  };
-  componentDidMount() {
+const DocSearch = () => {
+  const [enabled, setEnabled] = useState(true);
+
+  useEffect(() => {
     // Initialize Algolia search.
-    // eslint-disable-next-line no-undef
     if (window.docsearch) {
       window.docsearch({
         apiKey: '45db7de01ac97a7c4c673846830c4117',
+        debug: false,
         indexName: 'codesandbox',
         inputSelector: '#algolia-doc-search',
-        debug: false,
       });
     } else {
       // eslint-disable-next-line
       console.warn('Search has failed to load and now is being disabled');
-      // eslint-disable-next-line
-      this.setState({ enabled: false });
+
+      setEnabled(false);
     }
-  }
+  }, []);
 
-  render() {
-    const { enabled } = this.state;
-
-    return enabled ? (
-      <form style={{ margin: 0 }}>
-        <StyledInput
-          id="algolia-doc-search"
-          type="search"
-          placeholder="Search our docs"
-          aria-label="Search docs"
-          block
-        />
-        <DocSearchStyle />
-      </form>
-    ) : null;
-  }
-}
+  return enabled ? (
+    <form style={{ margin: 0 }}>
+      <StyledInput
+        aria-label="Search docs"
+        block
+        id="algolia-doc-search"
+        placeholder="Search our docs"
+        type="search"
+      />
+
+      <DocSearchStyle />
+    </form>
+  ) : null;
+};
 
 export default DocSearch;