refactor: convert rhs_sidebar component to ts

- convert component to ts - update types Fixes: #425
mattermost · Oct 1, 2024 · 9c97a43 · 9c97a43
1 parent f1ec0c9
commit 9c97a43
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 49 deletions.
diff --git a/webapp/src/components/rhs_sidebar/index.js b/webapp/src/components/rhs_sidebar/index.js
@@ -11,7 +11,7 @@ import {
 } from '../../actions';
 import {getPluginServerRoute} from '../../selectors';
 
-import RHSSidebar from './rhs_sidebar.jsx';
+import RHSSidebar from './rhs_sidebar';
 
 const noSubscriptions = [];
 

diff --git a/...rc/components/rhs_sidebar/rhs_sidebar.jsx → ...rc/components/rhs_sidebar/rhs_sidebar.tsx b/...rc/components/rhs_sidebar/rhs_sidebar.jsx → ...rc/components/rhs_sidebar/rhs_sidebar.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import {isDesktopApp} from 'src/utils/user_agent';
 import {connectUsingBrowserMessage} from 'src/constants';
@@ -9,8 +8,8 @@ import NoSubscriptionsSVG from './no_subscriptions';
 
 import './rhs_sidebar.css';
 
-const NotSignedIn = (props) => {
-    const openConnectWindow = (e) => {
+const NotSignedIn = (props: NotSignedInProps) => {
+    const openConnectWindow = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
         e.preventDefault();
         if (isDesktopApp()) {
             props.sendEphemeralPost(connectUsingBrowserMessage);
@@ -38,12 +37,12 @@ const NotSignedIn = (props) => {
     );
 };
 
-NotSignedIn.propTypes = {
-    pluginServerRoute: PropTypes.string.isRequired,
-    sendEphemeralPost: PropTypes.func.isRequired,
-};
+interface NotSignedInProps {
+    pluginServerRoute: string;
+    sendEphemeralPost: (message: string) => void;
+}
 
-const UserHeader = (props) => (
+const UserHeader = (props: UserHeaderProps) => (
     <div className='gitlab-rhs-UserHeaderContainer'>
         <img
             className='gitlab-rhs-UserProfile Avatar Avatar-lg'
@@ -62,13 +61,13 @@ const UserHeader = (props) => (
     </div>
 );
 
-UserHeader.propTypes = {
-    currentUserId: PropTypes.string.isRequired,
-    username: PropTypes.string.isRequired,
-    gitlabURL: PropTypes.string.isRequired,
-};
+interface UserHeaderProps {
+    currentUserId: string;
+    username: string;
+    gitlabURL: string;
+}
 
-const Subscription = (props) => {
+const Subscription = (props: SubscriptionProps) => {
     return (
         <div className='gitlab-rhs-SubscriptionContainer'>
             <div>
@@ -91,13 +90,13 @@ const Subscription = (props) => {
     );
 };
 
-Subscription.propTypes = {
-    url: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    features: PropTypes.arrayOf(PropTypes.string).isRequired,
-};
+interface SubscriptionProps {
+    url: string;
+    name: string;
+    features: string[];
+}
 
-const Subscriptions = (props) => {
+const Subscriptions = (props: SubscriptionsProps) => {
     if (props.subscriptions.length === 0) {
         return (
             <div className='gitlab-rhs-NoSubscriptionsContainer'>
@@ -125,34 +124,37 @@ const Subscriptions = (props) => {
     );
 };
 
-Subscriptions.propTypes = {
-    currentChannelId: PropTypes.string,
-    subscriptions: PropTypes.arrayOf(PropTypes.shape({
-        repository_name: PropTypes.string.isRequired,
-        repository_url: PropTypes.string.isRequired,
-    })).isRequired,
-};
+interface SubscriptionsProps {
+    currentChannelId: string;
+    subscriptions: Subscription[];
+}
 
-export default class RHSSidebar extends React.PureComponent {
-    static propTypes = {
-        currentUserId: PropTypes.string.isRequired,
-        connected: PropTypes.bool.isRequired,
-        username: PropTypes.string,
-        gitlabURL: PropTypes.string,
-        currentChannelId: PropTypes.string,
-        currentChannelSubscriptions: PropTypes.arrayOf(PropTypes.shape({
-            repository_name: PropTypes.string,
-            repository_url: PropTypes.string,
-            features: PropTypes.arrayOf(PropTypes.string),
-        })).isRequired,
-        pluginServerRoute: PropTypes.string.isRequired,
-        actions: PropTypes.shape({
-            getChannelSubscriptions: PropTypes.func.isRequired,
-            sendEphemeralPost: PropTypes.func.isRequired,
-        }).isRequired,
-    };
+interface Subscription {
+    repository_name: string;
+    repository_url: string;
+    features: string[];
+}
+
+interface RhsSidebarProps {
+    currentUserId: string,
+    connected: boolean,
+    username: string,
+    gitlabURL: string,
+    currentChannelId: string,
+    currentChannelSubscriptions: Subscription[],
+    pluginServerRoute: string,
+    actions: {
+        getChannelSubscriptions: (channel: string) => Promise<void>,
+        sendEphemeralPost: (message: string) => void;
+    }
+}
+
+interface RhsSidebarState {
+    refreshing: boolean;
+}
 
-    constructor(props) {
+export default class RHSSidebar extends React.PureComponent<RhsSidebarProps, RhsSidebarState> {
+    constructor(props: RhsSidebarProps) {
         super(props);
 
         this.state = {
@@ -166,13 +168,13 @@ export default class RHSSidebar extends React.PureComponent {
         }
     }
 
-    componentDidUpdate(prevProps) {
+    componentDidUpdate(prevProps: RhsSidebarProps) {
         if ((this.props.connected && !prevProps.connected) || (this.props.currentChannelId !== prevProps.currentChannelId)) {
             this.getData();
         }
     }
 
-    getData = async (e) => {
+    getData = async (e?: React.MouseEvent<HTMLAnchorElement, MouseEvent>): Promise<void> => {
         if (this.state.refreshing) {
             return;
         }