u-fit/frontend/src/training/components/RegistrationButton.tsx

import { useRegisterMutation, useDeregisterMutation, User, TrainingDocument } from '../../gql'
import { FunctionComponent, useContext } from 'react'
import { UserContext } from '../../user/hooks'
import { TTraining } from '../types'
import theme from '../../styles/theme'

type TRegisterButton = FunctionComponent<{ training: TTraining }>

const RegistrationButton: TRegisterButton = ({ training: { id, registrations } }) => {
  const [register, registerData] = useRegisterMutation({
    variables: { training: id },
    refetchQueries: [{ query: TrainingDocument }],
  })
  const [deregister, deregisterData] = useDeregisterMutation({
    variables: { training: id },
    refetchQueries: [{ query: TrainingDocument }],
  })
  const { user } = useContext(UserContext)

  const isRegistered =
    !!registrations &&
    !!user?.data?.currentUser.id &&
    !!registrations.find((registeredUser) => registeredUser.id === user.data?.currentUser.id)
  const onChange = isRegistered ? () => deregister() : () => register()
  const label = isRegistered ? 'Cancel 😱' : 'Register now 😀'
  const className = isRegistered ? 'registered' : 'not-registered'

  return (
    <span className='register-container'>
      <input
        id='register'
        name='register'
        className='register'
        type='checkbox'
        onChange={onChange}
        checked={isRegistered}
        disabled={registerData.loading || deregisterData.loading}
      />

      <label htmlFor='register' className='register-label'>
        {label}
        <span />
      </label>
      {registerData.error && registerData.error.message}
      {deregisterData.error && deregisterData.error.message}
      <style jsx>{`
        .register-container {
          position: relative;
          display: inline-block;
        }

        .register {
          display: none;
        }

        .register-label {
          display: inline;
          position: relative;
          align-items: center;
          margin-left: 1em;
          height: 100%;
          cursor: pointer;
        }

        .register-label span {
          position: absolute;
          display: grid;
          padding: 0;
          margin: 0;
          align-items: center;
          transition: all 400ms ease-in-out;

          height: 2em;
          width: 2em;
          background-color: #5d6a6b00;
          border: 2px solid #60000055;
          border-radius: 0px;
        }
        .register-label span::before,
        .register-label span::after {
          content: '';
          height: 4px;
          background-color: #600000;
          border-radius: 2px;
          position: absolute;
          left: 0.2em;
          right: 0.2em;
          transform: rotate(0deg);
          transition: all 200ms ease-in-out 200ms;
        }
        .register-label span::before {
          transform: translate(0) rotate(45deg);
        }
        .register-label span::after {
          transform: translate(0) rotate(-45deg);
        }

        .register:checked ~ .register-label span {
          height: 2em;
          width: 2em;
          border: 2px solid #00600055;
          border-radius: 0px;
        }

        .register:checked ~ .register-label span::before {
          left: 0.45em;
          right: 0.45em;
          background-color: #006000;
          transform: translate(-35%, 80%) rotate(50deg);
        }

        .register:checked ~ .register-label span::after {
          left: 0.25em;
          right: 0.25em;
          background-color: #006000;
          transform: translate(16%, 0%) rotate(-55deg);
        }

        .register:disabled ~ .register-label span {
          border: 2px solid #00000022;
        }

        .register:disabled ~ .register-label span::before {
          left: 0.2em;
          right: 0.2em;
          background-color: #00000022;
          transform: translate(0%, -100%) rotate(0deg);
        }

        .register:disabled ~ .register-label span::after {
          left: 0.2em;
          right: 0.2em;
          background-color: #00000022;
          transform: translate(0%, 100%) rotate(0deg);
        }
      `}</style>
    </span>
  )
}

export default RegistrationButton