From 85a7b54a1331eeafae3e8e11200b731dd98552b1 Mon Sep 17 00:00:00 2001
From: Thomas Ruoff <ThomasRuoff@gmail.com>
Date: Sun, 14 Feb 2021 22:47:44 +0100
Subject: [PATCH] drop some types in

---
 components/Button.tsx        |  6 +++---
 components/Header.tsx        |  2 +-
 components/Input.tsx         | 24 ++++++++++++++++++------
 components/LatestList.tsx    | 24 ++++++++++++++++++------
 components/Layout.tsx        |  4 ++--
 components/LetterOptions.tsx |  7 ++++++-
 components/Preview.tsx       | 20 ++++++++++++++------
 components/Select.tsx        | 20 +++++++++++++++-----
 components/TextAreaInput.tsx | 23 +++++++++++++++--------
 components/apiHelper.tsx     |  4 +++-
 components/index.tsx         |  6 ------
 interfaces/IDocProps.tsx     | 15 +++++++++++++++
 interfaces/ILatest.tsx       |  6 ++++++
 13 files changed, 116 insertions(+), 45 deletions(-)
 delete mode 100644 components/index.tsx
 create mode 100644 interfaces/IDocProps.tsx
 create mode 100644 interfaces/ILatest.tsx

diff --git a/components/Button.tsx b/components/Button.tsx
index 1e42435..e647bfe 100644
--- a/components/Button.tsx
+++ b/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}>
-      {props.children}
+    <button className="p-button" onClick={onClick}>
+      {children}
     </button>
   )
 }
diff --git a/components/Header.tsx b/components/Header.tsx
index 0bbadb6..6fb7149 100644
--- a/components/Header.tsx
+++ b/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>
diff --git a/components/Input.tsx b/components/Input.tsx
index 5002eae..8aeac7a 100644
--- a/components/Input.tsx
+++ b/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}
-        onChange={props.onchange.bind(null, props.name)}
-        value={props.value}
+        placeholder={placeholder}
+        onChange={onchange.bind(null, name)}
+        value={value}
       />
     </label>
   )
diff --git a/components/LatestList.tsx b/components/LatestList.tsx
index 09cacb6..723b9d5 100644
--- a/components/LatestList.tsx
+++ b/components/LatestList.tsx
@@ -1,18 +1,30 @@
 import React from 'react'
+import { ILatest } from '../interfaces/ILatest'
 import Button from './Button'
 
-export default function (props) {
-  const latest = props.latest || []
+export default function LatestList({
+  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)}>
-          {created.toLocaleString()}
+        <a href={hrefId} onClick={() => onSelect(item)}>
+          <div>{subject}</div>
+          <div>{created.toLocaleDateString()}</div>
         </a>
-        <span> </span>
-        <Button onClick={() => props.onRemove(item)}>Remove</Button>
+        <Button onClick={() => onRemove(item)}>Remove</Button>
       </li>
     )
   })
diff --git a/components/Layout.tsx b/components/Layout.tsx
index c1318b5..90a43b3 100644
--- a/components/Layout.tsx
+++ b/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>
   )
 }
diff --git a/components/LetterOptions.tsx b/components/LetterOptions.tsx
index eec156f..bb083bc 100644
--- a/components/LetterOptions.tsx
+++ b/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',
diff --git a/components/Preview.tsx b/components/Preview.tsx
index 8e0cced..96bca0c 100644
--- a/components/Preview.tsx
+++ b/components/Preview.tsx
@@ -1,7 +1,15 @@
 import React from 'react'
 
-export default (props) => {
-  if (props.pdfIsLoading) {
+export default function Preview({
+  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" />
 }
diff --git a/components/Select.tsx b/components/Select.tsx
index f14c694..2059c93 100644
--- a/components/Select.tsx
+++ b/components/Select.tsx
@@ -1,12 +1,22 @@
 import React from 'react'
 
-export default (props) => {
-  const { options = [] } = props
-
+export default function Select({
+  name,
+  text,
+  value,
+  onchange,
+  options = [],
+}: {
+  name: string
+  text: string
+  value: string
+  onchange: () => void
+  options: { name: string; value: string }[]
+}) {
   return (
     <label>
-      {props.text}
-      <select className={props.name} onChange={props.onchange.bind(null, props.name)} value={props.value}>
+      {text}
+      <select className={name} onChange={onchange.bind(null, name)} value={value}>
         {options.map((option) => (
           <option value={option.value} key={option.value}>
             {option.name}
diff --git a/components/TextAreaInput.tsx b/components/TextAreaInput.tsx
index 782ce82..c3083d5 100644
--- a/components/TextAreaInput.tsx
+++ b/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}
-      <textarea
-        className={props.name}
-        placeholder={props.placeholder}
-        onChange={props.onchange.bind(null, props.name)}
-        value={props.value}
-      />
+      {text}
+      <textarea className={name} placeholder={placeholder} onChange={onchange.bind(null, name)} value={value} />
     </label>
   )
 }
diff --git a/components/apiHelper.tsx b/components/apiHelper.tsx
index ff1bd53..a56334a 100644
--- a/components/apiHelper.tsx
+++ b/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()
diff --git a/components/index.tsx b/components/index.tsx
deleted file mode 100644
index fde0d67..0000000
--- a/components/index.tsx
+++ /dev/null
@@ -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'))
diff --git a/interfaces/IDocProps.tsx b/interfaces/IDocProps.tsx
new file mode 100644
index 0000000..fe784b5
--- /dev/null
+++ b/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
+}
diff --git a/interfaces/ILatest.tsx b/interfaces/ILatest.tsx
new file mode 100644
index 0000000..1262db2
--- /dev/null
+++ b/interfaces/ILatest.tsx
@@ -0,0 +1,6 @@
+import { IDocProps } from './IDocProps'
+
+export interface ILatest extends IDocProps {
+  id: string
+  created: Date
+}