Skip to content

Commit c25e6de

Browse files
gorbit99gorbit99
committed
Use yup instead
1 parent a6c4fc6 commit c25e6de

File tree

2 files changed

+114
-92
lines changed

2 files changed

+114
-92
lines changed

‎gui/src/components/settings/pages/OSCRouterSettings.tsx‎

Lines changed: 54 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import {
1818
SettingsPageLayout,
1919
SettingsPagePaneLayout,
2020
} from '@/components/settings/SettingsPageLayout';
21+
import { yupResolver } from '@hookform/resolvers/yup';
22+
import { boolean, number, object, string } from 'yup';
2123

2224
interface OSCRouterSettingsForm {
2325
router: {
@@ -45,14 +47,63 @@ export function OSCRouterSettings() {
4547
const { l10n } = useLocalization();
4648
const { sendRPCPacket, useRPCPacket } = useWebsocketAPI();
4749

50+
const bannedPorts = [6969, 21110];
4851
const { reset, control, watch, handleSubmit } =
4952
useForm<OSCRouterSettingsForm>({
5053
defaultValues: defaultValues,
54+
reValidateMode: 'onChange',
55+
mode: 'onChange',
56+
resolver: yupResolver(
57+
object({
58+
router: object({
59+
oscSettings: object({
60+
enabled: boolean().required(),
61+
portIn: number()
62+
.typeError(' ')
63+
.required()
64+
.test(
65+
'ports-dont-match',
66+
l10n.getString(
67+
'settings-osc-router-network-ports_match_error'
68+
),
69+
(port, context) => port != context.parent.portOut
70+
)
71+
.notOneOf(bannedPorts, (context) =>
72+
l10n.getString(
73+
'settings-osc-router-network-port_banned_error',
74+
{ port: context.originalValue }
75+
)
76+
),
77+
portOut: number()
78+
.typeError(' ')
79+
.required()
80+
.test(
81+
'ports-dont-match',
82+
l10n.getString(
83+
'settings-osc-router-network-ports_match_error'
84+
),
85+
(port, context) => port != context.parent.portIn
86+
)
87+
.notOneOf(bannedPorts, (context) =>
88+
l10n.getString(
89+
'settings-osc-router-network-port_banned_error',
90+
{ port: context.originalValue }
91+
)
92+
),
93+
address: string()
94+
.required(' ')
95+
.matches(
96+
/^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|$)){4}$/i,
97+
{
98+
message: ' ',
99+
}
100+
),
101+
}),
102+
}),
103+
})
104+
),
51105
});
52106

53-
const formValues = watch();
54-
const bannedPorts = [6969, 21110];
55-
56107
const onSubmit = (values: OSCRouterSettingsForm) => {
57108
const settings = new ChangeSettingsRequestT();
58109

@@ -155,25 +206,6 @@ export function OSCRouterSettings() {
155206
<Input
156207
type="number"
157208
control={control}
158-
rules={{
159-
required: true,
160-
validate: (portIn) => {
161-
if (
162-
Number(portIn) ===
163-
Number(formValues.router.oscSettings.portOut)
164-
) {
165-
return l10n.getString(
166-
'settings-osc-router-network-ports_match_error'
167-
);
168-
}
169-
if (bannedPorts.includes(Number(portIn))) {
170-
return l10n.getString(
171-
'settings-osc-vrchat-network-port_banned_error',
172-
{ port: portIn }
173-
);
174-
}
175-
},
176-
}}
177209
name="router.oscSettings.portIn"
178210
placeholder="9002"
179211
label=""
@@ -186,25 +218,6 @@ export function OSCRouterSettings() {
186218
<Input
187219
type="number"
188220
control={control}
189-
rules={{
190-
required: true,
191-
validate: (portOut) => {
192-
if (
193-
Number(portOut) ===
194-
Number(formValues.router.oscSettings.portIn)
195-
) {
196-
return l10n.getString(
197-
'settings-osc-router-network-ports_match_error'
198-
);
199-
}
200-
if (bannedPorts.includes(Number(portOut))) {
201-
return l10n.getString(
202-
'settings-osc-vrchat-network-port_banned_error',
203-
{ port: portOut }
204-
);
205-
}
206-
},
207-
}}
208221
name="router.oscSettings.portOut"
209222
placeholder="9000"
210223
label=""
@@ -225,11 +238,6 @@ export function OSCRouterSettings() {
225238
<Input
226239
type="text"
227240
control={control}
228-
rules={{
229-
required: true,
230-
pattern:
231-
/^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|$)){4}$/i,
232-
}}
233241
name="router.oscSettings.address"
234242
placeholder={l10n.getString(
235243
'settings-osc-router-network-address-placeholder'

‎gui/src/components/settings/pages/VRCOSCSettings.tsx‎

Lines changed: 60 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import {
1919
SettingsPageLayout,
2020
SettingsPagePaneLayout,
2121
} from '@/components/settings/SettingsPageLayout';
22+
import { yupResolver } from '@hookform/resolvers/yup';
23+
import { boolean, number, object, string } from 'yup';
2224

2325
interface VRCOSCSettingsForm {
2426
vrchat: {
@@ -66,13 +68,68 @@ export function VRCOSCSettings() {
6668
const { l10n } = useLocalization();
6769
const { sendRPCPacket, useRPCPacket } = useWebsocketAPI();
6870

71+
const bannedPorts = [6969, 21110];
6972
const { reset, control, watch, handleSubmit } = useForm<VRCOSCSettingsForm>({
7073
defaultValues,
74+
reValidateMode: 'onChange',
75+
mode: 'onChange',
76+
resolver: yupResolver(
77+
object({
78+
vrchat: object({
79+
oscSettings: object({
80+
enabled: boolean().required(),
81+
portIn: number()
82+
.typeError(' ')
83+
.required()
84+
.test(
85+
'ports-dont-match',
86+
l10n.getString('settings-osc-vrchat-network-ports_match_error'),
87+
(port, context) => port != context.parent.portOut
88+
)
89+
.notOneOf(bannedPorts, (context) =>
90+
l10n.getString(
91+
'settings-osc-vrchat-network-port_banned_error',
92+
{ port: context.originalValue }
93+
)
94+
),
95+
portOut: number()
96+
.typeError(' ')
97+
.required()
98+
.test(
99+
'ports-dont-match',
100+
l10n.getString('settings-osc-vrchat-network-ports_match_error'),
101+
(port, context) => port != context.parent.portIn
102+
)
103+
.notOneOf(bannedPorts, (context) =>
104+
l10n.getString(
105+
'settings-osc-vrchat-network-port_banned_error',
106+
{ port: context.originalValue }
107+
)
108+
),
109+
address: string()
110+
.required(' ')
111+
.matches(
112+
/^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|$)){4}$/i,
113+
{
114+
message: ' ',
115+
}
116+
),
117+
}),
118+
trackers: object({
119+
head: boolean().required(),
120+
chest: boolean().required(),
121+
elbows: boolean().required(),
122+
feet: boolean().required(),
123+
knees: boolean().required(),
124+
hands: boolean().required(),
125+
waist: boolean().required(),
126+
}),
127+
oscqueryEnabled: boolean().required(),
128+
}),
129+
})
130+
),
71131
});
72132

73-
const formValues = watch();
74-
const bannedPorts = [6969, 21110];
75-
76133
const onSubmit = (values: VRCOSCSettingsForm) => {
77134
const settings = new ChangeSettingsRequestT();
78135

@@ -207,25 +264,6 @@ export function VRCOSCSettings() {
207264
type="number"
208265
control={control}
209266
name="vrchat.oscSettings.portIn"
210-
rules={{
211-
required: true,
212-
validate: (portIn) => {
213-
if (
214-
Number(portIn) ===
215-
Number(formValues.vrchat.oscSettings.portOut)
216-
) {
217-
return l10n.getString(
218-
'settings-osc-vrchat-network-ports_match_error'
219-
);
220-
}
221-
if (bannedPorts.includes(Number(portIn))) {
222-
return l10n.getString(
223-
'settings-osc-vrchat-network-port_banned_error',
224-
{ port: portIn }
225-
);
226-
}
227-
},
228-
}}
229267
placeholder="9001"
230268
label=""
231269
></Input>
@@ -238,25 +276,6 @@ export function VRCOSCSettings() {
238276
type="number"
239277
control={control}
240278
name="vrchat.oscSettings.portOut"
241-
rules={{
242-
required: true,
243-
validate: (portOut) => {
244-
if (
245-
Number(portOut) ===
246-
Number(formValues.vrchat.oscSettings.portIn)
247-
) {
248-
return l10n.getString(
249-
'settings-osc-vrchat-network-ports_match_error'
250-
);
251-
}
252-
if (bannedPorts.includes(Number(portOut))) {
253-
return l10n.getString(
254-
'settings-osc-vrchat-network-port_banned_error',
255-
{ port: portOut }
256-
);
257-
}
258-
},
259-
}}
260279
placeholder="9000"
261280
label=""
262281
></Input>
@@ -277,11 +296,6 @@ export function VRCOSCSettings() {
277296
type="text"
278297
control={control}
279298
name="vrchat.oscSettings.address"
280-
rules={{
281-
required: true,
282-
pattern:
283-
/^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|$)){4}$/i,
284-
}}
285299
placeholder={l10n.getString(
286300
'settings-osc-vrchat-network-address-placeholder'
287301
)}

0 commit comments

Comments
 (0)