From 3386fb39283cfd077e038c5733a2c2441818a21a Mon Sep 17 00:00:00 2001
From: Thomas Ruoff <ThomasRuoff@gmail.com>
Date: Mon, 15 Feb 2021 23:29:25 +0100
Subject: [PATCH] fix all type errors

---
 components/App.tsx                         | 143 ++++++++++-----------
 components/Input.tsx                       |   8 +-
 components/LetterOptions.tsx               |   2 +-
 components/Preview.tsx                     |  11 +-
 components/Select.tsx                      |   2 +-
 components/TextAreaInput.tsx               |   2 +-
 components/apiHelper.tsx                   |   3 +-
 interfaces/{IDocProps.tsx => IDocProps.ts} |   0
 interfaces/{ILatest.tsx => ILatest.ts}     |   0
 interfaces/IPdfProps.ts                    |   5 +
 lib/store.ts                               |   1 +
 lib/templates.ts                           |   6 +-
 pages/api/pdf/[id].ts                      |  70 +++++-----
 pages/index.tsx                            |   2 +-
 14 files changed, 123 insertions(+), 132 deletions(-)
 rename interfaces/{IDocProps.tsx => IDocProps.ts} (100%)
 rename interfaces/{ILatest.tsx => ILatest.ts} (100%)
 create mode 100644 interfaces/IPdfProps.ts

diff --git a/components/App.tsx b/components/App.tsx
index 83393ce..b1fb3b6 100644
--- a/components/App.tsx
+++ b/components/App.tsx
@@ -1,96 +1,83 @@
-import React, { Component } from 'react'
+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'
 
 //import './App.css';
 
-class App extends Component {
-  componentDidMount() {
-    this._getLatest()
-  }
+export default function App() {
+  const [options, setOptions] = useState<IDocProps>({
+    template: 'brief-fam',
+    subject: '',
+    body: '',
+    address: '',
+  })
+  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)
 
-  render() {
-    const state: Record<string, unknown> = this.state || {}
-
-    return (
-      <div className="home">
-        <div>
-          <LetterOptions onChange={this._onChange.bind(this)} {...state.options} />
-          <LatestList
-            latest={state.latest}
-            onSelect={this._onSelectLatest.bind(this)}
-            onRemove={this._onRemoveLatest.bind(this)}
-          />
-        </div>
-        <div>
-          <div>
-            <Button onClick={this._onGenerate.bind(this)}>Backe PDF</Button>
-            <Button onClick={this._onClear.bind(this)}>Alles Löschen</Button>
-          </div>
-          <Preview pdfUrl={state.pdfUrl} pdfIsLoading={state.pdfIsLoading} pdfError={state.pdfError} />
-        </div>
-      </div>
-    )
-  }
-
-  _onSelectLatest(selectedOptions) {
-    this.setState({ options: Object.assign({}, selectedOptions) })
-  }
-
-  _onRemoveLatest(item) {
-    removeLatest(item).then(() => {
-      const latest = this.state.latest.filter((curr) => curr.id !== item.id)
-
-      this.setState({ latest })
-    })
-  }
-
-  _onClear() {
-    window.location.reload()
-  }
-
-  _onGenerate() {
-    const state = this.state || {}
-    this.setState({
-      pdfIsLoading: true,
-      pdfError: null,
-    })
-
-    generatePdf(state.options)
-      .then((data) => {
-        const { id } = data
-        this.setState({
-          pdfIsLoading: false,
-          pdfUrl: `/api/pdf/${id}`,
-        })
-      })
-      .catch((error) => {
-        this.setState({
-          pdfIsLoading: false,
-          pdfError: error.message,
-          pdfUrl: null,
-        })
-      })
-      .then(() => this._getLatest())
-  }
-
-  _getLatest() {
+  useEffect(() => {
     getLatest()
-      .then((latest) => this.setState({ latest }))
+      .then((latest) => setLatest(latest))
       .catch((err) => console.error('Unable to get latest:', err))
-  }
+  }, [pdfUrl])
 
-  _onChange(name, event) {
+  const _onChange = (name: string, event: React.ChangeEvent<{ value: string }>) => {
     if (!name) {
       return
     }
     const value = event && event.target && event.target.value
-    const options = Object.assign({}, this.state.options, { [name]: value || undefined })
-    this.setState({ options })
+    setOptions({ ...options, [name]: value || undefined })
   }
-}
 
-export default App
+  const _onSelectLatest = (selectedOption: ILatest) => {
+    setOptions({ ...selectedOption })
+  }
+
+  const _onRemoveLatest = (item: ILatest) => {
+    removeLatest(item).then(() => setLatest(latest.filter((curr) => curr.id !== item.id)))
+  }
+
+  const _onClear = () => {
+    window.location.reload()
+  }
+
+  const _onGenerate = () => {
+    setPdfIsLoading(true)
+    setPdfError(null)
+
+    generatePdf(options)
+      .then((data) => {
+        const { id } = data
+
+        setPdfIsLoading(false)
+        setPdfUrl(`/api/pdf/${id}`)
+      })
+      .catch((error) => {
+        setPdfIsLoading(false)
+        setPdfError(error.message)
+        setPdfUrl(null)
+      })
+  }
+
+  return (
+    <div className="home">
+      <div>
+        <LetterOptions onChange={_onChange} {...options} />
+        <LatestList latest={latest} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
+      </div>
+      <div>
+        <div>
+          <Button onClick={_onGenerate}>Backe PDF</Button>
+          <Button onClick={_onClear}>Alles Löschen</Button>
+        </div>
+        <Preview pdfUrl={pdfUrl} pdfIsLoading={pdfIsLoading} pdfError={pdfError} />
+      </div>
+    </div>
+  )
+}
diff --git a/components/Input.tsx b/components/Input.tsx
index 8aeac7a..2244ad8 100644
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -3,15 +3,15 @@ import React from 'react'
 export default function Input({
   text,
   name,
-  value,
+  value = '',
   placeholder,
   onchange,
 }: {
   text: string
   name: string
-  value: string
-  placeholder: string
-  onchange: () => void
+  value?: string
+  placeholder?: string
+  onchange: (name: string, event: React.ChangeEvent<HTMLInputElement>) => void
 }) {
   return (
     <label>
diff --git a/components/LetterOptions.tsx b/components/LetterOptions.tsx
index bb083bc..f14f3c5 100644
--- a/components/LetterOptions.tsx
+++ b/components/LetterOptions.tsx
@@ -11,7 +11,7 @@ import { IDocProps } from '../interfaces/IDocProps'
 const EXAMPLE_ADDRESS = 'Max Mustermann\nMusterstr. 73\n12345 Musterstadt'
 
 interface IProps extends IDocProps {
-  onChange: () => void
+  onChange: (name: string, event: React.ChangeEvent<{ value: string }>) => void
 }
 
 export default function LetterOptions(props: IProps) {
diff --git a/components/Preview.tsx b/components/Preview.tsx
index 96bca0c..681a755 100644
--- a/components/Preview.tsx
+++ b/components/Preview.tsx
@@ -1,14 +1,7 @@
 import React from 'react'
+import { IPdfProps } from '../interfaces/IPdfProps'
 
-export default function Preview({
-  pdfIsLoading,
-  pdfError,
-  pdfUrl,
-}: {
-  pdfIsLoading: boolean
-  pdfError: string
-  pdfUrl: string
-}) {
+export default function Preview({ pdfIsLoading, pdfError, pdfUrl }: IPdfProps) {
   if (pdfIsLoading) {
     return <div>Lade&hellip;</div>
   }
diff --git a/components/Select.tsx b/components/Select.tsx
index 2059c93..909fa7c 100644
--- a/components/Select.tsx
+++ b/components/Select.tsx
@@ -10,7 +10,7 @@ export default function Select({
   name: string
   text: string
   value: string
-  onchange: () => void
+  onchange: (name: string, event: React.ChangeEvent<{ value: string }>) => void
   options: { name: string; value: string }[]
 }) {
   return (
diff --git a/components/TextAreaInput.tsx b/components/TextAreaInput.tsx
index c3083d5..435596d 100644
--- a/components/TextAreaInput.tsx
+++ b/components/TextAreaInput.tsx
@@ -10,7 +10,7 @@ export default function TextAreaInput({
   text: string
   name: string
   placeholder: string
-  onchange: () => void
+  onchange: (name: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void
   value: string
 }) {
   return (
diff --git a/components/apiHelper.tsx b/components/apiHelper.tsx
index a56334a..78c8886 100644
--- a/components/apiHelper.tsx
+++ b/components/apiHelper.tsx
@@ -1,3 +1,4 @@
+import { IDocProps } from '../interfaces/IDocProps'
 import { ILatest } from '../interfaces/ILatest'
 
 function checkStatus(res: Response) {
@@ -6,7 +7,7 @@ function checkStatus(res: Response) {
   }
 }
 
-export async function generatePdf(state: Record<string, string>) {
+export async function generatePdf(state: IDocProps) {
   const options = {
     method: 'POST',
     headers: {
diff --git a/interfaces/IDocProps.tsx b/interfaces/IDocProps.ts
similarity index 100%
rename from interfaces/IDocProps.tsx
rename to interfaces/IDocProps.ts
diff --git a/interfaces/ILatest.tsx b/interfaces/ILatest.ts
similarity index 100%
rename from interfaces/ILatest.tsx
rename to interfaces/ILatest.ts
diff --git a/interfaces/IPdfProps.ts b/interfaces/IPdfProps.ts
new file mode 100644
index 0000000..0340f13
--- /dev/null
+++ b/interfaces/IPdfProps.ts
@@ -0,0 +1,5 @@
+export interface IPdfProps {
+  pdfUrl: string | null
+  pdfIsLoading: boolean
+  pdfError: string | null
+}
diff --git a/lib/store.ts b/lib/store.ts
index da0b46b..b1dd020 100644
--- a/lib/store.ts
+++ b/lib/store.ts
@@ -2,6 +2,7 @@ const storeDir = process.env.JSON_STORE || '/tmp/pdfer-store/'
 
 import { promisify } from 'util'
 
+// @ts-ignore
 import JsonStore from 'json-fs-store'
 
 const store = JsonStore(storeDir)
diff --git a/lib/templates.ts b/lib/templates.ts
index 7f7f110..47458d6 100644
--- a/lib/templates.ts
+++ b/lib/templates.ts
@@ -1,8 +1,10 @@
+import { IDocProps } from '../interfaces/IDocProps'
+
 function convertLineBreaks(lines: string) {
   return lines.replace(/\n/g, '\\\\')
 }
 
-export function brief(options: Record<string, string>) {
+export function brief(options: IDocProps) {
   const {
     template = 'brief-fam',
     subject = '',
@@ -21,7 +23,7 @@ export function brief(options: Record<string, string>) {
     closing = 'Mit freundlichen Grüßen',
     ps = '',
     enclosing = '',
-  } = options
+  } = { ...options }
 
   return `% brief document
 \\documentclass{scrlttr2}
diff --git a/pages/api/pdf/[id].ts b/pages/api/pdf/[id].ts
index 1a328c0..b0ff56e 100644
--- a/pages/api/pdf/[id].ts
+++ b/pages/api/pdf/[id].ts
@@ -1,45 +1,47 @@
-import {promises} from 'fs'
+import { promises } from 'fs'
 import { NextApiRequest, NextApiResponse } from 'next'
 
-import {remove as storeRemove} from '../../../lib/store'
+import { remove as storeRemove } from '../../../lib/store'
 import { getPdfPath } from '../../../lib/utils'
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-    const { method } = req;
+  const { method } = req
 
-    switch (req.method) {
-        case 'GET':
-            try {
-                const {
-                    query: { id: idArg },
-                } = req
+  switch (req.method) {
+    case 'GET':
+      try {
+        const {
+          query: { id: idArg },
+        } = req
 
-                const fileContent = await promises.readFile(getPdfPath(idArg))
-                res.setHeader('Content-Type', 'application/pdf')
-                res.status(200).send(fileContent);
-            } catch (error) {
-                console.error(error)
-                res.status(404).json({ statusCode: 404, message: 'Method Not Allowed' })
-            }
-            break;
-        case 'DELETE':
-            try {
-                const {
-                    query: { id: idArg },
-                } = req
+        const id = Array.isArray(idArg) ? idArg[0] : idArg
 
-                storeRemove(idArg)
+        const fileContent = await promises.readFile(getPdfPath(id))
+        res.setHeader('Content-Type', 'application/pdf')
+        res.status(200).send(fileContent)
+      } catch (error) {
+        console.error(error)
+        res.status(404).json({ statusCode: 404, message: 'Method Not Allowed' })
+      }
+      break
+    case 'DELETE':
+      try {
+        const {
+          query: { id: idArg },
+        } = req
 
-                res.status(202).end()
-            } catch (error) {
-                console.error(error)
-                res.status(404).json({ statusCode: 404, message: 'Method Not Allowed' })
-            }
-            break;
-        default:
-            res.setHeader('Allow', ['GET', 'DELETE'])
-            res.status(405).end(`Method ${method} Not Allowed`)
-    }
+        storeRemove(idArg)
+
+        res.status(202).end()
+      } catch (error) {
+        console.error(error)
+        res.status(404).json({ statusCode: 404, message: 'Method Not Allowed' })
+      }
+      break
+    default:
+      res.setHeader('Allow', ['GET', 'DELETE'])
+      res.status(405).end(`Method ${method} Not Allowed`)
+  }
 }
 
-export default handler;
+export default handler
diff --git a/pages/index.tsx b/pages/index.tsx
index dd896ab..5570b91 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,7 +2,7 @@ import Layout from '../components/Layout'
 import App from '../components/App'
 
 const IndexPage = () => (
-  <Layout title="Home | Next.js + TypeScript Example">
+  <Layout>
     <App />
   </Layout>
 )