@kiwicom/smart-faq/src/SmartFAQ/context/SearchState.js

// @flow

import * as React from 'react';

import { debounce } from '../helpers/functionUtils';

const initialState = {
  searchText: '',
  queriesBeforeClick: 0,
  isVisible: true,
};

type Props = {
  children: React.Node,
};

export type State = {
  searchText: string,
  queriesBeforeClick: number,
  isVisible: boolean,
};

export type SearchStateType = State & {
  changeSearchText: (searchText: string) => void,
  clearSearch: () => void,
  incrementQueriesCount: () => void,
  resetQueriesCount: () => void,
  toggleSearch: () => void,
  disableSearch: () => void,
  enableSearch: () => void,
};

export const SearchState: React.Context<SearchStateType> = React.createContext({
  ...initialState,
  // eslint-disable-next-line no-unused-vars
  changeSearchText: (text: string) => {},
  clearSearch: () => {},
  incrementQueriesCount: () => {},
  resetQueriesCount: () => {},
  toggleSearch: () => {},
  disableSearch: () => {},
  enableSearch: () => {},
});

class SearchStateProvider extends React.Component<Props, State> {
  state = initialState;

  incrementQueriesCount = debounce(() => {
    this.setState(prevState => ({
      queriesBeforeClick: prevState.queriesBeforeClick + 1,
    }));
  });

  changeSearchText = (searchText: string) => {
    this.setState({ searchText });
  };

  clearSearch = () => {
    this.setState({ searchText: '' });
  };

  resetQueriesCount = () => {
    this.setState({ queriesBeforeClick: 0 });
  };

  toggleSearch = () => {
    this.setState(prevState => ({ isVisible: !prevState.isVisible }));
  };

  disableSearch = () => {
    this.setState({ isVisible: false });
  };

  enableSearch = () => {
    this.setState({ isVisible: true });
  };

  render() {
    const { queriesBeforeClick, searchText, isVisible } = this.state;

    return (
      <SearchState.Provider
        value={{
          searchText,
          isVisible,
          changeSearchText: this.changeSearchText,
          clearSearch: this.clearSearch,
          incrementQueriesCount: this.incrementQueriesCount,
          resetQueriesCount: this.resetQueriesCount,
          queriesBeforeClick,
          toggleSearch: this.toggleSearch,
          enableSearch: this.enableSearch,
          disableSearch: this.disableSearch,
        }}
      >
        {this.props.children}
      </SearchState.Provider>
    );
  }
}

export default SearchStateProvider;