{"size": 6644, "ext": "js", "max_stars_repo_path": "src/pages/Admin/Home/components/HistoryTab/ProcessingHistory.js", "max_stars_repo_name": "sikula/saigar-ctf", "max_stars_repo_stars_event_min_datetime": "2020-06-30T14:34:48.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-17T02:29:44.000Z", "max_issues_repo_path": "src/pages/Admin/Home/components/HistoryTab/ProcessingHistory.js", "max_issues_repo_name": "sikula/saigar-ctf", "max_issues_repo_issues_event_min_datetime": "2021-09-20T05:48:58.000Z", "max_issues_repo_issues_event_max_datetime": "2021-09-20T05:48:58.000Z", "max_forks_repo_path": "src/pages/Admin/Home/components/HistoryTab/ProcessingHistory.js", "max_forks_repo_name": "sikula/saigar-ctf", "max_forks_repo_forks_event_min_datetime": "2020-05-30T21:47:55.000Z", "max_forks_repo_forks_event_max_datetime": "2021-11-19T15:52:57.000Z"}
{"max_stars_count": 6, "max_issues_count": 1, "max_forks_count": 8, "avg_line_length": 37.5367231638, "max_line_length": 98, "alphanum_fraction": 0.4465683323}
/* eslint-disable react/require-default-props, react/forbid-prop-types */
import React from 'react'
import PropTypes from 'prop-types'
import { Query, Mutation } from 'react-apollo'
import gql from 'graphql-tag'

import format from 'date-fns/format'

// Styles
import { Icon } from '@blueprintjs/core'
import { IconNames } from '@blueprintjs/icons'

import { Timeline, TimelineEvent } from 'react-event-timeline'

// Custom Components
import { SlidingPane, SlidingPanelConsumer } from '@shared/components/SlidingPane'
import { AuthConsumer } from '@shared/components/AuthContext/context'

const SUBMISSION_HISTORY = gql`
  query submissionHistory($submissionID: uuid!) {
    submission(where: { uuid: { _eq: $submissionID } }) {
      submissionConfigurationByconfigId {
        category
        points
      }
      history(order_by: { processed_at: desc }) {
        decision
        processed_at
        processedByUser {
          role
          username
        }
        submission_configuration {
          category
          points
        }
        rejected_reason
        accepted_reason
      }
    }
  }
`

const SubmissionHistory = ({ isOpen, onRequestClose, ...otherProps }) => (
  <SlidingPane
    isOpen={isOpen}
    onRequestClose={onRequestClose}
    closeIcon={<Icon icon={IconNames.MENU_CLOSED} iconSize={20} />}
  >
    <SlidingPane.Header>
      <SlidingPane.Header.Title
        title="Processing History"
        subtitle="Complete history of this submission"
      />
      <SlidingPane.Header.Actions onActionClick={onRequestClose}>
        <a>Cancel</a>
      </SlidingPane.Header.Actions>
    </SlidingPane.Header>

    <SlidingPane.Content style={{ paddingLeft: 0, paddingRight: 0, paddingTop: 70 }}>
      <SlidingPanelConsumer>
        {({ closeSlider }) => (
          <AuthConsumer>
            {({ user }) => (
              <Query
                query={SUBMISSION_HISTORY}
                variables={{ submissionID: otherProps.submissionID }}
                fetchPolicy="network-only"
                skip={!otherProps.submissionID}
              >
                {({ data, loading, error }) => {
                  if (!data) return null
                  if (loading) return null
                  if (error) return `Error: ${error}`

                  const { submission } = data
                  const {
                    history: submissionHistory,
                    submissionConfigurationByconfigId: config,
                  } = submission[0]

                  return (
                    <div>
                      <Timeline>
                        {submissionHistory.map(submission => {
                          let icon
                          let color
                          let title

                          if (submission.decision === 'ACCEPTED') {
                            icon = IconNames.TICK
                            color = '#48AFF0'
                            title = (
                              <div>
                                {submission.processedByUser.role.toLowerCase()}{' '}
                                <strong>({submission.processedByUser.username})</strong>{' '}
                                {submission.decision.toLowerCase()} the submission for +
                                {config.points} points ({config.category.toLowerCase()})
                              </div>
                            )
                          }

                          if (submission.decision === 'REJECTED') {
                            icon = IconNames.CROSS
                            color = '#A82A2A'
                            title = (
                              <div>
                                {submission.processedByUser.role.toLowerCase()}
                                <strong>({submission.processedByUser.username})</strong>
                                {submission.decision.toLowerCase()} the submission
                              </div>
                            )
                          }

                          if (submission.decision === 'STARRED') {
                            icon = IconNames.STAR
                            color = '#3DCC91'
                            title = (
                              <div>
                                {submission.processedByUser.role.toLowerCase()}
                                <strong>({submission.processedByUser.username})</strong>
                                {submission.decision.toLowerCase()} the submission
                              </div>
                            )
                          }

                          if (submission.decision === 'UPDATED_POINTS') {
                            icon = IconNames.CHANGES
                            color = '#3DCC91'
                            title = (
                              <div>
                                {submission.processedByUser.role.toLowerCase()}
                                <strong>({submission.processedByUser.username})</strong>
                                updated the points on this submission to (
                                {submission.submission_configuration.category.toLowerCase()}){' '}
                                {submission.submission_configuration.points} points
                              </div>
                            )
                          }

                          return (
                            <TimelineEvent
                              title={title}
                              createdAt={format(new Date(submission.processed_at), 'HH:mm')}
                              icon={<Icon icon={icon} />}
                              contentStyle={{ background: '#EBF1F5' }}
                              iconColor="#FFF"
                              bubbleStyle={{ background: color }}
                              key={submission.uuid}
                            >
                              {submission.decision === 'ACCEPTED'
                                ? submission.accepted_reason
                                : submission.rejected_reason}
                            </TimelineEvent>
                          )
                        })}
                      </Timeline>
                    </div>
                  )
                }}
              </Query>
            )}
          </AuthConsumer>
        )}
      </SlidingPanelConsumer>
    </SlidingPane.Content>
  </SlidingPane>
)

SubmissionHistory.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  onRequestClose: PropTypes.func.isRequired,
  otherProps: PropTypes.any,
}

export default SubmissionHistory
