#57: use "readonly state" initialization instead of ctor

client/src/AuthenticatedApp.tsx

@@ -49,14 +49,10 @@ interface IAppState {
 }
 
 export class AuthenticatedApp extends React.Component<{}, IAppState> {
-  public constructor(props: {}) {
-    super(props);
-
-    this.state = {
-      currentUser: null,
-      isLoading: true
-    };
-  }
+  public readonly state: IAppState = {
+    currentUser: null,
+    isLoading: true
+  };
 
   public componentDidMount(): void {
     AuthenticatedServerApi.get("users/me")

client/src/common/ErrorBoundary.tsx

@@ -8,10 +8,9 @@ interface IErrorBoundaryState {
 }
 
 export class ErrorBoundary extends React.PureComponent<{}, IErrorBoundaryState> {
-  public constructor(props: {}) {
-    super(props);
-    this.state = { error: undefined };
-  }
+  public readonly state: IErrorBoundaryState = {
+    error: undefined
+  };
 
   public static ensureError(component: React.Component, error: Error) {
     component.setState(() => {

client/src/common/Header.tsx

@@ -39,13 +39,11 @@ interface IHeaderState {
 }
 
 export class Header extends React.PureComponent<IHeaderProps, IHeaderState> {
-  public constructor(props: IHeaderProps) {
-    super(props);
-
-    this.state = {
-      title: ""
-    };
+  public readonly state: IHeaderState = {
+    title: ""
+  };
 
+  public componentDidMount(): void {
     new Typer("engraved.").startTyping((typedText: string) => this.setState({ title: typedText }));
   }
 

client/src/common/form/fields/markdown/Markdown.tsx

@@ -118,13 +118,9 @@ interface IMarkdownState {
 const tocSeparator = "---ngrvd-separator---";
 
 export class Markdown extends React.PureComponent<IMarkdownProps, IMarkdownState> {
-  public constructor(props: IMarkdownProps) {
-    super(props);
-
-    this.state = {
-      isTocExpanded: false
-    };
-  }
+  public readonly state: IMarkdownState = {
+    isTocExpanded: false
+  };
 
   public render(): ReactNode {
     if (!this.props.markdown || !this.props.markdown.trim()) {

client/src/common/form/fields/markdown/MarkdownField.tsx

@@ -42,13 +42,9 @@ interface IMarkdownFieldState {
 }
 
 export class MarkdownField extends React.PureComponent<IMarkdownFieldProps, IMarkdownFieldState> {
-  public constructor(props: IMarkdownFieldProps) {
-    super(props);
-
-    this.state = {
-      isPreview: false
-    };
-  }
+  public readonly state: IMarkdownFieldState = {
+    isPreview: false
+  };
 
   public render(): ReactNode {
     return (

client/src/common/searchBox/SearchBox.tsx

@@ -65,15 +65,11 @@ interface ISearchBoxState {
 export class SearchBox extends React.Component<ISearchBoxProps, ISearchBoxState> {
   private node: HTMLDivElement;
 
-  public constructor(props: ISearchBoxProps) {
-    super(props);
-
-    this.state = {
-      showDropDown: true,
-      hidePlaceholder: false,
-      hasFocus: false
-    };
-  }
+  public readonly state: ISearchBoxState = {
+    showDropDown: true,
+    hidePlaceholder: false,
+    hasFocus: false
+  };
 
   public render(): ReactNode {
     return (

client/src/items/url/ViewUrlItem.tsx

@@ -52,13 +52,9 @@ export class ViewUrlItem extends React.PureComponent<IViewItemProps<IUrlItem>, I
 
   private imageAnchorEl: HTMLImageElement;
 
-  public constructor(props: IViewItemProps<IUrlItem>) {
-    super(props);
-
-    this.state = {
-      showFallbackIcon: false
-    };
-  }
+  public readonly state: IViewUrlItemState = {
+    showFallbackIcon: false
+  };
 
   public render(): ReactNode {
     return (

client/src/notifications/Notifications.tsx

@@ -57,13 +57,9 @@ interface INotificationsState {
 export class Notifications extends React.PureComponent<{}, INotificationsState> {
   private notifications$Subscription: Subscription;
 
-  public constructor(props: {}) {
-    super(props);
-
-    this.state = {
-      notifications: []
-    };
-  }
+  public readonly state: INotificationsState = {
+    notifications: []
+  };
 
   public componentDidMount(): void {
     this.notifications$Subscription = NotificationStore.instance.notifications$.subscribe(

client/src/pages/search/GlobalSearchBox.tsx

@@ -44,31 +44,27 @@ interface IGlobalSearchBoxState {
 export class GlobalSearchBox extends React.PureComponent<{}, IGlobalSearchBoxState> {
   private findOnTypeTimer: any;
 
-  private keywordsSubscription: Subscription;
-
-  public constructor(props: {}) {
-    super(props);
-
-    this.state = {
-      searchValue: ItemStore.instance.searchText,
-      keywordSearchValue: "",
-      showDropDown: true,
-      actionDropDownItems: [],
-      keywordDropDownItems: [],
-      selectedKeywords: [],
-      redirectToUrl: null
-    };
-  }
+  private keywords$Subscription: Subscription;
+
+  public readonly state: IGlobalSearchBoxState = {
+    searchValue: ItemStore.instance.searchText,
+    keywordSearchValue: "",
+    showDropDown: true,
+    actionDropDownItems: [],
+    keywordDropDownItems: [],
+    selectedKeywords: [],
+    redirectToUrl: null
+  };
 
   public componentDidMount(): void {
-    this.keywordsSubscription = ItemStore.instance.keywords$.subscribe(keywords =>
+    this.keywords$Subscription = ItemStore.instance.keywords$.subscribe(keywords =>
       this.setState({ selectedKeywords: keywords })
     );
   }
 
   public componentWillUnmount(): void {
-    if (this.keywordsSubscription) {
-      this.keywordsSubscription.unsubscribe();
+    if (this.keywords$Subscription) {
+      this.keywords$Subscription.unsubscribe();
     }
   }
 

client/src/pages/search/results/ItemsList.tsx

@@ -23,11 +23,9 @@ interface IListOfItemsState {
 export class ItemsList extends React.PureComponent<{}, IListOfItemsState> {
   private items$Subscription: Subscription;
 
-  public constructor(props: {}) {
-    super(props);
-
-    this.state = { items: [] };
-  }
+  public readonly state: IListOfItemsState = {
+    items: []
+  };
 
   public componentDidMount(): void {
     this.items$Subscription = ItemStore.instance.items$.subscribe(