fixing some state management issues

frontend/src/views/RuleCard.jsx

@@ -11,27 +11,23 @@ import { toast } from "react-toastify";
 import ShuffleCodeEditor from "../components/ShuffleCodeEditor1.jsx";
 
 const RuleCard = ({ ruleName, description, file_id, globalUrl, folderDisabled, ...otherProps }) => {
-  const [additionalProps, setAdditionalProps] = React.useState(otherProps);
   const [openCodeEditor, setOpenCodeEditor] = React.useState(false);
   const [fileData, setFileData] = React.useState("");
+  const [isEnabled, setIsEnabled] = React.useState(otherProps.is_enabled);
 
-  const isCloud =
+  const isCloud = ["localhost:3002", "shuffler.io"].includes(window.location.host);
-  window.location.host === "localhost:3002" ||
-  window.location.host === "shuffler.io";
 
   const handleSwitchChange = (event) => {
     if (folderDisabled) {
       toast("enable the directory to enable individual rules");
       return;
     }
-    const isEnabled = event.target.checked;
+    const newIsEnabled = event.target.checked;
-    toggleRule(file_id, !isEnabled, globalUrl, () => {
+    toggleRule(file_id, !newIsEnabled, globalUrl, () => {
-      setAdditionalProps((prevProps) => ({
+      setIsEnabled(newIsEnabled);
-        ...prevProps,
-        is_enabled: isEnabled,
-      }));
     });
   };
+
   const UpdateText = (text) => {
     fetch(`${globalUrl}/api/v1/files/${file_id}/edit`, {
       method: "PUT",
@@ -55,8 +51,9 @@ const RuleCard = ({ ruleName, description, file_id, globalUrl, folderDisabled, .
       })
       .catch((error) => {
         toast("Error updating file: " + error.toString());
-	})
+      });
-  }
+  };
+
   return (
     <Card variant="outlined" sx={{ mb: 2 }}>
       <CardContent>
@@ -74,7 +71,7 @@ const RuleCard = ({ ruleName, description, file_id, globalUrl, folderDisabled, .
               <EditIcon />
             </IconButton>
             <Switch
-              checked={additionalProps.is_enabled && !folderDisabled}
+              checked={isEnabled && !folderDisabled}
               onChange={handleSwitchChange}
             />
           </div>
@@ -96,7 +93,7 @@ const RuleCard = ({ ruleName, description, file_id, globalUrl, folderDisabled, .
       </CardContent>
     </Card>
   );
-};
+}
 
 const toggleRule = (fileId, isCurrentlyEnabled, globalUrl, callback) => {
   const action = isCurrentlyEnabled ? "disable" : "enable";