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
2026-01-17 16:45:49 +07:00 · 2019-06-20 14:37:28 +02:00
parent 7d1764458b
commit 6b5d0b7e2e
358 changed files with 4730 additions and 58431 deletions
--- a/src/components/Search/Search.test.tsx
+++ b/src/components/Search/Search.test.tsx
@@ -0,0 +1,273 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { BrowserRouter } from 'react-router-dom';
+
+import Search from './Search';
+
+const SEARCH_FILE_PATH = './Search';
+const API_FILE_PATH = '../../utils/api';
+const URL_FILE_PATH = '../../utils/url';
+
+// Global mocks
+const event = {
+  stopPropagation: jest.fn(),
+};
+window.location.assign = jest.fn();
+
+describe('<Search /> component test', () => {
+  let routerWrapper;
+  let wrapper;
+  beforeEach(() => {
+    routerWrapper = mount(
+      <BrowserRouter>
+        <Search />
+      </BrowserRouter>
+    );
+  });
+
+  test('should load the component in default state', () => {
+    expect(routerWrapper.html()).toMatchSnapshot();
+  });
+
+  test('onBlur: should cancel all search requests', async () => {
+    const Search = require(SEARCH_FILE_PATH).Search;
+
+    const routerWrapper = shallow(
+      <BrowserRouter>
+        <Search />
+      </BrowserRouter>
+    );
+
+    wrapper = routerWrapper.find(Search).dive();
+    const { handleOnBlur, requestList, setState } = wrapper.instance();
+    const spyCancelAllSearchRequests = jest.spyOn(wrapper.instance(), 'cancelAllSearchRequests');
+    setState({ search: 'verdaccio' });
+
+    const request = {
+      abort: jest.fn(),
+    };
+    // adds a request for AbortController
+    wrapper.instance().requestList = [request];
+
+    handleOnBlur(event);
+
+    expect(request.abort).toHaveBeenCalled();
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(wrapper.state('error')).toBeFalsy();
+    expect(wrapper.state('loaded')).toBeFalsy();
+    expect(wrapper.state('loading')).toBeFalsy();
+    expect(spyCancelAllSearchRequests).toHaveBeenCalled();
+    expect(requestList).toEqual([]);
+  });
+
+  test('handleSearch: when user type package name in search component and set loading to true', () => {
+    const Search = require(SEARCH_FILE_PATH).Search;
+
+    const routerWrapper = shallow(
+      <BrowserRouter>
+        <Search />
+      </BrowserRouter>
+    );
+
+    wrapper = routerWrapper.find(Search).dive();
+
+    const { handleSearch } = wrapper.instance();
+    const newValue = 'verdaccio';
+
+    handleSearch(event, { newValue, method: 'type' });
+
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(wrapper.state('error')).toBeFalsy();
+    expect(wrapper.state('loaded')).toBeFalsy();
+    expect(wrapper.state('loading')).toBeTruthy();
+    expect(wrapper.state('search')).toEqual(newValue);
+  });
+
+  test('handleSearch: cancel all search requests when there is no value in search component with type method', () => {
+    const Search = require(SEARCH_FILE_PATH).Search;
+
+    const routerWrapper = shallow(
+      <BrowserRouter>
+        <Search />
+      </BrowserRouter>
+    );
+
+    wrapper = routerWrapper.find(Search).dive();
+
+    const { handleSearch, requestList } = wrapper.instance();
+    const spy = jest.spyOn(wrapper.instance(), 'cancelAllSearchRequests');
+    const newValue = '';
+
+    handleSearch(event, { newValue, method: 'type' });
+
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(wrapper.state('error')).toBeFalsy();
+    expect(wrapper.state('loaded')).toBeFalsy();
+    expect(wrapper.state('loading')).toBeTruthy();
+    expect(wrapper.state('search')).toEqual(newValue);
+    expect(spy).toHaveBeenCalled();
+    expect(requestList).toEqual([]);
+  });
+
+  test('handleSearch: when method is not type method', () => {
+    const Search = require(SEARCH_FILE_PATH).Search;
+
+    const routerWrapper = shallow(
+      <BrowserRouter>
+        <Search />
+      </BrowserRouter>
+    );
+
+    wrapper = routerWrapper.find(Search).dive();
+
+    const { handleSearch } = wrapper.instance();
+    const newValue = '';
+
+    handleSearch(event, { newValue, method: 'click' });
+
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(wrapper.state('error')).toBeFalsy();
+    expect(wrapper.state('loaded')).toBeFalsy();
+    expect(wrapper.state('loading')).toBeFalsy();
+    expect(wrapper.state('search')).toEqual(newValue);
+  });
+
+  test('handlePackagesClearRequested: should clear suggestions', () => {
+    const Search = require(SEARCH_FILE_PATH).Search;
+
+    const routerWrapper = shallow(
+      <BrowserRouter>
+        <Search />
+      </BrowserRouter>
+    );
+
+    wrapper = routerWrapper.find(Search).dive();
+
+    const { handlePackagesClearRequested } = wrapper.instance();
+
+    handlePackagesClearRequested();
+
+    expect(wrapper.state('suggestions')).toEqual([]);
+  });
+
+  describe('<Search /> component: mocks specific tests ', () => {
+    beforeEach(() => {
+      jest.resetModules();
+      jest.doMock('lodash/debounce', () => {
+        return function debounceMock(fn, delay) {
+          return fn;
+        };
+      });
+    });
+
+    test('handleFetchPackages: should load the packages from API', async () => {
+      const apiResponse = [{ name: 'verdaccio' }, { name: 'verdaccio-htpasswd' }];
+      const suggestions = [{ name: 'verdaccio' }, { name: 'verdaccio-htpasswd' }];
+
+      jest.doMock(API_FILE_PATH, () => ({
+        request(url: string) {
+          expect(url).toEqual('search/verdaccio');
+          return Promise.resolve(apiResponse);
+        },
+      }));
+
+      const Search = require(SEARCH_FILE_PATH).Search;
+
+      const routerWrapper = shallow(
+        <BrowserRouter>
+          <Search />
+        </BrowserRouter>
+      );
+
+      wrapper = routerWrapper.find(Search).dive();
+      wrapper.setState({ search: 'verdaccio' });
+      const { handleFetchPackages } = wrapper.instance();
+
+      await handleFetchPackages({ value: 'verdaccio' });
+
+      expect(wrapper.state('suggestions')).toEqual(suggestions);
+      expect(wrapper.state('error')).toBeFalsy();
+      expect(wrapper.state('loaded')).toBeTruthy();
+      expect(wrapper.state('loading')).toBeFalsy();
+    });
+
+    test('handleFetchPackages: when browser cancel a request', async () => {
+      const apiResponse = { name: 'AbortError' };
+
+      jest.doMock(API_FILE_PATH, () => ({ request: jest.fn(() => Promise.reject(apiResponse)) }));
+
+      const Search = require(SEARCH_FILE_PATH).Search;
+
+      const routerWrapper = shallow(
+        <BrowserRouter>
+          <Search />
+        </BrowserRouter>
+      );
+
+      wrapper = routerWrapper.find(Search).dive();
+
+      const { handleFetchPackages, setState } = wrapper.instance();
+      setState({ search: 'verdaccio' });
+      await handleFetchPackages({ value: 'verdaccio' });
+
+      expect(wrapper.state('error')).toBeFalsy();
+      expect(wrapper.state('loaded')).toBeFalsy();
+      expect(wrapper.state('loading')).toBeFalsy();
+    });
+
+    test('handleFetchPackages: when API server failed request', async () => {
+      const apiResponse = { name: 'BAD_REQUEST' };
+
+      jest.doMock(API_FILE_PATH, () => ({
+        request(url) {
+          expect(url).toEqual('search/verdaccio');
+          return Promise.reject(apiResponse);
+        },
+      }));
+
+      const Search = require(SEARCH_FILE_PATH).Search;
+      const routerWrapper = shallow(
+        <BrowserRouter>
+          <Search />
+        </BrowserRouter>
+      );
+
+      wrapper = routerWrapper.find(Search).dive();
+      wrapper.setState({ search: 'verdaccio' });
+      const { handleFetchPackages } = wrapper.instance();
+
+      await handleFetchPackages({ value: 'verdaccio' });
+
+      expect(wrapper.state('error')).toBeTruthy();
+      expect(wrapper.state('loaded')).toBeFalsy();
+      expect(wrapper.state('loading')).toBeFalsy();
+    });
+
+    test('handleClickSearch: should change the window location on click or return key', () => {
+      const getDetailPageURL = jest.fn(() => 'detail/page/url');
+      jest.doMock(URL_FILE_PATH, () => ({ getDetailPageURL }));
+
+      const suggestionValue = [];
+      const Search = require(SEARCH_FILE_PATH).Search;
+      const pushHandler = jest.fn();
+      const routerWrapper = shallow(
+        <BrowserRouter>
+          <Search history={{ push: pushHandler }} />
+        </BrowserRouter>
+      );
+
+      wrapper = routerWrapper.find(Search).dive();
+      const { handleClickSearch } = wrapper.instance();
+
+      // click
+      handleClickSearch(event, { suggestionValue, method: 'click' });
+      expect(event.stopPropagation).toHaveBeenCalled();
+      expect(pushHandler).toHaveBeenCalledTimes(1);
+
+      // return key
+      handleClickSearch(event, { suggestionValue, method: 'enter' });
+      expect(event.stopPropagation).toHaveBeenCalled();
+      expect(pushHandler).toHaveBeenCalledTimes(2);
+    });
+  });
+});
--- a/src/components/Search/Search.tsx
+++ b/src/components/Search/Search.tsx
@@ -0,0 +1,192 @@
+import React, { KeyboardEvent, Component, ReactElement } from 'react';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+
+import { default as IconSearch } from '@material-ui/icons/Search';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import debounce from 'lodash/debounce';
+
+import API from '../../utils/api';
+import AutoComplete from '../AutoComplete';
+import colors from '../../utils/styles/colors';
+
+export interface State {
+  search: string;
+  suggestions: any[];
+  loading: boolean;
+  loaded: boolean;
+  error: boolean;
+}
+
+export type cancelAllSearchRequests = () => void;
+export type handlePackagesClearRequested = () => void;
+export type handleSearch = (event: KeyboardEvent<HTMLInputElement>, { newValue, method }: { newValue: string; method: string }) => void;
+export type handleClickSearch = (event: KeyboardEvent<HTMLInputElement>, { suggestionValue, method }: { suggestionValue: object[]; method: string }) => void;
+export type handleFetchPackages = ({ value: string }) => Promise<void>;
+export type onBlur = (event: KeyboardEvent<HTMLInputElement>) => void;
+
+const CONSTANTS = {
+  API_DELAY: 300,
+  PLACEHOLDER_TEXT: 'Search Packages',
+  ABORT_ERROR: 'AbortError',
+};
+
+export class Search extends Component<RouteComponentProps<{}>, State> {
+  private requestList: any[];
+
+  constructor(props: RouteComponentProps<{}>) {
+    super(props);
+    this.state = {
+      search: '',
+      suggestions: [],
+      // loading: A boolean value to indicate that request is in pending state.
+      loading: false,
+      // loaded: A boolean value to indicate that result has been loaded.
+      loaded: false,
+      // error: A boolean value to indicate API error.
+      error: false,
+    };
+    this.requestList = [];
+  }
+
+  /**
+   * Cancel all the requests which are in pending state.
+   */
+  private cancelAllSearchRequests: cancelAllSearchRequests = () => {
+    this.requestList.forEach(request => request.abort());
+    this.requestList = [];
+  };
+
+  /**
+   * Cancel all the request from list and make request list empty.
+   */
+  private handlePackagesClearRequested: handlePackagesClearRequested = () => {
+    this.setState({
+      suggestions: [],
+    });
+  };
+
+  /**
+   * onChange method for the input element.
+   */
+  private handleSearch: handleSearch = (event, { newValue, method }) => {
+    // stops event bubbling
+    event.stopPropagation();
+    if (method === 'type') {
+      const value = newValue.trim();
+      this.setState(
+        {
+          search: value,
+          loading: true,
+          loaded: false,
+          error: false,
+        },
+        () => {
+          /**
+           * A use case where User keeps adding and removing value in input field,
+           * so we cancel all the existing requests when input is empty.
+           */
+          if (value.length === 0) {
+            this.cancelAllSearchRequests();
+          }
+        }
+      );
+    }
+  };
+
+  /**
+   * When an user select any package by clicking or pressing return key.
+   */
+  private handleClickSearch: handleClickSearch = (event, { suggestionValue, method }: any) => {
+    const { history } = this.props;
+    // stops event bubbling
+    event.stopPropagation();
+    switch (method) {
+      case 'click':
+      case 'enter':
+        this.setState({ search: '' });
+        history.push(`/-/web/detail/${suggestionValue}`);
+        break;
+    }
+  };
+
+  /**
+   * Fetch packages from API.
+   * For AbortController see: https://developer.mozilla.org/en-US/docs/Web/API/AbortController
+   */
+  private handleFetchPackages: handleFetchPackages = async ({ value }) => {
+    try {
+      // @ts-ignore
+      const controller = new window.AbortController();
+      const signal = controller.signal;
+      // Keep track of search requests.
+      this.requestList.push(controller);
+      const suggestions = await API.request(`search/${encodeURIComponent(value)}`, 'GET', { signal });
+      // @ts-ignore
+      this.setState({
+        suggestions,
+        loaded: true,
+      });
+    } catch (error) {
+      /**
+       * AbortError is not the API error.
+       * It means browser has cancelled the API request.
+       */
+      if (error.name === CONSTANTS.ABORT_ERROR) {
+        this.setState({ error: false, loaded: false });
+      } else {
+        this.setState({ error: true, loaded: false });
+      }
+    } finally {
+      this.setState({ loading: false });
+    }
+  };
+
+  public render(): ReactElement<HTMLElement> {
+    const { suggestions, search, loaded, loading, error } = this.state;
+
+    return (
+      <AutoComplete
+        color={colors.white}
+        onBlur={this.handleOnBlur}
+        onChange={this.handleSearch}
+        onCleanSuggestions={this.handlePackagesClearRequested}
+        onClick={this.handleClickSearch}
+        onSuggestionsFetch={debounce(this.handleFetchPackages, CONSTANTS.API_DELAY)}
+        placeholder={CONSTANTS.PLACEHOLDER_TEXT}
+        startAdornment={this.getAdorment()}
+        suggestions={suggestions}
+        suggestionsError={error}
+        suggestionsLoaded={loaded}
+        suggestionsLoading={loading}
+        value={search}
+      />
+    );
+  }
+
+  public getAdorment(): ReactElement<HTMLElement> {
+    return (
+      <InputAdornment position={'start'} style={{ color: colors.white }}>
+        <IconSearch />
+      </InputAdornment>
+    );
+  }
+
+  /**
+   * As user focuses out from input, we cancel all the request from requestList
+   * and set the API state parameters to default boolean values.
+   */
+  private handleOnBlur: onBlur = event => {
+    // stops event bubbling
+    event.stopPropagation();
+    this.setState(
+      {
+        loaded: false,
+        loading: false,
+        error: false,
+      },
+      () => this.cancelAllSearchRequests()
+    );
+  };
+}
+
+export default withRouter(Search);
--- a/src/components/Search/snapshots/Search.test.tsx.snap
+++ b/src/components/Search/snapshots/Search.test.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Search /> component test should load the component in default state 1`] = `"<div class=\\"css-1crzyyo e1rflf270\\"><div role=\\"combobox\\" aria-haspopup=\\"listbox\\" aria-owns=\\"react-autowhatever-1\\" aria-expanded=\\"false\\" class=\\"react-autosuggest__container\\"><div class=\\"MuiFormControl-root-1 MuiFormControl-fullWidth-4 react-autosuggest__input\\" aria-autocomplete=\\"list\\" aria-controls=\\"react-autowhatever-1\\"><div class=\\"MuiInputBase-root-18 MuiInput-root-5 css-n9ojyg MuiInput-underline-9 MuiInputBase-fullWidth-27 MuiInput-fullWidth-12 MuiInputBase-formControl-19 MuiInput-formControl-6 MuiInputBase-adornedStart-22\\"><div class=\\"MuiInputAdornment-root-35 MuiInputAdornment-positionStart-37\\" style=\\"color: rgb(255, 255, 255);\\"><svg class=\\"MuiSvgIcon-root-40\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\\"></path><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path></svg></div><input aria-invalid=\\"false\\" autocomplete=\\"off\\" class=\\"MuiInputBase-input-28 MuiInput-input-13 css-hodoyq MuiInputBase-inputAdornedStart-33\\" placeholder=\\"Search Packages\\" type=\\"text\\" value=\\"\\"></div></div><div class=\\"MuiPaper-root-49 MuiPaper-elevation2-53 react-autosuggest__suggestions-container css-cfo6a e1rflf271\\" id=\\"react-autowhatever-1\\" role=\\"listbox\\"></div></div></div>"`;
--- a/src/components/Search/index.ts
+++ b/src/components/Search/index.ts
@@ -0,0 +1 @@
+export { default } from './Search';