chore: cleanup

app/components/CenteredContent.tsx

@@ -12,7 +12,7 @@ const Container = styled.div<Props>`
   padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")};
 
   ${breakpoint("tablet")`
-    padding: ${(props: any) =>
+    padding: ${(props: Props) =>
       props.withStickyHeader ? "4px 44px 60px" : "60px 44px"};
   `};
 `;

app/components/ContextMenu/Separator.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { MenuSeparator } from "reakit/Menu";
 import styled from "styled-components";
 
-export default function Separator(rest: any) {
+export default function Separator(rest: React.HTMLAttributes<HTMLHRElement>) {
   return (
     <MenuSeparator {...rest}>
       {(props) => <HorizontalRule {...props} />}

app/components/GroupListItem.tsx

@@ -19,7 +19,7 @@ type Props = RootStore & {
   membership?: CollectionGroupMembership;
   showFacepile?: boolean;
   showAvatar?: boolean;
-  renderActions: (arg0: { openMembersModal: () => void }) => React.ReactNode;
+  renderActions: (params: { openMembersModal: () => void }) => React.ReactNode;
 };
 
 @observer

app/components/NavLink.tsx

@@ -1,8 +1,15 @@
 import * as React from "react";
-import { NavLink, Route } from "react-router-dom";
+import { match, NavLink, Route } from "react-router-dom";
 
 type Props = React.ComponentProps<typeof NavLink> & {
-  children?: (match: any) => React.ReactNode;
+  children?: (
+    match:
+      | match<{
+          [x: string]: string | undefined;
+        }>
+      | boolean
+      | null
+  ) => React.ReactNode;
   exact?: boolean;
   activeStyle?: React.CSSProperties;
   to: string;

app/components/PathToDocument.tsx

@@ -14,7 +14,7 @@ type Props = {
   collection: Collection | null | undefined;
   onSuccess?: () => void;
   style?: React.CSSProperties;
-  ref?: (arg0: React.ElementRef<"div"> | null | undefined) => void;
+  ref?: (element: React.ElementRef<"div"> | null | undefined) => void;
 };
 
 @observer

app/components/Sidebar/Sidebar.tsx

@@ -65,8 +65,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
     const handleStopDrag = React.useCallback(() => {
       setResizing(false);
 
-      if (document.activeElement) {
+      if (document.activeElement instanceof HTMLElement) {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'blur' does not exist on type 'Element'.
         document.activeElement.blur();
       }
 

app/hooks/useDebouncedCallback.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
 
-export default function useDebouncedCallback(
+export default function useDebouncedCallback<T>(
-  callback: (arg0: any) => unknown,
+  callback: (...params: T[]) => unknown,
   wait: number
 ) {
   // track args & timeout handle between calls
-  const argsRef = React.useRef();
+  const argsRef = React.useRef<T[]>();
   const timeout = React.useRef<ReturnType<typeof setTimeout>>();
 
   function cleanup() {
@@ -16,12 +16,11 @@ export default function useDebouncedCallback(
 
   // make sure our timeout gets cleared if consuming component gets unmounted
   React.useEffect(() => cleanup, []);
-  return function (...args: any) {
+  return function (...args: T[]) {
     argsRef.current = args;
     cleanup();
     timeout.current = setTimeout(() => {
       if (argsRef.current) {
-        // @ts-expect-error ts-migrate(2556) FIXME: Expected 1 arguments, but got 0 or more.
         callback(...argsRef.current);
       }
     }, wait);

app/scenes/Document/components/MultiplayerEditor.tsx

@@ -241,8 +241,8 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
   // we must prevent the user from continuing to edit as their changes will not
   // be persisted. See: https://github.com/yjs/yjs/issues/303
   React.useEffect(() => {
-    function onUnhandledError(err: any) {
+    function onUnhandledError(event: ErrorEvent) {
-      if (err.message.includes("URIError: URI malformed")) {
+      if (event.message.includes("URIError: URI malformed")) {
         showToast(
           t(
             "Sorry, the last change could not be persisted – please reload the page"

app/scenes/Invite.tsx

@@ -223,7 +223,7 @@ function Invite({ onSubmit }: Props) {
             required={!!invite.email}
           />
           <InputSelectRole
-            onChange={(role: any) => handleRoleChange(role as Role, index)}
+            onChange={(role: Role) => handleRoleChange(role, index)}
             value={invite.role}
             labelHidden={index !== 0}
             short

app/scenes/Settings/components/ImageUpload.tsx

@@ -14,8 +14,6 @@ import withStores from "~/components/withStores";
 import { compressImage } from "~/utils/compressImage";
 import { uploadFile, dataUrlToBlob } from "~/utils/files";
 
-const EMPTY_OBJECT = {};
-
 export type Props = {
   onSuccess: (url: string) => void | Promise<void>;
   onError: (error: string) => void;
@@ -84,7 +82,7 @@ class ImageUpload extends React.Component<RootStore & Props> {
     this.isCropping = false;
   };
 
-  handleZoom = (event: React.DragEvent<any>) => {
+  handleZoom = (event: React.ChangeEvent<HTMLInputElement>) => {
     const target = event.target;
 
     if (target instanceof HTMLInputElement) {
@@ -119,7 +117,6 @@ class ImageUpload extends React.Component<RootStore & Props> {
             max="2"
             step="0.01"
             defaultValue="1"
-            // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
             onChange={this.handleZoom}
           />
           <CropButton onClick={this.handleCrop} disabled={this.isUploading}>
@@ -139,9 +136,6 @@ class ImageUpload extends React.Component<RootStore & Props> {
       <Dropzone
         accept="image/png, image/jpeg"
         onDropAccepted={this.onDropAccepted}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: ({ getRootProps, getInputProps }... Remove this comment to see the full error message
-        style={EMPTY_OBJECT}
-        disablePreview
       >
         {({ getRootProps, getInputProps }) => (
           <div {...getRootProps()}>