verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Create useAppSelector hook (#4189) 

* create useAppSelector hook

* migrate useSelector to useAppSelector
This commit is contained in:
Gleidson Daniel Silva 2022-05-13 12:01:34 -03:00 committed by GitHub
parent 0a7082e2fe
commit 6dfce40c90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 39 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx
View File

@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
import { StyleProp, ViewStyle } from 'react-native'; import { StyleProp, ViewStyle } from 'react-native';
import { SvgUri } from 'react-native-svg'; import { SvgUri } from 'react-native-svg';
import { useSelector } from 'react-redux';
import { OmnichannelSourceType, IApplicationState, IOmnichannelSource } from '../../definitions'; import { OmnichannelSourceType, IOmnichannelSource } from '../../definitions';
import { STATUS_COLORS } from '../../lib/constants'; import { STATUS_COLORS } from '../../lib/constants';
import { useAppSelector } from '../../lib/hooks';
import { CustomIcon, TIconsName } from '../CustomIcon'; import { CustomIcon, TIconsName } from '../CustomIcon';
interface IIconMap { interface IIconMap {
@ -29,8 +29,8 @@ interface IOmnichannelRoomIconProps {
} }
export const OmnichannelRoomIcon = ({ size, style, sourceType, status }: IOmnichannelRoomIconProps) => { export const OmnichannelRoomIcon = ({ size, style, sourceType, status }: IOmnichannelRoomIconProps) => {
const baseUrl = useSelector((state: IApplicationState) => state.server?.server); const baseUrl = useAppSelector(state => state.server?.server);
const connected = useSelector((state: IApplicationState) => state.meteor?.connected); const connected = useAppSelector(state => state.meteor?.connected);
if (sourceType?.type === OmnichannelSourceType.APP && sourceType.id && sourceType.sidebarIcon && connected) { if (sourceType?.type === OmnichannelSourceType.APP && sourceType.id && sourceType.sidebarIcon && connected) {
return ( return (

6
app/containers/Status/index.tsx
View File

@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import { useSelector } from 'react-redux';
import { IApplicationState, TUserStatus } from '../../definitions'; import { TUserStatus } from '../../definitions';
import Status from './Status'; import Status from './Status';
import { IStatus } from './definition'; import { IStatus } from './definition';
import { useAppSelector } from '../../lib/hooks';
const StatusContainer = ({ id, style, size = 32, ...props }: Omit<IStatus, 'status'>): React.ReactElement => { const StatusContainer = ({ id, style, size = 32, ...props }: Omit<IStatus, 'status'>): React.ReactElement => {
const status = useSelector((state: IApplicationState) => const status = useAppSelector(state =>
state.meteor.connected ? state.activeUsers[id] && state.activeUsers[id].status : 'loading' state.meteor.connected ? state.activeUsers[id] && state.activeUsers[id].status : 'loading'
) as TUserStatus; ) as TUserStatus;
return <Status size={size} style={style} status={status} {...props} />; return <Status size={size} style={style} status={status} {...props} />;

1
app/lib/hooks/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './useAppSelector';

5
app/lib/hooks/useAppSelector.ts Normal file
View File

@ -0,0 +1,5 @@
import { TypedUseSelectorHook, useSelector } from 'react-redux';
import { IApplicationState } from '../../definitions';
export const useAppSelector: TypedUseSelectorHook<IApplicationState> = useSelector;

6
app/lib/methods/useServer.ts
View File

@ -1,13 +1,13 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { IApplicationState, TServerModel } from '../../definitions'; import { IApplicationState, TServerModel } from '../../definitions';
import database from '../database'; import database from '../database';
import { useAppSelector } from '../hooks';
export default function useServer() { export default function useServer() {
const [server, setServer] = useState<TServerModel | null>(null); const [server, setServer] = useState<TServerModel | null>(null);
const shareServer = useSelector((state: IApplicationState) => state.share.server.server); const shareServer = useAppSelector((state: IApplicationState) => state.share.server.server);
const appServer = useSelector((state: IApplicationState) => state.server.server); const appServer = useAppSelector((state: IApplicationState) => state.server.server);
useEffect(() => { useEffect(() => {
async function init() { async function init() {

5
app/views/AuthLoadingView.tsx
View File

@ -1,12 +1,11 @@
import React from 'react'; import React from 'react';
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'; import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
import { useSelector } from 'react-redux';
import { IApplicationState } from '../definitions';
import I18n from '../i18n'; import I18n from '../i18n';
import StatusBar from '../containers/StatusBar'; import StatusBar from '../containers/StatusBar';
import { useTheme } from '../theme'; import { useTheme } from '../theme';
import sharedStyles from './Styles'; import sharedStyles from './Styles';
import { useAppSelector } from '../lib/hooks';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
@ -23,7 +22,7 @@ const styles = StyleSheet.create({
}); });
const AuthLoadingView = React.memo((): React.ReactElement => { const AuthLoadingView = React.memo((): React.ReactElement => {
const text = useSelector((state: IApplicationState) => state.app.text); const text = useAppSelector(state => state.app.text);
const { colors } = useTheme(); const { colors } = useTheme();
return ( return (
<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}> <View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>

6
app/views/CannedResponseDetail.tsx
View File

@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
import { StackNavigationProp } from '@react-navigation/stack'; import { StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/native'; import { RouteProp } from '@react-navigation/native';
import { StyleSheet, Text, View, ScrollView } from 'react-native'; import { StyleSheet, Text, View, ScrollView } from 'react-native';
import { useSelector } from 'react-redux';
import I18n from '../i18n'; import I18n from '../i18n';
import SafeAreaView from '../containers/SafeAreaView'; import SafeAreaView from '../containers/SafeAreaView';
@ -17,6 +16,7 @@ import { ICannedResponse } from '../definitions/ICannedResponse';
import { ChatsStackParamList } from '../stacks/types'; import { ChatsStackParamList } from '../stacks/types';
import sharedStyles from './Styles'; import sharedStyles from './Styles';
import { getRoomTitle, getUidDirectMessage } from '../lib/methods'; import { getRoomTitle, getUidDirectMessage } from '../lib/methods';
import { useAppSelector } from '../lib/hooks';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
scroll: { scroll: {
@ -96,8 +96,8 @@ interface ICannedResponseDetailProps {
const CannedResponseDetail = ({ navigation, route }: ICannedResponseDetailProps): JSX.Element => { const CannedResponseDetail = ({ navigation, route }: ICannedResponseDetailProps): JSX.Element => {
const { cannedResponse } = route?.params; const { cannedResponse } = route?.params;
const { theme } = useTheme(); const { theme } = useTheme();
const { isMasterDetail } = useSelector((state: any) => state.app); const { isMasterDetail } = useAppSelector(state => state.app);
const { rooms } = useSelector((state: any) => state.room); const { rooms } = useAppSelector(state => state.room);
useEffect(() => { useEffect(() => {
navigation.setOptions({ navigation.setOptions({

7
app/views/CannedResponsesListView/index.tsx
View File

@ -1,6 +1,5 @@
import React, { useEffect, useState, useCallback } from 'react'; import React, { useEffect, useState, useCallback } from 'react';
import { FlatList } from 'react-native'; import { FlatList } from 'react-native';
import { useSelector } from 'react-redux';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { RouteProp } from '@react-navigation/native'; import { RouteProp } from '@react-navigation/native';
import { HeaderBackButton, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack'; import { HeaderBackButton, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
@ -30,8 +29,8 @@ import { ChatsStackParamList } from '../../stacks/types';
import { ISubscription } from '../../definitions/ISubscription'; import { ISubscription } from '../../definitions/ISubscription';
import { getRoomTitle, getUidDirectMessage } from '../../lib/methods'; import { getRoomTitle, getUidDirectMessage } from '../../lib/methods';
import { Services } from '../../lib/services'; import { Services } from '../../lib/services';
import { IApplicationState } from '../../definitions';
import { ILivechatDepartment } from '../../definitions/ILivechatDepartment'; import { ILivechatDepartment } from '../../definitions/ILivechatDepartment';
import { useAppSelector } from '../../lib/hooks';
const COUNT = 25; const COUNT = 25;
@ -76,8 +75,8 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const { theme } = useTheme(); const { theme } = useTheme();
const isMasterDetail = useSelector((state: IApplicationState) => state.app.isMasterDetail); const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
const rooms = useSelector((state: IApplicationState) => state.room.rooms); const rooms = useAppSelector(state => state.room.rooms);
const getRoomFromDb = async () => { const getRoomFromDb = async () => {
const { rid } = route.params; const { rid } = route.params;

8
app/views/DiscussionsView/index.tsx
View File

@ -1,11 +1,10 @@
import React, { useEffect, useLayoutEffect, useState } from 'react'; import React, { useEffect, useLayoutEffect, useState } from 'react';
import { FlatList, StyleSheet } from 'react-native'; import { FlatList, StyleSheet } from 'react-native';
import { useSelector } from 'react-redux';
import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { HeaderBackButton, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack'; import { HeaderBackButton, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/core'; import { RouteProp } from '@react-navigation/core';
import { IApplicationState, IMessageFromServer } from '../../definitions'; import { IMessageFromServer } from '../../definitions';
import { ChatsStackParamList } from '../../stacks/types'; import { ChatsStackParamList } from '../../stacks/types';
import ActivityIndicator from '../../containers/ActivityIndicator'; import ActivityIndicator from '../../containers/ActivityIndicator';
import I18n from '../../i18n'; import I18n from '../../i18n';
@ -23,6 +22,7 @@ import SearchHeader from '../../containers/SearchHeader';
import { TThreadModel } from '../../definitions/IThread'; import { TThreadModel } from '../../definitions/IThread';
import Item from './Item'; import Item from './Item';
import { Services } from '../../lib/services'; import { Services } from '../../lib/services';
import { useAppSelector } from '../../lib/hooks';
const API_FETCH_COUNT = 50; const API_FETCH_COUNT = 50;
@ -42,8 +42,8 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
const rid = route.params?.rid; const rid = route.params?.rid;
const t = route.params?.t; const t = route.params?.t;
const baseUrl = useSelector((state: IApplicationState) => state.server?.server); const baseUrl = useAppSelector(state => state.server?.server);
const isMasterDetail = useSelector((state: IApplicationState) => state.app?.isMasterDetail); const isMasterDetail = useAppSelector(state => state.app?.isMasterDetail);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [discussions, setDiscussions] = useState<IMessageFromServer[]>([]); const [discussions, setDiscussions] = useState<IMessageFromServer[]>([]);

11
app/views/DisplayPrefsView.tsx
View File

@ -3,7 +3,7 @@ import { StackNavigationProp } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import { Switch } from 'react-native'; import { Switch } from 'react-native';
import { RadioButton } from 'react-native-ui-lib'; import { RadioButton } from 'react-native-ui-lib';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch } from 'react-redux';
import { setPreference } from '../actions/sortPreferences'; import { setPreference } from '../actions/sortPreferences';
import { DisplayMode, SortBy } from '../lib/constants'; import { DisplayMode, SortBy } from '../lib/constants';
@ -12,21 +12,22 @@ import * as List from '../containers/List';
import { ICON_SIZE } from '../containers/List/constants'; import { ICON_SIZE } from '../containers/List/constants';
import SafeAreaView from '../containers/SafeAreaView'; import SafeAreaView from '../containers/SafeAreaView';
import StatusBar from '../containers/StatusBar'; import StatusBar from '../containers/StatusBar';
import { IApplicationState, IPreferences } from '../definitions'; import { IPreferences } from '../definitions';
import I18n from '../i18n'; import I18n from '../i18n';
import { SettingsStackParamList } from '../stacks/types'; import { SettingsStackParamList } from '../stacks/types';
import { useTheme } from '../theme'; import { useTheme } from '../theme';
import { events, logEvent } from '../utils/log'; import { events, logEvent } from '../utils/log';
import { saveSortPreference } from '../lib/methods'; import { saveSortPreference } from '../lib/methods';
import { useAppSelector } from '../lib/hooks';
const DisplayPrefsView = (): React.ReactElement => { const DisplayPrefsView = (): React.ReactElement => {
const navigation = useNavigation<StackNavigationProp<SettingsStackParamList, 'DisplayPrefsView'>>(); const navigation = useNavigation<StackNavigationProp<SettingsStackParamList, 'DisplayPrefsView'>>();
const { colors } = useTheme(); const { colors } = useTheme();
const { sortBy, groupByType, showFavorites, showUnread, showAvatar, displayMode } = useSelector( const { sortBy, groupByType, showFavorites, showUnread, showAvatar, displayMode } = useAppSelector(
(state: IApplicationState) => state.sortPreferences state => state.sortPreferences
); );
const { isMasterDetail } = useSelector((state: IApplicationState) => state.app); const { isMasterDetail } = useAppSelector(state => state.app);
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {

5
app/views/SecurityPrivacyView.tsx
View File

@ -2,14 +2,13 @@ import AsyncStorage from '@react-native-community/async-storage';
import { StackNavigationProp } from '@react-navigation/stack'; import { StackNavigationProp } from '@react-navigation/stack';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Switch } from 'react-native'; import { Switch } from 'react-native';
import { useSelector } from 'react-redux';
import * as List from '../containers/List'; import * as List from '../containers/List';
import SafeAreaView from '../containers/SafeAreaView'; import SafeAreaView from '../containers/SafeAreaView';
import StatusBar from '../containers/StatusBar'; import StatusBar from '../containers/StatusBar';
import { IApplicationState } from '../definitions';
import I18n from '../i18n'; import I18n from '../i18n';
import { ANALYTICS_EVENTS_KEY, CRASH_REPORT_KEY, isFDroidBuild, SWITCH_TRACK_COLOR } from '../lib/constants'; import { ANALYTICS_EVENTS_KEY, CRASH_REPORT_KEY, isFDroidBuild, SWITCH_TRACK_COLOR } from '../lib/constants';
import { useAppSelector } from '../lib/hooks';
import useServer from '../lib/methods/useServer'; import useServer from '../lib/methods/useServer';
import { SettingsStackParamList } from '../stacks/types'; import { SettingsStackParamList } from '../stacks/types';
import { handleLocalAuthentication } from '../utils/localAuthentication'; import { handleLocalAuthentication } from '../utils/localAuthentication';
@ -31,7 +30,7 @@ const SecurityPrivacyView = ({ navigation }: ISecurityPrivacyViewProps): JSX.Ele
const [analyticsEventsState, setAnalyticsEventsState] = useState(getReportAnalyticsEventsValue()); const [analyticsEventsState, setAnalyticsEventsState] = useState(getReportAnalyticsEventsValue());
const [server] = useServer(); const [server] = useServer();
const e2eEnabled = useSelector((state: IApplicationState) => state.settings.E2E_Enable); const e2eEnabled = useAppSelector(state => state.settings.E2E_Enable);
useEffect(() => { useEffect(() => {
navigation.setOptions({ navigation.setOptions({

6
app/views/UserPreferencesView/index.tsx
View File

@ -1,7 +1,7 @@
import { StackNavigationProp } from '@react-navigation/stack'; import { StackNavigationProp } from '@react-navigation/stack';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { Switch } from 'react-native'; import { Switch } from 'react-native';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch } from 'react-redux';
import { setUser } from '../../actions/login'; import { setUser } from '../../actions/login';
import I18n from '../../i18n'; import I18n from '../../i18n';
@ -12,15 +12,15 @@ import * as List from '../../containers/List';
import { SWITCH_TRACK_COLOR } from '../../lib/constants'; import { SWITCH_TRACK_COLOR } from '../../lib/constants';
import { getUserSelector } from '../../selectors/login'; import { getUserSelector } from '../../selectors/login';
import { ProfileStackParamList } from '../../stacks/types'; import { ProfileStackParamList } from '../../stacks/types';
import { IApplicationState } from '../../definitions';
import { Services } from '../../lib/services'; import { Services } from '../../lib/services';
import { useAppSelector } from '../../lib/hooks';
interface IUserPreferencesViewProps { interface IUserPreferencesViewProps {
navigation: StackNavigationProp<ProfileStackParamList, 'UserPreferencesView'>; navigation: StackNavigationProp<ProfileStackParamList, 'UserPreferencesView'>;
} }
const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Element => { const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Element => {
const { enableMessageParserEarlyAdoption, id } = useSelector((state: IApplicationState) => getUserSelector(state)); const { enableMessageParserEarlyAdoption, id } = useAppSelector(state => getUserSelector(state));
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {