fix: type lint for login

Author: griffithtp

src/components/Footer/Footer.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles';
 import { goToVerdaccioWebsite } from '../../utils/windows';
 
-const renderTooltip = () => (
+const renderTooltip = (): JSX.Element => (
   <ToolTip>
     <Earth name="earth" size="md" />
     <Flags>
@@ -22,7 +22,7 @@ const ON_LABEL = 'on';
 const HEARTH_EMOJI = '♥';
 
 // @ts-ignore
-const renderRight = (version = window.VERDACCIO_VERSION) => {
+const renderRight = (version = window.VERDACCIO_VERSION): JSX.Element => {
   return (
     <Right>
       {POWERED_LABEL}
@@ -32,7 +32,7 @@ const renderRight = (version = window.VERDACCIO_VERSION) => {
   );
 };
 
-const renderLeft = () => (
+const renderLeft = (): JSX.Element => (
   <Left>
     {MADEWITH_LABEL}
     <Love>{HEARTH_EMOJI}</Love>

src/components/Icon/Icon.tsx

@@ -67,7 +67,7 @@ const Icon: React.FC<Props> = ({ className, name, size = 'sm', img = false, poin
   // @ts-ignore
   const title = capitalize(name);
   return img ? (
-    <ImgWrapper className={className} name={name} pointer={pointer} size={size} title={title} {...props}>
+    <ImgWrapper className={className} pointer={pointer} size={size} title={title} {...props}>
       <Img alt={title} src={Icons[name]} />
     </ImgWrapper>
   ) : (

src/components/Icon/styles.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'react-emotion';
 
-const getSize = (size?: 'md' | 'sm') => {
+const getSize = (size: 'md' | 'sm' | string): string => {
   switch (size) {
     case 'md':
       return `
@@ -15,7 +15,7 @@ const getSize = (size?: 'md' | 'sm') => {
   }
 };
 
-const commonStyle = ({ size = 'sm', pointer, modifiers }: any) => css`
+const commonStyle = ({ size = 'sm' as 'md' | 'sm' | string, pointer, modifiers = null }): string => css`
   && {
     display: inline-block;
     cursor: ${pointer ? 'pointer' : 'default'};

src/components/Install/Install.tsx

@@ -3,7 +3,7 @@ import ListItemText from '@material-ui/core/ListItemText';
 import React, { Component } from 'react';
 
 // @ts-ignore
-import { DetailContextConsumer } from '../../pages/version/Version';
+import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/version/Version';
 import CopyToClipBoard from '../CopyToClipBoard';
 
 // logos of package managers
@@ -14,17 +14,17 @@ import yarn from './img/yarn.svg';
 import { Heading, InstallItem, PackageMangerAvatar } from './styles';
 
 class Install extends Component {
-  public render() {
+  public render(): JSX.Element {
     return (
       <DetailContextConsumer>
-        {(context: any) => {
+        {(context: Partial<VersionPageConsumerProps>) => {
           return context && context.packageName && this.renderCopyCLI(context);
         }}
       </DetailContextConsumer>
     );
   }
 
-  public renderCopyCLI = ({ packageName }: { packageName: string }) => {
+  public renderCopyCLI = ({ packageName = '' }: Partial<VersionPageConsumerProps>) => {
     return (
       <>
         <List subheader={<Heading variant={'subheading'}>{'Installation'}</Heading>}>{this.renderListItems(packageName)}</List>

src/components/Login/Login.test.tsx

@@ -89,15 +89,15 @@ describe('<LoginModal />', () => {
     const instance = wrapper.instance();
 
     instance.submitCredentials = jest.fn();
-    const { validateCredentials, setCredentials, submitCredentials } = instance;
+    const { handleValidateCredentials, setCredentials, submitCredentials } = instance;
 
     expect(setCredentials('username', eventUsername)).toBeUndefined();
     expect(wrapper.state('form').username.value).toEqual('xyz');
 
     expect(setCredentials('password', eventPassword)).toBeUndefined();
     expect(wrapper.state('form').password.value).toEqual('1234');
 
-    validateCredentials(event);
+    handleValidateCredentials(event);
     expect(event.preventDefault).toHaveBeenCalled();
     expect(wrapper.state('form').username.pristine).toEqual(false);
     expect(wrapper.state('form').password.pristine).toEqual(false);

src/components/Login/Login.tsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Dialog from '@material-ui/core/Dialog';
@@ -15,21 +14,34 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 // @ts-ignore
 import classes from './login.scss';
 
-export default class LoginModal extends Component<any, any> {
-  static propTypes = {
-    visibility: PropTypes.bool,
-    error: PropTypes.object,
-    onCancel: PropTypes.func,
-    onSubmit: PropTypes.func,
-  };
+interface FormFields {
+  required: boolean;
+  pristine: boolean;
+  helperText: string;
+  value: string;
+}
+interface FormError {
+  type: string;
+  title: string;
+  description: string;
+}
+
+interface LoginModalProps {
+  visibility: boolean;
+  error: Partial<FormError>;
+  onCancel: () => void;
+  onSubmit: (username: string, password: string) => void;
+}
 
-  static defaultProps = {
-    error: {},
-    onCancel: () => {},
-    onSubmit: () => {},
-    visibility: true,
+interface LoginModalState {
+  form: {
+    username: Partial<FormFields>;
+    password: Partial<FormFields>;
   };
+  error: FormError;
+}
 
+export default class LoginModal extends Component<Partial<LoginModalProps>, LoginModalState> {
   constructor(props) {
     super(props);
     this.state = {
@@ -51,11 +63,28 @@ export default class LoginModal extends Component<any, any> {
     };
   }
 
+  public render(): JSX.Element {
+    const { visibility, onCancel, error } = this.props as LoginModalProps;
+    return (
+      <Dialog fullWidth={true} id={'login--form-container'} maxWidth={'xs'} onClose={onCancel} open={visibility}>
+        <form noValidate={true} onSubmit={this.handleValidateCredentials}>
+          <DialogTitle>{'Login'}</DialogTitle>
+          <DialogContent>
+            {this.renderLoginError(error)}
+            {this.renderNameField()}
+            {this.renderPasswordField()}
+          </DialogContent>
+          {this.renderActions()}
+        </form>
+      </Dialog>
+    );
+  }
+
   /**
    * set login modal's username and password to current state
    * Required to login
    */
-  setCredentials = (name, e) => {
+  public setCredentials = (name, e) => {
     const { form } = this.state;
     this.setState({
       form: {
@@ -69,15 +98,15 @@ export default class LoginModal extends Component<any, any> {
     });
   };
 
-  setUsername = event => {
+  public handleUsernameChange = event => {
     this.setCredentials('username', event);
   };
 
-  setPassword = event => {
+  public handlePasswordChange = event => {
     this.setCredentials('password', event);
   };
 
-  validateCredentials = event => {
+  public handleValidateCredentials = event => {
     const { form } = this.state;
     // prevents default submit behavior
     event.preventDefault();
@@ -89,7 +118,7 @@ export default class LoginModal extends Component<any, any> {
             ...acc,
             ...{ [key]: { ...form[key], pristine: false } },
           }),
-          {}
+          { username: {}, password: {} }
         ),
       },
       () => {
@@ -100,10 +129,14 @@ export default class LoginModal extends Component<any, any> {
     );
   };
 
-  submitCredentials = async () => {
+  public submitCredentials = async () => {
     const { form } = this.state;
+    const username = (form.username && form.username.value) || '';
+    const password = (form.password && form.password.value) || '';
     const { onSubmit } = this.props;
-    await onSubmit(form.username.value, form.password.value);
+    if (onSubmit) {
+      await onSubmit(username, password);
+    }
     // let's wait for API response and then set
     // username and password filed to empty state
     this.setState({
@@ -112,12 +145,12 @@ export default class LoginModal extends Component<any, any> {
           ...acc,
           ...{ [key]: { ...form[key], value: '', pristine: true } },
         }),
-        {}
+        { username: {}, password: {} }
       ),
     });
   };
 
-  renderErrorMessage(title, description) {
+  private renderErrorMessage(title, description): JSX.Element {
     return (
       <span>
         <div>
@@ -128,7 +161,7 @@ export default class LoginModal extends Component<any, any> {
     );
   }
 
-  renderMessage(title, description) {
+  private renderMessage(title, description): JSX.Element {
     return (
       <div className={classes.loginErrorMsg} id={'client-snackbar'}>
         <ErrorIcon className={classes.loginIcon} />
@@ -137,37 +170,37 @@ export default class LoginModal extends Component<any, any> {
     );
   }
 
-  renderLoginError({ type, title, description }) {
+  private renderLoginError({ type, title, description }: Partial<FormError>): JSX.Element | false {
     return type === 'error' && <SnackbarContent className={classes.loginError} message={this.renderMessage(title, description)} />;
   }
 
-  renderNameField = () => {
+  private renderNameField = () => {
     const {
       form: { username },
     } = this.state;
     return (
       <FormControl error={!username.value && !username.pristine} fullWidth={true} required={username.required}>
         <InputLabel htmlFor={'username'}>{'Username'}</InputLabel>
-        <Input id={'login--form-username'} onChange={this.setUsername} placeholder={'Your username'} value={username.value} />
+        <Input id={'login--form-username'} onChange={this.handleUsernameChange} placeholder={'Your username'} value={username.value} />
         {!username.value && !username.pristine && <FormHelperText id={'username-error'}>{username.helperText}</FormHelperText>}
       </FormControl>
     );
   };
 
-  renderPasswordField = () => {
+  private renderPasswordField = () => {
     const {
       form: { password },
     } = this.state;
     return (
       <FormControl error={!password.value && !password.pristine} fullWidth={true} required={password.required} style={{ marginTop: '8px' }}>
         <InputLabel htmlFor={'password'}>{'Password'}</InputLabel>
-        <Input id={'login--form-password'} onChange={this.setPassword} placeholder={'Your strong password'} type={'password'} value={password.value} />
+        <Input id={'login--form-password'} onChange={this.handlePasswordChange} placeholder={'Your strong password'} type={'password'} value={password.value} />
         {!password.value && !password.pristine && <FormHelperText id={'password-error'}>{password.helperText}</FormHelperText>}
       </FormControl>
     );
   };
 
-  renderActions = () => {
+  private renderActions = () => {
     const {
       form: { username, password },
     } = this.state;
@@ -183,21 +216,4 @@ export default class LoginModal extends Component<any, any> {
       </DialogActions>
     );
   };
-
-  render() {
-    const { visibility, onCancel, error } = this.props;
-    return (
-      <Dialog fullWidth={true} id={'login--form-container'} maxWidth={'xs'} onClose={onCancel} open={visibility}>
-        <form noValidate={true} onSubmit={this.validateCredentials}>
-          <DialogTitle>{'Login'}</DialogTitle>
-          <DialogContent>
-            {this.renderLoginError(error)}
-            {this.renderNameField()}
-            {this.renderPasswordField()}
-          </DialogContent>
-          {this.renderActions()}
-        </form>
-      </Dialog>
-    );
-  }
 }

src/components/Spinner/styles.ts

@@ -1,5 +1,5 @@
 import CircularProgress from '@material-ui/core/CircularProgress';
-import styled, { css, Themed } from 'react-emotion';
+import styled, { css } from 'react-emotion';
 
 import colors from '../../utils/styles/colors';
 
@@ -8,7 +8,7 @@ export const Wrapper = styled('div')`
     display: flex;
     align-items: center;
     justify-content: center;
-    ${(props): Themed<any, object> =>
+    ${props =>
       // @ts-ignore
       props.centered &&
       css`