Skip to content
This repository was archived by the owner on May 30, 2023. It is now read-only.

Commit 6e8f60b

Browse files
ttattlttattl
authored
Merge pull request #236 from daita-technologies/update/alert_lost_feedback
update: show prevent alert before close feedback dialog
2 parents 1fdf933 + 5c3ddd0 commit 6e8f60b

6 files changed

Lines changed: 99 additions & 8 deletions

File tree

‎src/components/FeedbackComponent/FeedbackForm.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
/* eslint-disable no-async-promise-executor */
22
/* eslint-disable no-await-in-loop */
33
import { Box, Button, TextField, Typography } from "@mui/material";
4-
import { MyButton } from "components";
4+
import { BeforeUnload, MyButton } from "components";
55
import {
66
IMAGE_EXTENSIONS,
77
MAX_FEEDBACK_MESSAGE_LENGTH,
88
MAX_SIZE_FEEDBACK_ATTACHED_FILE,
9+
QUIT_FEEDBACK_ALERT_MESSAGE,
910
UPLOAD_PRESIGN_URL_SUCCESS_CODE,
1011
} from "constants/defaultValues";
1112
import _ from "lodash";
@@ -134,6 +135,10 @@ export const FeedbackForm = function ({
134135
}}
135136
{...getRootProps()}
136137
>
138+
<BeforeUnload
139+
isActive={content.length !== 0 || attachedFiles[0] !== null}
140+
message={QUIT_FEEDBACK_ALERT_MESSAGE}
141+
/>
137142
{isDragActive && (
138143
<Box
139144
sx={{

‎src/components/FeedbackComponent/FeedbackWidget.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,44 @@
1+
import CloseIcon from "@mui/icons-material/Close";
12
import MessageIcon from "@mui/icons-material/Message";
23
import { Fab } from "@mui/material";
34
import Popover from "@mui/material/Popover";
45
import * as React from "react";
56
import { useEffect } from "react";
6-
import CloseIcon from "@mui/icons-material/Close";
77
import { FeedbackWidgetParam } from "./type";
88

99
const FeedbackWidget = function ({
1010
style,
1111
children,
1212
isShow,
1313
onClose,
14+
onOpen,
1415
}: FeedbackWidgetParam) {
1516
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
1617
null
1718
);
1819
useEffect(() => {
19-
setAnchorEl(null);
20+
if (isShow === false) {
21+
setAnchorEl(null);
22+
}
2023
}, [isShow]);
2124
const open = Boolean(anchorEl);
2225
const id = open ? "popover" : undefined;
2326
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
2427
if (open) {
25-
setAnchorEl(null);
28+
if (onClose) {
29+
onClose();
30+
}
2631
} else {
2732
setAnchorEl(event.currentTarget);
33+
if (onOpen) {
34+
onOpen();
35+
}
2836
}
2937
};
3038
const handleClose = () => {
3139
if (onClose) {
3240
onClose();
3341
}
34-
setAnchorEl(null);
3542
};
3643

3744
return (

‎src/components/FeedbackComponent/index.tsx‎

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,62 @@
1+
import { Box, Typography } from "@mui/material";
2+
import { QUIT_FEEDBACK_ALERT_MESSAGE } from "constants/defaultValues";
3+
import useConfirmDialog from "hooks/useConfirmDialog";
14
import { useState } from "react";
2-
import { useDispatch } from "react-redux";
5+
import { useDispatch, useSelector } from "react-redux";
36
import { toast } from "react-toastify";
47
import { resetFeedBack } from "reduxes/feedback/action";
8+
import {
9+
selectorAttachedFilesFeedback,
10+
selectorContentFeedback,
11+
} from "reduxes/feedback/selector";
512
import { FeedbackFormSlack } from "./FeedbackForm";
613
import FeedbackWidget from "./FeedbackWidget";
714

815
const FeedbackComponent = function () {
9-
const [openForm, setOpenForm] = useState<boolean>(true);
16+
const { openConfirmDialog, closeConfirmDialog } = useConfirmDialog();
17+
const [openForm, setOpenForm] = useState<boolean>(false);
18+
const content = useSelector(selectorContentFeedback);
19+
const attachedFiles = useSelector(selectorAttachedFilesFeedback);
1020
const dispath = useDispatch();
1121
const handleSendFeedbackSuccess = () => {
1222
toast.success("You have successfully sent feedback.");
13-
setOpenForm(false);
1423
dispath(resetFeedBack());
24+
setOpenForm(false);
1525
};
1626
const handleSendFeedbackFail = () => {
1727
toast.error("Feedback message failed to send");
1828
};
1929

30+
const handleClose = () => {
31+
if (content.length !== 0 || attachedFiles[0] !== null) {
32+
openConfirmDialog({
33+
content: (
34+
<Box lineHeight={1.5}>
35+
<Typography>{QUIT_FEEDBACK_ALERT_MESSAGE}</Typography>
36+
</Box>
37+
),
38+
negativeText: "Cancel",
39+
positiveText: "Ok",
40+
onClickNegative: closeConfirmDialog,
41+
onClickPositive: () => {
42+
dispath(resetFeedBack());
43+
closeConfirmDialog();
44+
setOpenForm(false);
45+
},
46+
});
47+
} else {
48+
setOpenForm(false);
49+
}
50+
};
51+
const handleOpen = () => {
52+
setOpenForm(true);
53+
};
2054
return (
2155
<FeedbackWidget
2256
isShow={openForm}
2357
style={{ position: "fixed", bottom: 50, right: 30 }}
58+
onClose={handleClose}
59+
onOpen={handleOpen}
2460
>
2561
<FeedbackFormSlack
2662
style={{ width: 400 }}

‎src/components/FeedbackComponent/type.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export interface FeedbackWidgetParam {
2828
children: React.ReactNode;
2929
isShow: boolean;
3030
onClose?: () => void;
31+
onOpen?: () => void;
3132
}
3233

3334
export interface UploadZoneProps {

‎src/constants/defaultValues.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,3 +193,6 @@ export const UPLOAD_PRESIGN_URL_SUCCESS_CODE = 204;
193193
export const MAX_FEEDBACK_MESSAGE_LENGTH = 750;
194194
export const MAX_NUM_FEEDBACK_ATTACHED_FILE = 3;
195195
export const MAX_SIZE_FEEDBACK_ATTACHED_FILE = 2000000;
196+
197+
export const QUIT_FEEDBACK_ALERT_MESSAGE =
198+
"Your feedback content will be lost. Are you sure you want to quit?";

‎yarn.lock‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1877,6 +1877,13 @@
18771877
core-js-pure "^3.20.2"
18781878
regenerator-runtime "^0.13.4"
18791879

1880+
"@babel/runtime@^7.0.0":
1881+
version "7.18.9"
1882+
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
1883+
integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
1884+
dependencies:
1885+
regenerator-runtime "^0.13.4"
1886+
18801887
"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
18811888
version "7.17.2"
18821889
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
@@ -3007,6 +3014,13 @@
30073014
"@types/prop-types" "*"
30083015
"@types/react" "*"
30093016

3017+
"@types/react-window@^1.8.5":
3018+
version "1.8.5"
3019+
resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
3020+
integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==
3021+
dependencies:
3022+
"@types/react" "*"
3023+
30103024
"@types/react@*", "@types/react@^17.0.9":
30113025
version "17.0.39"
30123026
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
@@ -9395,6 +9409,11 @@ media-typer@0.3.0:
93959409
resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
93969410
integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
93979411

9412+
"memoize-one@>=3.1.1 <6":
9413+
version "5.2.1"
9414+
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
9415+
integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
9416+
93989417
memory-fs@^0.4.1:
93999418
version "0.4.1"
94009419
resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -10575,6 +10594,13 @@ p-limit@^3.0.2:
1057510594
dependencies:
1057610595
yocto-queue "^0.1.0"
1057710596

10597+
p-limit@^4.0.0:
10598+
version "4.0.0"
10599+
resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-4.0.0.tgz#914af6544ed32bfa54670b061cafcbd04984b644"
10600+
integrity sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==
10601+
dependencies:
10602+
yocto-queue "^1.0.0"
10603+
1057810604
p-locate@^2.0.0:
1057910605
version "2.0.0"
1058010606
resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
@@ -12210,6 +12236,14 @@ react-virtualized@^9.22.3:
1221012236
prop-types "^15.7.2"
1221112237
react-lifecycles-compat "^3.0.4"
1221212238

12239+
react-window@^1.8.7:
12240+
version "1.8.7"
12241+
resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.7.tgz#5e9fd0d23f48f432d7022cdb327219353a15f0d4"
12242+
integrity sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==
12243+
dependencies:
12244+
"@babel/runtime" "^7.0.0"
12245+
memoize-one ">=3.1.1 <6"
12246+
1221312247
react@^17.0.2:
1221412248
version "17.0.2"
1221512249
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -15269,6 +15303,11 @@ yocto-queue@^0.1.0:
1526915303
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
1527015304
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
1527115305

15306+
yocto-queue@^1.0.0:
15307+
version "1.0.0"
15308+
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
15309+
integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
15310+
1527215311
zwitch@^2.0.0:
1527315312
version "2.0.2"
1527415313
resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.2.tgz#91f8d0e901ffa3d66599756dde7f57b17c95dce1"

0 commit comments

Comments
 (0)