#22: minor code style and type anotations improvements

flow-typed/npm/react-intl_v2.x.x.js

@@ -0,0 +1,265 @@
+// flow-typed signature: e68caa23426dedefced5662fb92b4638
+// flow-typed version: d13a175635/react-intl_v2.x.x/flow_>=v0.57.x
+
+/**
+ * Original implementation of this file by @marudor at https://github.com/marudor/flowInterfaces
+ * Copied here based on intention to merge with flow-typed expressed here:
+ * https://github.com/marudor/flowInterfaces/issues/6
+ */
+// Mostly from https://github.com/yahoo/react-intl/wiki/API#react-intl-api
+
+import type { Element, ChildrenArray } from "react";
+
+type $npm$ReactIntl$LocaleData = {
+  locale: string,
+  [key: string]: any
+};
+
+type $npm$ReactIntl$MessageDescriptor = {
+  id: string,
+  description?: string,
+  defaultMessage?: string
+};
+
+type $npm$ReactIntl$IntlConfig = {
+  locale: string,
+  formats: Object,
+  messages: { [id: string]: string },
+
+  defaultLocale?: string,
+  defaultFormats?: Object
+};
+
+type $npm$ReactIntl$IntlProviderConfig = {
+  locale?: string,
+  formats?: Object,
+  messages?: { [id: string]: string },
+
+  defaultLocale?: string,
+  defaultFormats?: Object
+};
+
+type $npm$ReactIntl$IntlFormat = {
+  formatDate: (value: any, options?: Object) => string,
+  formatTime: (value: any, options?: Object) => string,
+  formatRelative: (value: any, options?: Object) => string,
+  formatNumber: (value: any, options?: Object) => string,
+  formatPlural: (value: any, options?: Object) => string,
+  formatMessage: (
+    messageDescriptor: $npm$ReactIntl$MessageDescriptor,
+    values?: Object
+  ) => string,
+  formatHTMLMessage: (
+    messageDescriptor: $npm$ReactIntl$MessageDescriptor,
+    values?: Object
+  ) => string
+};
+
+type $npm$ReactIntl$IntlShape = $npm$ReactIntl$IntlConfig &
+  $npm$ReactIntl$IntlFormat & { now: () => number };
+
+type $npm$ReactIntl$DateTimeFormatOptions = {
+  localeMatcher?: "best fit" | "lookup",
+  formatMatcher?: "basic" | "best fit",
+
+  timeZone?: string,
+  hour12?: boolean,
+
+  weekday?: "narrow" | "short" | "long",
+  era?: "narrow" | "short" | "long",
+  year?: "numeric" | "2-digit",
+  month?: "numeric" | "2-digit" | "narrow" | "short" | "long",
+  day?: "numeric" | "2-digit",
+  hour?: "numeric" | "2-digit",
+  minute?: "numeric" | "2-digit",
+  second?: "numeric" | "2-digit",
+  timeZoneName?: "short" | "long"
+};
+
+type $npm$ReactIntl$RelativeFormatOptions = {
+  style?: "best fit" | "numeric",
+  units?: "second" | "minute" | "hour" | "day" | "month" | "year"
+};
+
+type $npm$ReactIntl$NumberFormatOptions = {
+  localeMatcher?: "best fit" | "lookup",
+
+  style?: "decimal" | "currency" | "percent",
+
+  currency?: string,
+  currencyDisplay?: "symbol" | "code" | "name",
+
+  useGrouping?: boolean,
+
+  minimumIntegerDigits?: number,
+  minimumFractionDigits?: number,
+  maximumFractionDigits?: number,
+  minimumSignificantDigits?: number,
+  maximumSignificantDigits?: number
+};
+
+type $npm$ReactIntl$PluralFormatOptions = {
+  style?: "cardinal" | "ordinal"
+};
+
+type $npm$ReactIntl$PluralCategoryString =
+  | "zero"
+  | "one"
+  | "two"
+  | "few"
+  | "many"
+  | "other";
+
+type $npm$ReactIntl$DateParseable = number | string | Date;
+
+declare module "react-intl" {
+  // PropType checker
+  declare function intlShape(
+    props: Object,
+    propName: string,
+    componentName: string
+  ): void;
+  declare function addLocaleData(
+    data: $npm$ReactIntl$LocaleData | Array<$npm$ReactIntl$LocaleData>
+  ): void;
+  declare function defineMessages<
+    T: { [key: string]: $npm$ReactIntl$MessageDescriptor }
+  >(
+    messageDescriptors: T
+  ): T;
+
+  declare type InjectIntlProvidedProps = {
+    intl: $npm$ReactIntl$IntlShape
+  }
+
+  declare type ComponentWithDefaultProps<DefaultProps: {}, Props: {}> =
+    | React$ComponentType<Props>
+    | React$StatelessFunctionalComponent<Props>
+    | ChildrenArray<void | null | boolean | string | number | Element<any>>;
+
+  declare type InjectIntlOptions = {
+    intlPropName?: string,
+    withRef?: boolean
+  }
+
+  declare class IntlInjectedComponent<TOwnProps, TDefaultProps> extends React$Component<TOwnProps> {
+    static WrappedComponent: Class<React$Component<TOwnProps & InjectIntlProvidedProps>>,
+    static defaultProps: TDefaultProps,
+    props: TOwnProps
+  }
+
+  declare type IntlInjectedComponentClass<TOwnProps, TDefaultProps: {} = {}> = Class<
+    IntlInjectedComponent<TOwnProps, TDefaultProps>
+  >;
+
+  declare function injectIntl<OriginalProps: InjectIntlProvidedProps, DefaultProps: {}>
+  (
+    component: ComponentWithDefaultProps<DefaultProps, OriginalProps>,
+    options?: InjectIntlOptions,
+  ):
+  IntlInjectedComponentClass<$Diff<OriginalProps, InjectIntlProvidedProps>, DefaultProps>
+
+  declare function injectIntl<OriginalProps: InjectIntlProvidedProps>
+  (
+    component: React$ComponentType<OriginalProps>,
+    options?: InjectIntlOptions,
+  ):
+  IntlInjectedComponentClass<$Diff<OriginalProps, InjectIntlProvidedProps>>;
+
+  declare function formatMessage(
+    messageDescriptor: $npm$ReactIntl$MessageDescriptor,
+    values?: Object
+  ): string;
+  declare function formatHTMLMessage(
+    messageDescriptor: $npm$ReactIntl$MessageDescriptor,
+    values?: Object
+  ): string;
+  declare function formatDate(
+    value: any,
+    options?: $npm$ReactIntl$DateTimeFormatOptions & { format: string }
+  ): string;
+  declare function formatTime(
+    value: any,
+    options?: $npm$ReactIntl$DateTimeFormatOptions & { format: string }
+  ): string;
+  declare function formatRelative(
+    value: any,
+    options?: $npm$ReactIntl$RelativeFormatOptions & {
+      format: string,
+      now: any
+    }
+  ): string;
+  declare function formatNumber(
+    value: any,
+    options?: $npm$ReactIntl$NumberFormatOptions & { format: string }
+  ): string;
+  declare function formatPlural(
+    value: any,
+    options?: $npm$ReactIntl$PluralFormatOptions
+  ): $npm$ReactIntl$PluralCategoryString;
+
+  declare class FormattedMessage extends React$Component<
+    $npm$ReactIntl$MessageDescriptor & {
+      values?: Object,
+      tagName?: string,
+      children?: (...formattedMessage: Array<React$Node>) => React$Node
+    }
+  > {}
+  declare class FormattedHTMLMessage extends React$Component<
+    $npm$ReactIntl$DateTimeFormatOptions & {
+      values?: Object,
+      tagName?: string,
+      children?: (...formattedMessage: Array<React$Node>) => React$Node
+    }
+  > {}
+  declare class FormattedDate extends React$Component<
+    $npm$ReactIntl$DateTimeFormatOptions & {
+      value: $npm$ReactIntl$DateParseable,
+      format?: string,
+      children?: (formattedDate: string) => React$Node
+    }
+  > {}
+  declare class FormattedTime extends React$Component<
+    $npm$ReactIntl$DateTimeFormatOptions & {
+      value: $npm$ReactIntl$DateParseable,
+      format?: string,
+      children?: (formattedDate: string) => React$Node
+    }
+  > {}
+  declare class FormattedRelative extends React$Component<
+    $npm$ReactIntl$RelativeFormatOptions & {
+      value: $npm$ReactIntl$DateParseable,
+      format?: string,
+      updateInterval?: number,
+      initialNow?: $npm$ReactIntl$DateParseable,
+      children?: (formattedDate: string) => React$Node
+    }
+  > {}
+  declare class FormattedNumber extends React$Component<
+    $npm$ReactIntl$NumberFormatOptions & {
+      value: number | string,
+      format?: string,
+      children?: (formattedNumber: string) => React$Node
+    }
+  > {}
+  declare class FormattedPlural extends React$Component<
+    $npm$ReactIntl$PluralFormatOptions & {
+      value: number | string,
+      other: React$Node,
+      zero?: React$Node,
+      one?: React$Node,
+      two?: React$Node,
+      few?: React$Node,
+      many?: React$Node,
+      children?: (formattedPlural: React$Node) => React$Node
+    }
+  > {}
+  declare class IntlProvider extends React$Component<
+    $npm$ReactIntl$IntlProviderConfig & {
+      children?: React$Node,
+      initialNow?: $npm$ReactIntl$DateParseable
+    }
+  > {}
+  declare type IntlShape = $npm$ReactIntl$IntlShape;
+  declare type MessageDescriptor = $npm$ReactIntl$MessageDescriptor;
+}

src/components/dev/apps/ApplicationsIndex.js

@@ -1,27 +1,27 @@
 // @flow
+import type { Node } from 'react';
+import type { Location } from 'react-router';
+import type { OauthAppResponse } from 'services/api/oauth';
 import React, { Component } from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import { create as createPopup } from 'components/ui/popup/actions';
+import ContactForm from 'components/contact/ContactForm';
+import { LinkButton } from 'components/ui/form';
+import { COLOR_GREEN, COLOR_BLUE } from 'components/ui';
+import { restoreScroll } from 'components/ui/scroll/scroll';
 
 import styles from './applicationsIndex.scss';
 import messages from './ApplicationsIndex.intl.json';
 import cubeIcon from './icons/cube.svg';
 import loadingCubeIcon from './icons/loading-cube.svg';
 import toolsIcon from './icons/tools.svg';
-
 import ApplicationItem from './ApplicationItem';
 
-import { LinkButton } from 'components/ui/form';
-import { COLOR_GREEN, COLOR_BLUE } from 'components/ui';
-import { restoreScroll } from 'components/ui/scroll/scroll';
-
-import type { Node } from 'react';
-import type { OauthAppResponse } from 'services/api/oauth';
-
 type Props = {
-    location: {
-        hash: string,
-    },
+    location: Location,
     displayForGuest: bool,
     applications: Array<OauthAppResponse>,
     isLoading: bool,
@@ -39,12 +39,14 @@ class ApplicationsIndex extends Component<Props, State> {
         expandedApp: null,
     };
 
-    appsRefs = {};
+    appsRefs: {[key: string]: ?HTMLDivElement} = {};
 
     componentDidUpdate(prevProps: Props) {
         const { applications, isLoading, location } = this.props;
+
         if (isLoading !== prevProps.isLoading && applications.length) {
             const hash = location.hash.substr(1);
+
             if (hash !== '' && applications.some((app) => app.clientId === hash)) {
                 requestAnimationFrame(() => this.onTileClick(hash));
             }
@@ -56,6 +58,7 @@ class ApplicationsIndex extends Component<Props, State> {
         const { expandedApp } = this.state;
 
         let content: Node;
+
         if (displayForGuest) {
             content = (
                 <div className={styles.emptyState}>
@@ -174,6 +177,7 @@ class ApplicationsIndex extends Component<Props, State> {
 
     onTileClick = (clientId: string) => {
         const expandedApp = this.state.expandedApp === clientId ? null : clientId;
+
         this.setState({expandedApp}, () => {
             if (expandedApp !== null) {
                 // TODO: @SleepWalker: мб у тебя есть идея, как это сделать более правильно и менее дёргано?
@@ -184,15 +188,11 @@ class ApplicationsIndex extends Component<Props, State> {
 
     onContact = (event) => {
         event.preventDefault();
+
         this.props.createContactPopup();
     };
 }
 
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
-import { create as createPopup } from 'components/ui/popup/actions';
-import ContactForm from 'components/contact/ContactForm';
-
 export default withRouter(connect(null, {
     createContactPopup: () => createPopup(ContactForm),
 })(ApplicationsIndex));

src/components/ui/form/Checkbox.js

@@ -1,24 +1,19 @@
 // @flow
+import type { Color, Skin } from 'components/ui';
+import type { MessageDescriptor } from 'react-intl';
 import React from 'react';
-
 import classNames from 'classnames';
-
 import { SKIN_DARK, COLOR_GREEN } from 'components/ui';
 import { omit } from 'functions';
 
 import styles from './form.scss';
 import FormInputComponent from './FormInputComponent';
 
-import type { Color, Skin } from 'components/ui';
-import type { MessageDescriptor } from 'react-intl';
-
 export default class Checkbox extends FormInputComponent<{
     color: Color,
     skin: Skin,
     label: string | MessageDescriptor,
 }> {
-    static displayName = 'Checkbox';
-
     static defaultProps = {
         color: COLOR_GREEN,
         skin: SKIN_DARK,

src/components/ui/form/Input.js

@@ -1,8 +1,8 @@
 // @flow
+import type { Skin, Color } from 'components/ui';
+import type { MessageDescriptor } from 'react-intl';
 import React from 'react';
-
 import classNames from 'classnames';
-
 import { uniqueId, omit } from 'functions';
 import copy from 'services/copy';
 import icons from 'components/ui/icons.scss';
@@ -11,10 +11,7 @@ import { SKIN_DARK, COLOR_GREEN } from 'components/ui';
 import styles from './form.scss';
 import FormInputComponent from './FormInputComponent';
 
-import type { Skin, Color } from 'components/ui';
-import type { MessageDescriptor } from 'react-intl';
-
-let copiedStateTimeout;
+let copiedStateTimeout: ?TimeoutID;
 
 export default class Input extends FormInputComponent<{
     skin: Skin,
@@ -29,8 +26,6 @@ export default class Input extends FormInputComponent<{
 }, {
     wasCopied: bool,
 }> {
-    static displayName = 'Input';
-
     static defaultProps = {
         color: COLOR_GREEN,
         skin: SKIN_DARK,
@@ -69,6 +64,7 @@ export default class Input extends FormInputComponent<{
         props.placeholder = this.formatMessage(props.placeholder);
 
         let baseClass = styles.formRow;
+
         if (icon) {
             baseClass = styles.formIconRow;
             icon = (

src/components/ui/form/LinkButton.js

@@ -1,11 +1,11 @@
 // @flow
+import type { ElementProps } from 'react';
 import React from 'react';
-import type {ElementProps} from 'react';
 import { Link } from 'react-router-dom';
 
 import Button from './Button';
 
-export default function LinkButton(props: ElementProps<typeof Button> | ElementProps<typeof Link>) {
+export default function LinkButton(props: ElementProps<typeof Button> & ElementProps<typeof Link>) {
     const {to, ...restProps} = props;
 
     return (

src/components/ui/form/Radio.js

@@ -1,24 +1,19 @@
 // @flow
+import type { Color, Skin } from 'components/ui';
+import type { MessageDescriptor } from 'react-intl';
 import React from 'react';
-
 import classNames from 'classnames';
-
 import { SKIN_DARK, COLOR_GREEN } from 'components/ui';
 import { omit } from 'functions';
 
 import styles from './form.scss';
 import FormInputComponent from './FormInputComponent';
 
-import type { Color, Skin } from 'components/ui';
-import type { MessageDescriptor } from 'react-intl';
-
 export default class Radio extends FormInputComponent<{
     color: Color,
     skin: Skin,
     label: string | MessageDescriptor,
 }> {
-    static displayName = 'Radio';
-
     static defaultProps = {
         color: COLOR_GREEN,
         skin: SKIN_DARK,

src/components/ui/form/TextArea.js

@@ -1,25 +1,22 @@
 // @flow
+import type { Skin, Color } from 'components/ui';
+import type { MessageDescriptor } from 'react-intl';
 import React from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
-
 import classNames from 'classnames';
-
 import { uniqueId, omit } from 'functions';
 import { SKIN_DARK, COLOR_GREEN } from 'components/ui';
 
 import styles from './form.scss';
 import FormInputComponent from './FormInputComponent';
 
-import type { Skin, Color } from 'components/ui';
-import type { MessageDescriptor } from 'react-intl';
-
 type TextareaAutosizeProps = {
     onHeightChange?: (number, TextareaAutosizeProps) => void,
     useCacheForDOMMeasurements?: bool,
     minRows?: number,
     maxRows?: number,
-    inputRef?: (HTMLTextAreaElement) => void,
-} | HTMLTextAreaElement;
+    inputRef?: (?HTMLTextAreaElement) => void,
+};
 
 export default class TextArea extends FormInputComponent<{
     placeholder?: string | MessageDescriptor,
@@ -27,9 +24,7 @@ export default class TextArea extends FormInputComponent<{
     error?: string,
     skin: Skin,
     color: Color,
-} | TextareaAutosizeProps> {
-    static displayName = 'TextArea';
-
+} & TextareaAutosizeProps> {
     static defaultProps = {
         color: COLOR_GREEN,
         skin: SKIN_DARK,

src/index.scss

@@ -25,7 +25,8 @@ b {
     font-weight: $font-weight-bold;
 }
 
-a, .textLink {
+a,
+.textLink {
     color: #444;
     border-bottom: 1px dotted #444;
     text-decoration: none;

src/pages/dev/DevPage.js

@@ -1,30 +1,26 @@
 // @flow
-import React, { Component } from 'react';
+import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
+import { FooterMenu } from 'components/footerMenu';
 
 import styles from './dev.scss';
-
 import ApplicationsListPage from './ApplicationsListPage';
 import CreateNewApplicationPage from './CreateNewApplicationPage';
 import UpdateApplicationPage from './UpdateApplicationPage';
 
-import { FooterMenu } from 'components/footerMenu';
+export default function DevPage() {
+    return (
+        <div className={styles.container}>
+            <Switch>
+                <Route path="/dev/applications" exact component={ApplicationsListPage} />
+                <Route path="/dev/applications/new" exact component={CreateNewApplicationPage} />
+                <Route path="/dev/applications/:clientId" component={UpdateApplicationPage} />
+                <Redirect to="/dev/applications" />
+            </Switch>
 
-export default class DevPage extends Component<{}> {
-    render() {
-        return (
-            <div className={styles.container}>
-                <Switch>
-                    <Route path="/dev/applications" exact component={ApplicationsListPage} />
-                    <Route path="/dev/applications/new" exact component={CreateNewApplicationPage} />
-                    <Route path="/dev/applications/:clientId" component={UpdateApplicationPage} />
-                    <Redirect to="/dev/applications" />
-                </Switch>
-
-                <div className={styles.footer}>
-                    <FooterMenu />
-                </div>
+            <div className={styles.footer}>
+                <FooterMenu />
             </div>
-        );
-    }
+        </div>
+    );
 }

src/storeFactory.js

@@ -33,6 +33,7 @@ export default function storeFactory() {
     const store = createStore(reducers, {}, enhancer);
 
     // Hot reload reducers
+    // $FlowFixMe
     if (module.hot && typeof module.hot.accept === 'function') {
         module.hot.accept('reducers', () =>
             store.replaceReducer(require('reducers').default)