TASK-400 Export and refresh DB from modal (#320)

package.json

@@ -103,9 +103,9 @@
     "cypress:open": "cypress open"
   },
   "devDependencies": {
+    "@cypress/snapshot": "^2.1.7",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
-    "@cypress/snapshot": "^2.1.7",
     "@types/node": "^14.14.21",
     "@types/react": "^16.9.46",
     "@types/react-dom": "^16.9.8",

src/assets/styles/styles/custom/_export-modal.scss

@@ -9,3 +9,23 @@
   font-weight: $font-weight-extra-bold;
   line-height: $modal-title-line-height;
 }
+
+.app-error-button > .not-clicked {
+  color: $brand-info !important;
+  text-decoration: underline;
+}
+
+.app-error-button > .clicked {
+  color: $dark-gray !important;
+  text-decoration: underline;
+}
+
+.app-error-button > .not-clicked:hover {
+  color: $brand-primary !important;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.error-modal-text {
+  margin-left: 10px;
+}

src/components/common-components/header/header.component.tsx

@@ -1,19 +1,20 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
-import { Button as MaterialButton } from "@material-ui/core";
 import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
-import HelpOutlineIcon from "@material-ui/icons/HelpOutline";
-import classNames from "classnames/bind";
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { AppConfigContext, AppConfigOptions, AppMode } from "../../../state/app-config-context";
 import { ApplicationStateModel } from "../../../state/models/application-state.model";
 import { MonthSwitchActionCreator } from "../../../state/reducers/month-state/schedule-data/month-switch.action-creator";
-import { ScheduleMode } from "../../schedule-page/table/schedule/schedule-state.model";
 import { Button } from "../button-component/button.component";
-import ReportIssueModal from "../modal/report-issue-modal/report-issue-modal.component";
 import { MonthSwitchComponent } from "../month-switch/month-switch.component";
+import classNames from "classnames/bind";
+import { Button as MaterialButton } from "@material-ui/core";
+import ReportIssueModal from "../modal/report-issue-modal/report-issue-modal.component";
+import SettingsIcon from "@material-ui/icons/Settings";
+import HelpOutlineIcon from "@material-ui/icons/HelpOutline";
+import { AppConfigContext, AppConfigOptions, AppMode } from "../../../state/app-config-context";
+import { ScheduleMode } from "../../schedule-page/table/schedule/schedule-state.model";
 
 function monthDiff(d1: Date, d2: Date): number {
   let months: number;
@@ -90,6 +91,7 @@ export function HeaderComponent(): JSX.Element {
           Zgłoś błąd
         </MaterialButton>
         <ReportIssueModal open={isModalOpen} setOpen={setIsModalOpen} />
+        <SettingsIcon className="header-icon" />
         <HelpOutlineIcon className="header-icon" onClick={redirectToDocumentation} />
       </div>
     </>

src/components/common-components/modal/app-error-modal/app-error.modal.component.tsx

@@ -1,9 +1,11 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Button } from "../../button-component/button.component";
 import DefaultModal from "../modal.component";
+import { LocalStorageProvider } from "../../../../api/local-storage-provider.model";
+import { FileHelper } from "../../../../helpers/file.helper";
 
 interface AppErrorModalOptions {
   onClick: () => void;
@@ -13,31 +15,78 @@ interface AppErrorModalOptions {
 
 export default function AppErrorModal(options: AppErrorModalOptions): JSX.Element {
   const { setOpen, open, onClick } = options;
+  const [openExtension, setIsOpenExtension] = useState(false);
 
   const handleClose = (): void => {
     onClick();
+    setIsOpenExtension(false);
     setOpen(false);
   };
 
-  const title = "Coś poszło nie tak :(";
+  useEffect(() => {
+    setIsOpenExtension(false);
+  }, [open]);
+
+  const closeAndSaveDB = async (): Promise<void> => {
+    await FileHelper.handleDbDump();
+    await new LocalStorageProvider().reloadDb();
+  };
+
+  const title = "Wystąpił błąd";
 
   const body = (
-    <div className={"span-primary"}>
-      <p>Wiadomość o błędzie została wysłana do twórców.</p>
+    <div className={"span-primary error-modal-text"}>
+      <p>
+        Wiadomość o błędzie została wysłana do twórców.
+        <br />
+        Proszę odświeżyć aplikację
+      </p>
     </div>
   );
 
   const footer = (
-    <div style={{ display: "flex", justifyContent: "center" }}>
+    <div style={{ display: "block" }}>
       <Button
-        onClick={handleClose}
+        onClick={(): void => {
+          window.location.reload(false);
+          setIsOpenExtension(false);
+          handleClose();
+        }}
         size="small"
         className="submit-button"
         variant="primary"
-        data-cy="btn-ok-app-error"
+        data-cy="btn-reload-app-error"
       >
-        OK
+        Odśwież aplikację
       </Button>
+      <br />
+      <br />
+      <div className={"app-error-button error-modal-text"}>
+        <p
+          className={openExtension ? "clicked" : "not-clicked"}
+          onClick={(): void => setIsOpenExtension(true)}
+        >
+          Dalej nie działa? Zobacz co możesz zrobić.
+        </p>
+      </div>
+      {openExtension && (
+        <>
+          <div className={"span-primary error-modal-text"}>
+            Aplikacja prawdopodbnie zawiera błędne dane.
+            <br />
+            Pobierz wszystkie grafiki i wyczyść dane aplikacji.
+          </div>
+
+          <Button
+            size="small"
+            className="submit-button"
+            variant="secondary"
+            onClick={closeAndSaveDB}
+          >
+            Pobierz grafik i wyczyść aplikację
+          </Button>
+        </>
+      )}
     </div>
   );
 

src/components/common-components/modal/modal.component.tsx

@@ -90,7 +90,7 @@ export interface ModalOptions {
 
 export default function DefaultModal(options: ModalOptions): JSX.Element {
   const { setOpen, open, title, body, footer, closeOptions, classNames } = options;
-  let classes = useStyles(options.height ?? 350, options.width ?? 600);
+  let classes = useStyles(options.height ?? 450, options.width ?? 600);
   classes = classNames ? classNames : classes;
 
   const handleClose = (): void => {

src/helpers/file.helper.ts

@@ -39,7 +39,7 @@ export class FileHelper {
     }
     const zipFile = await zip.generateAsync({ type: "blob" });
     const timestamp = new Date().toLocaleDateString("pl").replaceAll(".", "_");
-    this.saveFileAs(zipFile, `historia_${timestamp}`);
+    this.saveFileAs(zipFile, `historia_${timestamp}.zip`);
   }
 
   private static splitWorkbooksInDirs(workbooks): FilenamesToDirnameDict {
@@ -94,7 +94,6 @@ export class FileHelper {
     const docs = await new LocalStorageProvider().getAllSchedules();
 
     const workbooks: WorkbookToFilename = {};
-
     Object.keys(docs)
       .filter((revisionKey) => !docs[revisionKey].isAutoGenerated)
       .forEach((revisionKey) => {

src/logic/schedule-exporter/worker-export.logic.ts

@@ -28,7 +28,7 @@ export class WorkerExportLogic {
     const workersInfoArray = WorkerExportLogic.createWorkersInfoSection(this.scheduleModel);
 
     const colLens = workersInfoArray[0].map((_, colIndex) =>
-      Math.max(...workersInfoArray.map((row) => row[colIndex].toString().length))
+      Math.max(...workersInfoArray.map((row) => row[colIndex]?.toString().length ?? 0))
     );
 
     workSheet.addRows(workersInfoArray);