pdfer/components/App.tsx

import React, { useState, useEffect } from 'react'
import LetterOptions from './LetterOptions'
import Button from './Button'
import Preview from './Preview'
import LatestList from './LatestList'
import { generatePdf, getLatest, removeLatest } from './apiHelper'
import { ILatest } from '../interfaces/ILatest'
import { IDocProps } from '../interfaces/IDocProps'

export default function App() {
  const [options, setOptions] = useState<IDocProps>({
    address: 'Max Mustermann\nMusterstrasse\n12345 Musterstadt',
    body: 'Inhalt des Briefs',
    closing: 'Mit freundlichen Grüßen',
    customer: '',
    date: new Date().toLocaleDateString('de-DE'),
    enclosing: '',
    invoice: '',
    myRef: '',
    opening: 'Sehr geehrte Damen und Herren',
    ps: '',
    signature: '',
    specialMail: '',
    subject: 'Betreffzeile',
    letterOption: 'brief-fam',
    yourMail: '',
    yourRef: '',
    yourRefName: '',
  })
  const [latest, setLatest] = useState<ILatest[]>([])
  const [pdfUrl, setPdfUrl] = useState<string | null>(null)
  const [pdfIsLoading, setPdfIsLoading] = useState<boolean>(false)
  const [pdfError, setPdfError] = useState<string | null>(null)

  useEffect(() => {
    async function getLatestEffect() {
      try {
        const latest = await getLatest()
        setLatest(latest)
      } catch (err) {
        console.error('Unable to get latest:', err)
      }
    }
    getLatestEffect()
  }, [pdfUrl])

  const _onChange = (name: string, event: React.ChangeEvent<{ value: string }>) => {
    if (!name) {
      return
    }
    const value = event && event.target && event.target.value
    setOptions({ ...options, [name]: value })
  }

  const _onSelectLatest = (selectedOption: ILatest) => {
    setOptions({ ...selectedOption })
  }

  const _onRemoveLatest = async (item: ILatest) => {
    await removeLatest(item)
    setLatest(latest.filter((curr) => curr.id !== item.id))
  }

  const _onClear = () => {
    window.location.reload()
  }

  const _onGenerate = async () => {
    setPdfIsLoading(true)
    setPdfError(null)

    try {
      const url = await generatePdf(options)
      setPdfIsLoading(false)
      setPdfUrl(url)
    } catch (error) {
      setPdfIsLoading(false)
      setPdfError(error.message)
      setPdfUrl(null)
    }
  }

  return (
    <div className="flex space-x-5 py-3 sm:px-2 lg:px-3 bg-gray-100">
      <div className=" flex-grow flex flex-col shadow sm:rounded-md sm:overflow-hidden">
        <LetterOptions onChange={_onChange} {...options} />
        <div className="flex space-x-3 p-3">
          <Button onClick={_onGenerate}>PDF Erstellen</Button>
          <Button onClick={_onClear}>Alles Löschen</Button>
        </div>
        <Preview pdfUrl={pdfUrl} pdfIsLoading={pdfIsLoading} pdfError={pdfError} />
      </div>
      <LatestList latest={latest} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
    </div>
  )
}