Skip to content

Commit 5ffd571

Browse files
gorbit99gorbit99
committed
Refactor code
1 parent c25e6de commit 5ffd571

File tree

5 files changed

+80
-115
lines changed

5 files changed

+80
-115
lines changed

‎gui/public/i18n/en/translation.ftl‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -767,8 +767,6 @@ settings-osc-router-network-port_out =
767767
settings-osc-router-network-address = Network address
768768
settings-osc-router-network-address-description = Set the address to send out data at.
769769
settings-osc-router-network-address-placeholder = IPV4 address
770-
settings-osc-router-network-ports_match_error = The OSC Router in and out ports can't be the same!
771-
settings-osc-router-network-port_banned_error = The port { $port } can't be used!
772770
773771
## OSC VRChat settings
774772
settings-osc-vrchat = VRChat OSC Trackers
@@ -805,8 +803,6 @@ settings-osc-vrchat-network-trackers-hip = Hip
805803
settings-osc-vrchat-network-trackers-knees = Knees
806804
settings-osc-vrchat-network-trackers-feet = Feet
807805
settings-osc-vrchat-network-trackers-elbows = Elbows
808-
settings-osc-vrchat-network-ports_match_error = The OSC in and out ports can't be the same!
809-
settings-osc-vrchat-network-port_banned_error = The port { $port } can't be used!
810806
811807
## VMC OSC settings
812808
settings-osc-vmc = Virtual Motion Capture
@@ -839,6 +835,10 @@ settings-osc-vmc-mirror_tracking = Mirror tracking
839835
settings-osc-vmc-mirror_tracking-description = Mirror the tracking horizontally.
840836
settings-osc-vmc-mirror_tracking-label = Mirror tracking
841837
838+
## Common OSC settings
839+
settings-osc-common-network-ports_match_error = The OSC Router in and out ports can't be the same!
840+
settings-osc-common-network-port_banned_error = The port { $port } can't be used!
841+
842842
## Advanced settings
843843
settings-utils-advanced = Advanced
844844

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

Lines changed: 8 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,15 @@ import {
1919
SettingsPagePaneLayout,
2020
} from '@/components/settings/SettingsPageLayout';
2121
import { yupResolver } from '@hookform/resolvers/yup';
22-
import { boolean, number, object, string } from 'yup';
22+
import { object } from 'yup';
23+
import {
24+
OSCSettings,
25+
useOscSettingsValidator,
26+
} from '@/hooks/osc-setting-validator';
2327

2428
interface OSCRouterSettingsForm {
2529
router: {
26-
oscSettings: {
27-
enabled: boolean;
28-
portIn: number;
29-
portOut: number;
30-
address: string;
31-
};
30+
oscSettings: OSCSettings;
3231
};
3332
}
3433

@@ -46,8 +45,8 @@ const defaultValues = {
4645
export function OSCRouterSettings() {
4746
const { l10n } = useLocalization();
4847
const { sendRPCPacket, useRPCPacket } = useWebsocketAPI();
48+
const { oscValidator } = useOscSettingsValidator();
4949

50-
const bannedPorts = [6969, 21110];
5150
const { reset, control, watch, handleSubmit } =
5251
useForm<OSCRouterSettingsForm>({
5352
defaultValues: defaultValues,
@@ -56,49 +55,7 @@ export function OSCRouterSettings() {
5655
resolver: yupResolver(
5756
object({
5857
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-
}),
58+
oscSettings: oscValidator,
10259
}),
10360
})
10461
),

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

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,16 @@ import {
2121
SettingsPagePaneLayout,
2222
} from '@/components/settings/SettingsPageLayout';
2323
import { error } from '@/utils/logging';
24+
import {
25+
OSCSettings,
26+
useOscSettingsValidator,
27+
} from '@/hooks/osc-setting-validator';
28+
import { yupResolver } from '@hookform/resolvers/yup';
29+
import { boolean, object } from 'yup';
2430

2531
interface VMCSettingsForm {
2632
vmc: {
27-
oscSettings: {
28-
enabled: boolean;
29-
portIn: number;
30-
portOut: number;
31-
address: string;
32-
};
33+
oscSettings: OSCSettings;
3334
vrmJson?: FileList;
3435
anchorHip: boolean;
3536
mirrorTracking: boolean;
@@ -53,9 +54,21 @@ export function VMCSettings() {
5354
const { l10n } = useLocalization();
5455
const { sendRPCPacket, useRPCPacket } = useWebsocketAPI();
5556
const [modelName, setModelName] = useState<string | null>(null);
57+
const { oscValidator } = useOscSettingsValidator();
5658

5759
const { reset, control, watch, handleSubmit } = useForm<VMCSettingsForm>({
5860
defaultValues,
61+
reValidateMode: 'onChange',
62+
mode: 'onChange',
63+
resolver: yupResolver(
64+
object({
65+
vmc: object({
66+
oscSettings: oscValidator,
67+
anchorHip: boolean().required(),
68+
mirrorTracking: boolean().required(),
69+
}),
70+
})
71+
),
5972
});
6073

6174
const onSubmit = async (values: VMCSettingsForm) => {
@@ -180,7 +193,6 @@ export function VMCSettings() {
180193
type="number"
181194
control={control}
182195
name="vmc.oscSettings.portIn"
183-
rules={{ required: true }}
184196
placeholder="9002"
185197
label=""
186198
></Input>
@@ -193,7 +205,6 @@ export function VMCSettings() {
193205
type="number"
194206
control={control}
195207
name="vmc.oscSettings.portOut"
196-
rules={{ required: true }}
197208
placeholder="9000"
198209
label=""
199210
></Input>
@@ -212,11 +223,6 @@ export function VMCSettings() {
212223
type="text"
213224
control={control}
214225
name="vmc.oscSettings.address"
215-
rules={{
216-
required: true,
217-
pattern:
218-
/^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|$)){4}$/i,
219-
}}
220226
placeholder={l10n.getString(
221227
'settings-osc-vmc-network-address-placeholder'
222228
)}

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

Lines changed: 8 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,15 @@ import {
2020
SettingsPagePaneLayout,
2121
} from '@/components/settings/SettingsPageLayout';
2222
import { yupResolver } from '@hookform/resolvers/yup';
23-
import { boolean, number, object, string } from 'yup';
23+
import { boolean, object } from 'yup';
24+
import {
25+
OSCSettings,
26+
useOscSettingsValidator,
27+
} from '@/hooks/osc-setting-validator';
2428

2529
interface VRCOSCSettingsForm {
2630
vrchat: {
27-
oscSettings: {
28-
enabled: boolean;
29-
portIn: number;
30-
portOut: number;
31-
address: string;
32-
};
31+
oscSettings: OSCSettings;
3332
trackers: {
3433
head: boolean;
3534
chest: boolean;
@@ -67,54 +66,16 @@ const defaultValues = {
6766
export function VRCOSCSettings() {
6867
const { l10n } = useLocalization();
6968
const { sendRPCPacket, useRPCPacket } = useWebsocketAPI();
69+
const { oscValidator } = useOscSettingsValidator();
7070

71-
const bannedPorts = [6969, 21110];
7271
const { reset, control, watch, handleSubmit } = useForm<VRCOSCSettingsForm>({
7372
defaultValues,
7473
reValidateMode: 'onChange',
7574
mode: 'onChange',
7675
resolver: yupResolver(
7776
object({
7877
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-
}),
78+
oscSettings: oscValidator,
11879
trackers: object({
11980
head: boolean().required(),
12081
chest: boolean().required(),

‎gui/src/hooks/osc-setting-validator.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { useLocalization } from '@fluent/react';
2+
import { number, object, boolean, string } from 'yup';
3+
4+
export type OSCSettings = {
5+
enabled: boolean;
6+
portIn: number;
7+
portOut: number;
8+
address: string;
9+
};
10+
11+
export function useOscSettingsValidator() {
12+
const bannedPorts = [6969, 21110];
13+
const { l10n } = useLocalization();
14+
15+
const portValidator = number()
16+
.typeError(' ')
17+
.required()
18+
.test(
19+
'ports-dont-match',
20+
l10n.getString('settings-osc-common-network-ports_match_error'),
21+
(port, context) => context.parent.portIn != context.parent.portOut
22+
)
23+
.notOneOf(bannedPorts, (context) =>
24+
l10n.getString('settings-osc-common-network-port_banned_error', {
25+
port: context.originalValue,
26+
})
27+
);
28+
29+
const oscValidator = object({
30+
enabled: boolean().required(),
31+
portIn: portValidator,
32+
portOut: portValidator,
33+
address: string()
34+
.required(' ')
35+
.matches(/^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|$)){4}$/i, {
36+
message: ' ',
37+
}),
38+
});
39+
40+
return { oscValidator };
41+
}

0 commit comments

Comments
 (0)