Skip to content

Commit dc78397

Browse files
VasilyStrelyaevVasilyStrelyaev
committed
fix React lint and interactivity
1 parent 9071b1f commit dc78397

File tree

5 files changed

+77
-29
lines changed

5 files changed

+77
-29
lines changed

‎packages/devextreme-cli/src/applications/application.react.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const create = async(appName, options) => {
8282

8383
const commandArguments = [`-p=create-vite@${depsVersionTag || latestVersions['create-vite']}`, 'create-vite', appName];
8484

85-
commandArguments.push(`--template react${transpiler === 'swc' ? '-swc' : ''}${templateOptions.isTypeScript ? '-ts' : ''}`);
85+
commandArguments.push(`--template react${transpiler === 'swc' ? '-swc' : ''}${templateOptions.isTypeScript ? '-ts' : ''} --no-rolldown --no-interactive`);
8686

8787
await runCommand('npx', commandArguments);
8888

‎packages/devextreme-cli/src/templates/react/application/src/components/change-password-form/ChangePasswordForm.tsx‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
1+
import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
22
import { useNavigate, useParams } from 'react-router-dom';
33
import Form, {
44
Item,
55
Label,
66
ButtonItem,
77
ButtonOptions,
88
RequiredRule,
9-
CustomRule,
9+
CustomRule,<%=#isTypeScript%>
10+
type FormTypes,<%=/isTypeScript%>
1011
} from 'devextreme-react/form';
1112
import LoadIndicator from 'devextreme-react/load-indicator';
1213
import notify from 'devextreme/ui/notify';
@@ -16,12 +17,23 @@ import { changePassword } from '../../api/auth';
1617
export default function ChangePasswordForm() {
1718
const navigate = useNavigate();
1819
const [loading, setLoading] = useState(false);
19-
const formData = useRef({ password: '' });
20+
const [formData, setFormData] = useState({ password: '' });
2021
const { recoveryCode } = useParams();
2122

23+
const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
24+
const { dataField, value } = e;
25+
26+
if (dataField) {
27+
setFormData(formData => ({
28+
...formData,
29+
[dataField]: value,
30+
}));
31+
}
32+
}, []);
33+
2234
const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
2335
e.preventDefault();
24-
const { password } = formData.current;
36+
const { password } = formData;
2537
setLoading(true);
2638

2739
const result = await changePassword(password, recoveryCode);
@@ -32,16 +44,16 @@ export default function ChangePasswordForm() {
3244
} else {
3345
notify(result.message, 'error', 2000);
3446
}
35-
}, [navigate, recoveryCode]);
47+
}, [navigate, recoveryCode, formData]);
3648

3749
const confirmPassword = useCallback(
38-
({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
39-
[]
50+
({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.password,
51+
[formData]
4052
);
4153

4254
return (
4355
<form onSubmit={onSubmit}>
44-
<Form formData={formData.current} disabled={loading}>
56+
<Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
4557
<Item
4658
dataField={'password'}
4759
editorType={'dxTextBox'}

‎packages/devextreme-cli/src/templates/react/application/src/components/create-account-form/CreateAccountForm.tsx‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
1+
import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
22
import { Link, useNavigate } from 'react-router-dom';
33
import Form, {
44
Item,
@@ -7,7 +7,8 @@ import Form, {
77
ButtonOptions,
88
RequiredRule,
99
CustomRule,
10-
EmailRule
10+
EmailRule,<%=#isTypeScript%>
11+
type FormTypes,<%=/isTypeScript%>
1112
} from 'devextreme-react/form';
1213
import notify from 'devextreme/ui/notify';
1314
import LoadIndicator from 'devextreme-react/load-indicator';
@@ -18,11 +19,22 @@ import './CreateAccountForm.scss';
1819
export default function CreateAccountForm() {
1920
const navigate = useNavigate();
2021
const [loading, setLoading] = useState(false);
21-
const formData = useRef({ email: '', password: '' });
22+
const [formData, setFormData] = useState({ email: '', password: '' });
23+
24+
const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
25+
const { dataField, value } = e;
26+
27+
if (dataField) {
28+
setFormData(formData => ({
29+
...formData,
30+
[dataField]: value,
31+
}));
32+
}
33+
}, []);
2234

2335
const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
2436
e.preventDefault();
25-
const { email, password } = formData.current;
37+
const { email, password } = formData;
2638
setLoading(true);
2739

2840
const result = await createAccount(email, password);
@@ -33,16 +45,16 @@ export default function CreateAccountForm() {
3345
} else {
3446
notify(result.message, 'error', 2000);
3547
}
36-
}, [navigate]);
48+
}, [navigate, formData]);
3749

3850
const confirmPassword = useCallback(
39-
({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.current.password,
40-
[]
51+
({ value }<%=#isTypeScript%>: ValidationCallbackData<%=/isTypeScript%>) => value === formData.password,
52+
[formData]
4153
);
4254

4355
return (
4456
<form className={'create-account-form'} onSubmit={onSubmit}>
45-
<Form formData={formData.current} disabled={loading}>
57+
<Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
4658
<Item
4759
dataField={'email'}
4860
editorType={'dxTextBox'}

‎packages/devextreme-cli/src/templates/react/application/src/components/login-form/LoginForm.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
1+
import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
22
import { Link, useNavigate } from 'react-router-dom';
33
import Form, {
44
Item,
55
Label,
66
ButtonItem,
77
ButtonOptions,
88
RequiredRule,
9-
EmailRule
9+
EmailRule,<%=#isTypeScript%>
10+
type FormTypes,<%=/isTypeScript%>
1011
} from 'devextreme-react/form';
1112
import LoadIndicator from 'devextreme-react/load-indicator';
1213
import Button from 'devextreme-react/button';
@@ -19,27 +20,38 @@ export default function LoginForm() {
1920
const navigate = useNavigate();
2021
const { signIn } = useAuth();
2122
const [loading, setLoading] = useState(false);
22-
const formData = useRef({ email: '', password: '' });
23+
const [formData, setFormData] = useState({ email: '', password: '' });
24+
25+
const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
26+
const { dataField, value } = e;
27+
28+
if (dataField) {
29+
setFormData(formData => ({
30+
...formData,
31+
[dataField]: value,
32+
}));
33+
}
34+
}, []);
2335

2436
const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
2537
e.preventDefault();
26-
const { email, password } = formData.current;
38+
const { email, password } = formData;
2739
setLoading(true);
2840

2941
const result = await signIn(email, password);
3042
if (!result.isOk) {
3143
setLoading(false);
3244
notify(result.message, 'error', 2000);
3345
}
34-
}, [signIn]);
46+
}, [signIn, formData]);
3547

3648
const onCreateAccountClick = useCallback(() => {
3749
navigate('/create-account');
3850
}, [navigate]);
3951

4052
return (
4153
<form className={'login-form'} onSubmit={onSubmit}>
42-
<Form formData={formData.current} disabled={loading}>
54+
<Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
4355
<Item
4456
dataField={'email'}
4557
editorType={'dxTextBox'}

‎packages/devextreme-cli/src/templates/react/application/src/components/reset-password-form/ResetPasswordForm.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
1+
import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useCallback } from 'react';
22
import { Link, useNavigate } from "react-router-dom";
33
import Form, {
44
Item,
55
Label,
66
ButtonItem,
77
ButtonOptions,
88
RequiredRule,
9-
EmailRule
9+
EmailRule,<%=#isTypeScript%>
10+
type FormTypes,<%=/isTypeScript%>
1011
} from 'devextreme-react/form';
1112
import LoadIndicator from 'devextreme-react/load-indicator';
1213
import notify from 'devextreme/ui/notify';
@@ -18,11 +19,22 @@ const notificationText = 'We\'ve sent a link to reset your password. Check your
1819
export default function ResetPasswordForm() {
1920
const navigate = useNavigate();
2021
const [loading, setLoading] = useState(false);
21-
const formData = useRef({ email: '', password: '' });
22+
const [formData, setFormData] = useState({ email: '', password: '' });
23+
24+
const onFieldDataChanged = useCallback((e<%=#isTypeScript%>: FormTypes.FieldDataChangedEvent<%=/isTypeScript%>) => {
25+
const { dataField, value } = e;
26+
27+
if (dataField) {
28+
setFormData(formData => ({
29+
...formData,
30+
[dataField]: value,
31+
}));
32+
}
33+
}, []);
2234

2335
const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
2436
e.preventDefault();
25-
const { email } = formData.current;
37+
const { email } = formData;
2638
setLoading(true);
2739

2840
const result = await resetPassword(email);
@@ -34,11 +46,11 @@ export default function ResetPasswordForm() {
3446
} else {
3547
notify(result.message, 'error', 2000);
3648
}
37-
}, [navigate]);
49+
}, [navigate, formData]);
3850

3951
return (
4052
<form className={'reset-password-form'} onSubmit={onSubmit}>
41-
<Form formData={formData.current} disabled={loading}>
53+
<Form formData={formData} disabled={loading} onFieldDataChanged={onFieldDataChanged}>
4254
<Item
4355
dataField={'email'}
4456
editorType={'dxTextBox'}

0 commit comments

Comments
 (0)