use reflow to migrate from flow to typescript

scm-ui/ui-webapp/src/components/InfoBox.tsx

@@ -1,17 +1,16 @@
-//@flow
-import * as React from "react";
-import { translate } from "react-i18next";
-import classNames from "classnames";
-import styled from "styled-components";
-import type { InfoItem } from "./InfoItem";
-import { Icon } from "@scm-manager/ui-components";
+import * as React from 'react';
+import { translate } from 'react-i18next';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { InfoItem } from './InfoItem';
+import { Icon } from '@scm-manager/ui-components';
 
 type Props = {
-  type: "plugin" | "feature",
-  item: InfoItem,
+  type: 'plugin' | 'feature';
+  item: InfoItem;
 
   // context props
-  t: string => string
+  t: (p: string) => string;
 };
 
 const BottomMarginA = styled.a`
@@ -41,11 +40,11 @@ const ContentWrapper = styled.div`
 class InfoBox extends React.Component<Props> {
   renderBody = () => {
     const { item, t } = this.props;
-    const title = item ? item.title : t("login.loading");
-    const summary = item ? item.summary : t("login.loading");
+    const title = item ? item.title : t('login.loading');
+    const summary = item ? item.summary : t('login.loading');
 
     return (
-      <ContentWrapper className={classNames("media-content", "content")}>
+      <ContentWrapper className={classNames('media-content', 'content')}>
         <h4 className="has-text-link">{title}</h4>
         <p>{summary}</p>
       </ContentWrapper>
@@ -54,23 +53,23 @@ class InfoBox extends React.Component<Props> {
 
   render() {
     const { item, type, t } = this.props;
-    const icon = type === "plugin" ? "puzzle-piece" : "star";
+    const icon = type === 'plugin' ? 'puzzle-piece' : 'star';
     return (
       <BottomMarginA href={item._links.self.href}>
         <div className="box media">
           <figure className="media-left">
             <FixedSizedIconWrapper
               className={classNames(
-                "image",
-                "box",
-                "has-text-weight-bold",
-                "has-text-white",
-                "has-background-info"
+                'image',
+                'box',
+                'has-text-weight-bold',
+                'has-text-white',
+                'has-background-info',
               )}
             >
               <LightBlueIcon className="fa-2x" name={icon} color="inherit" />
-              <div className="is-size-4">{t("login." + type)}</div>
-              <div className="is-size-4">{t("login.tip")}</div>
+              <div className="is-size-4">{t('login.' + type)}</div>
+              <div className="is-size-4">{t('login.tip')}</div>
             </FixedSizedIconWrapper>
           </figure>
           {this.renderBody()}
@@ -80,4 +79,4 @@ class InfoBox extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(InfoBox);
+export default translate('commons')(InfoBox);

scm-ui/ui-webapp/src/components/InfoItem.js

@@ -1,8 +0,0 @@
-// @flow
-import type { Link } from "@scm-manager/ui-types";
-
-export type InfoItem = {
-  title: string,
-  summary: string,
-  _links: {[string]: Link}
-};

scm-ui/ui-webapp/src/components/InfoItem.ts

@@ -0,0 +1,9 @@
+import { Link } from '@scm-manager/ui-types';
+
+export type InfoItem = {
+  title: string;
+  summary: string;
+  _links: {
+    [key: string]: Link;
+  };
+};

scm-ui/ui-webapp/src/components/LoginForm.tsx

@@ -1,27 +1,26 @@
-//@flow
-import React from "react";
-import { translate } from "react-i18next";
-import styled from "styled-components";
+import React from 'react';
+import { translate } from 'react-i18next';
+import styled from 'styled-components';
 import {
   Image,
   ErrorNotification,
   InputField,
   SubmitButton,
-  UnauthorizedError
-} from "@scm-manager/ui-components";
+  UnauthorizedError,
+} from '@scm-manager/ui-components';
 
 type Props = {
-  error?: Error,
-  loading: boolean,
-  loginHandler: (username: string, password: string) => void,
+  error?: Error;
+  loading: boolean;
+  loginHandler: (username: string, password: string) => void;
 
   // context props
-  t: string => string
+  t: (p: string) => string;
 };
 
 type State = {
-  username: string,
-  password: string
+  username: string;
+  password: string;
 };
 
 const TopMarginBox = styled.div`
@@ -45,7 +44,10 @@ const AvatarImage = styled(Image)`
 class LoginForm extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
-    this.state = { username: "", password: "" };
+    this.state = {
+      username: '',
+      password: '',
+    };
   }
 
   handleSubmit = (event: Event) => {
@@ -56,11 +58,15 @@ class LoginForm extends React.Component<Props, State> {
   };
 
   handleUsernameChange = (value: string) => {
-    this.setState({ username: value });
+    this.setState({
+      username: value,
+    });
   };
 
   handlePasswordChange = (value: string) => {
-    this.setState({ password: value });
+    this.setState({
+      password: value,
+    });
   };
 
   isValid() {
@@ -70,7 +76,7 @@ class LoginForm extends React.Component<Props, State> {
   areCredentialsInvalid() {
     const { t, error } = this.props;
     if (error instanceof UnauthorizedError) {
-      return new Error(t("errorNotification.wrongLoginCredentials"));
+      return new Error(t('errorNotification.wrongLoginCredentials'));
     } else {
       return error;
     }
@@ -80,26 +86,26 @@ class LoginForm extends React.Component<Props, State> {
     const { loading, t } = this.props;
     return (
       <div className="column is-4 box has-text-centered has-background-white-ter">
-        <h3 className="title">{t("login.title")}</h3>
-        <p className="subtitle">{t("login.subtitle")}</p>
+        <h3 className="title">{t('login.title')}</h3>
+        <p className="subtitle">{t('login.subtitle')}</p>
         <TopMarginBox className="box">
           <AvatarWrapper>
-            <AvatarImage src="/images/blib.jpg" alt={t("login.logo-alt")} />
+            <AvatarImage src="/images/blib.jpg" alt={t('login.logo-alt')} />
           </AvatarWrapper>
           <ErrorNotification error={this.areCredentialsInvalid()} />
           <form onSubmit={this.handleSubmit}>
             <InputField
-              placeholder={t("login.username-placeholder")}
+              placeholder={t('login.username-placeholder')}
               autofocus={true}
               onChange={this.handleUsernameChange}
             />
             <InputField
-              placeholder={t("login.password-placeholder")}
+              placeholder={t('login.password-placeholder')}
               type="password"
               onChange={this.handlePasswordChange}
             />
             <SubmitButton
-              label={t("login.submit")}
+              label={t('login.submit')}
               fullWidth={true}
               loading={loading}
             />
@@ -110,4 +116,4 @@ class LoginForm extends React.Component<Props, State> {
   }
 }
 
-export default translate("commons")(LoginForm);
+export default translate('commons')(LoginForm);

scm-ui/ui-webapp/src/components/LoginInfo.tsx

@@ -1,33 +1,31 @@
-//@flow
-import React from "react";
-import InfoBox from "./InfoBox";
-import type { InfoItem } from "./InfoItem";
-import LoginForm from "./LoginForm";
-import { Loading } from "@scm-manager/ui-components";
+import React from 'react';
+import InfoBox from './InfoBox';
+import { InfoItem } from './InfoItem';
+import LoginForm from './LoginForm';
+import { Loading } from '@scm-manager/ui-components';
 
 type Props = {
-  loginInfoLink?: string,
-  loading?: boolean,
-  error?: Error,
-  loginHandler: (username: string, password: string) => void,
+  loginInfoLink?: string;
+  loading?: boolean;
+  error?: Error;
+  loginHandler: (username: string, password: string) => void;
 };
 
 type LoginInfoResponse = {
-  plugin?: InfoItem,
-  feature?: InfoItem
+  plugin?: InfoItem;
+  feature?: InfoItem;
 };
 
 type State = {
-  info?: LoginInfoResponse,
-  loading?: boolean,
+  info?: LoginInfoResponse;
+  loading?: boolean;
 };
 
 class LoginInfo extends React.Component<Props, State> {
-
   constructor(props: Props) {
     super(props);
     this.state = {
-      loading: !!props.loginInfoLink
+      loading: !!props.loginInfoLink,
     };
   }
 
@@ -37,7 +35,7 @@ class LoginInfo extends React.Component<Props, State> {
       .then(info => {
         this.setState({
           info,
-          loading: false
+          loading: false,
         });
       });
   };
@@ -45,7 +43,7 @@ class LoginInfo extends React.Component<Props, State> {
   timeout = (ms: number, promise: Promise<any>) => {
     return new Promise<LoginInfoResponse>((resolve, reject) => {
       setTimeout(() => {
-        reject(new Error("timeout during fetch of login info"));
+        reject(new Error('timeout during fetch of login info'));
       }, ms);
       promise.then(resolve, reject);
     });
@@ -56,12 +54,11 @@ class LoginInfo extends React.Component<Props, State> {
     if (!loginInfoLink) {
       return;
     }
-    this.timeout(1000, this.fetchLoginInfo(loginInfoLink))
-      .catch(() => {
-        this.setState({
-          loading: false
-        });
+    this.timeout(1000, this.fetchLoginInfo(loginInfoLink)).catch(() => {
+      this.setState({
+        loading: false,
       });
+    });
   }
 
   createInfoPanel = (info: LoginInfoResponse) => (
@@ -74,7 +71,7 @@ class LoginInfo extends React.Component<Props, State> {
   render() {
     const { info, loading } = this.state;
     if (loading) {
-      return <Loading/>;
+      return <Loading />;
     }
 
     let infoPanel;
@@ -89,9 +86,6 @@ class LoginInfo extends React.Component<Props, State> {
       </>
     );
   }
-
 }
 
 export default LoginInfo;
-
-