Print timetable

package.json

@@ -32,6 +32,7 @@
     "react-icons": "^4.3.1",
     "react-router-dom": "6",
     "react-scripts": "5.0.1",
+    "react-to-print": "^2.14.7",
     "recoil": "^0.7.2",
     "styled-components": "^5.3.3",
     "typescript": "^4.6.3",

src/App.css

@@ -0,0 +1,10 @@
+@media print {
+    @page {
+        size: landscape;
+    }
+
+    body {
+        transform: scale(0.80);
+        display: block;
+    }
+}

src/App.tsx

@@ -15,6 +15,7 @@ import { saveItem } from "./utils/localStorageUtil";
 import { LANGUAGE_KEY } from "./constants";
 import i18n from "./i18n";
 import { getLanguageShortCode } from "./utils/languageUtil";
+import "./App.css";
 
 const lightTheme = createTheme({
   palette: {

src/components/root/Appbar.tsx

@@ -14,6 +14,7 @@ import {
   appbarTitle,
   isTimetableView,
   menuOpen,
+  printTimetable,
   subpage,
   timetableInfoDialogOpen,
 } from "../../states";
@@ -25,19 +26,22 @@ import { useNavigate } from "react-router-dom";
 import InfoIconOutlined from "@mui/icons-material/InfoOutlined";
 import SettingsIconOutlined from "@mui/icons-material/SettingsOutlined";
 import SettingsMenuItems from "./SettingsMenuItems";
+import PrintIconOutlined from "@mui/icons-material/PrintOutlined";
 
 const Appbar = (): ReactElement => {
   const [title] = useRecoilState(appbarTitle);
   const [timetableView, setTimetableView] = useRecoilState(isTimetableView);
   const setSelectedBranch = useSetRecoilState(actualTimetable);
   const [drawerOpen, setDrawerOpen] = useRecoilState(menuOpen);
+  const setPrintTimetable = useSetRecoilState(printTimetable);
   const setTimetableInfoOpen = useSetRecoilState(timetableInfoDialogOpen);
   const [settingsAnchorElement, setSettingsAnchorElement] =
     useState<HTMLElement | null>();
   const settingsOpen = Boolean(settingsAnchorElement);
   const isSubpage = useRecoilValue(subpage);
   const navigate = useNavigate();
 
+  const handlePrintTimetable = () => setPrintTimetable(true);
   const handleSettingsOpen = (event: React.MouseEvent<HTMLElement>) =>
     setSettingsAnchorElement(event.currentTarget);
   const handleSettingsClose = () => setSettingsAnchorElement(null);
@@ -106,15 +110,26 @@ const Appbar = (): ReactElement => {
             <SettingsIconOutlined />
           </IconButton>
           {timetableView ? (
-            <IconButton
-              size="large"
-              edge="end"
-              color="inherit"
-              aria-label="menu"
-              onClick={handleExitButton}
-            >
-              <ExitToAppIcon />
-            </IconButton>
+            <>
+              <IconButton
+                size="large"
+                edge="end"
+                color="inherit"
+                aria-label="menu"
+                onClick={handlePrintTimetable}
+              >
+                <PrintIconOutlined />
+              </IconButton>
+              <IconButton
+                size="large"
+                edge="end"
+                color="inherit"
+                aria-label="menu"
+                onClick={handleExitButton}
+              >
+                <ExitToAppIcon />
+              </IconButton>
+            </>
           ) : null}
         </Toolbar>
       </AppBar>

src/states.ts

@@ -69,3 +69,8 @@ export const language = atom<string>({
   key: "language",
   default: getItem(LANGUAGE_KEY) ?? getLanguageShortCode(),
 });
+
+export const printTimetable = atom({
+  key: "printTimetable",
+  default: false,
+});

src/views/Timetable.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useState } from "react";
+import React, { ReactElement, useEffect, useRef, useState } from "react";
 import TimetableGrid from "../components/timetable/TimetableGrid";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import {
@@ -8,6 +8,7 @@ import {
   errorMessage,
   isTimetableView,
   networkError,
+  printTimetable,
   subpage,
   timetableTitle,
 } from "../states";
@@ -20,6 +21,7 @@ import { getSchoolDetails } from "../api/api";
 import TimetableInfo from "../components/timetable/TimetableInfo";
 import NetworkFailMessage from "../components/root/NetworkFailMessage";
 import { changeTitle } from "../utils/titleUtil";
+import { useReactToPrint } from "react-to-print";
 
 const Timetable = (): ReactElement => {
   const selectedBranch = useRecoilValue(actualTimetable);
@@ -32,6 +34,12 @@ const Timetable = (): ReactElement => {
   const setErrorMessage = useSetRecoilState(errorMessage);
   const [netError, setNetworkErrorMessage] = useRecoilState(networkError);
   const setSubpage = useSetRecoilState(subpage);
+  const timetableRef = useRef();
+  const handlePrint = useReactToPrint({
+    content: () => timetableRef.current!,
+    removeAfterPrint: true,
+  });
+  const [printClicked, setPrintTimetable] = useRecoilState(printTimetable);
   const { id } = useParams();
 
   const onMount = () => {
@@ -78,6 +86,13 @@ const Timetable = (): ReactElement => {
     document.title = changeTitle(`${schoolName} / ${selectedBranch!.name!}`);
   }, [selectedBranch, netError]);
 
+  useEffect(() => {
+    if (!printClicked) return;
+
+    setPrintTimetable(false);
+    handlePrint();
+  }, [printClicked]);
+
   onMount();
 
   const NetworkErrorContainer = () => (
@@ -97,7 +112,9 @@ const Timetable = (): ReactElement => {
   );
 
   return (
+    // @ts-ignore
     <Container
+      ref={timetableRef}
       sx={{
         minWidth: "90%",
       }}

yarn.lock

@@ -9411,6 +9411,13 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-to-print@^2.14.7:
+  version "2.14.7"
+  resolved "https://registry.yarnpkg.com/react-to-print/-/react-to-print-2.14.7.tgz#d288de0e573e6e63e203a48d4bad7a1759d18688"
+  integrity sha512-lWVVAs9Co25uyE0toxcWeFsmaZObwUozXrJD9WMpDPclpBgk+WIzxlt3Q3omL/BCBG/cpf0XNvhayUWa+99YGw==
+  dependencies:
+    prop-types "^15.8.1"
+
 react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"