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/Avatar/Avatar.tsx

@@ -1,24 +1,24 @@
-// @flow
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
-import User from "models/User";
+import User from "~/models/User";
 import placeholder from "./placeholder.png";
 
-type Props = {|
-  src: string,
-  size: number,
-  icon?: React.Node,
-  user?: User,
-  alt?: string,
-  onClick?: () => void,
-  className?: string,
-|};
+type Props = {
+  src: string;
+  size: number;
+  icon?: React.ReactNode;
+  user?: User;
+  alt?: string;
+  onClick?: () => void;
+  className?: string;
+};
 
 @observer
 class Avatar extends React.Component<Props> {
-  @observable error: boolean;
+  @observable
+  error: boolean;
 
   static defaultProps = {
     size: 24,
@@ -30,7 +30,6 @@ class Avatar extends React.Component<Props> {
 
   render() {
     const { src, icon, ...rest } = this.props;
-
     return (
       <AvatarWrapper>
         <CircleImg
@@ -60,7 +59,7 @@ const IconWrapper = styled.div`
   height: 20px;
 `;
 
-const CircleImg = styled.img`
+const CircleImg = styled.img<{ size: number }>`
   display: block;
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;

app/components/Avatar/AvatarWithPresence.tsx

@@ -1,26 +1,25 @@
-// @flow
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
-import User from "models/User";
-import UserProfile from "scenes/UserProfile";
-import Avatar from "components/Avatar";
-import Tooltip from "components/Tooltip";
+import User from "~/models/User";
+import UserProfile from "~/scenes/UserProfile";
+import Avatar from "~/components/Avatar";
+import Tooltip from "~/components/Tooltip";
 
-type Props = {
-  user: User,
-  isPresent: boolean,
-  isEditing: boolean,
-  isCurrentUser: boolean,
-  profileOnClick: boolean,
-  t: TFunction,
+type Props = WithTranslation & {
+  user: User;
+  isPresent: boolean;
+  isEditing: boolean;
+  isCurrentUser: boolean;
+  profileOnClick: boolean;
 };
 
 @observer
 class AvatarWithPresence extends React.Component<Props> {
-  @observable isOpen: boolean = false;
+  @observable
+  isOpen = false;
 
   handleOpenProfile = () => {
     this.isOpen = true;
@@ -32,13 +31,11 @@ class AvatarWithPresence extends React.Component<Props> {
 
   render() {
     const { user, isPresent, isEditing, isCurrentUser, t } = this.props;
-
     const action = isPresent
       ? isEditing
         ? t("currently editing")
         : t("currently viewing")
       : t("previously edited");
-
     return (
       <>
         <Tooltip
@@ -81,9 +78,9 @@ const Centered = styled.div`
   text-align: center;
 `;
 
-const AvatarWrapper = styled.div`
+const AvatarWrapper = styled.div<{ isPresent: boolean }>`
   opacity: ${(props) => (props.isPresent ? 1 : 0.5)};
   transition: opacity 250ms ease-in-out;
 `;
 
-export default withTranslation()<AvatarWithPresence>(AvatarWithPresence);
+export default withTranslation()(AvatarWithPresence);

app/components/Avatar/index.ts

@@ -1,6 +1,6 @@
-// @flow
 import Avatar from "./Avatar";
 import AvatarWithPresence from "./AvatarWithPresence";
 
 export { AvatarWithPresence };
+
 export default Avatar;