From ded2f3792a89712c65f213d557d44dd1217c2cfc Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Fri, 19 Aug 2022 10:46:58 -0300 Subject: [PATCH] Chore: Hooks app/views/DefaultBrowserView (#4424) * Chore: Hooks app/views/DefaultBrowserView * fix type * minor tweak * item on new file * minor tweaks * minor tweak --- app/stacks/InsideStack.tsx | 6 +- app/stacks/MasterDetailStack/index.tsx | 6 +- app/views/DefaultBrowserView.tsx | 153 ------------------------- app/views/DefaultBrowserView/Item.tsx | 34 ++++++ app/views/DefaultBrowserView/index.tsx | 110 ++++++++++++++++++ 5 files changed, 146 insertions(+), 163 deletions(-) delete mode 100644 app/views/DefaultBrowserView.tsx create mode 100644 app/views/DefaultBrowserView/Item.tsx create mode 100644 app/views/DefaultBrowserView/index.tsx diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx index 544edb32d..95fdac203 100644 --- a/app/stacks/InsideStack.tsx +++ b/app/stacks/InsideStack.tsx @@ -178,11 +178,7 @@ const SettingsStackNavigator = () => { /> - + { /> - + ; - -class DefaultBrowserView extends React.Component { - static navigationOptions = (): StackNavigationOptions => ({ - title: I18n.t('Default_browser') - }); - - constructor(props: IDefaultBrowserViewProps) { - super(props); - this.state = { - browser: null, - supported: [] - }; - if (isIOS) { - this.init(); - } - } - - componentDidMount() { - const browser = UserPreferences.getString(DEFAULT_BROWSER_KEY); - this.setState({ browser }); - } - - init = () => { - BROWSERS.forEach(browser => { - const { value } = browser; - Linking.canOpenURL(value).then(installed => { - if (installed) { - this.setState(({ supported }) => ({ supported: [...supported, browser] })); - } - }); - }); - }; - - isSelected = (value: TValue) => { - const { browser } = this.state; - if (!browser && value === 'systemDefault:') { - return true; - } - return browser === value; - }; - - changeDefaultBrowser = (newBrowser: TValue) => { - logEvent(events.DB_CHANGE_DEFAULT_BROWSER, { browser: newBrowser }); - try { - const browser = newBrowser || 'systemDefault:'; - UserPreferences.setString(DEFAULT_BROWSER_KEY, browser); - this.setState({ browser }); - } catch { - logEvent(events.DB_CHANGE_DEFAULT_BROWSER_F); - } - }; - - renderIcon = () => { - const { theme } = this.props; - return ; - }; - - renderItem = ({ item }: { item: IBrowsersValues }) => { - const { title, value } = item; - return ( - this.changeDefaultBrowser(value)} - testID={`default-browser-view-${title}`} - right={() => (this.isSelected(value) ? this.renderIcon() : null)} - translateTitle={false} - /> - ); - }; - - renderHeader = () => ( - <> - - - - ); - - render() { - const { supported } = this.state; - return ( - - - item.value} - contentContainerStyle={List.styles.contentContainerStyleFlatList} - renderItem={this.renderItem} - ListHeaderComponent={this.renderHeader} - ListFooterComponent={List.Separator} - ItemSeparatorComponent={List.Separator} - /> - - ); - } -} - -export default withTheme(DefaultBrowserView); diff --git a/app/views/DefaultBrowserView/Item.tsx b/app/views/DefaultBrowserView/Item.tsx new file mode 100644 index 000000000..fc5e221cc --- /dev/null +++ b/app/views/DefaultBrowserView/Item.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import I18n from '../../i18n'; +import { useTheme } from '../../theme'; +import * as List from '../../containers/List'; +import { IBrowsersValues, TValue } from '.'; + +interface IRenderItem extends IBrowsersValues { + browser: string | null; + changeDefaultBrowser: (newBrowser: TValue) => void; +} + +const Item = ({ title, value, browser, changeDefaultBrowser }: IRenderItem) => { + const { colors } = useTheme(); + + let isSelected = false; + if (!browser && value === 'systemDefault:') { + isSelected = true; + } else { + isSelected = browser === value; + } + + return ( + changeDefaultBrowser(value)} + testID={`default-browser-view-${title}`} + right={() => (isSelected ? : null)} + translateTitle={false} + /> + ); +}; + +export default Item; diff --git a/app/views/DefaultBrowserView/index.tsx b/app/views/DefaultBrowserView/index.tsx new file mode 100644 index 000000000..8711ab6de --- /dev/null +++ b/app/views/DefaultBrowserView/index.tsx @@ -0,0 +1,110 @@ +import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react'; +import { FlatList, Linking } from 'react-native'; +import { useNavigation } from '@react-navigation/native'; + +import I18n from '../../i18n'; +import StatusBar from '../../containers/StatusBar'; +import * as List from '../../containers/List'; +import { DEFAULT_BROWSER_KEY } from '../../lib/methods/helpers/openLink'; +import { isIOS } from '../../lib/methods/helpers'; +import SafeAreaView from '../../containers/SafeAreaView'; +import UserPreferences from '../../lib/methods/userPreferences'; +import { events, logEvent } from '../../lib/methods/helpers/log'; +import Item from './Item'; + +export type TValue = 'inApp' | 'systemDefault:' | 'googlechrome:' | 'firefox:' | 'brave:'; + +export interface IBrowsersValues { + title: string; + value: TValue; +} + +const DEFAULT_BROWSERS: IBrowsersValues[] = [ + { + title: 'In_app', + value: 'inApp' + }, + { + title: isIOS ? 'Safari' : 'Browser', + value: 'systemDefault:' + } +]; + +const BROWSERS: IBrowsersValues[] = [ + { + title: 'Chrome', + value: 'googlechrome:' + }, + { + title: 'Firefox', + value: 'firefox:' + }, + { + title: 'Brave', + value: 'brave:' + } +]; + +const DefaultBrowserView = () => { + const [browser, setBrowser] = useState(null); + const [supported, setSupported] = useState([]); + + const navigation = useNavigation(); + + useLayoutEffect(() => { + navigation.setOptions({ + title: I18n.t('Close_Chat') + }); + }, [navigation]); + + useEffect(() => { + const getBrowser = UserPreferences.getString(DEFAULT_BROWSER_KEY); + setBrowser(getBrowser); + + if (isIOS) { + BROWSERS.forEach(browser => { + const { value } = browser; + Linking.canOpenURL(value).then(installed => { + if (installed) { + setSupported(supported => [...supported, browser]); + } + }); + }); + } + }, []); + + const changeDefaultBrowser = useCallback((newBrowser: TValue) => { + logEvent(events.DB_CHANGE_DEFAULT_BROWSER, { browser: newBrowser }); + try { + const browser = newBrowser || 'systemDefault:'; + UserPreferences.setString(DEFAULT_BROWSER_KEY, browser); + setBrowser(browser); + } catch { + logEvent(events.DB_CHANGE_DEFAULT_BROWSER_F); + } + }, []); + + return ( + + + item.value} + contentContainerStyle={List.styles.contentContainerStyleFlatList} + renderItem={({ item }) => ( + + )} + ListHeaderComponent={ + <> + + + + } + ListFooterComponent={List.Separator} + ItemSeparatorComponent={List.Separator} + /> + + ); +}; + +export default DefaultBrowserView;