gdq-archive/frontend/components/VideoList.tsx

import React, { ChangeEvent } from 'react';

import FormControl from 'react-bootstrap/FormControl';
import InputGroup from 'react-bootstrap/InputGroup';
import ListGroup from 'react-bootstrap/ListGroup';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { injectIntl, IntlShape } from 'react-intl';
import VideoListItem from './VideoListItem';
import Filter from './Filter';
import { VideoEntry } from '../util/datatypes/VideoList';

interface VideoListProps {
  intl: IntlShape,
  id: string,
  thumbnailServerURL: string,
  videos: Array<VideoEntry>,
}

interface VideoListState {
  query: string
}

class VideoList extends React.Component<VideoListProps, VideoListState> {
  constructor(props: VideoListProps) {
    super(props);

    this.state = {
      query: '',
    };

    this.onQueryChange = this.onQueryChange.bind(this);
  }

  onQueryChange({ target }: ChangeEvent<HTMLInputElement>) {
    this.setState({
      query: target.value,
    });
  }

  render() {
    const { query } = this.state;
    const {
      intl,
      id,
      thumbnailServerURL,
      videos,
    } = this.props;
    return (
      <div>
        <InputGroup>
          <InputGroup.Prepend>
            <InputGroup.Text id="search-prepend">
              <FontAwesomeIcon icon="search" />
            </InputGroup.Text>
          </InputGroup.Prepend>
          <FormControl
            placeholder={intl.formatMessage({ id: 'VideoList.Search.Placeholder', defaultMessage: 'Type something to search here…' })}
            aria-label={intl.formatMessage({ id: 'VideoList.Search.Label', defaultMessage: 'Search' })}
            aria-describedby="search-prepend"
            value={query}
            onChange={this.onQueryChange}
          />
        </InputGroup>
        <ListGroup>
          <Filter
            items={videos}
            query={query}
            keys={['title', 'fileName']}
            output={(filteredVideos) => filteredVideos.map(({
              item: {
                duration,
                fileName,
                title,
                sourceVideoStart,
                sourceVideoEnd,
              },
              refIndex: index,
            }) => (
              <VideoListItem
                key={index}
                duration={duration}
                id={id}
                thumbnailServerURL={thumbnailServerURL}
                fileName={fileName}
                title={title}
                sourceVideoStart={sourceVideoStart}
                sourceVideoEnd={sourceVideoEnd}
              />
            ))}
          />
        </ListGroup>
      </div>
    );
  }
}

export default injectIntl(VideoList);