From e0642a9d0d69ea1276e30ca442cfbd2d3f1a60fd Mon Sep 17 00:00:00 2001
From: Thomas Klein <tmkn@users.noreply.github.com>
Date: Thu, 10 Oct 2019 22:20:05 +0200
Subject: [PATCH] fix: improved typing (#174)

---
 package.json                                       |  1 +
 src/App/App.test.tsx                               | 14 +++++++-------
 src/App/App.tsx                                    |  8 ++++----
 src/App/AppError.tsx                               |  8 ++++----
 src/components/AvatarTooltip/AvatarTooltip.tsx     |  2 +-
 .../CopyToClipBoard/CopyToClipBoard.test.tsx       |  4 ++--
 src/components/CopyToClipBoard/CopyToClipBoard.tsx |  2 +-
 src/components/Engines/Engines.tsx                 |  2 +-
 src/components/Footer/Footer.test.tsx              |  4 ++--
 src/components/Login/Login.tsx                     |  4 ++--
 src/index.tsx                                      |  2 +-
 src/pages/Version/Version.tsx                      |  2 +-
 src/utils/calls.ts                                 |  2 +-
 src/utils/package.ts                               |  4 ++--
 src/utils/url.ts                                   |  2 +-
 tsconfig.strict.json                               |  6 ++++++
 16 files changed, 37 insertions(+), 30 deletions(-)
 create mode 100644 tsconfig.strict.json

diff --git a/package.json b/package.json
index 5bd151f..0bb6ec8 100644
--- a/package.json
+++ b/package.json
@@ -151,6 +151,7 @@
   "scripts": {
     "type-check": "tsc --noEmit --pretty",
     "type-check:watch": "npm run type-check -- --watch",
+    "type-check-strict:watch": "tsc --project ./tsconfig.strict.json --noEmit --pretty --watch",
     "release": "standard-version -a",
     "test:clean": "npx jest --clearCache",
     "test:acceptance": "codeceptjs run --steps",
diff --git a/src/App/App.test.tsx b/src/App/App.test.tsx
index 3050589..f197969 100644
--- a/src/App/App.test.tsx
+++ b/src/App/App.test.tsx
@@ -1,27 +1,27 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 
 import storage from '../utils/storage';
 import { generateTokenWithTimeRange } from '../../jest/unit/components/__mocks__/token';
 
-import App from './App';
+import App, { AppStateInterface } from './App';
 
 jest.mock('../utils/storage', () => {
   class LocalStorageMock {
-    private store: object;
+    private store: Record<string, string>;
     public constructor() {
       this.store = {};
     }
     public clear(): void {
       this.store = {};
     }
-    public getItem(key): unknown {
+    public getItem(key: string): unknown {
       return this.store[key] || null;
     }
-    public setItem(key, value): void {
+    public setItem(key: string, value: string): void {
       this.store[key] = value.toString();
     }
-    public removeItem(key): void {
+    public removeItem(key: string): void {
       delete this.store[key];
     }
   }
@@ -33,7 +33,7 @@ jest.mock('../utils/api', () => ({
 }));
 
 describe('App', () => {
-  let wrapper;
+  let wrapper: ReactWrapper<{}, AppStateInterface, App>;
 
   beforeEach(() => {
     wrapper = mount(<App />);
diff --git a/src/App/App.tsx b/src/App/App.tsx
index 10d2ebb..d9f82fc 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -48,7 +48,7 @@ export default class App extends Component<{}, AppStateInterface> {
   }
 
   // eslint-disable-next-line no-unused-vars
-  public componentDidUpdate(_, prevState): void {
+  public componentDidUpdate(_: AppStateInterface, prevState: AppStateInterface): void {
     const { isUserLoggedIn } = this.state;
     if (prevState.isUserLoggedIn !== isUserLoggedIn) {
       this.loadOnHandler();
@@ -99,7 +99,7 @@ export default class App extends Component<{}, AppStateInterface> {
     }
   };
 
-  public setLoading = isLoading =>
+  public setLoading = (isLoading: boolean) =>
     this.setState({
       isLoading,
     });
@@ -118,7 +118,7 @@ export default class App extends Component<{}, AppStateInterface> {
    * handles login
    * Required by: <Header />
    */
-  public handleDoLogin = async (usernameValue, passwordValue) => {
+  public handleDoLogin = async (usernameValue: string, passwordValue: string) => {
     const { username, token, error } = await makeLogin(usernameValue, passwordValue);
 
     if (username && token) {
@@ -135,7 +135,7 @@ export default class App extends Component<{}, AppStateInterface> {
     }
   };
 
-  public setLoggedUser = username => {
+  public setLoggedUser = (username: string) => {
     this.setState({
       user: {
         username,
diff --git a/src/App/AppError.tsx b/src/App/AppError.tsx
index 5042e40..7d2175c 100644
--- a/src/App/AppError.tsx
+++ b/src/App/AppError.tsx
@@ -6,17 +6,17 @@ export interface ErrorProps {
 
 export interface ErrorAppState {
   hasError: boolean;
-  error: any;
-  info: any;
+  error: Error | null;
+  info: object | null;
 }
 
 export default class ErrorBoundary extends Component<ErrorProps, ErrorAppState> {
-  constructor(props) {
+  constructor(props: ErrorProps) {
     super(props);
     this.state = { hasError: false, error: null, info: null };
   }
 
-  public componentDidCatch(error, info) {
+  public componentDidCatch(error: Error, info: object) {
     this.setState({ hasError: true, error, info });
   }
 
diff --git a/src/components/AvatarTooltip/AvatarTooltip.tsx b/src/components/AvatarTooltip/AvatarTooltip.tsx
index 2f2f5fa..2e04058 100644
--- a/src/components/AvatarTooltip/AvatarTooltip.tsx
+++ b/src/components/AvatarTooltip/AvatarTooltip.tsx
@@ -14,7 +14,7 @@ export interface AvatarDeveloper {
 
 const AvatarTooltip: FC<AvatarDeveloper> = ({ name, packageName, version, avatar, email }) => {
   const avatarComponent = <Avatar aria-label={name} src={avatar} />;
-  function renderLinkForMail(email, avatarComponent, packageName, version): JSX.Element {
+  function renderLinkForMail(email: string, avatarComponent: JSX.Element, packageName: string, version: string): JSX.Element {
     if (!email || isEmail(email) === false) {
       return avatarComponent;
     }
diff --git a/src/components/CopyToClipBoard/CopyToClipBoard.test.tsx b/src/components/CopyToClipBoard/CopyToClipBoard.test.tsx
index a6a3bb4..fe530dd 100644
--- a/src/components/CopyToClipBoard/CopyToClipBoard.test.tsx
+++ b/src/components/CopyToClipBoard/CopyToClipBoard.test.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 
 import CopyToClipBoard from './CopyToClipBoard';
 import { CopyIcon } from './styles';
 
 describe('<CopyToClipBoard /> component', () => {
-  let wrapper;
+  let wrapper: ReactWrapper;
 
   beforeEach(() => {
     wrapper = mount(<CopyToClipBoard text={'copy text'} />);
diff --git a/src/components/CopyToClipBoard/CopyToClipBoard.tsx b/src/components/CopyToClipBoard/CopyToClipBoard.tsx
index 3e426d8..cf8b95a 100644
--- a/src/components/CopyToClipBoard/CopyToClipBoard.tsx
+++ b/src/components/CopyToClipBoard/CopyToClipBoard.tsx
@@ -12,7 +12,7 @@ interface Props {
   children?: React.ReactNode;
 }
 
-const renderText = (text, children): JSX.Element => {
+const renderText = (text: string, children: React.ReactNode): JSX.Element => {
   if (children) {
     return <ClipBoardCopyText>{children}</ClipBoardCopyText>;
   }
diff --git a/src/components/Engines/Engines.tsx b/src/components/Engines/Engines.tsx
index af5f995..885bf1e 100644
--- a/src/components/Engines/Engines.tsx
+++ b/src/components/Engines/Engines.tsx
@@ -58,7 +58,7 @@ class Engine extends Component {
     return <Grid container={true}>{items}</Grid>;
   };
 
-  private renderListItems = (heading, text) => {
+  private renderListItems = (heading: string, text: string) => {
     return (
       <List subheader={<Heading variant={'subtitle1'}>{text.split('-').join(' ')}</Heading>}>
         <EngineListItem button={true}>
diff --git a/src/components/Footer/Footer.test.tsx b/src/components/Footer/Footer.test.tsx
index d8f9240..bbf01c6 100644
--- a/src/components/Footer/Footer.test.tsx
+++ b/src/components/Footer/Footer.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 
 import Footer from './Footer';
 
@@ -8,7 +8,7 @@ jest.mock('../../../package.json', () => ({
 }));
 
 describe('<Footer /> component', () => {
-  let wrapper;
+  let wrapper: ReactWrapper;
   beforeEach(() => {
     window.VERDACCIO_VERSION = 'v.1.0.0';
     wrapper = mount(<Footer />);
diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
index f76e0a0..13274f3 100644
--- a/src/components/Login/Login.tsx
+++ b/src/components/Login/Login.tsx
@@ -151,7 +151,7 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
     });
   };
 
-  public renderErrorMessage(title, description): JSX.Element {
+  public renderErrorMessage(title: string, description: string): JSX.Element {
     return (
       <span>
         <div>
@@ -162,7 +162,7 @@ export default class LoginModal extends Component<Partial<LoginModalProps>, Logi
     );
   }
 
-  public renderMessage(title, description): JSX.Element {
+  public renderMessage(title: string, description: string): JSX.Element {
     return (
       <div className={classes.loginErrorMsg} id={'client-snackbar'}>
         <ErrorIcon className={classes.loginIcon} />
diff --git a/src/index.tsx b/src/index.tsx
index 1db2731..50ffa39 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -8,7 +8,7 @@ import App from './App';
 
 const rootNode = document.getElementById('root');
 
-const renderApp = (Component): void => {
+const renderApp = (Component: React.ElementType): void => {
   ReactDOM.render(
     <AppContainer>
       <Component />
diff --git a/src/pages/Version/Version.tsx b/src/pages/Version/Version.tsx
index 4857521..f669059 100644
--- a/src/pages/Version/Version.tsx
+++ b/src/pages/Version/Version.tsx
@@ -19,7 +19,7 @@ export function getRouterPackageName(params): string {
   return packageName;
 }
 
-function fillTitle(text): string {
+function fillTitle(text: string): string {
   return `Verdaccio - ${text}`;
 }
 
diff --git a/src/utils/calls.ts b/src/utils/calls.ts
index edb3012..4406a21 100644
--- a/src/utils/calls.ts
+++ b/src/utils/calls.ts
@@ -2,7 +2,7 @@ import { PackageMetaInterface } from 'types/packageMeta';
 
 import API from './api';
 
-export async function callReadme(packageName, packageVersion?: string): Promise<string | {}> {
+export async function callReadme(packageName: string, packageVersion?: string): Promise<string | {}> {
   return await API.request<string | {}>(`package/readme/${packageName}${packageVersion ? `?v=${packageVersion}` : ''}`, 'GET');
 }
 
diff --git a/src/utils/package.ts b/src/utils/package.ts
index ba9a228..1b95924 100644
--- a/src/utils/package.ts
+++ b/src/utils/package.ts
@@ -49,11 +49,11 @@ export function formatRepository(repository: any): string | null {
   return null;
 }
 
-export function formatDate(lastUpdate): string {
+export function formatDate(lastUpdate: string | number): string {
   return format(new Date(lastUpdate), TIMEFORMAT);
 }
 
-export function formatDateDistance(lastUpdate): string {
+export function formatDateDistance(lastUpdate: Date | string | number): string {
   return distanceInWordsToNow(new Date(lastUpdate));
 }
 
diff --git a/src/utils/url.ts b/src/utils/url.ts
index 59959ed..2863360 100644
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@@ -10,7 +10,7 @@ export function isURL(url: string): boolean {
   });
 }
 
-export function isEmail(email): boolean {
+export function isEmail(email: string): boolean {
   return isEmailValidator(email || '');
 }
 
diff --git a/tsconfig.strict.json b/tsconfig.strict.json
new file mode 100644
index 0000000..69bad49
--- /dev/null
+++ b/tsconfig.strict.json
@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "noImplicitAny": true
+    }
+}
\ No newline at end of file