fix: Various React warnings

app/components/Highlight.js

@@ -18,6 +18,7 @@ function Highlight({
   ...rest
 }: Props) {
   let regex;
+  let index = 0;
   if (highlight instanceof RegExp) {
     regex = highlight;
   } else {
@@ -29,8 +30,10 @@ function Highlight({
   return (
     <span {...rest}>
       {highlight
-        ? replace(text, regex, (tag, index) => (
-            <Mark key={index}>{processResult ? processResult(tag) : tag}</Mark>
+        ? replace(text, regex, (tag) => (
+            <Mark key={index++}>
+              {processResult ? processResult(tag) : tag}
+            </Mark>
           ))
         : text}
     </span>

app/scenes/Search/Search.js

@@ -302,31 +302,29 @@ class Search extends React.Component<Props> {
           )}
           {showEmpty && (
             <Fade>
-              <Empty>
-                <Centered column>
-                  <HelpText>
-                    No documents found for your search filters. <br />
-                    Create a new document?
-                  </HelpText>
-                  <Wrapper>
-                    {this.collectionId ? (
-                      <Button
-                        onClick={this.handleNewDoc}
-                        icon={<PlusIcon />}
-                        primary
-                      >
-                        New doc
-                      </Button>
-                    ) : (
-                      <NewDocumentMenu />
-                    )}
-                    &nbsp;&nbsp;
-                    <Button as={Link} to="/search" neutral>
-                      Clear filters
+              <Centered column>
+                <HelpText>
+                  No documents found for your search filters. <br />
+                  Create a new document?
+                </HelpText>
+                <Wrapper>
+                  {this.collectionId ? (
+                    <Button
+                      onClick={this.handleNewDoc}
+                      icon={<PlusIcon />}
+                      primary
+                    >
+                      New doc
                     </Button>
-                  </Wrapper>
-                </Centered>
-              </Empty>
+                  ) : (
+                    <NewDocumentMenu />
+                  )}
+                  &nbsp;&nbsp;
+                  <Button as={Link} to="/search" neutral>
+                    Clear filters
+                  </Button>
+                </Wrapper>
+              </Centered>
             </Fade>
           )}
           <ResultList column visible={this.pinToTop}>

app/scenes/Search/components/CollectionFilter.js

@@ -5,7 +5,7 @@ import CollectionsStore from "stores/CollectionsStore";
 import FilterOptions from "./FilterOptions";
 
 const defaultOption = {
-  key: undefined,
+  key: "",
   label: "Any collection",
 };
 

app/scenes/Search/components/DateFilter.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import FilterOptions from "./FilterOptions";
 
 const options = [
-  { key: undefined, label: "Any time" },
+  { key: "", label: "Any time" },
   { key: "day", label: "Past day" },
   { key: "week", label: "Past week" },
   { key: "month", label: "Past month" },

app/scenes/Search/components/FilterOptions.js

@@ -8,7 +8,7 @@ import FilterOption from "./FilterOption";
 
 type Props = {
   options: {
-    key: ?string,
+    key: string,
     label: string,
     note?: string,
   }[],
@@ -20,7 +20,7 @@ type Props = {
 
 const FilterOptions = ({
   options,
-  activeKey,
+  activeKey = "",
   defaultLabel,
   selectedPrefix = "",
   onSelect,

app/scenes/Search/components/StatusFilter.js

@@ -4,7 +4,7 @@ import FilterOptions from "./FilterOptions";
 
 const options = [
   {
-    key: undefined,
+    key: "",
     label: "Active documents",
     note: "Documents in collections you are able to access",
   },

app/scenes/Search/components/UserFilter.js

@@ -5,7 +5,7 @@ import UsersStore from "stores/UsersStore";
 import FilterOptions from "./FilterOptions";
 
 const defaultOption = {
-  key: undefined,
+  key: "",
   label: "Any author",
 };