From 64f7b1f84f3d1acdf91c0ad1361e202adf4f6d8a Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Wed, 10 Nov 2021 17:14:45 -0300 Subject: [PATCH] Chore: Migrate SidebarView to Typescript (#3478) Co-authored-by: AlexAlexandre Co-authored-by: Diego Mello --- app/containers/Status/Status.tsx | 5 +- .../{SidebarItem.js => SidebarItem.tsx} | 23 +++--- app/views/SidebarView/{index.js => index.tsx} | 75 +++++++++++-------- .../SidebarView/{styles.js => styles.ts} | 0 4 files changed, 58 insertions(+), 45 deletions(-) rename app/views/SidebarView/{SidebarItem.js => SidebarItem.tsx} (74%) rename app/views/SidebarView/{index.js => index.tsx} (84%) rename app/views/SidebarView/{styles.js => styles.ts} (100%) diff --git a/app/containers/Status/Status.tsx b/app/containers/Status/Status.tsx index a5ff29d39..e62bc8063 100644 --- a/app/containers/Status/Status.tsx +++ b/app/containers/Status/Status.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { StyleProp, TextStyle } from 'react-native'; import { CustomIcon } from '../../lib/Icons'; import { STATUS_COLORS } from '../../constants/colors'; @@ -6,14 +7,14 @@ import { STATUS_COLORS } from '../../constants/colors'; interface IStatus { status: string; size: number; - style: any; + style?: StyleProp; } const Status = React.memo(({ style, status = 'offline', size = 32, ...props }: IStatus) => { const name = `status-${status}`; const isNameValid = CustomIcon.hasIcon(name); const iconName = isNameValid ? name : 'status-offline'; - const calculatedStyle = [ + const calculatedStyle: StyleProp = [ { width: size, height: size, diff --git a/app/views/SidebarView/SidebarItem.js b/app/views/SidebarView/SidebarItem.tsx similarity index 74% rename from app/views/SidebarView/SidebarItem.js rename to app/views/SidebarView/SidebarItem.tsx index 4e0f9c1a1..7590e82ca 100644 --- a/app/views/SidebarView/SidebarItem.js +++ b/app/views/SidebarView/SidebarItem.tsx @@ -1,13 +1,22 @@ import React from 'react'; import { Text, View } from 'react-native'; -import PropTypes from 'prop-types'; import Touch from '../../utils/touch'; import { themes } from '../../constants/colors'; import { withTheme } from '../../theme'; import styles from './styles'; -const Item = React.memo(({ left, right, text, onPress, testID, current, theme }) => ( +interface SidebarItemProps { + left: JSX.Element; + right: JSX.Element; + text: string; + current: boolean; + onPress(): void; + testID: string; + theme: string; +} + +const Item = React.memo(({ left, right, text, onPress, testID, current, theme }: SidebarItemProps) => ( )); -Item.propTypes = { - left: PropTypes.element, - right: PropTypes.element, - text: PropTypes.string, - current: PropTypes.bool, - onPress: PropTypes.func, - testID: PropTypes.string, - theme: PropTypes.string -}; - export default withTheme(Item); diff --git a/app/views/SidebarView/index.js b/app/views/SidebarView/index.tsx similarity index 84% rename from app/views/SidebarView/index.js rename to app/views/SidebarView/index.tsx index 5f27e7062..f97e3ea99 100644 --- a/app/views/SidebarView/index.js +++ b/app/views/SidebarView/index.tsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import { DrawerNavigationProp } from '@react-navigation/drawer'; +import { DrawerNavigationState } from '@react-navigation/native'; import { ScrollView, Text, TouchableWithoutFeedback, View } from 'react-native'; import { connect } from 'react-redux'; import { dequal } from 'dequal'; @@ -18,38 +19,52 @@ import Navigation from '../../lib/Navigation'; import SidebarItem from './SidebarItem'; import styles from './styles'; -const Separator = React.memo(({ theme }) => ); -Separator.propTypes = { - theme: PropTypes.string -}; +interface ISeparatorProps { + theme: string; +} -class Sidebar extends Component { - static propTypes = { - baseUrl: PropTypes.string, - navigation: PropTypes.object, - Site_Name: PropTypes.string.isRequired, - user: PropTypes.object, - state: PropTypes.string, - theme: PropTypes.string, - loadingServer: PropTypes.bool, - useRealName: PropTypes.bool, - allowStatusMessage: PropTypes.bool, - isMasterDetail: PropTypes.bool, - viewStatisticsPermission: PropTypes.object, - viewRoomAdministrationPermission: PropTypes.object, - viewUserAdministrationPermission: PropTypes.object, - viewPrivilegedSettingPermission: PropTypes.object +// TODO: remove this +const Separator = React.memo(({ theme }: ISeparatorProps) => ( + +)); + +interface ISidebarState { + showStatus: boolean; +} + +interface ISidebarProps { + baseUrl: string; + navigation: DrawerNavigationProp; + state: DrawerNavigationState; + Site_Name: string; + user: { + statusText: string; + status: string; + username: string; + name: string; + roles: string[]; }; + theme: string; + loadingServer: boolean; + useRealName: boolean; + allowStatusMessage: boolean; + isMasterDetail: boolean; + viewStatisticsPermission: string[]; + viewRoomAdministrationPermission: string[]; + viewUserAdministrationPermission: string[]; + viewPrivilegedSettingPermission: string[]; +} - constructor(props) { +class Sidebar extends Component { + constructor(props: ISidebarProps) { super(props); this.state = { showStatus: false }; } - shouldComponentUpdate(nextProps, nextState) { - const { showStatus, isAdmin } = this.state; + shouldComponentUpdate(nextProps: ISidebarProps, nextState: ISidebarState) { + const { showStatus } = this.state; const { Site_Name, user, @@ -91,9 +106,6 @@ class Sidebar extends Component { if (nextProps.useRealName !== useRealName) { return true; } - if (nextState.isAdmin !== isAdmin) { - return true; - } if (!dequal(nextProps.viewStatisticsPermission, viewStatisticsPermission)) { return true; } @@ -127,7 +139,7 @@ class Sidebar extends Component { let isAdmin = false; if (roles) { - isAdmin = allPermissions.reduce((result, permission) => { + isAdmin = allPermissions.reduce((result: boolean, permission) => { if (permission) { return result || permission.some(r => roles.indexOf(r) !== -1); } @@ -137,7 +149,8 @@ class Sidebar extends Component { return isAdmin; } - sidebarNavigate = route => { + sidebarNavigate = (route: string) => { + // @ts-ignore logEvent(events[`SIDEBAR_GO_${route.replace('StackNavigator', '').replace('View', '').toUpperCase()}`]); Navigation.navigate(route); }; @@ -242,7 +255,7 @@ class Sidebar extends Component { ]} {...scrollPersistTaps}> - + @@ -278,7 +291,7 @@ class Sidebar extends Component { } } -const mapStateToProps = state => ({ +const mapStateToProps = (state: any) => ({ Site_Name: state.settings.Site_Name, user: getUserSelector(state), baseUrl: state.server.server, diff --git a/app/views/SidebarView/styles.js b/app/views/SidebarView/styles.ts similarity index 100% rename from app/views/SidebarView/styles.js rename to app/views/SidebarView/styles.ts