Add calendar preview and make it possible to download

package-lock.json

@@ -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",

package.json

@@ -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"

src/AuthenticatedApp.js

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

src/screens/Calendar/index.js

@@ -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;