[FR-57] Fix type errors (#14)

* fix type errors and add eslint rule

* fix more type errors and add ThreadStarterMessage message type

* fix types where possible

* make requested changes

* fix merge errors

Author: JohnyTheCarrot

.eslintrc.json

@@ -30,6 +30,7 @@
         "no-return-await": "error",
         "no-var": "error",
         "prefer-const": "error",
-        "yoda": "error"
+        "yoda": "error",
+        "@typescript-eslint/consistent-type-imports": "error"
     }
 }

package.json

@@ -12,7 +12,9 @@
     "build": "vite build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prepublishOnly": "pnpm build"
+    "prepublishOnly": "pnpm build",
+    "lint": "eslint --ext .ts,.tsx src",
+    "typeCheck": "tsc"
   },
   "repository": {
     "type": "git",
@@ -29,7 +31,7 @@
     "@stitches/react": "^1.3.1-1",
     "autobind-decorator": "^2.4.0",
     "color": "^4.2.3",
-    "discord-api-types": "^0.37.48",
+    "discord-api-types": "^0.37.52",
     "filesize": "^10.0.6",
     "highlight.js": "^11.7.0",
     "lodash": "^4.17.21",
@@ -60,8 +62,11 @@
     "@storybook/react-vite": "^7.0.27",
     "@storybook/testing-library": "^0.2.0",
     "@storybook/theming": "^7.0.27",
+    "@types/lodash": "^4.14.197",
+    "@types/memoizee": "^0.4.8",
     "@types/node": "^20.3.2",
     "@types/react": "^18.0.26",
+    "@types/react-lazy-load-image-component": "^1.5.3",
     "@types/storybook__react": "^5.2.1",
     "@typescript-eslint/eslint-plugin": "^5.59.9",
     "@typescript-eslint/parser": "^5.59.9",

pnpm-lock.yaml

@@ -1,9 +1,10 @@
 import Tooltip from "../Tooltip";
 import React from "react";
 import * as Styles from "./style";
-import { APIUser } from "discord-api-types/v10";
+import type { APIUser } from "discord-api-types/v10";
 import { useConfig } from "../core/ConfigContext";
 
+// todo: support custom
 const verified = (
   <Tooltip placement="top" overlay="Verified Bot">
     <Styles.VerifiedBot
@@ -21,13 +22,19 @@ const verified = (
   </Tooltip>
 );
 
+function isVerifiedBot(flags?: number) {
+  const FLAG_VERIFIED = 1 << 16;
+
+  return flags !== undefined && (flags & FLAG_VERIFIED) !== 0;
+}
+
 interface TagProps {
   author: APIUser;
-  crosspost: boolean;
-  referenceGuild: string;
+  crossPost: boolean;
+  referenceGuild: string | undefined;
 }
 
-function ChatTag({ author, crosspost, referenceGuild }: TagProps) {
+function ChatTag({ author, crossPost, referenceGuild }: TagProps) {
   const { chatBadge: ChatBadge } = useConfig();
 
   if (ChatBadge !== undefined) {
@@ -42,9 +49,9 @@ function ChatTag({ author, crosspost, referenceGuild }: TagProps) {
       <Styles.Tag className="verified system">{verified} SYSTEM</Styles.Tag>
     );
 
-  if (crosspost) return <Styles.Tag className="server">SERVER</Styles.Tag>;
+  if (crossPost) return <Styles.Tag className="server">SERVER</Styles.Tag>;
 
-  if (author.flags & (1 << 16))
+  if (isVerifiedBot(author.flags))
     return <Styles.Tag className="verified bot">{verified} BOT</Styles.Tag>;
 
   return <Styles.Tag className="bot">BOT</Styles.Tag>;

src/ChatTag/index.tsx

@@ -1,13 +1,22 @@
 import useSize from "./useSize";
 import React from "react";
 import * as Styles from "./style";
-import { APIAttachment } from "discord-api-types/v10";
+import type { APIAttachment } from "discord-api-types/v10";
 
 interface ImageAttachmentProps {
   attachment: APIAttachment;
 }
 
 function ImageAttachment(props: ImageAttachmentProps) {
+  if (!props.attachment.width || !props.attachment.height) {
+    // todo: dev mode only
+    console.error(
+      "ImageAttachment: attachment has no width or height",
+      props.attachment
+    );
+    return null;
+  }
+
   const { width, height } = useSize(
     props.attachment.width,
     props.attachment.height

src/Content/Attachment/ImageAttachment.tsx

@@ -10,19 +10,38 @@ import useSize from "./useSize";
 import * as Styles from "./style";
 import Tooltip from "../../Tooltip";
 import SvgFromUrl from "../../SvgFromUrl";
-import { APIAttachment, APIEmbed } from "discord-api-types/v10";
+import type { APIAttachment, APIEmbed } from "discord-api-types/v10";
+
+export type Attachment = APIAttachment & { width: number; height: number };
+type Embed = APIEmbed & {
+  width: number;
+  height: number;
+  video: Required<APIEmbed["video"]>;
+};
 
 interface VideoAttachmentProps {
   attachmentOrEmbed:
-    | APIAttachment
-    | APIEmbed
+    | Attachment
+    | Embed
     | {
         url: string;
         width: number;
         height: number;
       };
 }
 
+function checkWhetherVideoEmbed(
+  attachmentOrEmbed: VideoAttachmentProps["attachmentOrEmbed"]
+): attachmentOrEmbed is Embed {
+  return "video" in attachmentOrEmbed;
+}
+
+function isValidEmbedVideo(
+  embedVideo: APIEmbed["video"] | null
+): embedVideo is Exclude<APIEmbed["video"], null | undefined> {
+  return embedVideo !== null;
+}
+
 function VideoAttachment(props: VideoAttachmentProps) {
   const [hasPlayedOnceBefore, setHasPlayedOnceBefore] = useState(false);
   const [paused, setPaused] = useState(true);
@@ -32,10 +51,12 @@ function VideoAttachment(props: VideoAttachmentProps) {
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [isSeeking, setIsSeeking] = useState(false);
 
-  const videoRef = useRef(null);
-  const attachmentRef = useRef(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const attachmentRef = useRef<HTMLDivElement>(null);
 
   const durationPlayedHumanized = useMemo(() => {
+    if (videoRef.current === null) return "0:00/0:00";
+
     const minutesPassed = Math.floor(videoRef.current?.currentTime / 60);
     const secondsPassedRaw = Math.floor(videoRef.current?.currentTime % 60);
     const secondsPassed =
@@ -67,33 +88,38 @@ function VideoAttachment(props: VideoAttachmentProps) {
     );
   }, []);
 
-  const { width: extractedWidth, height: extractedHeight } =
-    "video" in props.attachmentOrEmbed
-      ? props.attachmentOrEmbed.video
-      : (props.attachmentOrEmbed as APIAttachment);
+  if (
+    checkWhetherVideoEmbed(props.attachmentOrEmbed) &&
+    !isValidEmbedVideo(props.attachmentOrEmbed)
+  ) {
+    console.error("Video embed has no video property", props.attachmentOrEmbed);
+    return null;
+  }
 
-  const { width, height } = useSize(
-    extractedWidth,
-    extractedHeight,
-    isFullscreen
-  );
+  const { width: extractedWidth, height: extractedHeight } =
+    checkWhetherVideoEmbed(props.attachmentOrEmbed)
+      ? (props.attachmentOrEmbed.video as Exclude<
+          Embed["video"],
+          null | undefined
+        >)
+      : props.attachmentOrEmbed;
 
   function fullScreenChange() {
     setIsFullscreen(document.fullscreenElement !== null);
   }
-
-  function seekVideo(e, overrideSeeking?: boolean) {
+  function seekVideo(
+    e: React.MouseEvent<HTMLDivElement>,
+    overrideSeeking?: boolean
+  ) {
     if (videoRef.current === null || (!isSeeking && !overrideSeeking)) return;
+    const rect = e.currentTarget.getBoundingClientRect();
 
-    const rect = e.target.getBoundingClientRect();
     const x = e.clientX - rect.left;
-
     const duration = videoRef.current?.duration;
-    if (duration === undefined) return;
 
+    if (duration === undefined) return;
     videoRef.current.currentTime = (x / rect.width) * duration;
   }
-
   useEffect(() => {
     document.addEventListener("fullscreenchange", fullScreenChange);
 
@@ -102,6 +128,14 @@ function VideoAttachment(props: VideoAttachmentProps) {
     };
   }, []);
 
+  const { width, height } = useSize(
+    extractedWidth,
+    extractedHeight,
+    isFullscreen
+  );
+
+  if (width === undefined || height === undefined) return null;
+
   return (
     <Styles.VideoAttachmentContainer
       style={{ width, height }}
@@ -168,7 +202,8 @@ function VideoAttachment(props: VideoAttachmentProps) {
             <Styles.ProgressBarFill
               style={{
                 width:
-                  (videoRef.current?.currentTime / videoRef.current?.duration) *
+                  ((videoRef.current?.currentTime ?? 0) /
+                    (videoRef.current?.duration ?? 1)) *
                     100 +
                   "%",
               }}
@@ -180,7 +215,10 @@ function VideoAttachment(props: VideoAttachmentProps) {
               height={14}
               svg="IconFullscreen"
               onClick={() => {
-                if (document.fullscreenElement === null)
+                if (
+                  attachmentRef.current !== null &&
+                  document.fullscreenElement === null
+                )
                   attachmentRef.current?.requestFullscreen();
                 else void document.exitFullscreen();
               }}

src/Content/Attachment/VideoAttachment.tsx

@@ -4,7 +4,7 @@ import ImageAttachment from "./ImageAttachment";
 import GenericAttachment from "./GenericAttachment";
 import * as Styles from "./style";
 
-import { APIAttachment } from "discord-api-types/v10";
+import type { APIAttachment } from "discord-api-types/v10";
 
 export interface AttachmentProps {
   attachment: APIAttachment;
@@ -13,6 +13,7 @@ export interface AttachmentProps {
 function AttachmentBase(props: AttachmentProps) {
   if (props.attachment.width && props.attachment.height) {
     if (/\.(?:mp4|webm|mov)$/.test(props.attachment.filename))
+      // @ts-expect-error TS2322 Type error is not applicable here
       return <VideoAttachment attachmentOrEmbed={props.attachment} />;
 
     return <ImageAttachment attachment={props.attachment} />;

src/Content/Attachment/index.tsx

@@ -1,6 +1,7 @@
 import * as Styles from "./style";
-import React, { ReactNode, useState } from "react";
-import { APIEmbedThumbnail, APIEmbedVideo } from "discord-api-types/v10";
+import type { ReactNode } from "react";
+import React, { useState } from "react";
+import type { APIEmbedThumbnail, APIEmbedVideo } from "discord-api-types/v10";
 import useSize from "../Attachment/useSize";
 import { getSvgUrl } from "../../core/svgs";
 import VideoAttachment from "../Attachment/VideoAttachment";
@@ -51,7 +52,8 @@ function ThumbnailWrapper({
   );
 }
 
-interface EmbedVideoProps extends Pick<APIEmbedVideo, "width" | "height"> {
+interface EmbedVideoProps
+  extends Required<Pick<APIEmbedVideo, "width" | "height">> {
   thumbnail?: APIEmbedThumbnail["url"];
   url: APIEmbedVideo["url"] | undefined;
   proxyUrl: APIEmbedVideo["proxy_url"] | undefined;
@@ -75,6 +77,11 @@ function EmbedVideo(props: EmbedVideoProps) {
       </ThumbnailWrapper>
     );
 
+  if (props.url === undefined) {
+    console.error("EmbedVideo: url is undefined when proxyUrl is undefined");
+    return null;
+  }
+
   const url = new URL(props.url);
   url.searchParams.set("autoplay", "1");
   url.searchParams.set("auto_play", "1");