From 9c97a436673cd3f6978da6a00bdd55a13299ed6f Mon Sep 17 00:00:00 2001
From: Angel Mendez Cano <amendez1988@gmail.com>
Date: Tue, 1 Oct 2024 05:40:28 +0000
Subject: [PATCH] refactor: convert rhs_sidebar component to ts

- convert component to ts
- update types

Fixes: #425
---
 webapp/src/components/rhs_sidebar/index.js    |  2 +-
 .../{rhs_sidebar.jsx => rhs_sidebar.tsx}      | 98 ++++++++++---------
 2 files changed, 51 insertions(+), 49 deletions(-)
 rename webapp/src/components/rhs_sidebar/{rhs_sidebar.jsx => rhs_sidebar.tsx} (73%)

diff --git a/webapp/src/components/rhs_sidebar/index.js b/webapp/src/components/rhs_sidebar/index.js
index 447c8fb5..020d9b0d 100644
--- 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/webapp/src/components/rhs_sidebar/rhs_sidebar.jsx b/webapp/src/components/rhs_sidebar/rhs_sidebar.tsx
similarity index 73%
rename from webapp/src/components/rhs_sidebar/rhs_sidebar.jsx
rename to webapp/src/components/rhs_sidebar/rhs_sidebar.tsx
index 44166f35..b3777b13 100644
--- a/webapp/src/components/rhs_sidebar/rhs_sidebar.jsx
+++ b/webapp/src/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;
         }