From 11cff2cb7c0b94456b93f215aa3d063befd513ba 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 1/2] 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;
         }

From cb352e2e52b44bf2b38deb95a03317650eea49c7 Mon Sep 17 00:00:00 2001
From: Angel Mendez Cano <amendez1988@gmail.com>
Date: Thu, 10 Oct 2024 02:46:37 +0000
Subject: [PATCH 2/2] fix: update props types for rhs_sidebar.tsx

- update props types as optional according to original jsx component
---
 .../components/rhs_sidebar/rhs_sidebar.tsx    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/webapp/src/components/rhs_sidebar/rhs_sidebar.tsx b/webapp/src/components/rhs_sidebar/rhs_sidebar.tsx
index b3777b13..d9eba46c 100644
--- a/webapp/src/components/rhs_sidebar/rhs_sidebar.tsx
+++ b/webapp/src/components/rhs_sidebar/rhs_sidebar.tsx
@@ -63,8 +63,8 @@ const UserHeader = (props: UserHeaderProps) => (
 
 interface UserHeaderProps {
     currentUserId: string;
-    username: string;
-    gitlabURL: string;
+    username?: string;
+    gitlabURL?: string;
 }
 
 const Subscription = (props: SubscriptionProps) => {
@@ -125,7 +125,7 @@ const Subscriptions = (props: SubscriptionsProps) => {
 };
 
 interface SubscriptionsProps {
-    currentChannelId: string;
+    currentChannelId?: string;
     subscriptions: Subscription[];
 }
 
@@ -138,13 +138,13 @@ interface Subscription {
 interface RhsSidebarProps {
     currentUserId: string,
     connected: boolean,
-    username: string,
-    gitlabURL: string,
-    currentChannelId: string,
-    currentChannelSubscriptions: Subscription[],
+    username?: string,
+    gitlabURL?: string,
+    currentChannelId?: string,
+    currentChannelSubscriptions: Partial<Subscription>[],
     pluginServerRoute: string,
     actions: {
-        getChannelSubscriptions: (channel: string) => Promise<void>,
+        getChannelSubscriptions: (channel: string) => Promise<any>,
         sendEphemeralPost: (message: string) => void;
     }
 }
@@ -184,7 +184,7 @@ export default class RHSSidebar extends React.PureComponent<RhsSidebarProps, Rhs
         }
 
         this.setState({refreshing: true});
-        await this.props.actions.getChannelSubscriptions(this.props.currentChannelId);
+        await this.props.actions.getChannelSubscriptions(this.props.currentChannelId as string);
         this.setState({refreshing: false});
     }
 
@@ -207,7 +207,7 @@ export default class RHSSidebar extends React.PureComponent<RhsSidebarProps, Rhs
                 />
                 <Subscriptions
                     currentChannelId={this.props.currentChannelId}
-                    subscriptions={this.props.currentChannelSubscriptions}
+                    subscriptions={this.props.currentChannelSubscriptions as Subscription[]}
                 />
             </div>
         );