add bluetooth scan control.

src/page-components/device/BleControl.tsx

@@ -1,14 +1,48 @@
+import { invoke } from '@tauri-apps/api/core';
 import { useAtomValue } from 'jotai';
-import { FC } from 'react';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { BleState } from '../../context/EstimContext';
 import styles from './BleControl.module.css';
 
 const BleControl: FC = () => {
   const bleState = useAtomValue(BleState);
+  const timerRef = useRef<number | null>(null);
+  const [searchRemains, setSearchRemains] = useState(60);
+  const handleStartScan = useCallback(async () => {
+    timerRef.current !== null && clearInterval(timerRef.current);
+    setSearchRemains(60);
+    try {
+      await invoke('start_scan_devices');
+      timerRef.current = setInterval(() => {
+        setSearchRemains((s) => s - 1);
+      }, 1000);
+    } catch (e) {
+      console.error('[start scan]', e);
+    }
+  }, []);
+  const handleStopScan = useCallback(async () => {
+    try {
+      await invoke('stop_scan_devices');
+    } catch (e) {
+      console.error('[stop scan]', e);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (searchRemains === 0) {
+      timerRef.current && clearInterval(timerRef.current);
+      handleStopScan();
+    }
+  }, [searchRemains]);
 
   return (
     <div className={styles.ble_control}>
-      <button disabled={!bleState.ready || bleState.searching}>Scan</button>
+      {bleState.searching && <span>{searchRemains}s remains</span>}
+      <button
+        disabled={!bleState.ready}
+        onClick={() => (bleState.searching ? handleStopScan() : handleStartScan())}>
+        {!bleState.searching ? 'Scan' : 'Stop'}
+      </button>
       <button disabled={!bleState.ready || !bleState.connected}>Disconnect</button>
     </div>
   );