initial commit

yannbriancon · Mar 20, 2020 · 42d391d · 42d391d
1 parent 8d97f3e
commit 42d391d
Show file tree

Hide file tree

Showing 9 changed files with 2,965 additions and 2,073 deletions.
diff --git a/package.json b/package.json
@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-pdf/renderer": "1.4.2",
+    "@react-pdf/styled-components": "1.4.0",
+    "@babel/runtime": "7.0.0-beta.55",
+    "babel-polyfill": "6.26.0",
+    "file-saver": "^2.0.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-scripts": "3.1.1"

diff --git a/src/App.js b/src/App.js
@@ -1,26 +1,37 @@
-import React from 'react';
+import * as React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import PdfBlobProvider from './components/PdfBlobProvider';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+class App extends React.Component{
+  state: State = {count: 0, pdfId: null};
+
+  uuidGenerator = require('uuid/v4');
+
+  handleSubmit = () => {
+    this.setState({count: this.state.count + 1, pdfId: this.uuidGenerator()})
+  };
+
+  render() {
+    return (
+      <div className="App">
+        <header className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <button
+            onClick = {this.handleSubmit}
+          >
+            Download
+          </button>
+        </header>
+        <PdfBlobProvider 
+          email={'monEmail'} 
+          nom={`monNom ${this.state.count}`} 
+          prenom={'monPrenom'} 
+          pdfId={this.state.pdfId}
+        />
+      </div>
+    );
+  }
 }
 
 export default App;
diff --git a/src/components/PdfBlobProvider/PdfBlobProvider.js b/src/components/PdfBlobProvider/PdfBlobProvider.js
@@ -0,0 +1,35 @@
+import React, {Component} from 'react';
+import { BlobProvider} from '@react-pdf/renderer';
+import { saveAs } from 'file-saver';
+import ProjectReport from '../ProjectReport'
+
+type OwnProps = {
+  nom: string;
+  prenom: string;
+  email: string;
+  pdfId: string | null;
+}
+
+// Create Document Component
+export default class PdfBlobProvider extends Component {
+
+
+    render() {
+      const {nom, prenom, email, pdfId } = this.props;
+      if(pdfId === null){
+        return null;
+      }
+
+      return (
+        <BlobProvider key={pdfId} document={<ProjectReport email={email} nom={nom} prenom={prenom}/>}>
+          {({ blob, loading }) => {
+            if(loading){
+              return null;
+            }
+            saveAs(blob, "somename.pdf");
+            return null;
+            }}
+        </BlobProvider>
+      );
+    };
+}; 
diff --git a/src/components/PdfBlobProvider/index.js b/src/components/PdfBlobProvider/index.js
@@ -0,0 +1 @@
+export { default } from './PdfBlobProvider';
diff --git a/src/components/ProjectReport/ProjectReport.js b/src/components/ProjectReport/ProjectReport.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Document, Font } from '@react-pdf/renderer';
+
+import { Body, Image, Text, Title, Subtitle, PageNumber, Header } from './ProjectReport.style';
+
+Font.register({
+  family: 'Oswald',
+  src: 'https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf'
+});
+
+// Create Document Component
+export default ({nom, prenom, email }) => (
+  <Document>
+    <Body>
+      <Header fixed>
+        ~ Created with react-pdf ~
+      </Header>
+      <Title>Rocket Team</Title>
+      <Image
+        src="/favicon-local.png"
+      />
+      <Subtitle>
+       High-quality Pdf designed for my best clients.
+      </Subtitle>
+      <Text>
+        Hello {prenom} {nom}, we are delighted to have you as our favorite customer.
+      </Text>
+      <Text>
+        We will send our newsletter to your email address: {email}.
+      </Text>
+      <PageNumber render={({ pageNumber, totalPages }) => (
+        `${pageNumber} / ${totalPages}`
+      )} fixed />
+    </Body>
+  </Document>
+);
diff --git a/src/components/ProjectReport/ProjectReport.style.js b/src/components/ProjectReport/ProjectReport.style.js
@@ -0,0 +1,47 @@
+import styled from '@react-pdf/styled-components';
+
+// Create styles
+export const Body = styled.Page`
+    padding: 35px 35px 65px;
+`;
+
+export const Title = styled.Text`
+    font-size: 24px;
+    text-align: center;
+    font-family: 'Oswald';
+`;
+
+export const Subtitle = styled.Text`
+    font-size: 18px;
+    margin: 12px;
+    font-family: 'Oswald';
+`;
+
+export const Text = styled.Text`
+    margin: 12px;
+    font-size: 14px;
+    text-align: justify;
+    font-family: 'Times-Roman';
+`;
+
+export const Image = styled.Image`
+    height: 50px;
+    object-fit: contain;
+`;
+
+export const Header = styled.Text`
+    font-size: 12px;
+    margin-bottom: 20px;
+    text-align: center;
+    color: grey;
+`;
+
+export const PageNumber = styled.Text`
+    position: absolute;
+    font-size: 12px;
+    bottom: 30px;
+    left: 0;
+    right: 0;
+    text-align: center;
+    color: grey;
+`;
diff --git a/src/components/ProjectReport/index.js b/src/components/ProjectReport/index.js
@@ -0,0 +1 @@
+export { default } from './ProjectReport';
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,4 @@
+import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';