editableTable.jsx

import React, {Component} from 'react';
import ReactTable from 'react-table';
import { Typeahead } from 'react-bootstrap-typeahead';
import Sources, { Categories } from '../config/sources';
import IconButton from 'material-ui/IconButton';
import DeleteForever from 'material-ui/svg-icons/action/delete-forever';
import Toggle from './SMTA/Toggle';
import moment from 'moment';

import config from '../config/config';

import {
  Modal,
  Button
} from '@sketchpixy/rubix';

const styles = {
  smallIcon: {
    width: 20,
    height: 20
  }
}

export default class MainTable extends Component {
  constructor (props) {
    super(props);

    this.state = {
      show: false,
      Description: null,
      Published: null,
      tags: null,
      title: null,
      source_name: null,
      URL: null
    };
  }

  getPossibleUsernames (url) {
    const re = /^https?:\/\/(www\.)?twitter\.com\/(#!\/)?([^\/]+)(\/\w+)*$/;
    return url.match(re);
  }

  getUsername (arr) {
    const re = /^https?:\/\/(www\.)?twitter\.com\/(#!\/)?([^\/]+)(\/\w+)*$/;
    let name = null;
    arr.forEach(val => {
      if (!re.test(val) && val) {
        name = val;
      }
    });
    return name;
  }

  handleClick = (state, rowInfo, column, instance) => {
    return {
      onClick: e => {
        if (column.header !== 'Threat status') {
          let { source_name, content } = rowInfo.row;
          let { Description, Published, tags, title, URL } = content;
          this.setState({ show: true, Description, Published, tags, title, source_name, URL });
        }
      }
    };
  }

  handleDelete = (keyword) => {
    this.props.handleDelete(keyword);
  }

  render () {
    let close = () => this.setState({ show: false });
    const { Description, Published, tags, title, source_name, URL } = this.state;
    const { data, heading, filter } = this.props;

    const columns = [{
      header: heading,
      accessor: 'key',
      render: row => (
        <div className='pa1'>
          <a href={`https://twitter.com/hashtag/${row.value}?src=tren`} target='_blank' rel='noopener' className='flex justify-between w-100'>
            <div>
              {row.value}
            </div>
          </a>
        </div>
      )
    }, {
      header: 'Count',
      id: 'doc_count',
      accessor: d => d.doc_count
    }];

    const columnsUsernames = [{
      header: heading,
      accessor: 'key',
      render: row => (
        <div className='pa1'>
          <a href={row.value} target='_blank' rel='noopener' className='flex justify-between w-100'>
            <div>
              <img src={'https://twitter.com/' + this.getUsername(this.getPossibleUsernames(row.value)) + '/profile_image?size=mini'} />
            </div>
            <div className='tc'>
              {this.getUsername(this.getPossibleUsernames(row.value))}
            </div>
          </a>
        </div>
      )
    }, {
      header: 'Count',
      id: 'doc_count',
      accessor: d => d.doc_count,
      render: row => (
        <div className='tc'>
          {row.value}
        </div>
      )
    }];

    const columnsKeywords = [{
      header: 'id',
      accessor: 'id',
      maxWidth: 30
    },{
      header: heading,
      accessor: 'keyword',
      render: row => (
        <div className='tc'>
          {row.value}
        </div>
      )
    },{
      header: 'Category',
      accessor: 'category',
      render: row => {
        // converting the categories array so that it has sensible names
        let newArray = [];
        if (Array.isArray(row.value)) {
          row.value.map((val, index) => {
            newArray[index] = Categories[val].name
          })
        }
        return (
          <div className='tc'>
            {(Array.isArray(row.value)) ? newArray.join(', ') : Categories[row.value].name}
          </div>
        )
      }
    }, {
      header: 'Actions',
      accessor: 'keyword',
      expander: true,
      render: row => (
        <div className='flex justify-center w-100 keyword'>
          <IconButton iconStyle={styles.smallIcon} style={styles.smallIcon} onClick={() => this.handleDelete(row.value)} >
            <DeleteForever />
          </IconButton>
        </div>
      ),
      Expander: ({isExpanded, ...rest}) => (
        <div>
          {isExpanded ? <span>&#x2299;</span> : <span>&#x2295;</span>}
        </div>
      ),
    }];

    const columnsData = [{
      header: 'id',
      accessor: 'id',
      maxWidth: 30
    },{
      header: heading,
      accessor: 'content.title',
      minWidth: 500
    },{
      header: 'Source',
      accessor: 'source_name',
      render: row => (
        <div className='h-100 w-100 flex justify-center'>
          <div style={{maxWidth: 30}}>
            <img src={Sources[row.value.toLowerCase()].img} />
          </div>
        </div>
      )
    },{
      header: 'Threat status',
      accessor: 'threat',
      render: row => (
        <div className='h-100 w-100 flex justify-center'>
          {(row.value === '1') ? (
            <Toggle threat={true} />
          ) : (
            <Toggle threat={false} />
          )}
        </div>
      )
    },
    {
      header: 'Description',
      accessor: 'content.Description',
      show: false
    },
    {
      header: 'Published',
      accessor: 'content.Published',
      show: false
    },
    {
      header: 'Tags',
      accessor: 'content.tags',
      show: false
    },
    {
      header: 'URL',
      accessor: 'content.URL',
      show: false
    }
  ];

  const table = (heading === 'Title') ? (
    <div>
      <ReactTable
        className='-striped -highlight'
        data={data}
        columns={columnsData}
        defaultPageSize={20}
        minRows={20}
        showPageSizeOptions={true}
        getTdProps={this.handleClick}
        loading={this.props.isFetching}
        />
      <Modal
        show={this.state.show}
        onHide={close}
        aria-labelledby='contained-modal-title'
        >
        <Modal.Header closeButton>
          <Modal.Title id='contained-modal-title'>{title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <small>Published at: {moment(Published).format('MM DD, YYYY')} on {source_name}</small>
          <div dangerouslySetInnerHTML={{ __html: Description }} />
          <div>
            <a href={URL} target='_blank' rel='noopener'><Button>{(source_name === 'Youtube') ? 'Watch here!' : 'Read more'}</Button></a>
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={close}>Close</Button>
        </Modal.Footer>
      </Modal>
    </div>
  ) : (heading === 'Keywords') ? (
    <ReactTable
      className='-striped -highlight'
      data={data}
      columns={columnsKeywords}
      defaultPageSize={20}
      minRows={20}
      showPageSizeOptions={true}
      loading={this.props.isFetching}
      SubComponent={(row) => {
        console.log(row, 'row');
        return (
          <div>
            <table className='w-100' border='1' cellpadding='0'>
              <tr>
                  <th>
                    Keyword
                  </th>
                  <th>
                    Categories
                  </th>
                  <th>
                    Action
                  </th>
              </tr>
              <tr>
                <td>
                  <input type='text' value={row.row.keyword} />
                </td>
                <td>
                  <Typeahead
                    labelKey='name'
                    multiple
                    options={['Politics', 'Cyber Security', 'Situational awareness']}
                    placeholder='Choose a category...'
                    selected={row.row.category}
                    name='searchText' />
                </td>
                <td>
                  <buttton>Submit</buttton>
                </td>
              </tr>
            </table>
          </div>
        )
      }}
      />
  ) : (heading === 'Username') ? (
    <ReactTable
      data={data}
      columns={columnsUsernames}
      defaultPageSize={5}
      minRows={5}
      showPageSizeOptions={false}
      loading={this.props.isFetchingOverviewAuthors}
      />
  ) : (heading === 'Hashtags') ? (
    <ReactTable
      data={data}
      columns={columns}
      defaultPageSize={5}
      minRows={5}
      showPageSizeOptions={false}
      loading={this.props.isFetchingOverviewHastags}
      />
  ) : (
    <ReactTable
      data={data}
      columns={columns}
      defaultPageSize={5}
      minRows={5}
      showPageSizeOptions={false}
      />
  );

  return table;
}
}