chore: Move to Typescript (#2783)

This PR moves the entire project to Typescript. Due to the ~1000 ignores this will lead to a messy codebase for a while, but the churn is worth it – all of those ignore comments are places that were never type-safe previously.

closes #1282

app/scenes/Search/components/CollectionFilter.tsx

@@ -1,26 +1,23 @@
-// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import FilterOptions from "components/FilterOptions";
-import useStores from "hooks/useStores";
+import FilterOptions from "~/components/FilterOptions";
+import useStores from "~/hooks/useStores";
 
-type Props = {|
-  collectionId: ?string,
-  onSelect: (key: ?string) => void,
-|};
+type Props = {
+  collectionId: string | undefined;
+  onSelect: (key: string | undefined) => void;
+};
 
 function CollectionFilter(props: Props) {
   const { t } = useTranslation();
   const { collections } = useStores();
   const { onSelect, collectionId } = props;
-
   const options = React.useMemo(() => {
     const collectionOptions = collections.orderedData.map((user) => ({
       key: user.id,
       label: user.name,
     }));
-
     return [
       {
         key: "",
@@ -29,7 +26,6 @@ function CollectionFilter(props: Props) {
       ...collectionOptions,
     ];
   }, [collections.orderedData, t]);
-
   return (
     <FilterOptions
       options={options}

app/scenes/Search/components/DateFilter.js

@@ -1,35 +0,0 @@
-// @flow
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import FilterOptions from "components/FilterOptions";
-
-type Props = {|
-  dateFilter: ?string,
-  onSelect: (key: ?string) => void,
-|};
-
-const DateFilter = ({ dateFilter, onSelect }: Props) => {
-  const { t } = useTranslation();
-
-  const options = React.useMemo(
-    () => [
-      { key: "", label: t("Any time") },
-      { key: "day", label: t("Past day") },
-      { key: "week", label: t("Past week") },
-      { key: "month", label: t("Past month") },
-      { key: "year", label: t("Past year") },
-    ],
-    [t]
-  );
-
-  return (
-    <FilterOptions
-      options={options}
-      activeKey={dateFilter}
-      onSelect={onSelect}
-      defaultLabel={t("Any time")}
-    />
-  );
-};
-
-export default DateFilter;

app/scenes/Search/components/DateFilter.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { DateFilter as TDateFilter } from "@shared/types";
+import FilterOptions from "~/components/FilterOptions";
+
+type Props = {
+  dateFilter: string | null | undefined;
+  onSelect: (key: TDateFilter) => void;
+};
+
+const DateFilter = ({ dateFilter, onSelect }: Props) => {
+  const { t } = useTranslation();
+  const options = React.useMemo(
+    () => [
+      {
+        key: "",
+        label: t("Any time"),
+      },
+      {
+        key: "day",
+        label: t("Past day"),
+      },
+      {
+        key: "week",
+        label: t("Past week"),
+      },
+      {
+        key: "month",
+        label: t("Past month"),
+      },
+      {
+        key: "year",
+        label: t("Past year"),
+      },
+    ],
+    [t]
+  );
+
+  return (
+    <FilterOptions
+      options={options}
+      activeKey={dateFilter}
+      onSelect={onSelect}
+      defaultLabel={t("Any time")}
+    />
+  );
+};
+
+export default DateFilter;

app/scenes/Search/components/SearchInput.tsx

@@ -1,17 +1,16 @@
-// @flow
 import { SearchIcon } from "outline-icons";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
-import Flex from "components/Flex";
+import Flex from "~/components/Flex";
 
-type Props = {
-  defaultValue?: string,
-  placeholder?: string,
+type Props = React.HTMLAttributes<HTMLInputElement> & {
+  defaultValue?: string;
+  placeholder?: string;
 };
 
 function SearchInput({ defaultValue, ...rest }: Props) {
   const theme = useTheme();
-  const inputRef = React.useRef();
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   React.useEffect(() => {
     // ensure that focus is placed at end of input
@@ -19,7 +18,7 @@ function SearchInput({ defaultValue, ...rest }: Props) {
     inputRef.current?.setSelectionRange(len, len);
   }, [defaultValue]);
 
-  const focusInput = React.useCallback((ev: SyntheticEvent<>) => {
+  const focusInput = React.useCallback(() => {
     inputRef.current?.focus();
   }, []);
 

app/scenes/Search/components/StatusFilter.tsx

@@ -1,16 +1,14 @@
-// @flow
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import FilterOptions from "components/FilterOptions";
+import FilterOptions from "~/components/FilterOptions";
 
-type Props = {|
-  includeArchived?: boolean,
-  onSelect: (key: ?string) => void,
-|};
+type Props = {
+  includeArchived?: boolean;
+  onSelect: (key: boolean) => void;
+};
 
 const StatusFilter = ({ includeArchived, onSelect }: Props) => {
   const { t } = useTranslation();
-
   const options = React.useMemo(
     () => [
       {
@@ -31,7 +29,7 @@ const StatusFilter = ({ includeArchived, onSelect }: Props) => {
     <FilterOptions
       options={options}
       activeKey={includeArchived ? "true" : undefined}
-      onSelect={onSelect}
+      onSelect={(key) => onSelect(key === "true")}
       defaultLabel={t("Active documents")}
     />
   );

app/scenes/Search/components/UserFilter.tsx

@@ -1,14 +1,13 @@
-// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import FilterOptions from "components/FilterOptions";
-import useStores from "hooks/useStores";
+import FilterOptions from "~/components/FilterOptions";
+import useStores from "~/hooks/useStores";
 
-type Props = {|
-  userId: ?string,
-  onSelect: (key: ?string) => void,
-|};
+type Props = {
+  userId: string | undefined;
+  onSelect: (key: string | undefined) => void;
+};
 
 function UserFilter(props: Props) {
   const { onSelect, userId } = props;
@@ -16,7 +15,9 @@ function UserFilter(props: Props) {
   const { users } = useStores();
 
   React.useEffect(() => {
-    users.fetchPage({ limit: 100 });
+    users.fetchPage({
+      limit: 100,
+    });
   }, [users]);
 
   const options = React.useMemo(() => {
@@ -24,7 +25,6 @@ function UserFilter(props: Props) {
       key: user.id,
       label: user.name,
     }));
-
     return [
       {
         key: "",