Transform welcome component tree to TS

src/components/auth/Welcome.jsx → src/components/auth/Welcome.tsx

@@ -1,14 +1,14 @@
-/* eslint jsx-a11y/anchor-is-valid: 0 */
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { Component, ReactElement } from 'react';
+import { observer, inject } from 'mobx-react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { noop } from 'lodash';
 import serverlessLogin from '../../helpers/serverless-helpers';
 import shuffleArray from '../../helpers/array-helpers';
 import { serverName } from '../../api/apiBase';
-
 import Link from '../ui/Link';
 import { H1 } from '../ui/headline';
+import { StoresProps } from '../../@types/ferdium-components.types';
+import RecipePreview from '../../models/RecipePreview';
 
 const messages = defineMessages({
   signupButton: {
@@ -34,24 +34,28 @@ const messages = defineMessages({
   },
 });
 
-class Welcome extends Component {
-  static propTypes = {
-    loginRoute: PropTypes.string.isRequired,
-    signupRoute: PropTypes.string.isRequired,
-    changeServerRoute: PropTypes.string.isRequired,
-    recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
-    actions: PropTypes.object.isRequired,
-  };
+interface IProps extends Partial<StoresProps>, WrappedComponentProps {
+  loginRoute: string;
+  signupRoute: string;
+  changeServerRoute: string;
+  recipes: RecipePreview[];
+}
 
-  useLocalServer() {
+@inject('actions')
+@observer
+class Welcome extends Component<IProps> {
+  constructor(props: IProps) {
+    super(props);
+  }
+
+  useLocalServer(): void {
     serverlessLogin(this.props.actions);
   }
 
-  render() {
-    const { intl } = this.props;
-    const { loginRoute, signupRoute, changeServerRoute } = this.props;
+  render(): ReactElement {
+    const { loginRoute, signupRoute, changeServerRoute, intl } = this.props;
     let { recipes } = this.props;
-    recipes = shuffleArray(recipes);
+    recipes = shuffleArray<RecipePreview>(recipes);
     recipes.length = 8 * 2;
 
     let serverNameParse = serverName();
@@ -87,17 +91,22 @@ class Welcome extends Component {
               <span>{intl.formatMessage(messages.changeServer)}</span>
             </Link>
           </div>
-          <br />
-          <hr />
-          <br />
-          <a className="button" onClick={this.useLocalServer.bind(this)}>
+          <hr
+            className="settings__hr-sections"
+            style={{ marginTop: 24, marginBottom: 24, borderStyle: 'solid' }}
+          />
+          <button
+            className="button"
+            onClick={this.useLocalServer.bind(this)}
+            onKeyDown={noop}
+          >
             {intl.formatMessage(messages.serverless)}
-          </a>
+          </button>
         </div>
         <div className="welcome__featured-services">
           {recipes.map(recipe => (
             <div key={recipe.id} className="welcome__featured-service">
-              <img key={recipe.id} src={recipe.icons.svg} alt="" />
+              <img key={recipe.id} src={recipe.icons?.svg} alt="" />
             </div>
           ))}
         </div>
@@ -106,4 +115,4 @@ class Welcome extends Component {
   }
 }
 
-export default injectIntl(inject('actions')(observer(Welcome)));
+export default injectIntl(Welcome);

src/components/ui/Link.tsx

@@ -0,0 +1,73 @@
+import { Component, CSSProperties, ReactNode, MouseEvent } from 'react';
+import { inject, observer } from 'mobx-react';
+import classnames from 'classnames';
+import matchRoute from '../../helpers/routing-helpers';
+import { openExternalUrl } from '../../helpers/url-helpers';
+import { StoresProps } from '../../@types/ferdium-components.types';
+
+interface IProps extends Partial<StoresProps> {
+  children: ReactNode;
+  to: string;
+  className?: string;
+  activeClassName?: string;
+  strictFilter?: boolean;
+  target?: string;
+  style?: CSSProperties;
+  disabled?: boolean;
+}
+
+// TODO: create container component for this component
+@inject('stores')
+@observer
+class Link extends Component<IProps> {
+  constructor(props: IProps) {
+    super(props);
+  }
+
+  onClick(e: MouseEvent<HTMLAnchorElement>): void {
+    const { disabled = false, target = '', to } = this.props;
+    if (disabled) {
+      e.preventDefault();
+    } else if (target === '_blank') {
+      e.preventDefault();
+      openExternalUrl(to, true);
+    }
+    // Note: if neither of the above, then let the other onClick handlers process it
+  }
+
+  render() {
+    const {
+      children,
+      stores,
+      to,
+      className = '',
+      activeClassName = '',
+      strictFilter = false,
+      disabled = false,
+      style = {},
+    } = this.props;
+    const { router } = stores!;
+
+    const filter = strictFilter ? `${to}` : `${to}(*action)`;
+    const match = matchRoute(filter, router.location.pathname);
+
+    const linkClasses = classnames({
+      [`${className}`]: true,
+      [`${activeClassName}`]: match,
+      'is-disabled': disabled,
+    });
+
+    return (
+      <a
+        href={router.history.createHref(to)}
+        className={linkClasses}
+        style={style}
+        onClick={e => this.onClick(e)}
+      >
+        {children}
+      </a>
+    );
+  }
+}
+
+export default Link;

src/components/ui/button/index.tsx

@@ -1,10 +1,10 @@
 import Icon from '@mdi/react';
 import classnames from 'classnames';
 import { Property } from 'csstype';
+import { noop } from 'lodash';
 import { Component, MouseEvent } from 'react';
 import withStyles, { WithStylesProps } from 'react-jss';
 import Loader from 'react-loader';
-
 import { Theme } from '../../../themes';
 import { IFormField } from '../typings/generic';
 
@@ -16,24 +16,6 @@ type ButtonType =
   | 'warning'
   | 'inverted';
 
-interface IProps extends IFormField, WithStylesProps<typeof styles> {
-  className?: string;
-  label?: string;
-  disabled?: boolean;
-  id?: string;
-  type?: 'button' | 'reset' | 'submit' | undefined;
-  onClick: (
-    event: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>,
-  ) => void;
-  buttonType?: ButtonType;
-  loaded?: boolean;
-  busy?: boolean;
-  icon?: string;
-  href?: string;
-  target?: string;
-  htmlForm?: string;
-}
-
 let buttonTransition: string = 'none';
 let loaderContainerTransition: string = 'none';
 
@@ -148,38 +130,38 @@ const styles = (theme: Theme) => ({
   },
 });
 
-class ButtonComponent extends Component<IProps> {
-  customDefaultProps: {
-    disabled: boolean;
-    type: 'button' | 'reset' | 'submit' | undefined;
-    onClick: (
-      event: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>,
-    ) => void;
-    buttonType: ButtonType;
-    busy: boolean;
-  } = {
-    type: 'button',
-    disabled: false,
-    onClick: () => null,
-    buttonType: 'primary' as ButtonType,
-    busy: false,
-  };
+interface IProps extends IFormField, WithStylesProps<typeof styles> {
+  className?: string;
+  label?: string;
+  disabled?: boolean;
+  id?: string;
+  type?: 'button' | 'reset' | 'submit' | undefined;
+  onClick: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  buttonType?: ButtonType;
+  loaded?: boolean;
+  busy?: boolean;
+  icon?: string;
+  href?: string;
+  target?: string;
+  htmlForm?: string;
+}
 
-  state = {
-    busy: false,
-  };
+interface IState {
+  busy: boolean;
+}
 
+class ButtonComponent extends Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
 
     this.state = {
-      busy: props.busy || false,
+      busy: this.props.busy || false,
     };
   }
 
-  static getDerivedStateFromProps(nextProps: IProps) {
+  static getDerivedStateFromProps(nextProps: IProps): IState {
     return {
-      busy: nextProps.busy,
+      busy: nextProps.busy || false,
     };
   }
 
@@ -188,27 +170,29 @@ class ButtonComponent extends Component<IProps> {
       classes,
       className,
       // theme,
-      disabled,
       id,
       label,
-      type,
-      onClick,
-      buttonType,
       loaded,
       icon,
       href,
       target,
       htmlForm,
-    } = { ...this.customDefaultProps, ...this.props };
+      type = 'button',
+      disabled = false,
+      onClick = noop,
+      buttonType = 'primary' as ButtonType,
+    } = this.props;
 
     const { busy } = this.state;
     let showLoader = false;
+
     if (loaded) {
       showLoader = !loaded;
       console.warn(
         'Ferdium Button prop `loaded` will be deprecated in the future. Please use `busy` instead',
       );
     }
+
     if (busy) {
       showLoader = busy;
     }