Mobile misc cleanup

mobile/components/Messages/index.js

@@ -8,7 +8,7 @@ import Message from '../Message';
 import InfiniteList from '../InfiniteList';
 import { ThreadMargin } from '../../views/Thread/style';
 import { sortAndGroupMessages } from '../../../shared/clients/group-messages';
-import { convertTimestampToDate } from '../../../src/helpers/utils';
+import { convertTimestampToDate } from '../../../shared/time-formatting';
 import { withCurrentUser } from '../../components/WithCurrentUser';
 import RoboText from './RoboText';
 import Author from './Author';

mobile/views/Channel/index.js

@@ -25,11 +25,12 @@ import {
 } from './style';
 import ErrorBoundary from '../../components/ErrorBoundary';
 import { FullscreenNullState } from '../../components/NullStates';
+import type { NavigationProps } from 'react-navigation';
 
 type Props = {
   isLoading: boolean,
   hasError: boolean,
-  navigation: Object,
+  navigation: NavigationProps,
   data: {
     channel?: GetChannelType,
   },
@@ -38,6 +39,23 @@ type Props = {
 const ChannelThreadFeed = compose(getChannelThreadConnection)(ThreadFeed);
 
 class Channel extends Component<Props> {
+  setTitle = () => {
+    const { data: { channel }, navigation } = this.props;
+    let title;
+    if (channel) {
+      title = channel.name;
+    } else {
+      title = 'Loading channel...';
+    }
+    if (navigation.state.params.title === title) return;
+    navigation.setParams({ title });
+  };
+  componentDidUpdate() {
+    this.setTitle();
+  }
+  componentDidMount() {
+    this.setTitle();
+  }
   render() {
     const { data, isLoading, hasError, navigation } = this.props;
     if (data.channel) {

mobile/views/Community/index.js

@@ -61,6 +61,23 @@ const RemoteThreadItem = compose(getThreadById, withNavigation)(
 const CommunityThreadFeed = compose(getCommunityThreads)(ThreadFeed);
 
 class Community extends Component<Props> {
+  setTitle = () => {
+    const { data: { community }, navigation } = this.props;
+    let title;
+    if (community) {
+      title = community.name;
+    } else {
+      title = 'Loading community...';
+    }
+    if (navigation.state.params.title === title) return;
+    navigation.setParams({ title });
+  };
+  componentDidUpdate() {
+    this.setTitle();
+  }
+  componentDidMount() {
+    this.setTitle();
+  }
   render() {
     const { data: { community }, isLoading, hasError, navigation } = this.props;
 

mobile/views/DirectMessageThread/components/DirectMessageThread.js

@@ -40,6 +40,23 @@ type Props = {
 };
 
 class DirectMessageThread extends Component<Props> {
+  setTitle = () => {
+    const { data: { directMessageThread }, navigation } = this.props;
+    let title = directMessageThread
+      ? sentencify(directMessageThread.participants.map(({ name }) => name))
+      : 'Loading thread...';
+    if (navigation.state.params.title === title) return;
+    navigation.setParams({ title });
+  };
+
+  componentDidMount() {
+    this.setTitle();
+  }
+
+  componentDidUpdate() {
+    this.setTitle();
+  }
+
   sendMessage = text => {
     if (!this.props.data.directMessageThread) return;
     this.props.sendDirectMessage({

mobile/views/DirectMessageThread/index.js

@@ -8,16 +8,11 @@ import DirectMessageThread from './components/DirectMessageThread';
 import { Wrapper } from './style';
 import ErrorBoundary from '../../components/ErrorBoundary';
 import type { GetUserType } from '../../../shared/graphql/queries/user/getUser';
+import type { NavigationProps } from 'react-navigation';
 
 type Props = {
   currentUser: ?GetUserType,
-  navigation?: {
-    state: {
-      params: {
-        id: string,
-      },
-    },
-  },
+  navigation: NavigationProps,
 };
 
 class DirectMessageThreadView extends React.Component<Props> {

mobile/views/TabBar/BaseStack.js

@@ -12,26 +12,26 @@ const BaseStack = {
   Thread: {
     screen: withMappedNavigationProps(Thread),
     navigationOptions: ({ navigation }: NavigationScreenConfigProps) => ({
-      headerTitle: navigation.state.params.title || 'Thread',
+      headerTitle: navigation.state.params.title || null,
       tabBarVisible: false,
     }),
   },
   Community: {
     screen: withMappedNavigationProps(Community),
     navigationOptions: ({ navigation }: NavigationScreenConfigProps) => ({
-      headerTitle: null,
+      headerTitle: navigation.state.params.title || null,
     }),
   },
   Channel: {
     screen: withMappedNavigationProps(Channel),
     navigationOptions: ({ navigation }: NavigationScreenConfigProps) => ({
-      headerTitle: null,
+      headerTitle: navigation.state.params.title || null,
     }),
   },
   User: {
     screen: withMappedNavigationProps(User),
     navigationOptions: ({ navigation }: NavigationScreenConfigProps) => ({
-      header: null,
+      headerTitle: navigation.state.params.title || null,
     }),
   },
 };

mobile/views/Thread/index.js

@@ -12,7 +12,7 @@ import Messages from '../../components/Messages';
 import ChatInput from '../../components/ChatInput';
 import getThreadMessageConnection from '../../../shared/graphql/queries/thread/getThreadMessageConnection';
 import sendMessageMutation from '../../../shared/graphql/mutations/message/sendMessage';
-import { convertTimestampToDate } from '../../../src/helpers/utils';
+import { convertTimestampToDate } from '../../../shared/time-formatting';
 import { withCurrentUser } from '../../components/WithCurrentUser';
 import CommunityHeader from './components/CommunityHeader';
 import Byline from './components/Byline';
@@ -40,6 +40,26 @@ type Props = {
 };
 
 class Thread extends Component<Props> {
+  setTitle = () => {
+    const { data: { thread }, navigation } = this.props;
+    let title;
+    if (thread) {
+      title = thread.content.title;
+    } else {
+      title = 'Loading thread...';
+    }
+    if (navigation.state.params.title === title) return;
+    navigation.setParams({ title });
+  };
+
+  componentDidMount() {
+    this.setTitle();
+  }
+
+  componentDidUpdate() {
+    this.setTitle();
+  }
+
   sendMessage = (body: string, user: Object) => {
     const { quotedMessage, data: { thread } } = this.props;
     if (!thread) return;

mobile/views/User/index.js

@@ -7,9 +7,11 @@ import {
 } from '../../../shared/graphql/queries/user/getUser';
 import ViewNetworkHandler from '../../components/ViewNetworkHandler';
 import Profile from './profile';
+import type { NavigationProps } from 'react-navigation';
 
 type Props = {
   id: ?string,
+  navigation: NavigationProps,
 };
 
 type State = {

mobile/views/User/profile.js

@@ -42,13 +42,24 @@ const UserThreadFeed = compose(getUserThreadConnection)(ThreadFeed);
 class User extends Component<Props, State> {
   state = { feed: 'participant' };
 
-  componentDidUpdate() {
+  setTitle = () => {
     const { data: { user }, navigation } = this.props;
-    if (!user) return;
-    const title = navigation.getParam('title');
-    if (!title && user) return navigation.setParams({ title: user.name });
-    if (title && title !== user.name)
-      return navigation.setParams({ title: user.name });
+    let title;
+    if (user) {
+      title = `${user.name} (@${user.username})`;
+    } else {
+      title = 'Loading user...';
+    }
+    if (navigation.state.params.title === title) return;
+    navigation.setParams({ title });
+  };
+
+  componentDidMount() {
+    this.setTitle();
+  }
+
+  componentDidUpdate() {
+    this.setTitle();
   }
 
   toggleFeed = (feed: string) => this.setState({ feed });

shared/time-formatting.js

@@ -0,0 +1,49 @@
+// @flow
+
+export const convertTimestampToDate = (timestamp: number) => {
+  let monthNames = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+  let date = new Date(timestamp);
+  let day = date.getDate();
+  let monthIndex = date.getMonth();
+  let month = monthNames[monthIndex];
+  let year = date.getFullYear();
+  let hours = date.getHours() || 0;
+  let cleanHours;
+  if (hours === 0) {
+    cleanHours = 12; // if timestamp is between midnight and 1am, show 12:XX am
+  } else {
+    cleanHours = hours > 12 ? hours - 12 : hours; // else show proper am/pm -- todo: support 24hr time
+  }
+  let minutes = date.getMinutes();
+  minutes = minutes >= 10 ? minutes : '0' + minutes.toString(); // turns 4 minutes into 04 minutes
+  let ampm = hours >= 12 ? 'pm' : 'am'; // todo: support 24hr time
+  return `${month} ${day}, ${year} · ${cleanHours}:${minutes}${ampm}`;
+};
+
+export const convertTimestampToTime = (timestamp: Date) => {
+  let date = new Date(timestamp);
+  let hours = date.getHours() || 0;
+  let cleanHours;
+  if (hours === 0) {
+    cleanHours = 12; // if timestamp is between midnight and 1am, show 12:XX am
+  } else {
+    cleanHours = hours > 12 ? hours - 12 : hours; // else show proper am/pm -- todo: support 24hr time
+  }
+  let minutes = date.getMinutes();
+  minutes = minutes >= 10 ? minutes : '0' + minutes.toString(); // turns 4 minutes into 04 minutes
+  let ampm = hours >= 12 ? 'pm' : 'am'; // todo: support 24hr time
+  return `${cleanHours}:${minutes}${ampm}`;
+};

src/components/listItems/index.js

@@ -5,7 +5,7 @@ import compose from 'recompose/compose';
 import Icon from '../icons';
 import Badge from '../badges';
 import Avatar from '../avatar';
-import { convertTimestampToDate } from '../../helpers/utils';
+import { convertTimestampToDate } from 'shared/time-formatting';
 import Reputation from '../reputation';
 import {
   Wrapper,

src/components/messageGroup/index.js

@@ -2,7 +2,7 @@
 import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 import Link from 'src/components/link';
-import { convertTimestampToDate } from '../../helpers/utils';
+import { convertTimestampToDate } from 'shared/time-formatting';
 import Badge from '../badges';
 import Avatar from '../avatar';
 import Message from '../message';

src/helpers/utils.js

@@ -2,54 +2,6 @@
 import React from 'react';
 import replace from 'string-replace-to-array';
 
-export const convertTimestampToDate = (timestamp: number) => {
-  let monthNames = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-  let date = new Date(timestamp);
-  let day = date.getDate();
-  let monthIndex = date.getMonth();
-  let month = monthNames[monthIndex];
-  let year = date.getFullYear();
-  let hours = date.getHours() || 0;
-  let cleanHours;
-  if (hours === 0) {
-    cleanHours = 12; // if timestamp is between midnight and 1am, show 12:XX am
-  } else {
-    cleanHours = hours > 12 ? hours - 12 : hours; // else show proper am/pm -- todo: support 24hr time
-  }
-  let minutes = date.getMinutes();
-  minutes = minutes >= 10 ? minutes : '0' + minutes.toString(); // turns 4 minutes into 04 minutes
-  let ampm = hours >= 12 ? 'pm' : 'am'; // todo: support 24hr time
-  return `${month} ${day}, ${year} · ${cleanHours}:${minutes}${ampm}`;
-};
-
-export const convertTimestampToTime = (timestamp: Date) => {
-  let date = new Date(timestamp);
-  let hours = date.getHours() || 0;
-  let cleanHours;
-  if (hours === 0) {
-    cleanHours = 12; // if timestamp is between midnight and 1am, show 12:XX am
-  } else {
-    cleanHours = hours > 12 ? hours - 12 : hours; // else show proper am/pm -- todo: support 24hr time
-  }
-  let minutes = date.getMinutes();
-  minutes = minutes >= 10 ? minutes : '0' + minutes.toString(); // turns 4 minutes into 04 minutes
-  let ampm = hours >= 12 ? 'pm' : 'am'; // todo: support 24hr time
-  return `${cleanHours}:${minutes}${ampm}`;
-};
-
 /*
   Best guess at if user is on a mobile device. Used in the modal components
   to determine where the modal should be positioned, how it should close and

src/views/thread/components/threadDetail.js

@@ -4,10 +4,8 @@ import compose from 'recompose/compose';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import Link from 'src/components/link';
-import {
-  getLinkPreviewFromUrl,
-  convertTimestampToDate,
-} from '../../../helpers/utils';
+import { getLinkPreviewFromUrl } from '../../../helpers/utils';
+import { convertTimestampToDate } from 'shared/time-formatting';
 import { timeDifference } from 'shared/time-difference';
 import isURL from 'validator/lib/isURL';
 import { URLS } from '../../../helpers/regexps';

src/views/userSettings/components/recurringPaymentsList.js

@@ -6,7 +6,7 @@ import { BillingListItem } from 'src/components/listItems';
 import { IconButton } from 'src/components/buttons';
 import { UpsellUpgradeToPro } from 'src/components/upsell';
 import { openModal } from 'src/actions/modals';
-import { convertTimestampToDate } from 'src/helpers/utils';
+import { convertTimestampToDate } from 'shared/time-formatting';
 import getCurrentUserRecurringPayments from 'shared/graphql/queries/user/getCurrentUserRecurringPayments';
 import type { GetCurrentUserRecurringPaymentsType } from 'shared/graphql/queries/user/getCurrentUserRecurringPayments';
 import { displayLoadingCard } from 'src/components/loading';