BUG/5 Submit suggestion button should only work if a suggestion was clicked - nasir ali

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>
 				)}

client/src/pages/Home.js

@@ -24,6 +24,8 @@ export function Home({ user }) {
 	const [nextOriginalText, setNextOriginalText] = useState(1);
 	const [loading, setLoading] = useState(1);
 
+	const [enableDisable, setEnableDisable] = useState(true); // submit button is disabled
+
 	//
 	//
 	useEffect(() => {
@@ -62,6 +64,7 @@ export function Home({ user }) {
 				randomText={randomText}
 				number={i + 1}
 				setSelectedSuggestion={setSelectedSuggestion}
+				setEnableDisable={setEnableDisable}
 			/>
 		);
 	});
@@ -85,22 +88,23 @@ export function Home({ user }) {
 				</div>
 				<div className="paddingBottom">
 					<h3>Suggestions :</h3>
-                        {loading ? (
-                            <LoadingSuggestions />
-                        ) : (
+					{loading ? (
+						<LoadingSuggestions />
+					) : (
+						<div className="grid">
+							{suggestions}
+							<SubmitSuggestion
+								randomText={randomText}
+								suggestionsText={suggestionsText}
+								selectedSuggestion={selectedSuggestion}
+								setNextOriginalText={setNextOriginalText}
+								enableDisable={enableDisable}
+								setEnableDisable={setEnableDisable}
+							/>
+						</div>
+					)}
+				</div>
 
-                            <div className="grid">
-                                {suggestions}
-                                <SubmitSuggestion
-                                    randomText={randomText}
-                                    suggestionsText={suggestionsText}
-                                    selectedSuggestion={selectedSuggestion}
-                                    setNextOriginalText={setNextOriginalText}
-                                />
-                            </div>
-                        )}
-					</div>
-
 				<div>
 					<NoneOfTheSuggestions setNextOriginalText={setNextOriginalText} />
 				</div>

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>
 	);

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>