Merge branch 'ts' into 'develop'

JS -> TS, FC

See merge request soapbox-pub/soapbox!1634

app/soapbox/components/extended_video_player.js

@@ -1,70 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import { isIOS } from 'soapbox/is_mobile';
-
-export default class ExtendedVideoPlayer extends React.PureComponent {
-
-  static propTypes = {
-    src: PropTypes.string.isRequired,
-    alt: PropTypes.string,
-    width: PropTypes.number,
-    height: PropTypes.number,
-    time: PropTypes.number,
-    controls: PropTypes.bool.isRequired,
-    muted: PropTypes.bool.isRequired,
-    onClick: PropTypes.func,
-  };
-
-  handleLoadedData = () => {
-    if (this.props.time) {
-      this.video.currentTime = this.props.time;
-    }
-  }
-
-  componentDidMount() {
-    this.video.addEventListener('loadeddata', this.handleLoadedData);
-  }
-
-  componentWillUnmount() {
-    this.video.removeEventListener('loadeddata', this.handleLoadedData);
-  }
-
-  setRef = (c) => {
-    this.video = c;
-  }
-
-  handleClick = e => {
-    e.stopPropagation();
-    const handler = this.props.onClick;
-    if (handler) handler();
-  }
-
-  render() {
-    const { src, muted, controls, alt } = this.props;
-    const conditionalAttributes = {};
-    if (isIOS()) {
-      conditionalAttributes.playsInline = '1';
-    }
-
-    return (
-      <div className='extended-video-player'>
-        <video
-          ref={this.setRef}
-          src={src}
-          autoPlay
-          role='button'
-          tabIndex='0'
-          aria-label={alt}
-          title={alt}
-          muted={muted}
-          controls={controls}
-          loop={!controls}
-          onClick={this.handleClick}
-          {...conditionalAttributes}
-        />
-      </div>
-    );
-  }
-
-}

app/soapbox/components/extended_video_player.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useRef } from 'react';
+
+import { isIOS } from 'soapbox/is_mobile';
+
+interface IExtendedVideoPlayer {
+  src: string,
+  alt?: string,
+  width?: number,
+  height?: number,
+  time?: number,
+  controls?: boolean,
+  muted?: boolean,
+  onClick?: () =>  void,
+}
+
+const ExtendedVideoPlayer: React.FC<IExtendedVideoPlayer> = ({ src, alt, time, controls, muted, onClick }) => {
+  const video = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    const handleLoadedData = () => {
+      if (time) {
+        video.current!.currentTime = time;
+      }
+    };
+
+    video.current?.addEventListener('loadeddata', handleLoadedData);
+
+    return () => {
+      video.current?.removeEventListener('loadeddata', handleLoadedData);
+    };
+  }, [video.current]);
+
+  const handleClick: React.MouseEventHandler<HTMLVideoElement> = e => {
+    e.stopPropagation();
+    const handler = onClick;
+    if (handler) handler();
+  };
+
+  const conditionalAttributes: React.VideoHTMLAttributes<HTMLVideoElement> = {};
+  if (isIOS()) {
+    conditionalAttributes.playsInline = true;
+  }
+
+  return (
+    <div className='extended-video-player'>
+      <video
+        ref={video}
+        src={src}
+        autoPlay
+        role='button'
+        tabIndex={0}
+        aria-label={alt}
+        title={alt}
+        muted={muted}
+        controls={controls}
+        loop={!controls}
+        onClick={handleClick}
+        {...conditionalAttributes}
+      />
+    </div>
+  );
+};
+
+export default ExtendedVideoPlayer;

app/soapbox/components/modal_root.tsx

@@ -9,6 +9,7 @@ import { openModal, closeModal } from 'soapbox/actions/modals';
 import { useAppDispatch, useAppSelector, usePrevious } from 'soapbox/hooks';
 
 import type { UnregisterCallback } from 'history';
+import type { ModalType } from 'soapbox/features/ui/components/modal_root';
 import type { ReducerCompose } from 'soapbox/reducers/compose';
 
 const messages = defineMessages({
@@ -26,8 +27,8 @@ export const checkComposeContent = (compose?: ReturnType<typeof ReducerCompose>)
 
 interface IModalRoot {
   onCancel?: () => void,
-  onClose: (type?: string) => void,
-  type: string,
+  onClose: (type?: ModalType) => void,
+  type: ModalType,
 }
 
 const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type }) => {

app/soapbox/components/sidebar-navigation.tsx

@@ -28,7 +28,7 @@ const SidebarNavigation = () => {
   const instance = useAppSelector((state) => state.instance);
   const settings = useAppSelector((state) => getSettings(state));
   const account = useOwnAccount();
-  const notificationCount = useAppSelector((state) => state.notifications.get('unread'));
+  const notificationCount = useAppSelector((state) => state.notifications.unread);
   const chatsCount = useAppSelector((state) => state.chats.items.reduce((acc, curr) => acc + Math.min(curr.unread || 0, 1), 0));
   const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count());
   const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());