Add calendar preview and make it possible to download

This commit is contained in:
Leonardo Murça 2022-06-29 14:10:28 -03:00
parent 0ed97c74b0
commit b8f227374a
5 changed files with 192 additions and 2 deletions

130
package-lock.json generated
View file

@ -18,6 +18,7 @@
"dayjs": "^1.11.3",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-pdf": "^5.7.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
@ -9983,6 +9984,14 @@
"sourcemap-codec": "^1.4.8"
}
},
"node_modules/make-cancellable-promise": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-1.1.0.tgz",
"integrity": "sha512-X5Opjm2xcZsOLuJ+Bnhb4t5yfu4ehlA3OKEYLtqUchgVzL/QaqW373ZUVxVHKwvJ38cmYuR4rAHD2yUvAIkTPA==",
"funding": {
"url": "https://github.com/wojtekmaj/make-cancellable-promise?sponsor=1"
}
},
"node_modules/make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@ -10005,6 +10014,14 @@
"semver": "bin/semver.js"
}
},
"node_modules/make-event-props": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.3.0.tgz",
"integrity": "sha512-oWiDZMcVB1/A487251hEWza1xzgCzl6MXxe9aF24l5Bt9N9UEbqTqKumEfuuLhmlhRZYnc+suVvW4vUs8bwO7Q==",
"funding": {
"url": "https://github.com/wojtekmaj/make-event-props?sponsor=1"
}
},
"node_modules/makeerror": {
"version": "1.0.12",
"resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@ -10037,11 +10054,24 @@
"node": ">= 4.0.0"
}
},
"node_modules/merge-class-names": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/merge-class-names/-/merge-class-names-1.4.2.tgz",
"integrity": "sha512-bOl98VzwCGi25Gcn3xKxnR5p/WrhWFQB59MS/aGENcmUc6iSm96yrFDF0XSNurX9qN4LbJm0R9kfvsQ17i8zCw==",
"funding": {
"url": "https://github.com/wojtekmaj/merge-class-names?sponsor=1"
}
},
"node_modules/merge-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
"integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
},
"node_modules/merge-refs": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.0.0.tgz",
"integrity": "sha512-WZ4S5wqD9FCR9hxkLgvcHJCBxzXzy3VVE6p8W2OzxRzB+hLRlcadGE2bW9xp2KSzk10rvp4y+pwwKO6JQVguMg=="
},
"node_modules/merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@ -10697,6 +10727,19 @@
"node": ">=8"
}
},
"node_modules/pdfjs-dist": {
"version": "2.12.313",
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.12.313.tgz",
"integrity": "sha512-1x6iXO4Qnv6Eb+YFdN5JdUzt4pAkxSp3aLAYPX93eQCyg/m7QFzXVWJHJVtoW48CI8HCXju4dSkhQZwoheL5mA==",
"peerDependencies": {
"worker-loader": "^3.0.8"
},
"peerDependenciesMeta": {
"worker-loader": {
"optional": true
}
}
},
"node_modules/performance-now": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@ -12283,6 +12326,30 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/react-pdf": {
"version": "5.7.2",
"resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-5.7.2.tgz",
"integrity": "sha512-hdDwvf007V0i2rPCqQVS1fa70CXut17SN3laJYlRHzuqcu8sLLjEoeXihty6c0Ev5g1mw31b8OT8EwRw1s8C4g==",
"dependencies": {
"@babel/runtime": "^7.0.0",
"file-loader": "^6.0.0",
"make-cancellable-promise": "^1.0.0",
"make-event-props": "^1.1.0",
"merge-class-names": "^1.1.1",
"merge-refs": "^1.0.0",
"pdfjs-dist": "2.12.313",
"prop-types": "^15.6.2",
"tiny-invariant": "^1.0.0",
"tiny-warning": "^1.0.0"
},
"funding": {
"url": "https://github.com/wojtekmaj/react-pdf?sponsor=1"
},
"peerDependencies": {
"react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@ -13897,6 +13964,16 @@
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
},
"node_modules/tiny-invariant": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
"integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
},
"node_modules/tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
"node_modules/tmpl": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@ -22232,6 +22309,11 @@
"sourcemap-codec": "^1.4.8"
}
},
"make-cancellable-promise": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-1.1.0.tgz",
"integrity": "sha512-X5Opjm2xcZsOLuJ+Bnhb4t5yfu4ehlA3OKEYLtqUchgVzL/QaqW373ZUVxVHKwvJ38cmYuR4rAHD2yUvAIkTPA=="
},
"make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@ -22247,6 +22329,11 @@
}
}
},
"make-event-props": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.3.0.tgz",
"integrity": "sha512-oWiDZMcVB1/A487251hEWza1xzgCzl6MXxe9aF24l5Bt9N9UEbqTqKumEfuuLhmlhRZYnc+suVvW4vUs8bwO7Q=="
},
"makeerror": {
"version": "1.0.12",
"resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@ -22273,11 +22360,21 @@
"fs-monkey": "1.0.3"
}
},
"merge-class-names": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/merge-class-names/-/merge-class-names-1.4.2.tgz",
"integrity": "sha512-bOl98VzwCGi25Gcn3xKxnR5p/WrhWFQB59MS/aGENcmUc6iSm96yrFDF0XSNurX9qN4LbJm0R9kfvsQ17i8zCw=="
},
"merge-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
"integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
},
"merge-refs": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.0.0.tgz",
"integrity": "sha512-WZ4S5wqD9FCR9hxkLgvcHJCBxzXzy3VVE6p8W2OzxRzB+hLRlcadGE2bW9xp2KSzk10rvp4y+pwwKO6JQVguMg=="
},
"merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@ -22740,6 +22837,12 @@
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
},
"pdfjs-dist": {
"version": "2.12.313",
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.12.313.tgz",
"integrity": "sha512-1x6iXO4Qnv6Eb+YFdN5JdUzt4pAkxSp3aLAYPX93eQCyg/m7QFzXVWJHJVtoW48CI8HCXju4dSkhQZwoheL5mA==",
"requires": {}
},
"performance-now": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@ -23747,6 +23850,23 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"react-pdf": {
"version": "5.7.2",
"resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-5.7.2.tgz",
"integrity": "sha512-hdDwvf007V0i2rPCqQVS1fa70CXut17SN3laJYlRHzuqcu8sLLjEoeXihty6c0Ev5g1mw31b8OT8EwRw1s8C4g==",
"requires": {
"@babel/runtime": "^7.0.0",
"file-loader": "^6.0.0",
"make-cancellable-promise": "^1.0.0",
"make-event-props": "^1.1.0",
"merge-class-names": "^1.1.1",
"merge-refs": "^1.0.0",
"pdfjs-dist": "2.12.313",
"prop-types": "^15.6.2",
"tiny-invariant": "^1.0.0",
"tiny-warning": "^1.0.0"
}
},
"react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@ -24949,6 +25069,16 @@
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
},
"tiny-invariant": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
"integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
},
"tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
"tmpl": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",

View file

@ -13,6 +13,7 @@
"dayjs": "^1.11.3",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-pdf": "^5.7.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"

View file

@ -84,7 +84,8 @@ const container = {
const mobileContainer = {
...container,
flexDirection: 'column-reverse',
flexDirection: 'column',
justifyContent: 'start',
};
const menuOptions = activePath => [

Binary file not shown.

View file

@ -1,8 +1,66 @@
import { Stack, Skeleton } from '@mui/material';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import { useDocumentTitle } from '../../hooks/useDocumentTitle';
import useLayoutType from '../../hooks/useLayoutType';
import calendarPdf from './calendario-academico.pdf';
function Calendar() {
useDocumentTitle('Calendário');
return <h1>Calendário Acadêmico</h1>;
const layoutType = useLayoutType();
const { innerWidth, innerHeight } = window;
if (layoutType === 'desktop') {
return (
<Stack spacing={2} alignItems="center" sx={{ paddingTop: '40px' }}>
<Document
error={<p>Falha ao carregar o arquivo.</p>}
loading={<Skeleton variant="rectangular" width={900} height={1250} />}
options={{ workerSrc: '/pdf.worker.js' }}
file={calendarPdf}
>
<Page
loading={<p>Carregando página...</p>}
scale={(1.5 * innerHeight) / 1400}
pageNumber={1}
/>
</Document>
<a target="_blank" rel="noreferrer" href={calendarPdf} download>
Baixar Calendário Acadêmico
</a>
</Stack>
);
} else if (layoutType === 'mobile') {
return (
<Stack
spacing={2}
alignItems="center"
sx={{ paddingTop: '40px', paddingBottom: '80px' }}
>
<Document
error={<p>Falha ao carregar o arquivo.</p>}
loading={
<Skeleton
variant="rectangular"
width={innerWidth - 20}
height={550}
/>
}
options={{ workerSrc: '/pdf.worker.js' }}
file={calendarPdf}
>
<Page
loading={<p>Carregando página...</p>}
scale={innerHeight / (innerHeight + innerWidth)}
pageNumber={1}
/>
</Document>
<a target="_blank" rel="noreferrer" href={calendarPdf} download>
Baixar Calendário Acadêmico
</a>
</Stack>
);
}
}
export default Calendar;