u-fit/frontend/components/training.js

import theme from '../styles/theme'
import { Formik, Form } from 'formik'
import { Query } from 'react-apollo'

import { TRAINING } from '../lib/graphql'
import { TextInput } from '../lib/forms'

function calculateRating(ratings) {
  const numberOfRatings = ratings.length
  const sumOfRatings = ratings.reduce(
    (accumulator, rating) => accumulator + rating.value,
    0
  )
  return numberOfRatings ? sumOfRatings / numberOfRatings : '-'
}

const TrainingArchive = props => (
  <div>
    <h2>Training Archive</h2>
    <ol>
      {props.trainings.map(training => (
        <TrainingHint key={training.id} training={training} />
      ))}
    </ol>
  </div>
)

const TrainingHint = props => (
  <div>
    <div>{props.training.date}</div>
    <div>{props.training.title}</div>
  </div>
)

const Training = props => (
  <article>
    <h2>{props.title}</h2>
    <aside>
      <div id='trainingType'>
        <span className='caption'>Type: </span>
        <span className='data'>{props.type.name}</span>
      </div>
      <div id='trainingDate'>
        <span className='caption'>Date: </span>
        <span className='data'>
          {new Date(props.trainingDate).toLocaleDateString()}
        </span>
      </div>
      <div id='trainingLocation'>
        <span className='caption'>Location: </span>
        <span className='data'>{props.location}</span>
      </div>
      <div id='trainingRegistrations'>
        <span className='caption'>Registrations: </span>
        <span className='data'> {props.registration.length} </span>
      </div>
      <div id='trainingAttendance'>
        <span className='caption'>Attendance: </span>
        <span className='data'>{props.attendance}</span>
      </div>
      <div id='trainingRatings'>
        <span className='caption'>Rating: </span>
        <span className='data'>
          {calculateRating(props.ratings)} [
          <a href=''>{props.ratings.length}</a>] Rate it!
          <a href=''>*</a>
          <a href=''>*</a>
          <a href=''>*</a>
          <a href=''>*</a>
          <a href=''>*</a>
        </span>
      </div>
      <button>Register now!</button>
    </aside>
    <section>
      <h3>Content</h3>
      <ol>
        {props.content
          .sort(block => block.sequence)
          .map(block => (
            <Block key={block.id} {...block} />
          ))}
      </ol>
    </section>

    <style jsx>
      {`
        article {
          display: grid;
          grid-template-areas:
            'title title'
            'information placeholder'
            'content content';
          grid-template-columns: 1fr 2fr;
          background-color: rgba(127, 127, 127, 0.5);
          background-image: url('media/man_working_out.jpg');
          background-size: auto 400px;
          background-repeat: no-repeat;
          margin: 2em 0;
        }

        article > * {
          padding: 0.2em 1em;
        }

        article > h2 {
          grid-area: title;
          font-weight: 900;
          font-size: 120%;
          background: ${theme.colors.darkerblue};
          color: ${theme.colors.offWhite};
        }

        aside {
          grid-area: information;
          background: rgba(0, 127, 0, 0.5);
          padding: 1em 2em;
          margin: 0 1em;
          min-height: 350px;
        }

        section {
          grid-area: content;
          padding: 1em 2em;
          background: rgba(127, 0, 0, 0.5);
        }

        span.caption {
          display: none;
        }
      `}
    </style>
  </article>
)

const Youtube = props => {
  const { link, rest } = props
  const [crap, src] = props.link.match(/\?v=(.*)/)
  return (
    <iframe
      width='285'
      height='160'
      src={`https://www.youtube.com/embed/${src}`}
      frameBorder='0'
      allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
      allowFullScreen
      {...rest}
    />
  )
}

const Spotify = props => {
  const src = props.link.match(/track\/(.*)/)[1]
  return (
    <iframe
      src={`https://open.spotify.com/embed/track/${src}`}
      width='300'
      height='80'
      frameBorder='0'
      allowtransparency='true'
      allow='encrypted-media'
    />
  )
}

const Media = props => {
  if (props.link.includes('youtube.com')) {
    return <Youtube {...props} />
  } else if (props.link.includes('spotify.com')) {
    return <Spotify {...props} />
  } else {
    return <p>Link not recognized.</p>
  }
}

const Block = props => (
  <li>
    <h2>{props.title}</h2>
    <p>
      <span className='caption'>Duration: </span>
      <span className='data'>{props.duration}</span>
    </p>
    <p>
      <span className='caption'>Variation: </span>
      <span className='data'>{props.variation}</span>
    </p>
    <p>
      <span className='caption'>Description: </span>
      <span className='data'>{props.description}</span>
    </p>
    <p>
      <span className='caption'>Format: </span>
      <span className='data'>
        {props.format.name}{' '}
        <sup>
          <a title={props.format.description}>[?]</a>
        </sup>
      </span>
    </p>
    <section>
      <h2>Tracks</h2>
      <ol>
        {props.tracks.map(track => (
          <Track key={track.id} {...track} />
        ))}
      </ol>
    </section>
    <section>
      <h2>Exercises</h2>
      <ol>
        {props.exercises.map(exercise => (
          <Exercise key={exercise.id} {...exercise} />
        ))}
      </ol>
    </section>

    <style jsx>
      {`
        section {
          display: grid;
        }
      `}
    </style>
  </li>
)

const Track = props => {
  return (
    <section>
      <p>
        Track {props.id}: {props.title} ({props.artist})
      </p>
      <Media link={props.link} />
    </section>
  )
}

const Exercise = props => {
  return (
    <section>
      <p>
        Exercise {props.id}: {props.name}
      </p>
    </section>
  )
}

const TrainingCreateForm = props => (
  <Formik
    initialVariables={{
      title: '',
      type: '',
      content: [],
      trainingDate: '',
      location: '',
      registration: [],
      attendance: 0,
      ratings: [],
      published: false
    }}
    onSubmit={ev => console.log(ev)}
  >
    {() => (
      <Form>
        <label htmlFor='title'>
          Title
          <input type='text' id='title' />
        </label>
        <label htmlFor='title'>
          Title
          <input type='text' id='title' />
        </label>
        <label htmlFor='title'>
          Title
          <input type='text' id='title' />
        </label>
      </Form>
    )}
  </Formik>
)

export { TrainingArchive, TrainingCreateForm }
export default Training