Const ScannerProgress
ScannerProgress: FC<{}> = observer(() => {const {scannerStore: { canShowResults, foundScanResultsCount, needsAttentionCount }} = useStores();const [statusCheckInterval, setStatusCheckInterval] = useState<number>(undefined);const { status, currentJob, total, percent, remaining, cancelling, handleStart, handleCancel, step, stepText } =useScannerFromSitemap(statusCheckInterval, "rcb-scan-list");const disableScanButton = step !== "idle";// Allow to force a preset by query argument so the preset selector is disabledconst { start } = useLocationQuery();useEffect(() => {if (start) {handleStart();}}, []);// Provide "live" refresh while scanning the complete websiteuseEffect(() => {setStatusCheckInterval(remaining > 0 || step === "done" ? 5000 : undefined);}, [remaining, step]);return remaining === undefined ? (<Spin style={{ display: "block" }} />) : (<div className="wp-clearfix">{canShowResults && (<div style={{ float: "left", margin: "5px 10px" }}>{needsAttentionCount === 0 ? (<><CheckCircleTwoTone twoToneColor="#52c41a" /> {__("All recommendations applied")}</>) : (<><IssuesCloseOutlined style={{ color: "#dba617" }} /> {__("%d of %d recommendations applied",foundScanResultsCount - needsAttentionCount,foundScanResultsCount)}</>)}</div>)}{status === "failed" ? (<Emptystyle={{ clear: "both" }}description={__("Scan failed")}image={<Progress type="circle" width={100} percent={100} status="exception" />}/>) : status === "done" ? (<Emptystyle={{ clear: "both" }}description={__("Scan completed")}image={<Progress type="circle" width={100} percent={100} />}/>) : remaining > 0 && currentJob && total ? (<Emptystyle={{ clear: "both" }}description={<><div>{_i(__("Currently scanning {{code}}%s{{/code}} (%d of %d pages scanned)...",currentJob.data.url,total - remaining,total),{code: <code />})}</div><divclassName="notice notice-info inline below-h2 notice-alt"style={{ margin: "10px 0 0 0", display: "inline-block" }}><p>{__("You can add already found services, edit your website or have a coffee in the meantime. The scanner runs in the background.")}</p></div></>}image={<Progress type="circle" width={100} percent={percent} />}><button className="button button-primary" onClick={handleCancel} disabled={cancelling}>{__("Cancel scan")}</button></Empty>) : canShowResults ? (<buttonid="rcb-btn-scan-start"className="button button-primary alignright"onClick={handleStart}disabled={disableScanButton}style={{ marginBottom: 10, display: step !== "done" ? undefined : "none" }}>{stepText}</button>) : (<Emptydescription={__("Scan your website for services that may set cookies or process personal data to obtain consent.")}><button className="button button-primary" onClick={handleStart} disabled={disableScanButton}>{stepText}</button></Empty>)}</div>);})