AutoMate/frontend/components/File.js

import styled from 'styled-components'
import { endpoint } from '../config'

const FileStyle = styled.div`
  display: grid;
  grid-template-columns: 250px 100px 1fr;
  grid-auto-flow: dense;
  align-items: start;
  justify-items: start;
  align-content: start;
  justify-content: start;

  a,
  img {
    grid-row: span 6;
    max-width: 230px;
    max-height: 140px;
    justify-self: center;
  }

  h2 {
    grid-column: span 2;
    margin: 0 0 0.5em 0;
    line-height: 1;
  }

  .description {
    grid-column: span 2;
  }

  p {
    margin: 0;
    line-height: 1.5;
  }
`

const FileFields = {
  id: null,
  name: '',
  description: '',
  file: null
}

const FileFormFields = props => {
  const { state, onChange } = props

  const toState = event => {
    if (event.target.type === 'file') {
      onChange({ ...state, [event.target.name]: event.target.files[0] })
    } else {
      onChange({ ...state, [event.target.name]: event.target.value })
    }
  }

  return (
    <fieldset>
      <label htmlFor='name'>Name</label>
      <input
        type='text'
        name='name'
        id='name'
        placeholder='Name'
        value={state.name}
        onChange={toState}
      />
      <label htmlFor='description'>Description</label>
      <textarea
        name='description'
        id='description'
        placeholder='Description'
        value={state.description}
        onChange={toState}
      />
      <input type='file' required name='file' onChange={toState} />
    </fieldset>
  )
}

const File = props => {
  const { path, name, description, filename, mimetype, size } = props.data
  const downloadPath = `${endpoint}/${path}`
  return (
    <FileStyle>
      {mimetype.startsWith('image/') ? (
        <img src={downloadPath} alt={description} />
      ) : (
        <a href={downloadPath}>
          <img
            src={`${endpoint}/static/document-download-solid.png`}
            alt={description}
            width={75}
          />
        </a>
      )}
      <h2>{name}</h2>
      <p className='description'>{description}</p>
      <p>Path</p>
      <p>
        <a href={downloadPath}>{downloadPath}</a>
      </p>
      <p>Filename</p>
      <p>{filename}</p>
      <p>MIME Type</p>
      <p>{mimetype}</p>
      <p>Size</p>
      <p>{size}</p>
    </FileStyle>
  )
}

export default File
export { FileFormFields, FileFields }