tomru/pdfer
1
0
Fork 0
mirror of https://github.com/tomru/pdfer.git synced 2026-03-03 06:27:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

add prettier and format all

Browse Source
This commit is contained in:
Thomas Ruoff
2021-02-08 22:51:35 +01:00
parent d7044f5f78
commit 78af180567
24 changed files with 266 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/App.test.tsx
View File

@@ -1,8 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
const div = document.createElement('div')
ReactDOM.render(<App />, div)
})

72
components/App.tsx
View File

@@ -1,25 +1,27 @@
import React, { Component } 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 React, { Component } 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 './App.css';
class App extends Component {
componentDidMount() {
this._getLatest();
this._getLatest()
}
render() {
const state = this.state || {};
const state = this.state || {}
return (
<div className="home">
<div>
<LetterOptions onChange={this._onChange.bind(this)} {...state.options}/>
<LatestList latest={state.latest} onSelect={this._onSelectLatest.bind(this)}
<LetterOptions onChange={this._onChange.bind(this)} {...state.options} />
<LatestList
latest={state.latest}
onSelect={this._onSelectLatest.bind(this)}
onRemove={this._onRemoveLatest.bind(this)}
/>
</div>
@@ -28,73 +30,67 @@ class App extends Component {
<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}
/>
<Preview pdfUrl={state.pdfUrl} pdfIsLoading={state.pdfIsLoading} pdfError={state.pdfError} />
</div>
</div>
);
)
}
_onSelectLatest(selectedOptions) {
this.setState({options: Object.assign({}, selectedOptions)});
this.setState({ options: Object.assign({}, selectedOptions) })
}
_onRemoveLatest(item) {
removeLatest(item)
.then(() => {
const latest = this.state.latest
.filter(curr => curr.id !== item.id);
removeLatest(item).then(() => {
const latest = this.state.latest.filter((curr) => curr.id !== item.id)
this.setState({ latest });
});
this.setState({ latest })
})
}
_onClear() {
window.location.reload();
window.location.reload()
}
_onGenerate() {
const state = this.state || {};
const state = this.state || {}
this.setState({
pdfIsLoading: true,
pdfError: null
pdfError: null,
})
generatePdf(state.options)
.then((data) => {
const {id} = data;
const { id } = data
this.setState({
pdfIsLoading: false,
pdfUrl: `/api/pdf/${id}`
});
pdfUrl: `/api/pdf/${id}`,
})
})
.catch((error) => {
this.setState({
pdfIsLoading: false,
pdfError: error.message,
pdfUrl: null
});
pdfUrl: null,
})
})
.then(() => this._getLatest())
}
_getLatest() {
getLatest()
.then(latest => this.setState({latest}))
.catch(err => console.error('Unable to get latest:', err));
.then((latest) => this.setState({ latest }))
.catch((err) => console.error('Unable to get latest:', err))
}
_onChange(name, event) {
if (!name) {
return;
return
}
const value = event && event.target && event.target.value;
const options = Object.assign({}, this.state.options, {[name]: value || undefined});
this.setState({options});
const value = event && event.target && event.target.value
const options = Object.assign({}, this.state.options, { [name]: value || undefined })
this.setState({ options })
}
}
export default App;
export default App

10
components/Button.tsx
View File

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

4
components/Header.tsx
View File

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

6
components/Input.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import React from 'react'
export default function(props) {
export default function (props) {
return (
<label>
{props.text}
@@ -12,5 +12,5 @@ export default function(props) {
value={props.value}
/>
</label>
);
)
}

26
components/LatestList.tsx
View File

@@ -1,24 +1,26 @@
import React from 'react';
import Button from './Button';
import React from 'react'
import Button from './Button'
export default function(props) {
const latest = props.latest || [];
const latestElements = latest.map(item => {
const created = new Date(item.created);
const hrefId = `#item-${item.id}`;
export default function (props) {
const latest = props.latest || []
const latestElements = latest.map((item) => {
const created = new Date(item.created)
const hrefId = `#item-${item.id}`
return (
<li key={item.id}>
<a href={hrefId} onClick={() => props.onSelect(item)}>{created.toLocaleString()}</a>
<span> </span>
<a href={hrefId} onClick={() => props.onSelect(item)}>
{created.toLocaleString()}
</a>
<span> </span>
<Button onClick={() => props.onRemove(item)}>Remove</Button>
</li>
);
});
)
})
return (
<div>
<h4>Vergangene Briefe:</h4>
<ul>{latestElements}</ul>
</div>
);
)
}

12
components/Layout.tsx
View File

@@ -1,14 +1,12 @@
import React from 'react';
import React from 'react'
import Header from './Header';
import Header from './Header'
export default function(props) {
export default function (props) {
return (
<div id="app">
<Header />
<div id="content">
{ props.children }
</div>
<div id="content">{props.children}</div>
</div>
);
)
}

88
components/LetterOptions.tsx
View File

@@ -1,33 +1,33 @@
import React from 'react';
import React from 'react'
import Collapsible from 'react-collapsible';
import Input from './Input';
import TextAreaInput from './TextAreaInput';
import Select from './Select';
import Collapsible from 'react-collapsible'
import Input from './Input'
import TextAreaInput from './TextAreaInput'
import Select from './Select'
//import './LetterOptions.css';
const EXAMPLE_ADDRESS = 'Max Mustermann\nMusterstr. 73\n12345 Musterstadt';
const EXAMPLE_ADDRESS = 'Max Mustermann\nMusterstr. 73\n12345 Musterstadt'
export default function(props) {
export default function (props) {
const templateTypeOptions = [
{
value: 'brief-fam',
name: 'Familie'
name: 'Familie',
},
{
value: 'brief-valerie',
name: 'Valerie'
name: 'Valerie',
},
{
value: 'brief-rain',
name: 'Rain Baumeister'
name: 'Rain Baumeister',
},
{
value: 'brief-thomas',
name: 'Thomas'
}
];
name: 'Thomas',
},
]
return (
<div className="letter-options">
@@ -46,53 +46,16 @@ export default function(props) {
onchange={props.onChange}
value={props.address}
/>
<Input
name="subject"
text="Betreff"
placeholder="Betreffzeile"
onchange={props.onChange}
value={props.subject}
/>
<Input name="subject" text="Betreff" placeholder="Betreffzeile" onchange={props.onChange} value={props.subject} />
<Collapsible trigger="Bezugszeichenzeile">
<Input
name="yourRef"
text="Ihr Zeichen"
onchange={props.onChange}
value={props.yourRef}
/>
<Input
name="yourMail"
text="Ihr Schreiben vom"
onchange={props.onChange}
value={props.yourMail}
/>
<Input
name="myRef"
text="Unser Zeichen"
onchange={props.onChange}
value={props.myRef}
/>
<Input
name="customer"
text="Kundernummer"
onchange={props.onChange}
value={props.customer}
/>
<Input
name="invoice"
text="Rechnung"
onchange={props.onChange}
value={props.invoice}
/>
<Input name="yourRef" text="Ihr Zeichen" onchange={props.onChange} value={props.yourRef} />
<Input name="yourMail" text="Ihr Schreiben vom" onchange={props.onChange} value={props.yourMail} />
<Input name="myRef" text="Unser Zeichen" onchange={props.onChange} value={props.myRef} />
<Input name="customer" text="Kundernummer" onchange={props.onChange} value={props.customer} />
<Input name="invoice" text="Rechnung" onchange={props.onChange} value={props.invoice} />
</Collapsible>
<Collapsible trigger="Sonstige Einstellungen">
<Input
name="date"
text="Datum"
placeholder="Heute"
onchange={props.onChange}
value={props.date}
/>
<Input name="date" text="Datum" placeholder="Heute" onchange={props.onChange} value={props.date} />
<Input
name="opening"
text="Eröffnung"
@@ -107,12 +70,7 @@ export default function(props) {
onchange={props.onChange}
value={props.closing}
/>
<Input
name="specialMail"
text="Versandhinweis"
onchange={props.onChange}
value={props.specialMail}
/>
<Input name="specialMail" text="Versandhinweis" onchange={props.onChange} value={props.specialMail} />
</Collapsible>
<TextAreaInput
name="body"
@@ -122,5 +80,5 @@ export default function(props) {
value={props.body}
/>
</div>
);
};
)
}

33
components/Preview.tsx
View File

@@ -1,10 +1,8 @@
import React from 'react';
import React from 'react'
export default props => {
export default (props) => {
if (props.pdfIsLoading) {
return (
<div>Lade&hellip;</div>
);
return <div>Lade&hellip;</div>
}
const errorStyles = {
@@ -12,26 +10,27 @@ export default props => {
color: 'white',
backgroundColor: '#d81e1e',
borderRadius: '3px',
};
}
if (props.pdfError) {
return (
<div style={errorStyles}><span role="img" aria-label="Crying Man">😢</span> {props.pdfError}</div>
);
<div style={errorStyles}>
<span role="img" aria-label="Crying Man">
😢
</span>{' '}
{props.pdfError}
</div>
)
}
if (!props.pdfUrl) {
return (
<div>Knopf drücken dann gibts hier was zu sehen!</div>
);
return <div>Knopf drücken dann gibts hier was zu sehen!</div>
}
const styles = {
width: '700px',
height: '1050px'
};
height: '1050px',
}
return (
<embed src={props.pdfUrl} style={styles} type="application/pdf" />
);
};
return <embed src={props.pdfUrl} style={styles} type="application/pdf" />
}

18
components/Select.tsx
View File

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

6
components/TextAreaInput.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import React from 'react'
export default function(props) {
export default function (props) {
return (
<label>
{props.text}
@@ -11,5 +11,5 @@ export default function(props) {
value={props.value}
/>
</label>
);
)
}

39
components/apiHelper.tsx
View File

@@ -1,32 +1,31 @@
function checkStatus(res) {
if (res.status < 200 || res.status >= 400) {
throw new Error(`Something went wrong (Status ${res.status}) - I do feel very sorry!`);
}
if (res.status < 200 || res.status >= 400) {
throw new Error(`Something went wrong (Status ${res.status}) - I do feel very sorry!`)
}
return res;
return res
}
export function generatePdf(state){
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(state)
};
export function generatePdf(state) {
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(state),
}
return fetch('/api/pdf/generate/brief', options)
.then(checkStatus)
.then(res => res.json());
return fetch('/api/pdf/generate/brief', options)
.then(checkStatus)
.then((res) => res.json())
}
export function getLatest() {
return fetch('/api/pdf/latest')
.then(checkStatus)
.then(res => res.json());
return fetch('/api/pdf/latest')
.then(checkStatus)
.then((res) => res.json())
}
export function removeLatest(item) {
return fetch(`/api/pdf/latest/${item.id}`, {method: 'DELETE'})
.then(checkStatus);
return fetch(`/api/pdf/latest/${item.id}`, { method: 'DELETE' }).then(checkStatus)
}

13
components/index.tsx
View File

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