{"size": 2683, "ext": "js", "max_stars_repo_path": "client/src/components/ban-list-queue.js", "max_stars_repo_name": "got2bhockey/Squad-Community-Ban-List", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/components/ban-list-queue.js", "max_issues_repo_name": "got2bhockey/Squad-Community-Ban-List", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/components/ban-list-queue.js", "max_forks_repo_name": "got2bhockey/Squad-Community-Ban-List", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.3775510204, "max_line_length": 80, "alphanum_fraction": 0.4122251211}
import React from 'react';
import { gql } from 'apollo-boost';
import { Query } from 'react-apollo';

import { Card, CardBody, CardHeader, Table } from 'reactstrap';

import moment from 'moment';

const query = gql`
  query {
    banListQueue {
      _id
      name
      type

      importStatus
      lastImported

      organization {
        _id
        name
      }
    }
  }
`;

export { query };

export default function() {
  return (
    <Card className=" shadow">
      <CardHeader className=" bg-transparent">
        <h3 className=" mb-0">Ban List Queue</h3>
      </CardHeader>

      <Query query={query} onError={() => {}}>
        {({ loading, error, data }) => {
          if (loading)
            return (
              <CardBody>
                <div className="text-center mt-2 mb-3">Loading...</div>
                <div className="btn-wrapper text-center">
                  <i className="fas fa-circle-notch fa-spin fa-4x" />
                </div>
              </CardBody>
            );

          if (error)
            return (
              <CardBody>
                <div className="text-center mt-2 mb-2">Error!</div>
                <div className="btn-wrapper text-center">
                  <i className="fas fa-exclamation-triangle fa-4x" />
                </div>
                <div className="text-center mt-2 mb-2">
                  Something went wrong. Sad times.
                </div>
              </CardBody>
            );

          return (
            <>
              <Table className="align-items-center table-flush" responsive>
                <thead className="thead-light">
                  <tr>
                    <th>Organization Name</th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Import Status</th>
                    <th>Last Imported</th>
                  </tr>
                </thead>
                <tbody>
                  {data.banListQueue.map((banList, key) => (
                    <tr key={key}>
                      <th>{banList.organization.name}</th>
                      <td>{banList.name}</td>
                      <td>
                        {banList.type.replace('battlemetrics', 'BattleMetrics')}
                      </td>
                      <td>
                        {moment
                          .utc(banList.lastImported)
                          .format('DD/MM/YYYY HH:mm')}
                      </td>
                      <td>{banList.importStatus}</td>
                    </tr>
                  ))}
                </tbody>
              </Table>
            </>
          );
        }}
      </Query>
    </Card>
  );
}
