lint: make Props types readonly (step 1 of 3)

Make most Props types readonly by simply wrapping them in `$ReadOnly`.
No functional changes.

This is an automated transformation, performed by the following:

  # type Props = {| ... |};
  find src -name '*.js' | \
    xargs perl -i -0pe 's/(type Props \= )(\{\|.*?\|\})(;)/$1\$ReadOnly<$2>$3/sg'

  # type Props = {| ... |};
  find src -name '*.js' | \
    xargs perl -i -0pe 's/(type Props \= )(\{.*?\})(;)/$1\$ReadOnly<$2>$3/sg'

src/account-info/AccountDetails.js

@@ -32,12 +32,12 @@ type SelectorProps = {|
   userStatusText: string | void,
 |};
 
-type Props = {|
+type Props = $ReadOnly<{|
   user: User,
 
   dispatch: Dispatch,
   ...SelectorProps,
-|};
+|}>;
 
 class AccountDetails extends PureComponent<Props> {
   render() {

src/account-info/AccountDetailsScreen.js

@@ -17,10 +17,10 @@ const styles = StyleSheet.create({
   },
 });
 
-type Props = {|
+type Props = $ReadOnly<{|
   user: User,
   dispatch: Dispatch,
-|};
+|}>;
 
 class AccountDetailsScreen extends PureComponent<Props> {
   handleChatPress = () => {

src/account-info/AwayStatusSwitch.js

@@ -7,10 +7,10 @@ import { OptionRow } from '../common';
 import { getSelfUserAwayStatus } from '../selectors';
 import { updateUserAwayStatus } from '../user-status/userStatusActions';
 
-type Props = {|
+type Props = $ReadOnly<{|
   awayStatus: boolean,
   dispatch: Dispatch,
-|};
+|}>;
 
 /**
  * This is a stand-alone component that:

src/account-info/ProfileCard.js

@@ -63,10 +63,10 @@ class LogoutButton extends PureComponent<{| dispatch: Dispatch |}> {
   }
 }
 
-type Props = {|
+type Props = $ReadOnly<{|
   dispatch: Dispatch,
   selfUserDetail: User,
-|};
+|}>;
 
 /**
  * This is similar to `AccountDetails` but used to show the current users account.

src/account/AccountItem.js

@@ -36,14 +36,14 @@ const styles = StyleSheet.create({
   },
 });
 
-type Props = {|
+type Props = $ReadOnly<{|
   index: number,
   email: string,
   realm: string,
   onSelect: (index: number) => void,
   onRemove: (index: number) => void,
   showDoneIcon: boolean,
-|};
+|}>;
 
 export default class AccountItem extends PureComponent<Props> {
   handleSelect = () => this.props.onSelect(this.props.index);

src/account/AccountList.js

@@ -6,11 +6,11 @@ import type { AccountStatus } from './accountsSelectors';
 import { ViewPlaceholder } from '../common';
 import AccountItem from './AccountItem';
 
-type Props = {|
+type Props = $ReadOnly<{|
   accounts: AccountStatus[],
   onAccountSelect: number => void,
   onAccountRemove: number => void,
-|};
+|}>;
 
 export default class AccountList extends PureComponent<Props> {
   render() {

src/account/AccountPickScreen.js

@@ -10,11 +10,11 @@ import { Centerer, ZulipButton, Logo, Screen, ViewPlaceholder } from '../common'
 import AccountList from './AccountList';
 import { navigateToRealmScreen, switchAccount, removeAccount } from '../actions';
 
-type Props = {|
+type Props = $ReadOnly<{|
   accounts: AccountStatus[],
   dispatch: Dispatch,
   hasAuth: boolean,
-|};
+|}>;
 
 class AccountPickScreen extends PureComponent<Props> {
   handleAccountSelect = (index: number) => {

src/animation/AnimatedComponent.js

@@ -5,15 +5,15 @@ import { Animated, Easing } from 'react-native';
 
 import type { Style } from '../types';
 
-type Props = {|
+type Props = $ReadOnly<{|
   stylePropertyName: string,
   fullValue: number,
   children: React$Node,
   style?: Style,
   visible: boolean,
   useNativeDriver: boolean,
   delay: number,
-|};
+|}>;
 
 export default class AnimatedComponent extends PureComponent<Props> {
   static defaultProps = {

src/animation/AnimatedRotateComponent.js

@@ -5,10 +5,10 @@ import { Animated, Easing } from 'react-native';
 
 import type { Style } from '../types';
 
-type Props = {|
+type Props = $ReadOnly<{|
   style?: Style,
   children: React$Node,
-|};
+|}>;
 
 export default class AnimatedRotateComponent extends PureComponent<Props> {
   rotation = new Animated.Value(0);

src/animation/AnimatedScaleComponent.js

@@ -5,11 +5,11 @@ import { Animated, Easing } from 'react-native';
 
 import type { Style } from '../types';
 
-type Props = {|
+type Props = $ReadOnly<{|
   children: React$Node,
   visible: boolean,
   style?: Style,
-|};
+|}>;
 
 type State = {|
   visible: boolean,

src/autocomplete/AutocompleteView.js

@@ -15,12 +15,12 @@ const prefixToComponent = {
   '@': PeopleAutocomplete,
 };
 
-type Props = {|
+type Props = $ReadOnly<{|
   isFocused: boolean,
   text: string,
   selection: InputSelection,
   onAutocomplete: (input: string) => void,
-|};
+|}>;
 
 export default class AutocompleteView extends PureComponent<Props> {
   handleAutocomplete = (autocomplete: string) => {

src/autocomplete/EmojiAutocomplete.js

@@ -10,12 +10,12 @@ import type { RealmEmojiById, Dispatch } from '../types';
 import { connect } from '../react-redux';
 import { getActiveImageEmojiByName } from '../selectors';
 
-type Props = {|
+type Props = $ReadOnly<{|
   dispatch: Dispatch,
   filter: string,
   activeImageEmojiByName: RealmEmojiById,
   onAutocomplete: (name: string) => void,
-|};
+|}>;
 
 const MAX_CHOICES = 30;
 

src/autocomplete/PeopleAutocomplete.js

@@ -14,14 +14,14 @@ import { Popup } from '../common';
 import UserItem from '../users/UserItem';
 import UserGroupItem from '../user-groups/UserGroupItem';
 
-type Props = {|
+type Props = $ReadOnly<{|
   dispatch: Dispatch,
   filter: string,
   onAutocomplete: (name: string) => void,
   ownEmail: string,
   users: User[],
   userGroups: UserGroup[],
-|};
+|}>;
 
 class PeopleAutocomplete extends PureComponent<Props> {
   handleUserGroupItemAutocomplete = (name: string): void => {

src/autocomplete/StreamAutocomplete.js

@@ -9,12 +9,12 @@ import { Popup } from '../common';
 import { getSubscribedStreams } from '../subscriptions/subscriptionSelectors';
 import StreamItem from '../streams/StreamItem';
 
-type Props = {|
+type Props = $ReadOnly<{|
   dispatch: Dispatch,
   filter: string,
   onAutocomplete: (name: string) => void,
   subscriptions: SubscriptionsState,
-|};
+|}>;
 
 class StreamAutocomplete extends PureComponent<Props> {
   onAutocomplete = (name: string): void => {

src/autocomplete/TopicAutocomplete.js

@@ -15,13 +15,13 @@ const styles = StyleSheet.create({
   },
 });
 
-type Props = {
+type Props = $ReadOnly<{
   dispatch: Dispatch,
   isFocused: boolean,
   text: string,
   topics: string[],
   onAutocomplete: (name: string) => void,
-};
+}>;
 
 class TopicAutocomplete extends PureComponent<Props> {
   render() {

src/boot/AppDataFetcher.js

@@ -8,11 +8,11 @@ import { connect } from '../react-redux';
 import { getSession } from '../directSelectors';
 import { doInitialFetch } from '../actions';
 
-type Props = {|
+type Props = $ReadOnly<{|
   needsInitialFetch: boolean,
   dispatch: Dispatch,
   children: React$Node,
-|};
+|}>;
 
 class AppDataFetcher extends PureComponent<Props> {
   componentDidUpdate = () => {

src/boot/AppEventHandlers.js

@@ -64,11 +64,11 @@ const styles = StyleSheet.create({
   },
 });
 
-type Props = {|
+type Props = $ReadOnly<{|
   dispatch: Dispatch,
   children: React$Node,
   unreadCount: number,
-|};
+|}>;
 
 class AppEventHandlers extends PureComponent<Props> {
   /** NetInfo disconnection callback. */

src/boot/CompatibilityChecker.js

@@ -5,9 +5,9 @@ import type { Node as React$Node } from 'react';
 import * as api from '../api';
 import CompatibilityScreen from '../start/CompatibilityScreen';
 
-type Props = {|
+type Props = $ReadOnly<{|
   children: React$Node,
-|};
+|}>;
 
 type State = {|
   compatibilityCheckFail: boolean,

src/boot/StoreProvider.js

@@ -6,9 +6,9 @@ import type { Node as React$Node } from 'react';
 import store, { restore } from './store';
 import timing from '../utils/timing';
 
-type Props = {|
+type Props = $ReadOnly<{|
   children: React$Node,
-|};
+|}>;
 
 export default class StoreHydrator extends PureComponent<Props> {
   componentDidMount() {

src/boot/StylesProvider.js

@@ -10,11 +10,11 @@ import { stylesFromTheme, themeColors, ThemeContext } from '../styles/theme';
 
 const Dummy = props => props.children;
 
-type Props = {|
+type Props = $ReadOnly<{|
   dispatch: Dispatch,
   theme: ThemeName,
   children: React$Node,
-|};
+|}>;
 
 class StyleProvider extends PureComponent<Props> {
   static childContextTypes = {

src/boot/TranslationProvider.js

@@ -73,11 +73,11 @@ class TranslationContextTranslator extends PureComponent<{
   }
 }
 
-type Props = {|
+type Props = $ReadOnly<{|
   dispatch: Dispatch,
   locale: string,
   children: React$Node,
-|};
+|}>;
 
 class TranslationProvider extends PureComponent<Props> {
   render() {

src/chat/Chat.js

@@ -17,13 +17,13 @@ type SelectorProps = {|
   canSend: boolean,
 |};
 
-type Props = {|
+type Props = $ReadOnly<{|
   /* $FlowFixMe: probably this shouldn't be optional */
   narrow?: Narrow,
 
   dispatch: Dispatch,
   ...SelectorProps,
-|};
+|}>;
 
 const componentStyles = StyleSheet.create({
   /** A workaround for #3089, by letting us put MessageList first. */

src/chat/ChatScreen.js

@@ -9,9 +9,9 @@ import { OfflineNotice, ZulipStatusBar } from '../common';
 import Chat from './Chat';
 import ChatNavBar from '../nav/ChatNavBar';
 
-type Props = {|
+type Props = $ReadOnly<{|
   navigation: NavigationScreenProp<{ params: {| narrow: Narrow |} }>,
-|};
+|}>;
 
 const styles = StyleSheet.create({
   /** A workaround for #3089, by letting us put Chat (with MessageList) first. */

src/chat/GroupDetailsScreen.js

@@ -9,10 +9,10 @@ import { Screen } from '../common';
 import UserItem from '../users/UserItem';
 import { navigateToAccountDetails } from '../actions';
 
-type Props = {|
+type Props = $ReadOnly<{|
   navigation: NavigationScreenProp<{ params: {| recipients: UserOrBot[] |} }>,
   dispatch: Dispatch,
-|};
+|}>;
 
 class GroupDetailsScreen extends PureComponent<Props> {
   handlePress = (email: string) => {

src/chat/MarkUnreadButton.js

@@ -19,12 +19,12 @@ const styles = StyleSheet.create({
   },
 });
 
-type Props = {|
+type Props = $ReadOnly<{|
   dispatch: Dispatch,
   auth: Auth,
   narrow: Narrow,
   streams: Stream[],
-|};
+|}>;
 
 class MarkUnreadButton extends PureComponent<Props> {
   markAllAsRead = () => {

src/chat/UnreadNotice.js

@@ -38,12 +38,12 @@ type SelectorProps = {|
   unreadCount: number,
 |};
 
-type Props = {|
+type Props = $ReadOnly<{|
   narrow: Narrow,
 
   dispatch: Dispatch,
   ...SelectorProps,
-|};
+|}>;
 
 class UnreadNotice extends PureComponent<Props> {
   render() {

src/common/Arc.js

@@ -2,11 +2,11 @@
 import React from 'react';
 import { ART } from 'react-native';
 
-type Props = {|
+type Props = $ReadOnly<{|
   color: string,
   size: number,
   thickness: number,
-|};
+|}>;
 
 /**
  * Renders an arc - a quarter of a circle, using the ART library.