feat: migrating flow to typescript (#47)

This PR convert the code base to Typescript, the changes are the following:

- migrate code base to Typescript (3.4.x)
- enable `eslint` and `@typescript-eslint/eslint-plugin` (warnings still need to be addressed in future pull request
- update relevant dependencies for this PR (linting, etc)
- enable `bundlezise` (it was disabled for some reason)

* refactor: refactoring to typescript

* refactor: migrating to typescript

* refactor: applied feedbacks

* fix: fixed conflicts

* refactored: changed registry

* refactor: updated registry & removed unnecessary lib

* fix: fixed registry ur

* fix: fixed page load

* refactor: refactored footer wip

* refactor: converting to ts..wip

* refactor: converting to ts. wip

* refactor: converting to ts. wip

* refactor: converting to ts

* refactor: converting to ts

* fix: fixed load errors

* refactor: converted files to ts

* refactor: removed flow from tests

* fix: removed transpiled files

* refactor: added ts-ignore

* fix: fixed errors

* fix: fixed types

* fix: fixing jest import -.-

* fix: fixing lint errors

* fix: fixing lint errors

* fix: fixed lint errors

* refactor: removed unnecessary tsconfig's config

* fix: fixing errors

* fix: fixed warning

* fix: fixed test

* refactor: wip

* refactor: wip

* refactor: wip

* fix: fixing tests: wip

* wip

* wip

* fix: fixed search test

* wip

* fix: fixing lint errors

* fix: re-added stylelint

* refactor: updated stylelint script

* fix: fixed: 'styles.js'  were found.

* fix: fixed Search tests

* chore: enable eslint

eslint needs expecitely to know which file has to lint, by default is JS, in this case we need also ts,tsx files eslint . --ext .js,.ts

* chore: vcode eslint settings

* chore: restore eslint previous conf

* chore: clean jest config

* chore: fix eslint warnings

* chore: eslint errors cleared

chore: clean warnings

chore: remove github actions test phases

chore: remove dupe rule

* chore: update handler name

* chore: restore logo from img to url css prop

- loading images with css is more performant than using img html tags, switching this might be a breaking change
- restore no-empty-source seems the linting do not accept false
- update snapshots
- remove @material-ui/styles

* chore: update stylelint linting

* chore: update stylelint linting

* chore: fix a mistake on move tabs to a function

* chore: eanble bundlezie

* chore: use default_executor in circleci

* chore: update readme

src/App/App.test.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import storage from '../utils/storage';
+import App from './App';
+
+import { generateTokenWithTimeRange } from '../../jest/unit/components/__mocks__/token';
+
+jest.mock('../utils/storage', () => {
+  class LocalStorageMock {
+    store: object;
+    public constructor() {
+      this.store = {};
+    }
+    public clear(): void {
+      this.store = {};
+    }
+    public getItem(key): unknown {
+      return this.store[key] || null;
+    }
+    public setItem(key, value): void {
+      this.store[key] = value.toString();
+    }
+    public removeItem(key): void {
+      delete this.store[key];
+    }
+  }
+  return new LocalStorageMock();
+});
+
+jest.mock('../utils/api', () => ({
+  request: require('../../jest/unit/components/__mocks__/api').default.request,
+}));
+
+describe('App', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(<App />);
+  });
+
+  test('toggleLoginModal: should toggle the value in state', () => {
+    const { handleToggleLoginModal } = wrapper.instance();
+    expect(wrapper.state().showLoginModal).toBeFalsy();
+    handleToggleLoginModal();
+    expect(wrapper.state('showLoginModal')).toBeTruthy();
+    expect(wrapper.state('error')).toEqual({});
+  });
+
+  test('isUserAlreadyLoggedIn: token already available in storage', async () => {
+    storage.setItem('username', 'verdaccio');
+    storage.setItem('token', generateTokenWithTimeRange(24));
+    const { isUserAlreadyLoggedIn } = wrapper.instance();
+
+    isUserAlreadyLoggedIn();
+
+    expect(wrapper.state('user').username).toEqual('verdaccio');
+  });
+
+  test('handleLogout - logouts the user and clear localstorage', async () => {
+    const { handleLogout } = wrapper.instance();
+    storage.setItem('username', 'verdaccio');
+    storage.setItem('token', 'xxxx.TOKEN.xxxx');
+
+    await handleLogout();
+    expect(wrapper.state('user')).toEqual({});
+    expect(wrapper.state('isUserLoggedIn')).toBeFalsy();
+  });
+
+  test('handleDoLogin - login the user successfully', async () => {
+    const { handleDoLogin } = wrapper.instance();
+    await handleDoLogin('sam', '1234');
+    const result = {
+      username: 'sam',
+      token: 'TEST_TOKEN',
+    };
+    expect(wrapper.state('isUserLoggedIn')).toBeTruthy();
+    expect(wrapper.state('showLoginModal')).toBeFalsy();
+    expect(storage.getItem('username')).toEqual('sam');
+    expect(storage.getItem('token')).toEqual('TEST_TOKEN');
+    expect(wrapper.state('user')).toEqual(result);
+  });
+
+  test('handleDoLogin - authentication failure', async () => {
+    const { handleDoLogin } = wrapper.instance();
+    await handleDoLogin('sam', '12345');
+    const result = {
+      description: 'bad username/password, access denied',
+      title: 'Unable to login',
+      type: 'error',
+    };
+    expect(wrapper.state('user')).toEqual({});
+    expect(wrapper.state('error')).toEqual(result);
+  });
+});

src/App/App.tsx

@@ -0,0 +1,193 @@
+import React, { Component, ReactElement } from 'react';
+import isNil from 'lodash/isNil';
+
+import storage from '../utils/storage';
+import { makeLogin, isTokenExpire } from '../utils/login';
+
+import Loading from '../components/Loading';
+import LoginModal from '../components/Login';
+import Header from '../components/Header';
+import { Container, Content } from '../components/Layout';
+import RouterApp from '../router';
+import API from '../utils/api';
+import '../styles/typeface-roboto.scss';
+import '../styles/main.scss';
+import 'normalize.css';
+import Footer from '../components/Footer';
+
+export const AppContext = React.createContext<null>(null);
+export const AppContextProvider = AppContext.Provider;
+export const AppContextConsumer = AppContext.Consumer;
+
+export default class App extends Component<any, any> {
+  public state = {
+    error: {},
+    // @ts-ignore
+    logoUrl: window.VERDACCIO_LOGO,
+    user: {},
+    // @ts-ignore
+    scope: window.VERDACCIO_SCOPE ? `${window.VERDACCIO_SCOPE}:` : '',
+    showLoginModal: false,
+    isUserLoggedIn: false,
+    packages: [],
+    isLoading: true,
+  };
+
+  public componentDidMount(): void {
+    this.isUserAlreadyLoggedIn();
+    this.loadOnHandler();
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  public componentDidUpdate(_, prevState): void {
+    const { isUserLoggedIn } = this.state;
+    if (prevState.isUserLoggedIn !== isUserLoggedIn) {
+      this.loadOnHandler();
+    }
+  }
+
+  public render(): React.ReactElement<HTMLDivElement> {
+    const { isLoading, isUserLoggedIn, packages, logoUrl, user, scope } = this.state;
+
+    const context: any = { isUserLoggedIn, packages, logoUrl, user, scope };
+
+    return (
+      // @ts-ignore
+      <Container isLoading={isLoading}>
+        {isLoading ? (
+          <Loading />
+        ) : (
+          <>
+            <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>
+          </>
+        )}
+        {this.renderLoginModal()}
+      </Container>
+    );
+  }
+
+  public isUserAlreadyLoggedIn = () => {
+    // checks for token validity
+    const token = storage.getItem('token');
+    const username = storage.getItem('username');
+    if (isTokenExpire(token) || isNil(username)) {
+      this.handleLogout();
+    } else {
+      this.setState({
+        user: { username, token },
+        isUserLoggedIn: true,
+      });
+    }
+  };
+
+  public loadOnHandler = async () => {
+    try {
+      // @ts-ignore
+      this.req = await API.request('packages', 'GET');
+      this.setState({
+        // @ts-ignore
+        packages: this.req,
+        isLoading: false,
+      });
+    } catch (error) {
+      // FIXME: add dialog
+      console.error({
+        title: 'Warning',
+        message: `Unable to load package list: ${error.message}`,
+      });
+      this.setLoading(false);
+    }
+  };
+
+  public setLoading = isLoading =>
+    this.setState({
+      isLoading,
+    });
+
+  /**
+   * Toggles the login modal
+   * Required by: <LoginModal /> <Header />
+   */
+  public handleToggleLoginModal = () => {
+    this.setState(prevState => ({
+      // @ts-ignore
+      showLoginModal: !prevState.showLoginModal,
+      error: {},
+    }));
+  };
+
+  /**
+   * handles login
+   * Required by: <Header />
+   */
+  public handleDoLogin = async (usernameValue, passwordValue) => {
+    // @ts-ignore
+    const { username, token, error } = await makeLogin(usernameValue, passwordValue);
+
+    if (username && token) {
+      storage.setItem('username', username);
+      storage.setItem('token', token);
+      this.setLoggedUser(username, token);
+    }
+
+    if (error) {
+      this.setState({
+        user: {},
+        error,
+      });
+    }
+  };
+
+  public setLoggedUser = (username, token) => {
+    this.setState({
+      user: {
+        username,
+        token,
+      },
+      isUserLoggedIn: true, // close login modal after successful login
+      showLoginModal: false, // set isUserLoggedIn to true
+    });
+  };
+
+  /**
+   * Logouts user
+   * Required by: <Header />
+   */
+  public handleLogout = () => {
+    storage.removeItem('username');
+    storage.removeItem('token');
+    this.setState({
+      user: {},
+      isUserLoggedIn: false,
+    });
+  };
+
+  public renderLoginModal = (): ReactElement<HTMLElement> => {
+    const { error, showLoginModal } = this.state;
+    return <LoginModal error={error} onCancel={this.handleToggleLoginModal} onSubmit={this.handleDoLogin} visibility={showLoginModal} />;
+  };
+
+  public renderContent = (): ReactElement<HTMLElement> => {
+    return (
+      <>
+        <Content>
+          <RouterApp onLogout={this.handleLogout} onToggleLoginModal={this.handleToggleLoginModal}>
+            {this.renderHeader()}
+          </RouterApp>
+        </Content>
+        <Footer />
+      </>
+    );
+  };
+
+  public renderHeader = (): ReactElement<HTMLElement> => {
+    const {
+      logoUrl,
+      // @ts-ignore
+      user: { username },
+      scope,
+    } = this.state;
+
+    return <Header logo={logoUrl} onLogout={this.handleLogout} onToggleLoginModal={this.handleToggleLoginModal} scope={scope} username={username} />;
+  };
+}

src/App/app.scss

@@ -0,0 +1,16 @@
+@import './styles/variables';
+
+.alertError {
+    background-color: $red !important;
+    min-width: inherit !important;
+}
+
+.alertErrorMsg {
+    display: flex;
+    align-items: center;
+}
+
+.alertIcon {
+    opacity: 0.9;
+    margin-right: 8px;
+}

src/App/index.ts

@@ -0,0 +1 @@
+export { default } from './App';