u-fit/frontend/pages/admin/training/index.tsx

import {
  useTrainingsQuery,
  useDeleteTrainingMutation,
  TrainingsDocument,
  usePublishMutation,
  TrainingsQuery,
} from '../../../src/gql'
import { FunctionComponent } from 'react'
import { TTraining } from '../../../src/training/types'
import { AdminList } from '../../../src/app'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
import theme from '../../../src/styles/theme'

const AdminTraining: FunctionComponent<{ item: TTraining; className?: string }> = ({
  item,
  className,
}) => {
  const [publish, publishResult] = usePublishMutation({
    refetchQueries: [{ query: TrainingsDocument }],
  })

  return (
    <div className={className}>
      <div>
        <button
          type='button'
          title='publish'
          onClick={(event) =>
            publish({ variables: { training: item.id, status: !item.published } })
          }
          className={item.published ? 'true' : 'false'}
        >
          <FontAwesomeIcon icon={faEye} height={16} />
        </button>
      </div>
      <div className='admin-training-title'>{item.title}</div>{' '}
      <div className='admin-training-blocks'>
        {item.blocks?.map((block) => block.block.title).join(' ')}
      </div>
      <div className='admin-training-date'>{new Date(item.trainingDate).toLocaleString()}</div>
      <style jsx>{`
        .${className} {
          display: flex;
        }
        .admin-training-title {
          width: 15%;
        }
        .admin-training-blocks {
          width: 65%;
        }
        .admin-training-date {
          width: 20%;
          text-align: right;
        }
        button {
          margin: 0 0.4em;
          padding: 0;
          color: ${theme.colors.buttonBackground};
          background-color: transparent;
        }
        button.false {
          color: #5557;
        }
      `}</style>
    </div>
  )
}

const AdminTrainings = () => {
  const props = {
    name: 'Trainings',
    adminMenu: '/admin/training',
    get: useTrainingsQuery,
    remove: useDeleteTrainingMutation,
    dataKey: 'trainings' as keyof TrainingsQuery,
    Component: AdminTraining,
  }
  return <AdminList {...props} />
}

export default AdminTrainings