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

View File

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

View File

@ -1,12 +1,12 @@
import React from 'react';
import { useSelector } from 'react-redux';
import { IApplicationState, TUserStatus } from '../../definitions';
import { TUserStatus } from '../../definitions';
import Status from './Status';
import { IStatus } from './definition';
import { useAppSelector } from '../../lib/hooks';
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'
) as TUserStatus;
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';

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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