import * as React from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import { GetSystemLogsQuery } from '../generated/schema';

const GET_SYSTEM_LOGS = gql`
  query GetSystemLogs {
    system {
      logs  // INTELISENSE NOT WORKING HERE :(
    }
  }
`;

class GetGetSystemLogs extends Query<GetSystemLogsQuery> {}

const SystemLogsScreen = () => (
  <div>
    <h1>System Logs</h1>
    <GetGetSystemLogs query={GET_SYSTEM_LOGS} fetchPolicy="cache-first">
      {({ loading, error, data }) =>
        data && data.system ? (
          <pre>{data.system.logs}</pre>
        ) : (
          <div>Loading...</div>
        )
      }
    </GetGetSystemLogs>
  </div>
);

export default SystemLogsScreen;