Updating to check if any changes before saving and also validating JSON

Author: Vismayak

frontend/src/components/visualizations/JSONVisualizer/JSONVisualizer.tsx

@@ -24,9 +24,15 @@ type jsonProps = {
 
 export default function JSONVisualizer(props: jsonProps) {
 	const { fileId, visualizationId, publicView } = props;
+
+	// State to store the original content of the file and the displayed JSON content that can be edited
+	const [originalContent, setOriginalContent] = useState<string | undefined>();
 	const [jsonContent, setJsonContent] = useState<string | undefined>();
+
+	// Utility states to help with saving the file, displaying loading spinner and validating JSON
 	const [fileName, setFileName] = useState<string | undefined>();
 	const [loading, setLoading] = useState<boolean>(false);
+	const [validJson, setValidJson] = useState<boolean>(true);
 
 	// use useSelector to get fileSummary to get filename.
 	const fileData = useSelector((state: RootState) => state.file);
@@ -42,10 +48,6 @@ export default function JSONVisualizer(props: jsonProps) {
 		}
 	}, [fileData.fileSummary]);
 
-	useEffect(() => {
-		console.log("fileData", fileData.fileSummary.content_type);
-	}, [fileName]);
-
 	useEffect(() => {
 		const fetchData = async () => {
 			try {
@@ -62,6 +64,7 @@ export default function JSONVisualizer(props: jsonProps) {
 
 				const file = new File([blob], fileName);
 				const text = await readTextFromFile(file);
+				setOriginalContent(text);
 				setJsonContent(text);
 			} catch (error) {
 				console.error("Error fetching data:", error);
@@ -70,6 +73,20 @@ export default function JSONVisualizer(props: jsonProps) {
 		fetchData();
 	}, [visualizationId, fileId, publicView]);
 
+	const validateJson = (jsonString: string) => {
+		try {
+			JSON.parse(jsonString);
+			return true;
+		} catch (error) {
+			return false;
+		}
+	}
+
+	const handleChange = (value: string) => {
+		setJsonContent(value);
+		setValidJson(validateJson(value));
+	}
+
 	const handleSave = async () => {
 		try {
 			if (
@@ -91,7 +108,7 @@ export default function JSONVisualizer(props: jsonProps) {
 			console.error("Error updating file:", error);
 		}
 	};
-
+	
 	return (
 		<Card>
 			<CardContent>
@@ -101,7 +118,7 @@ export default function JSONVisualizer(props: jsonProps) {
 					<CodeMirror
 						value={jsonContent}
 						extensions={[json()]}
-						onChange={(value) => setJsonContent(value)}
+						onChange={(value) => handleChange(value)}
 						theme="dark"
 					/>
 				)}