Merge branch 'develop' into TASK-348-rollback-corrupted-schedule

aI-lab-glider · Mar 7, 2021 · bbf9cbb · bbf9cbb
2 parents 5b8827d + 50befce
commit bbf9cbb
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 48 deletions.
diff --git a/src/components/common-components/modal/report-issue-modal/report-issue-modal.component.tsx b/src/components/common-components/modal/report-issue-modal/report-issue-modal.component.tsx
@@ -3,12 +3,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import { TextField } from "@material-ui/core";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Button } from "../../button-component/button.component";
 import { makeStyles, createStyles } from "@material-ui/core/styles";
 import ScssVars from "../../../../assets/styles/styles/custom/_variables.module.scss";
 import DefaultModal from "../modal.component";
-import { send, init } from "emailjs-com";
+import { send } from "emailjs-com";
 import { useNotification } from "../../notification/notification.context";
 
 const useStyles = makeStyles(() =>
@@ -70,28 +70,26 @@ const useStyles = makeStyles(() =>
       color: ScssVars.primary,
       display: "flex",
     },
-
-    spinnerScaled: {
-      marginTop: "88px",
-      marginBottom: "84px",
-      height: "100px",
-      width: "100px",
-    },
   })
 );
 
 export interface ReportIssueModalOptions {
   setOpen: (open: boolean) => void;
   open: boolean;
-  screenshot?;
   clear?: () => void;
 }
 
 export default function ReportIssueModal(options: ReportIssueModalOptions): JSX.Element {
+  const classes = useStyles();
+  const [isSent, setIsSent] = useState(false);
+  const { open, setOpen, clear } = options;
+  const [issueDescription, setIssueDescription] = useState("");
+  const title = "Zgłoś błąd";
+  const { createNotification } = useNotification();
+
   function onIssueDescriptionChange(event): void {
     const { value } = event.target;
     setIssueDescription(value);
-    setIsLongEnough(issueDescription.length > 20);
   }
 
   function handleClose(): void {
@@ -101,16 +99,23 @@ export default function ReportIssueModal(options: ReportIssueModalOptions): JSX.
     setOpen(false);
   }
 
-  const classes = useStyles();
-  const [isLongEnough, setIsLongEnough] = useState(false);
-  const [isSent, setIsSent] = useState(false);
-  const { open, setOpen, clear } = options;
-  const [issueDescription, setIssueDescription] = useState("");
-  const title = "Zgłoś błąd";
-
-  useEffect(() => {
-    init(`${process.env.EMAIL_KEY}`);
-  });
+  function handleSend(): void {
+    send(
+      "service_74nkmaq",
+      "template_120y7az",
+      {
+        message: issueDescription,
+      },
+      process.env.REACT_APP_EMAIL_KEY
+    )
+      .then(() => {
+        setIsSent(true);
+      })
+      .catch(() => {
+        createNotification({ type: "error", message: "Wystąpił problem sieciowy!" });
+        handleClose();
+      });
+  }
 
   const body = (
     <div className="report-issue-modal-body">
@@ -126,43 +131,25 @@ export default function ReportIssueModal(options: ReportIssueModalOptions): JSX.
             fullWidth={true}
             multiline
             helperText={
-              isLongEnough
+              issueDescription.length > 19
                 ? " "
-                : "Treść wiadomości jest za krótka! Wiadomość nie zostanie wysłana."
+                : `Treść wiadomości jest za krótka! Wprowadź jeszcze min. ${
+                    19 - issueDescription.length + 1
+                  } znak${
+                    issueDescription.length < 16 ? `ów` : issueDescription.length < 19 ? `i` : ``
+                  }.`
             }
           />
         </>
       )}
     </div>
   );
 
-  const { createNotification } = useNotification();
-
-  function handleSend(): void {
-    if (isLongEnough) {
-      send(
-        "service_74nkmaq",
-        "template_120y7az",
-        {
-          message: issueDescription,
-        },
-        process.env.REACT_APP_EMAIL_KEY
-      )
-        .then(() => {
-          setIsSent(true);
-        })
-        .catch(() => {
-          createNotification({ type: "error", message: "Wystąpił problem sieciowy!" });
-          handleClose();
-        });
-    }
-  }
-
   const footer = (
     <div>
       {!isSent && (
         <>
-          <Button variant="primary" onClick={handleSend} disabled={!isLongEnough}>
+          <Button variant="primary" onClick={handleSend} disabled={issueDescription.length < 20}>
             Wyślij
           </Button>
           <Button variant="secondary" color="secondary" onClick={handleClose}>

diff --git a/src/index.tsx b/src/index.tsx
@@ -12,7 +12,7 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { AppConfigProvider } from "./state/app-config-context";
 import * as Sentry from "@sentry/react";
-import { ReportingObserver as ReportingObserverIntegration } from "@sentry/integrations/dist/reportingobserver";
+import { ReportingObserver } from "@sentry/integrations";
 import { Integrations } from "@sentry/tracing";
 import { applyMiddleware, compose, createStore } from "redux";
 import thunkMiddleware from "redux-thunk";
@@ -26,7 +26,7 @@ Sentry.init({
   dsn: process.env.REACT_APP_SENTRY_DSN,
   normalizeDepth: 10,
   integrations: [
-    new ReportingObserverIntegration(),
+    new ReportingObserver(),
     new Integrations.BrowserTracing({
       routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
     }),