Add storage size information and more timings (#1129)

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 (
+      <Screen title="Diagnostics">
+        <ScrollView>
+          <OptionButton label="Variables" onPress={actions.navigateToVariables} />
+          <View style={styles.divider} />
+          <OptionButton label="Timing" onPress={actions.navigateToTiming} />
+          <View style={styles.divider} />
+          <OptionButton label="Storage" onPress={actions.navigateToStorage} />
+        </ScrollView>
+      </Screen>
+    );
+  }
+}
+
+export default connect(null, boundActions)(DiagnosticsScreen);

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 (
+      <View style={styles.item}>
+        <RawLabel style={styles.key} text={text} />
+        <RawLabel
+          style={styles.size}
+          text={size.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+        />
+      </View>
+    );
+  }
+}

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 (
+      <Screen title="Storage">
+        <FlatList
+          data={storageSizes}
+          keyExtractor={item => item.key}
+          renderItem={({ item }) => <SizeItem text={item.key} size={item.size} />}
+        />
+      </Screen>
+    );
+  }
+}
+
+export default connect(state => ({
+  state,
+}))(StorageScreen);

src/settings/TimingScreen.js → src/diagnostics/TimingScreen.js

@@ -12,7 +12,7 @@ export default class TimingScreen extends PureComponent {
       <Screen title="Timing">
         <FlatList
           data={timing.log}
-          keyExtractor={item => item}
+          keyExtractor={item => item.text}
           renderItem={({ item }) => <TimeItem text={item.text} start={item.start} end={item.end} />}
         />
       </Screen>

src/settings/DiagnosticsScreen.js → 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 (
-      <Screen title="Diagnostics">
+      <Screen title="Variables">
         <ScrollView>
           <InfoItem label="enableReduxLogging" value={config.enableReduxLogging} />
           <InfoItem label="enableSentry" value={config.enableSentry} />

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"
 }

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 }) => <IconSettings size={24} color={tintColor} />,

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',

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' });

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,13 +74,17 @@ 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),
     ),
     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));

src/settings/SettingsCard.js

@@ -74,8 +74,6 @@ export default class SettingsCard extends PureComponent {
         <OptionButton label="Language" onPress={actions.navigateToLanguage} />
         <View style={styles.divider} />
         <OptionButton label="Diagnostics" onPress={actions.navigateToDiagnostics} />
-        <View style={styles.divider} />
-        <OptionButton label="Timing" onPress={actions.navigateToTiming} />
         <View style={styles.padding}>
           <WebLink label="Terms of service" href="/terms/" />
           <WebLink label="Privacy policy" href="/privacy/" />

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 (
       <Screen title="Settings">
-        <SettingsContainer />
+        <SettingsCard {...this.props} />
       </Screen>
     );
   }
 }
+
+export default connect(
+  state => ({
+    offlineNotification: state.settings.offlineNotification,
+    onlineNotification: state.settings.onlineNotification,
+    theme: state.settings.theme,
+    auth: getAuth(state),
+  }),
+  boundActions,
+)(SettingsScreen);