From 1346154b659ccf2d782f66b5b1b94d9bae252fed Mon Sep 17 00:00:00 2001
From: Alex Junior <alexalexandrejr@gmail.com>
Date: Fri, 6 May 2022 22:19:27 -0300
Subject: [PATCH] Chore: Evaluate SidebarView - Typescript (#4089)

---
 app/stacks/InsideStack.tsx       |  1 +
 app/views/SettingsView/index.tsx |  2 +-
 app/views/SidebarView/index.tsx  | 76 ++++++++++++++------------------
 3 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx
index b9be48e52..112ee4ae1 100644
--- a/app/stacks/InsideStack.tsx
+++ b/app/stacks/InsideStack.tsx
@@ -223,6 +223,7 @@ const DrawerNavigator = () => {
 
 	return (
 		<Drawer.Navigator
+			// @ts-ignore
 			drawerContent={({ navigation, state }) => <Sidebar navigation={navigation} state={state} />}
 			drawerPosition={I18nManager.isRTL ? 'right' : 'left'}
 			screenOptions={{ swipeEnabled: false }}
diff --git a/app/views/SettingsView/index.tsx b/app/views/SettingsView/index.tsx
index f39f4cdff..f4a6e5c77 100644
--- a/app/views/SettingsView/index.tsx
+++ b/app/views/SettingsView/index.tsx
@@ -177,7 +177,7 @@ class SettingsView extends React.Component<ISettingsViewProps, any> {
 						<>
 							<List.Section>
 								<List.Separator />
-								<SidebarView />
+								<SidebarView theme={theme} />
 								<List.Separator />
 							</List.Section>
 							<List.Section>
diff --git a/app/views/SidebarView/index.tsx b/app/views/SidebarView/index.tsx
index 13696ae69..5a354e0a9 100644
--- a/app/views/SidebarView/index.tsx
+++ b/app/views/SidebarView/index.tsx
@@ -19,16 +19,8 @@ import Navigation from '../../lib/navigation/appNavigation';
 import SidebarItem from './SidebarItem';
 import styles from './styles';
 import { DrawerParamList } from '../../stacks/types';
-import { IUser } from '../../definitions';
-
-interface ISeparatorProps {
-	theme: TSupportedThemes;
-}
-
-// TODO: remove this
-const Separator = React.memo(({ theme }: ISeparatorProps) => (
-	<View style={[styles.separator, { borderColor: themes[theme].separatorColor }]} />
-));
+import { IApplicationState, IUser } from '../../definitions';
+import * as List from '../../containers/List';
 
 interface ISidebarState {
 	showStatus: boolean;
@@ -36,8 +28,8 @@ interface ISidebarState {
 
 interface ISidebarProps {
 	baseUrl: string;
-	navigation: DrawerNavigationProp<DrawerParamList>;
-	state: DrawerNavigationState<DrawerParamList>;
+	navigation?: DrawerNavigationProp<DrawerParamList>;
+	state?: DrawerNavigationState<DrawerParamList>;
 	Site_Name: string;
 	user: IUser;
 	theme: TSupportedThemes;
@@ -161,7 +153,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 		if (isMasterDetail) {
 			return;
 		}
-		navigation.closeDrawer();
+		navigation?.closeDrawer();
 	};
 
 	renderAdmin = () => {
@@ -172,13 +164,13 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 		const routeName = isMasterDetail ? 'AdminPanelView' : 'AdminPanelStackNavigator';
 		return (
 			<>
-				<Separator theme={theme!} />
+				<List.Separator />
 				<SidebarItem
 					text={I18n.t('Admin_Panel')}
-					left={<CustomIcon name='settings' size={20} color={themes[theme!].titleText} />}
+					left={<CustomIcon name='settings' size={20} color={themes[theme].titleText} />}
 					onPress={() => this.sidebarNavigate(routeName)}
 					testID='sidebar-admin'
-					theme={theme!}
+					theme={theme}
 					current={this.currentItemKey === routeName}
 				/>
 			</>
@@ -191,34 +183,34 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 			<>
 				<SidebarItem
 					text={I18n.t('Chats')}
-					left={<CustomIcon name='message' size={20} color={themes[theme!].titleText} />}
+					left={<CustomIcon name='message' size={20} color={themes[theme].titleText} />}
 					onPress={() => this.sidebarNavigate('ChatsStackNavigator')}
 					testID='sidebar-chats'
-					theme={theme!}
+					theme={theme}
 					current={this.currentItemKey === 'ChatsStackNavigator'}
 				/>
 				<SidebarItem
 					text={I18n.t('Profile')}
-					left={<CustomIcon name='user' size={20} color={themes[theme!].titleText} />}
+					left={<CustomIcon name='user' size={20} color={themes[theme].titleText} />}
 					onPress={() => this.sidebarNavigate('ProfileStackNavigator')}
 					testID='sidebar-profile'
-					theme={theme!}
+					theme={theme}
 					current={this.currentItemKey === 'ProfileStackNavigator'}
 				/>
 				<SidebarItem
 					text={I18n.t('Display')}
-					left={<CustomIcon name='sort' size={20} color={themes[theme!].titleText} />}
+					left={<CustomIcon name='sort' size={20} color={themes[theme].titleText} />}
 					onPress={() => this.sidebarNavigate('DisplayPrefStackNavigator')}
 					testID='sidebar-display'
-					theme={theme!}
+					theme={theme}
 					current={this.currentItemKey === 'DisplayPrefStackNavigator'}
 				/>
 				<SidebarItem
 					text={I18n.t('Settings')}
-					left={<CustomIcon name='administration' size={20} color={themes[theme!].titleText} />}
+					left={<CustomIcon name='administration' size={20} color={themes[theme].titleText} />}
 					onPress={() => this.sidebarNavigate('SettingsStackNavigator')}
 					testID='sidebar-settings'
-					theme={theme!}
+					theme={theme}
 					current={this.currentItemKey === 'SettingsStackNavigator'}
 				/>
 				{this.renderAdmin()}
@@ -232,8 +224,8 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 			<SidebarItem
 				text={user.statusText || I18n.t('Edit_Status')}
 				left={<Status size={24} status={user?.status} />}
-				theme={theme!}
-				right={<CustomIcon name='edit' size={20} color={themes[theme!].titleText} />}
+				theme={theme}
+				right={<CustomIcon name='edit' size={20} color={themes[theme].titleText} />}
 				onPress={() => this.sidebarNavigate('StatusView')}
 				testID='sidebar-custom-status'
 			/>
@@ -247,12 +239,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 			return null;
 		}
 		return (
-			<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme!].focusedBackground }} vertical={isMasterDetail}>
+			<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme].focusedBackground }} vertical={isMasterDetail}>
 				<ScrollView
 					style={[
 						styles.container,
 						{
-							backgroundColor: isMasterDetail ? themes[theme!].backgroundColor : themes[theme!].focusedBackground
+							backgroundColor: isMasterDetail ? themes[theme].backgroundColor : themes[theme].focusedBackground
 						}
 					]}
 					{...scrollPersistTaps}>
@@ -261,12 +253,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 							<Avatar text={user.username} style={styles.avatar} size={30} />
 							<View style={styles.headerTextContainer}>
 								<View style={styles.headerUsername}>
-									<Text numberOfLines={1} style={[styles.username, { color: themes[theme!].titleText }]}>
+									<Text numberOfLines={1} style={[styles.username, { color: themes[theme].titleText }]}>
 										{useRealName ? user.name : user.username}
 									</Text>
 								</View>
 								<Text
-									style={[styles.currentServerText, { color: themes[theme!].titleText }]}
+									style={[styles.currentServerText, { color: themes[theme].titleText }]}
 									numberOfLines={1}
 									accessibilityLabel={`Connected to ${baseUrl}`}>
 									{Site_Name}
@@ -275,14 +267,14 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 						</View>
 					</TouchableWithoutFeedback>
 
-					<Separator theme={theme!} />
+					<List.Separator />
 
 					{allowStatusMessage ? this.renderCustomStatus() : null}
 					{!isMasterDetail ? (
 						<>
-							<Separator theme={theme!} />
+							<List.Separator />
 							{this.renderNavigation()}
-							<Separator theme={theme!} />
+							<List.Separator />
 						</>
 					) : (
 						<>{this.renderAdmin()}</>
@@ -293,18 +285,18 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 	}
 }
 
-const mapStateToProps = (state: any) => ({
-	Site_Name: state.settings.Site_Name,
+const mapStateToProps = (state: IApplicationState) => ({
+	Site_Name: state.settings.Site_Name as string,
 	user: getUserSelector(state),
 	baseUrl: state.server.server,
 	loadingServer: state.server.loading,
-	useRealName: state.settings.UI_Use_Real_Name,
-	allowStatusMessage: state.settings.Accounts_AllowUserStatusMessageChange,
+	useRealName: state.settings.UI_Use_Real_Name as boolean,
+	allowStatusMessage: state.settings.Accounts_AllowUserStatusMessageChange as boolean,
 	isMasterDetail: state.app.isMasterDetail,
-	viewStatisticsPermission: state.permissions['view-statistics'],
-	viewRoomAdministrationPermission: state.permissions['view-room-administration'],
-	viewUserAdministrationPermission: state.permissions['view-user-administration'],
-	viewPrivilegedSettingPermission: state.permissions['view-privileged-setting']
+	viewStatisticsPermission: state.permissions['view-statistics'] as string[],
+	viewRoomAdministrationPermission: state.permissions['view-room-administration'] as string[],
+	viewUserAdministrationPermission: state.permissions['view-user-administration'] as string[],
+	viewPrivilegedSettingPermission: state.permissions['view-privileged-setting'] as string[]
 });
 
-export default connect(mapStateToProps)(withTheme(Sidebar)) as any;
+export default connect(mapStateToProps)(withTheme(Sidebar));