drop some types in

components/Button.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-export default function (props) {
+export default function Button({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
   return (
-    <button className="p-button" onClick={props.onClick}>
+    <button className="p-button" onClick={onClick}>
-      {props.children}
+      {children}
     </button>
   )
 }

components/Header.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default function () {
+export default function Header() {
   return (
     <header className="header">
       <h1>PDFer</h1>

components/Input.tsx

@@ -1,15 +1,27 @@
 import React from 'react'
 
-export default function (props) {
+export default function Input({
+  text,
+  name,
+  value,
+  placeholder,
+  onchange,
+}: {
+  text: string
+  name: string
+  value: string
+  placeholder: string
+  onchange: () => void
+}) {
   return (
     <label>
-      {props.text}
+      {text}
       <input
-        className={props.name}
+        className={name}
         type="text"
-        placeholder={props.placeholder}
+        placeholder={placeholder}
-        onChange={props.onchange.bind(null, props.name)}
+        onChange={onchange.bind(null, name)}
-        value={props.value}
+        value={value}
       />
     </label>
   )

components/LatestList.tsx

@@ -1,18 +1,30 @@
 import React from 'react'
+import { ILatest } from '../interfaces/ILatest'
 import Button from './Button'
 
-export default function (props) {
+export default function LatestList({
-  const latest = props.latest || []
+  latest,
+  onSelect,
+  onRemove,
+}: {
+  latest: ILatest[]
+  onSelect: (l: ILatest) => void
+  onRemove: (l: ILatest) => void
+}) {
+  if (!latest || !latest.length) {
+    return null
+  }
   const latestElements = latest.map((item) => {
     const created = new Date(item.created)
+    const subject = item.subject
     const hrefId = `#item-${item.id}`
     return (
       <li key={item.id}>
-        <a href={hrefId} onClick={() => props.onSelect(item)}>
+        <a href={hrefId} onClick={() => onSelect(item)}>
-          {created.toLocaleString()}
+          <div>{subject}</div>
+          <div>{created.toLocaleDateString()}</div>
         </a>
-        <span> </span>
+        <Button onClick={() => onRemove(item)}>Remove</Button>
-        <Button onClick={() => props.onRemove(item)}>Remove</Button>
       </li>
     )
   })

components/Layout.tsx

@@ -2,11 +2,11 @@ import React from 'react'
 
 import Header from './Header'
 
-export default function (props) {
+export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div id="app">
       <Header />
-      <div id="content">{props.children}</div>
+      <div id="content">{children}</div>
     </div>
   )
 }

components/LetterOptions.tsx

@@ -4,12 +4,17 @@ import Collapsible from 'react-collapsible'
 import Input from './Input'
 import TextAreaInput from './TextAreaInput'
 import Select from './Select'
+import { IDocProps } from '../interfaces/IDocProps'
 
 //import './LetterOptions.css';
 
 const EXAMPLE_ADDRESS = 'Max Mustermann\nMusterstr. 73\n12345 Musterstadt'
 
-export default function (props) {
+interface IProps extends IDocProps {
+  onChange: () => void
+}
+
+export default function LetterOptions(props: IProps) {
   const templateTypeOptions = [
     {
       value: 'brief-fam',

components/Preview.tsx

@@ -1,7 +1,15 @@
 import React from 'react'
 
-export default (props) => {
+export default function Preview({
-  if (props.pdfIsLoading) {
+  pdfIsLoading,
+  pdfError,
+  pdfUrl,
+}: {
+  pdfIsLoading: boolean
+  pdfError: string
+  pdfUrl: string
+}) {
+  if (pdfIsLoading) {
     return <div>Lade&hellip;</div>
   }
 
@@ -12,18 +20,18 @@ export default (props) => {
     borderRadius: '3px',
   }
 
-  if (props.pdfError) {
+  if (pdfError) {
     return (
       <div style={errorStyles}>
         <span role="img" aria-label="Crying Man">
           😢
         </span>{' '}
-        {props.pdfError}
+        {pdfError}
       </div>
     )
   }
 
-  if (!props.pdfUrl) {
+  if (!pdfUrl) {
     return <div>Knopf drücken dann gibts hier was zu sehen!</div>
   }
 
@@ -32,5 +40,5 @@ export default (props) => {
     height: '1050px',
   }
 
-  return <embed src={props.pdfUrl} style={styles} type="application/pdf" />
+  return <embed src={pdfUrl} style={styles} type="application/pdf" />
 }

components/Select.tsx

@@ -1,12 +1,22 @@
 import React from 'react'
 
-export default (props) => {
+export default function Select({
-  const { options = [] } = props
+  name,
-
+  text,
+  value,
+  onchange,
+  options = [],
+}: {
+  name: string
+  text: string
+  value: string
+  onchange: () => void
+  options: { name: string; value: string }[]
+}) {
   return (
     <label>
-      {props.text}
+      {text}
-      <select className={props.name} onChange={props.onchange.bind(null, props.name)} value={props.value}>
+      <select className={name} onChange={onchange.bind(null, name)} value={value}>
         {options.map((option) => (
           <option value={option.value} key={option.value}>
             {option.name}

components/TextAreaInput.tsx

@@ -1,15 +1,22 @@
 import React from 'react'
 
-export default function (props) {
+export default function TextAreaInput({
+  text,
+  name,
+  placeholder,
+  onchange,
+  value,
+}: {
+  text: string
+  name: string
+  placeholder: string
+  onchange: () => void
+  value: string
+}) {
   return (
     <label>
-      {props.text}
+      {text}
-      <textarea
+      <textarea className={name} placeholder={placeholder} onChange={onchange.bind(null, name)} value={value} />
-        className={props.name}
-        placeholder={props.placeholder}
-        onChange={props.onchange.bind(null, props.name)}
-        value={props.value}
-      />
     </label>
   )
 }

components/apiHelper.tsx

@@ -1,3 +1,5 @@
+import { ILatest } from '../interfaces/ILatest'
+
 function checkStatus(res: Response) {
   if (res.status < 200 || res.status >= 400) {
     throw new Error(`Something went wrong (Status ${res.status}) - I do feel very sorry!`)
@@ -18,7 +20,7 @@ export async function generatePdf(state: Record<string, string>) {
   return response.json()
 }
 
-export async function getLatest() {
+export async function getLatest(): Promise<ILatest[]> {
   const response = await fetch('/api/pdf/latest')
   checkStatus(response)
   return response.json()

components/index.tsx

@@ -1,6 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
-import './index.css'
-
-ReactDOM.render(<App />, document.getElementById('root'))

interfaces/IDocProps.tsx

@@ -0,0 +1,15 @@
+export interface IDocProps {
+  template: string
+  subject: string
+  body: string
+  address: string
+  date?: string
+  opening?: string
+  closing?: string
+  yourRef?: string
+  yourMail?: string
+  myRef?: string
+  customer?: string
+  invoice?: string
+  specialMail?: string
+}

interfaces/ILatest.tsx

@@ -0,0 +1,6 @@
+import { IDocProps } from './IDocProps'
+
+export interface ILatest extends IDocProps {
+  id: string
+  created: Date
+}