@@ -9,12 +9,12 @@ import { subscribeAll } from "@core/subscriptions.ts";
9
9
import { randId } from "@core/utils/randId.ts" ;
10
10
import { HttpConnection } from "@meshtastic/js" ;
11
11
import { useState } from "react" ;
12
- import { Controller , useForm , useWatch } from "react-hook-form" ;
12
+ import { Controller , useForm } from "react-hook-form" ;
13
13
14
14
export const HTTP = ( { closeDialog } : TabElementProps ) : JSX . Element => {
15
15
const { addDevice } = useDeviceStore ( ) ;
16
16
const { setSelectedDevice } = useAppStore ( ) ;
17
- const { register, handleSubmit, control } = useForm < {
17
+ const { register, handleSubmit, control, watch } = useForm < {
18
18
ip : string ;
19
19
tls : boolean ;
20
20
} > ( {
@@ -29,7 +29,7 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
29
29
} ) ;
30
30
31
31
const [ connectionInProgress , setConnectionInProgress ] = useState ( false ) ;
32
- const [ https , setHTTPS ] = useState ( false ) ;
32
+ const https = watch ( "tls" ) ;
33
33
34
34
const onSubmit = handleSubmit ( async ( data ) => {
35
35
setConnectionInProgress ( true ) ;
@@ -41,7 +41,7 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
41
41
await connection . connect ( {
42
42
address : data . ip ,
43
43
fetchInterval : 2000 ,
44
- tls : https ,
44
+ tls : data . tls ,
45
45
} ) ;
46
46
47
47
setSelectedDevice ( id ) ;
@@ -64,13 +64,11 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
64
64
< Controller
65
65
name = "tls"
66
66
control = { control }
67
- render = { ( { field : { value, ...rest } } ) => (
67
+ render = { ( { field : { value, onChange , ...rest } } ) => (
68
68
< >
69
69
< Label > Use HTTPS</ Label >
70
70
< Switch
71
- onCheckedChange = { ( checked ) => {
72
- checked ? setHTTPS ( true ) : setHTTPS ( false ) ;
73
- } }
71
+ onCheckedChange = { onChange }
74
72
// label="Use TLS"
75
73
// description="Description"
76
74
disabled = {
0 commit comments