{"size": 2937, "ext": "js", "max_stars_repo_path": "frontend/appComponents/Header/components/Search/index.js", "max_stars_repo_name": "Dinesh160290/memcode", "max_stars_repo_stars_event_min_datetime": "2020-04-14T08:35:54.000Z", "max_stars_repo_stars_event_max_datetime": "2020-04-14T08:35:54.000Z", "max_issues_repo_path": "frontend/appComponents/Header/components/Search/index.js", "max_issues_repo_name": "pavikishoor/memcode", "max_issues_repo_issues_event_min_datetime": "2020-03-25T17:39:25.000Z", "max_issues_repo_issues_event_max_datetime": "2020-03-27T04:09:18.000Z", "max_forks_repo_path": "frontend/appComponents/Header/components/Search/index.js", "max_forks_repo_name": "pavikishoor/memcode", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 9, "max_forks_count": null, "avg_line_length": 25.9911504425, "max_line_length": 82, "alphanum_fraction": 0.5903983657}
import orFalse from '~/services/orFalse';
import CourseApi from '~/api/CourseApi';

import disableOnSpeRequest from '~/services/disableOnSpeRequest';
import onClickOutside from 'react-onclickoutside';
import { Course } from './components/Course';

import css from './index.css';

const ESC_KEY = 27;

@onClickOutside
class Search extends React.Component {
  static propTypes = {
    currentUser: orFalse(PropTypes.object).isRequired
  }

  state = {
    speSearch: {},
    searchString: '',
    courseDatas: [],
    ifDropdownIsOpen: false
  }

  handleClickOutside = () => {
    this.clearAndCloseDropdown();
  }

  apiSearch = (searchString) =>
    CourseApi.selectSearch(
      (spe) => this.setState({ speSearch: spe }),
      searchString
    )
      .then((courseDatas) => {
        // of searchString is still relevant
        if (this.state.searchString === searchString) {
          this.setState({ courseDatas });
        }
      })

  updateSearchString = (event) => {
    const searchString = event.target.value;
    this.setState({ searchString });
    if (searchString.length === 0) {
      this.clearAndCloseDropdown();
    } else {
      if (this.state.ifDropdownIsOpen === false) {
        this.setState({ ifDropdownIsOpen: true });
      }
      this.apiSearch(searchString);
    }
  }

  clearAndCloseDropdown = () =>
    this.setState({ ifDropdownIsOpen: false, speSearch: {}, searchString: '' })

  onFocus = () => {
    this.setState({ ifDropdownIsOpen: true });

    document.addEventListener('keydown', this.handleEsc);
  }

  onBlur = () => {
    document.removeEventListener('keydown', this.handleEsc);
  }

  handleEsc = (event) => {
    if (event.keyCode === ESC_KEY) {
      this.clearAndCloseDropdown();
    }
  }

  render = () =>
    <section className={`${css.search} search standard-dropdown-wrapper`}>
      <div className="toggler">
        <i className="fa fa-search"/>
        <input
          // placeholder="Find a course..."
          onChange={this.updateSearchString}
          onFocus={this.onFocus}
          onBlur={this.onBlur}
          value={this.state.searchString}
          type="text"

          autoComplete="off"
          autoCorrect="off"
          autoCapitalize="off"
          spellCheck="off"
        />
      </div>

      {
        this.state.ifDropdownIsOpen &&
        this.state.courseDatas.length > 0 &&
        <div className="standard-dropdown">
          <ul style={disableOnSpeRequest(this.state.speSearch, { opacity: 0.9 })}>
            {this.state.courseDatas.map((courseData) =>
              <Course
                key={courseData.course.id}
                uiCloseDropdown={this.clearAndCloseDropdown}
                courseData={courseData}
                currentUser={this.props.currentUser}
                searchString={this.state.searchString}
              />
            )}
          </ul>
        </div>
      }
    </section>
}

export { Search };
