adding button for clearing all of the scans, including ones that were replaced by new scans

src/device/autoDetect/DeviceScannedComponents.tsx

@@ -41,6 +41,7 @@ export default function DeviceScannedComponents(props: Props){
   const [currentStep, setCurrentStep] = useState(0)
   const [settingsValid, setSettingsValid] = useState(false);
   const [openDialog, setOpenDialog] = useState(false);
+  const [clearOpen, setClearOpen] = useState(false);
 
   useEffect(()=>{
     if (scannedComponents.i2c) setScannedI2C(scannedComponents.i2c)
@@ -216,11 +217,38 @@ export default function DeviceScannedComponents(props: Props){
     })
   }
 
+  const removeAllScans = () => {
+    deviceAPI.removeAllFoundComponents(device.settings.deviceId)
+    .then(resp => {
+      console.log("Cleared all scans")
+    }).catch(err => {
+      console.log("There was a problem clearing scans")
+    })
+  }
+
+  const clearWarning = () => {
+    return (
+      <ResponsiveDialog open={clearOpen} onClose={()=>{setClearOpen(false)}}>
+        <DialogTitle>Clear All Scans</DialogTitle>
+        <DialogContent>This action will clear all scans for this device.</DialogContent>
+        <DialogActions>
+          <Button variant="contained" onClick={()=>{setClearOpen(false)}}>Close</Button>
+          <Button variant="contained" color="primary" onClick={()=>{removeAllScans()}}>Continue</Button>
+        </DialogActions>
+      </ResponsiveDialog>
+    )
+  }
+
 
 
   return (
     <React.Fragment>
+      {clearWarning()}
       <Card raised sx={{padding: 1}}>
+        <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center">
+          <Typography sx={{fontWeight: 650, fontSize: 25}}>Sensor Scan</Typography>
+          <Button variant="contained" color="primary" onClick={()=>{setClearOpen(true)}}>Clear</Button>
+        </Box>
         {scannedI2C !== undefined && 
           <Box marginBottom={5}>
           <Box justifyContent="space-between" display="flex">