farmcontrol-ui/src/components/Dashboard/common/SubJobState.jsx

import PropTypes from 'prop-types'
import { Badge, Progress, Flex, Button, Space, Tag } from 'antd' // eslint-disable-line
import {
  CloseOutlined,
  DeleteOutlined,
  PauseOutlined,
  CaretRightOutlined
} from '@ant-design/icons' // eslint-disable-line
import React, { useState, useContext, useEffect } from 'react'
import { SocketContext } from '../context/SocketContext'
import IdText from './IdText'

const SubJobState = ({
  subJob,
  showStatus = true,
  showId = true,
  showProgress = true,
  showControls = true //eslint-disable-line
}) => {
  const { socket } = useContext(SocketContext)
  const [badgeStatus, setBadgeStatus] = useState('unknown')
  const [badgeText, setBadgeText] = useState('Unknown')
  const [currentState, setCurrentState] = useState(
    subJob?.state || {
      type: 'unknown',
      progress: 0
    }
  )
  const [initialized, setInitialized] = useState(false)

  useEffect(() => {
    if (socket && !initialized && subJob?.id) {
      setInitialized(true)
      console.log('on notify_subjob_update')
      socket.on('notify_subjob_update', (statusUpdate) => {
        if (statusUpdate?.id === subJob.id && statusUpdate?.state) {
          console.log('statusUpdate', statusUpdate)
          setCurrentState(statusUpdate.state)
        }
      })
    }
    return () => {
      if (socket && initialized) {
        console.log('off notify_subjob_update')
        socket.off('notify_subjob_update')
      }
    }
  }, [socket, initialized, subJob?.id])

  useEffect(() => {
    switch (currentState.type) {
      case 'draft':
        setBadgeStatus('default')
        setBadgeText('Draft')
        break
      case 'printing':
        setBadgeStatus('processing')
        setBadgeText('Printing')
        break
      case 'complete':
        setBadgeStatus('success')
        setBadgeText('Complete')
        break
      case 'failed':
        setBadgeStatus('error')
        setBadgeText('Failed')
        break
      case 'queued':
        setBadgeStatus('warning')
        setBadgeText('Queued')
        break
      case 'paused':
        setBadgeStatus('warning')
        setBadgeText('Paused')
        break
      case 'cancelled':
        setBadgeStatus('error')
        setBadgeText('Cancelled')
        break
      default:
        setBadgeStatus('default')
        setBadgeText('Unknown')
    }
  }, [currentState])

  return (
    <Flex gap='small' align={'center'}>
      {showId && (
        <>
          {'Sub Job '}
          <IdText
            id={subJob.number.toString().padStart(6, '0')}
            showCopy={false}
            type='subjob'
          />
        </>
      )}
      {showStatus && (
        <Space>
          <Tag color={badgeStatus} style={{ marginRight: 0 }}>
            <Flex gap={6}>
              <Badge status={badgeStatus} />
              {badgeText}
            </Flex>
          </Tag>
        </Space>
      )}
      {showProgress &&
      (currentState.type === 'printing' ||
        currentState.type === 'processing') ? (
        <Progress
          percent={Math.round(currentState.progress * 100)}
          style={{ width: '150px', marginBottom: '2px' }}
        />
      ) : null}
      {showControls &&
      (currentState.type === 'printing' || currentState.type === 'paused') ? (
        <Space.Compact>
          <Button
            onClick={() => {
              if (currentState.type === 'printing') {
                socket.emit('printer.print.pause', {
                  printerId: subJob.printer
                })
              } else {
                socket.emit('printer.print.resume', {
                  printerId: subJob.printer
                })
              }
            }}
            style={{ height: '22px' }}
            icon={
              currentState.type === 'printing' ? (
                <PauseOutlined
                  style={{ fontSize: '10px', marginBottom: '3px' }}
                />
              ) : (
                <CaretRightOutlined
                  style={{ fontSize: '10px', marginBottom: '3px' }}
                />
              )
            }
          ></Button>
          <Button
            onClick={() => {
              socket.emit('printer.print.cancel', {
                printerId: subJob.printer
              })
            }}
            style={{ height: '22px' }}
            icon={
              <CloseOutlined
                style={{ fontSize: '10px', marginBottom: '3px' }}
              />
            }
          />
        </Space.Compact>
      ) : null}
      {showControls && currentState.type === 'queued' ? (
        <Button
          onClick={() => {
            socket.emit('server.job_queue.cancel', {
              subJobId: subJob.id
            })
          }}
          style={{ height: '22px' }}
          icon={
            <CloseOutlined style={{ fontSize: '10px', marginBottom: '3px' }} />
          }
        />
      ) : null}
      {showControls && currentState.type === 'draft' ? (
        <Space>
          <Button
            onClick={() => {
              console.log('Hello')
            }}
            style={{ height: 'unset' }}
            icon={<DeleteOutlined style={{ fontSize: '12px' }} />}
          />
        </Space>
      ) : null}
    </Flex>
  )
}

SubJobState.propTypes = {
  subJob: PropTypes.shape({
    id: PropTypes.string,
    subJobId: PropTypes.string,
    printer: PropTypes.string,
    number: PropTypes.number,
    state: PropTypes.shape({
      type: PropTypes.string,
      progress: PropTypes.number
    })
  }),
  showProgress: PropTypes.bool,
  showControls: PropTypes.bool,
  showId: PropTypes.bool,
  showStatus: PropTypes.bool
}

export default SubJobState