{"size": 2071, "ext": "js", "max_stars_repo_path": "pages/jobs.js", "max_stars_repo_name": "mikesparr/ai-demo-web", "max_stars_repo_stars_event_min_datetime": "2021-01-08T08:57:26.000Z", "max_stars_repo_stars_event_max_datetime": "2021-08-11T16:49:12.000Z", "max_issues_repo_path": "pages/jobs.js", "max_issues_repo_name": "mikesparr/ai-demo-web", "max_issues_repo_issues_event_min_datetime": "2021-01-09T01:45:09.000Z", "max_issues_repo_issues_event_max_datetime": "2021-01-09T01:45:09.000Z", "max_forks_repo_path": "pages/jobs.js", "max_forks_repo_name": "mikesparr/ai-demo-web", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 5, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 22.7582417582, "max_line_length": 79, "alphanum_fraction": 0.5736359247}
/* eslint-disable react/react-in-jsx-scope */
import PropTypes from 'prop-types';
import getConfig from 'next/config';
import {
  useColorModeValue,
  Heading,
  Flex,
  Box,
} from '@chakra-ui/react';
import Layout from '../components/Layout';
import Feature from '../components/Feature';
import JobsStatsBar from '../components/JobsStatsBar';
import JobsTable from '../components/JobsTable';

import useSWR from 'swr';

const {publicRuntimeConfig} = getConfig();
const apiUrl = publicRuntimeConfig.predictUrl;
const fetcher = (url) => fetch(url).then((res) => res.json());

const Jobs = (props) => {
  // fetch remote data
  const {data: jobs, error} = useSWR(apiUrl + '/jobs', fetcher, props.data);

  return (
    <Layout page="jobs" error={error}>

      <Flex
        justify="space-between"
        p="1.5rem"
        width="100%"
      >
        <Heading
          as="h1"
          size="xl"
          fontWeight="normal"
          p={5}
        >Jobs</Heading>
        <Box
          borderWidth="1px"
          borderRadius="lg"
          overflow="hidden"
          width="80%"
          p={3}
        >
          <JobsStatsBar data={jobs} />
        </Box>
      </Flex>

      <Flex
        p="1.0rem"
        width="100%"
      >
        <Feature
          title="Training Jobs"
          desc={`User corrections will trigger model retraining and subsequent 
          batches will use the revised model for predictions.`}
          borderRadius={10}
          width="100%"
          backgroundColor={useColorModeValue('orange.50', 'blue.900')}
        />
      </Flex>

      <Flex
        direction="column"
        width="100%"
        p="1.0rem"
      >
        <JobsTable data={jobs} />
      </Flex>

    </Layout>
  );
};

// preload data server side, then useSWR for client-side refreshing
export const getServerSideProps = async () => {
  // fetch data
  const res = await fetch(apiUrl + '/jobs');
  const data = await res.json();

  // pass data
  return {props: {data}};
};

Jobs.propTypes = {
  data: PropTypes.object,
};

export default Jobs;
