diff --git a/src/diagnostics/DiagnosticsScreen.js b/src/diagnostics/DiagnosticsScreen.js new file mode 100644 index 00000000000..2954854c2bb --- /dev/null +++ b/src/diagnostics/DiagnosticsScreen.js @@ -0,0 +1,33 @@ +/* @flow */ +import React, { PureComponent } from 'react'; +import { StyleSheet, View, ScrollView } from 'react-native'; +import { connect } from 'react-redux'; + +import boundActions from '../boundActions'; +import { Screen } from '../common'; +import OptionButton from '../settings/OptionButton'; + +const styles = StyleSheet.create({ + divider: { + height: 16, + }, +}); + +class DiagnosticsScreen extends PureComponent { + render() { + const { actions } = this.props; + return ( + + + + + + + + + + ); + } +} + +export default connect(null, boundActions)(DiagnosticsScreen); diff --git a/src/settings/InfoItem.js b/src/diagnostics/InfoItem.js similarity index 100% rename from src/settings/InfoItem.js rename to src/diagnostics/InfoItem.js diff --git a/src/diagnostics/SizeItem.js b/src/diagnostics/SizeItem.js new file mode 100644 index 00000000000..fa746af5cf2 --- /dev/null +++ b/src/diagnostics/SizeItem.js @@ -0,0 +1,40 @@ +/* @flow */ +import React, { PureComponent } from 'react'; +import { StyleSheet, View } from 'react-native'; + +import { RawLabel } from '../common'; + +const styles = StyleSheet.create({ + item: { + flexDirection: 'row', + justifyContent: 'space-between', + padding: 8, + borderBottomWidth: 1, + borderColor: 'rgba(127, 127, 127, 0.25)', + }, + key: {}, + size: { + fontWeight: 'bold', + }, +}); + +export default class SizeItem extends PureComponent { + props: { + text: string, + size: number, + }; + + render() { + const { text, size } = this.props; + + return ( + + + + + ); + } +} diff --git a/src/diagnostics/StorageScreen.js b/src/diagnostics/StorageScreen.js new file mode 100644 index 00000000000..b2371426bb0 --- /dev/null +++ b/src/diagnostics/StorageScreen.js @@ -0,0 +1,36 @@ +/* @flow */ +import React, { PureComponent } from 'react'; +import { FlatList } from 'react-native'; +import { connect } from 'react-redux'; + +import { Screen } from '../common'; +import SizeItem from './SizeItem'; + +const calculateKeyStorageSizes = obj => + Object.keys(obj) + .map(key => ({ + key, + size: JSON.stringify(obj[key]).length * 2, + })) + .sort((a, b) => b.size - a.size); + +class StorageScreen extends PureComponent { + render() { + const { state } = this.props; + const storageSizes = calculateKeyStorageSizes(state); + + return ( + + item.key} + renderItem={({ item }) => } + /> + + ); + } +} + +export default connect(state => ({ + state, +}))(StorageScreen); diff --git a/src/settings/TimeItem.js b/src/diagnostics/TimeItem.js similarity index 100% rename from src/settings/TimeItem.js rename to src/diagnostics/TimeItem.js diff --git a/src/settings/TimingScreen.js b/src/diagnostics/TimingScreen.js similarity index 92% rename from src/settings/TimingScreen.js rename to src/diagnostics/TimingScreen.js index c1e6d1e480e..3d3a9b85d3d 100644 --- a/src/settings/TimingScreen.js +++ b/src/diagnostics/TimingScreen.js @@ -12,7 +12,7 @@ export default class TimingScreen extends PureComponent { item} + keyExtractor={item => item.text} renderItem={({ item }) => } /> diff --git a/src/settings/DiagnosticsScreen.js b/src/diagnostics/VariablesScreen.js similarity index 87% rename from src/settings/DiagnosticsScreen.js rename to src/diagnostics/VariablesScreen.js index dad7dcf59b5..3382351db72 100644 --- a/src/settings/DiagnosticsScreen.js +++ b/src/diagnostics/VariablesScreen.js @@ -6,10 +6,10 @@ import config from '../config'; import { Screen } from '../common'; import InfoItem from './InfoItem'; -export default class DiagnosticsScreen extends PureComponent { +export default class VariablesScreen extends PureComponent { render() { return ( - + diff --git a/src/i18n/translations/messages_en.json b/src/i18n/translations/messages_en.json index ce9ab11c1ab..9669a0758f9 100644 --- a/src/i18n/translations/messages_en.json +++ b/src/i18n/translations/messages_en.json @@ -72,5 +72,7 @@ "Toggle compose tools": "Toggle compose tools", "Terms of service": "Terms of service", "Privacy policy": "Privacy policy", - "Timing": "Timing" + "Timing": "Timing", + "Variables": "Variables", + "Storage": "Storage" } diff --git a/src/main/MainTabs.js b/src/main/MainTabs.js index b430ac7e071..bbebc0e72a1 100644 --- a/src/main/MainTabs.js +++ b/src/main/MainTabs.js @@ -6,7 +6,7 @@ import { BRAND_COLOR } from '../styles'; import UnreadStreamsContainer from '../unread/UnreadStreamsContainer'; import StreamTabs from '../nav/StreamTabs'; import ConversationsContainer from '../conversations/ConversationsContainer'; -import SettingsContainer from '../settings/SettingsContainer'; +import SettingsCard from '../settings/SettingsCard'; import { IconHome, IconStream, IconPrivateChat, IconSettings } from '../common/Icons'; export default TabNavigator( @@ -33,7 +33,7 @@ export default TabNavigator( }, }, settings: { - screen: SettingsContainer, + screen: SettingsCard, navigationOptions: { tabBarLabel: 'Settings', tabBarIcon: ({ tintColor }) => , diff --git a/src/nav/AppNavigator.js b/src/nav/AppNavigator.js index 05991dda538..bf014204ba1 100644 --- a/src/nav/AppNavigator.js +++ b/src/nav/AppNavigator.js @@ -15,8 +15,10 @@ import ChatScreen from '../chat/ChatScreen'; import LoadingScreen from '../start/LoadingScreen'; import SettingsScreen from '../settings/SettingsScreen'; import LanguageScreen from '../settings/LanguageScreen'; -import DiagnosticsScreen from '../settings/DiagnosticsScreen'; -import TimingScreen from '../settings/TimingScreen'; +import DiagnosticsScreen from '../diagnostics/DiagnosticsScreen'; +import VariablesScreen from '../diagnostics/VariablesScreen'; +import TimingScreen from '../diagnostics/TimingScreen'; +import StorageScreen from '../diagnostics/StorageScreen'; import LightboxScreen from '../lightbox/LightboxScreen'; import GroupScreen from '../group/GroupScreen'; @@ -39,7 +41,9 @@ export default StackNavigator( lightbox: { screen: LightboxScreen }, group: { screen: GroupScreen }, diagnostics: { screen: DiagnosticsScreen }, + variables: { screen: VariablesScreen }, timing: { screen: TimingScreen }, + storage: { screen: StorageScreen }, }, { initialRouteName: 'main', diff --git a/src/nav/navActions.js b/src/nav/navActions.js index 9443dc86133..4547dd83952 100644 --- a/src/nav/navActions.js +++ b/src/nav/navActions.js @@ -54,4 +54,9 @@ export const navigateToCreateGroup = (): Action => export const navigateToDiagnostics = (): Action => NavigationActions.navigate({ routeName: 'diagnostics' }); +export const navigateToVariables = (): Action => + NavigationActions.navigate({ routeName: 'variables' }); + export const navigateToTiming = (): Action => NavigationActions.navigate({ routeName: 'timing' }); + +export const navigateToStorage = (): Action => NavigationActions.navigate({ routeName: 'storage' }); diff --git a/src/realm/realmActions.js b/src/realm/realmActions.js index f0fb117dc9e..4db45659c0e 100644 --- a/src/realm/realmActions.js +++ b/src/realm/realmActions.js @@ -1,6 +1,7 @@ /* @flow */ import type { GetState, Dispatch, Action } from '../types'; import config from '../config'; +import timing from '../utils/timing'; import { allPrivateNarrow } from '../utils/narrow'; import { tryUntilSuccessful } from '../utils/async'; import { getMessages, getStreams, getUsers, registerForEvents } from '../api'; @@ -52,11 +53,14 @@ export const fetchEssentialInitialData = (): Action => async ( const narrow = getActiveNarrow(getState()); const halfCount = Math.trunc(config.messagesPerRequest / 2); + timing.start('Essential server data'); const [initData, messages] = await Promise.all([ await tryUntilSuccessful(() => registerForEvents(auth)), await tryUntilSuccessful(() => getMessages(auth, 0, halfCount, halfCount, narrow, true)), ]); + timing.end('Essential server data'); + dispatch(realmInit(initData)); dispatch(messageFetchSuccess(messages, narrow, 0, halfCount, halfCount, true)); dispatch(initialFetchComplete()); @@ -70,6 +74,8 @@ export const fetchRestOfInitialData = (): Action => async ( ) => { const auth = getAuth(getState()); const pushToken = getPushToken(getState()); + + timing.start('Rest of server data'); const [messages, streams, users] = await Promise.all([ await tryUntilSuccessful(() => getMessages(auth, Number.MAX_SAFE_INTEGER, 100, 0, allPrivateNarrow), @@ -77,6 +83,8 @@ export const fetchRestOfInitialData = (): Action => async ( await tryUntilSuccessful(() => getStreams(auth)), await tryUntilSuccessful(() => getUsers(auth)), ]); + + timing.end('Rest of server data'); dispatch(messageFetchSuccess(messages, allPrivateNarrow, 0, 0, 0, true)); dispatch(initStreams(streams)); dispatch(initUsers(users)); diff --git a/src/settings/SettingsCard.js b/src/settings/SettingsCard.js index a17e8dee937..2a4aa46f922 100644 --- a/src/settings/SettingsCard.js +++ b/src/settings/SettingsCard.js @@ -74,8 +74,6 @@ export default class SettingsCard extends PureComponent { - - diff --git a/src/settings/SettingsContainer.js b/src/settings/SettingsContainer.js deleted file mode 100644 index 8c1f003a935..00000000000 --- a/src/settings/SettingsContainer.js +++ /dev/null @@ -1,16 +0,0 @@ -/* @flow */ -import { connect } from 'react-redux'; - -import boundActions from '../boundActions'; -import { getAuth } from '../selectors'; -import SettingsCard from './SettingsCard'; - -export default connect( - state => ({ - offlineNotification: state.settings.offlineNotification, - onlineNotification: state.settings.onlineNotification, - theme: state.settings.theme, - auth: getAuth(state), - }), - boundActions, -)(SettingsCard); diff --git a/src/settings/SettingsScreen.js b/src/settings/SettingsScreen.js index 113e9464d51..ea0df520f78 100644 --- a/src/settings/SettingsScreen.js +++ b/src/settings/SettingsScreen.js @@ -1,15 +1,28 @@ -/* @flow */ +/* TODO flow */ import React, { PureComponent } from 'react'; +import { connect } from 'react-redux'; +import boundActions from '../boundActions'; +import { getAuth } from '../selectors'; import { Screen } from '../common'; -import SettingsContainer from './SettingsContainer'; +import SettingsCard from './SettingsCard'; -export default class SettingsScreen extends PureComponent { +class SettingsScreen extends PureComponent { render() { return ( - + ); } } + +export default connect( + state => ({ + offlineNotification: state.settings.offlineNotification, + onlineNotification: state.settings.onlineNotification, + theme: state.settings.theme, + auth: getAuth(state), + }), + boundActions, +)(SettingsScreen);