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/components/DocumentMetaWithViews.tsx

@@ -0,0 +1,86 @@
+import { useObserver } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
+import styled from "styled-components";
+import Document from "~/models/Document";
+import DocumentMeta from "~/components/DocumentMeta";
+import DocumentViews from "~/components/DocumentViews";
+import Popover from "~/components/Popover";
+import useStores from "~/hooks/useStores";
+
+type Props = {
+  document: Document;
+  isDraft: boolean;
+  to?: string;
+  rtl?: boolean;
+};
+
+function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
+  const { views } = useStores();
+  const { t } = useTranslation();
+  const documentViews = useObserver(() => views.inDocument(document.id));
+  const totalViewers = documentViews.length;
+  const onlyYou = totalViewers === 1 && documentViews[0].user.id;
+
+  React.useEffect(() => {
+    if (!document.isDeleted) {
+      views.fetchPage({
+        documentId: document.id,
+      });
+    }
+  }, [views, document.id, document.isDeleted]);
+
+  const popover = usePopoverState({
+    gutter: 8,
+    placement: "bottom",
+    modal: true,
+  });
+
+  return (
+    <Meta document={document} to={to} {...rest}>
+      {totalViewers && !isDraft ? (
+        <PopoverDisclosure {...popover}>
+          {(props) => (
+            <>
+              &nbsp;•&nbsp;
+              <a {...props}>
+                {t("Viewed by")}{" "}
+                {onlyYou
+                  ? t("only you")
+                  : `${totalViewers} ${
+                      totalViewers === 1 ? t("person") : t("people")
+                    }`}
+              </a>
+            </>
+          )}
+        </PopoverDisclosure>
+      ) : null}
+      <Popover {...popover} width={300} aria-label={t("Viewers")} tabIndex={0}>
+        <DocumentViews document={document} isOpen={popover.visible} />
+      </Popover>
+    </Meta>
+  );
+}
+
+const Meta = styled(DocumentMeta)<{ rtl?: boolean }>`
+  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+  margin: -12px 0 2em 0;
+  font-size: 14px;
+  position: relative;
+  z-index: 1;
+
+  a {
+    color: inherit;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media print {
+    display: none;
+  }
+`;
+
+export default DocumentMetaWithViews;