From e3fdf40a24d30d1e5dd2182b9afe57cd4025e163 Mon Sep 17 00:00:00 2001
From: nasir ali <a.nasirali@outlook.com>
Date: Fri, 13 Oct 2023 10:57:49 +0100
Subject: [PATCH] corrected the error with a group work and coding

---
 client/src/components/PopUpAlert.js    | 32 ++++++++++++------------
 client/src/pages/Home.js               |  5 ++++
 client/src/pages/SubmitSuggestion.js   |  7 ++++--
 client/src/pages/SuggestionSentence.js | 34 ++++++++++++++------------
 4 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/client/src/components/PopUpAlert.js b/client/src/components/PopUpAlert.js
index 1429a01..ed45cdd 100644
--- a/client/src/components/PopUpAlert.js
+++ b/client/src/components/PopUpAlert.js
@@ -5,32 +5,34 @@ import Snackbar from "@mui/material/Snackbar";
 import MuiAlert from "@mui/material/Alert";
 
 const Alert = React.forwardRef(function Alert(props, ref) {
-  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+	return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
 });
 
 export default function PopUpAlert(props) {
-  const [open, setOpen] = React.useState(false);
+	const [open, setOpen] = React.useState(false);
 
-  const handleClick = () => {
-    setOpen(true);
-  };
+	const handleClick = () => {
+		setOpen(true);
+	};
 
-  const handleClose = (event, reason) => {
-    if (reason === "clickaway") {
-      return;
-    }
+	const handleClose = (event, reason) => {
+		if (reason === "clickaway") {
+			return;
+		}
 
-    setOpen(false);
-  };
+		setOpen(false);
+	};
 
-  return (
+	return (
 		<Stack spacing={1} sx={{ width: "100%" }}>
 			<Button
 				color="success"
 				variant="contained"
+				disabled={props.enableDisable}
 				onClick={() => {
 					props.submitButton();
 					handleClick();
+					props.setEnableDisable(true);
 				}}
 			>
 				{props.text}
@@ -45,11 +47,7 @@ export default function PopUpAlert(props) {
 						Suggestions saved successfully
 					</Alert>
 				) : (
-					<Alert
-						onClose={handleClose}
-						severity="error"
-						sx={{ width: "100%" }}
-					>
+					<Alert onClose={handleClose} severity="error" sx={{ width: "100%" }}>
 						Could not saved suggestion
 					</Alert>
 				)}
diff --git a/client/src/pages/Home.js b/client/src/pages/Home.js
index aa8d39c..158611b 100644
--- a/client/src/pages/Home.js
+++ b/client/src/pages/Home.js
@@ -20,6 +20,8 @@ export function Home() {
 	const [nextOriginalText, setNextOriginalText] = useState(1);
 	const [loading, setLoading] = useState(1);
 
+	const [enableDisable, setEnableDisable] = useState(true); // submit button is disabled
+
 	//
 	//
 	useEffect(() => {
@@ -58,6 +60,7 @@ export function Home() {
 				randomText={randomText}
 				number={i + 1}
 				setSelectedSuggestion={setSelectedSuggestion}
+				setEnableDisable={setEnableDisable}
 			/>
 		);
 	});
@@ -88,6 +91,8 @@ export function Home() {
 								suggestionsText={suggestionsText}
 								selectedSuggestion={selectedSuggestion}
 								setNextOriginalText={setNextOriginalText}
+								enableDisable={enableDisable}
+								setEnableDisable={setEnableDisable}
 							/>
 						</div>
 					)}
diff --git a/client/src/pages/SubmitSuggestion.js b/client/src/pages/SubmitSuggestion.js
index 25b0876..25b6e97 100644
--- a/client/src/pages/SubmitSuggestion.js
+++ b/client/src/pages/SubmitSuggestion.js
@@ -27,10 +27,13 @@ const SubmitSuggestion = (props) => {
 	};
 	return (
 		<div className="flex-end">
-			<PopUpAlert text={"Submit Suggestion"}
+			<PopUpAlert
+				setEnableDisable={props.setEnableDisable}
+				enableDisable={props.enableDisable}
+				text={"Submit Suggestion"}
 				className="width submit"
 				submitButton={submitButton}
-				message = {messageAfterPost}
+				message={messageAfterPost}
 			/>
 		</div>
 	);
diff --git a/client/src/pages/SuggestionSentence.js b/client/src/pages/SuggestionSentence.js
index fb80c34..f8195c5 100644
--- a/client/src/pages/SuggestionSentence.js
+++ b/client/src/pages/SuggestionSentence.js
@@ -1,26 +1,30 @@
 const SuggestionSentence = (props) => {
-    const diff = (original, corrected) => {
-        const originalWords = original.split(" ");
-        const correctedWords = corrected.split(" ");
-        let result = "";
-        correctedWords.forEach(function (word, i) {
-            if (originalWords[i] !== word) {
-                result += "<u>" + word + "</u> ";
-            } else {
-                result += word + " ";
-            }
-        });
-        return result.trim();
-    };
-const innerText = diff(props.randomText, props.suggestionText);
+	const diff = (original, corrected) => {
+		const originalWords = original.split(" ");
+		const correctedWords = corrected.split(" ");
+		let result = "";
+		correctedWords.forEach(function (word, i) {
+			if (originalWords[i] !== word) {
+				result += "<u>" + word + "</u> ";
+			} else {
+				result += word + " ";
+			}
+		});
+		return result.trim();
+	};
+	const innerText = diff(props.randomText, props.suggestionText);
 	return (
 		<div>
 			<button
 				className="displayBlock width blue-background"
 				onClick={(e) => {
-					const text = e.currentTarget.children[2].innerHTML.replace(/<u>/g, "");
+					const text = e.currentTarget.children[2].innerHTML.replace(
+						/<u>/g,
+						""
+					);
 					const finalText = text.replace(/<[/]u>/g, "");
 					props.setSelectedSuggestion(finalText);
+					props.setEnableDisable(false);
 				}}
 			>
 				<b>Suggestion {props.number}:</b>