fix types in react for lint check

Author: GoodDayForSurf

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

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import Form, {
   Item,
@@ -19,7 +19,7 @@ export default function ChangePasswordForm() {
   const formData = useRef({ password: '' });
   const { recoveryCode } = useParams();
 
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
     const { password } = formData.current;
     setLoading(true);

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

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import Form, {
   Item,
@@ -20,7 +20,7 @@ export default function CreateAccountForm() {
   const [loading, setLoading] = useState(false);
   const formData = useRef({ email: '', password: '' });
 
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
     const { email, password } = formData.current;
     setLoading(true);

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

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import Form, {
   Item,
@@ -21,7 +21,7 @@ export default function LoginForm() {
   const [loading, setLoading] = useState(false);
   const formData = useRef({ email: '', password: '' });
 
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
     const { email, password } = formData.current;
     setLoading(true);

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

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback } from 'react';
+import <%=#isTypeScript%>React, <%=/isTypeScript%>{ useState, useRef, useCallback } from 'react';
 import { Link, useNavigate } from "react-router-dom";
 import Form, {
   Item,
@@ -20,7 +20,7 @@ export default function ResetPasswordForm() {
   const [loading, setLoading] = useState(false);
   const formData = useRef({ email: '', password: '' });
 
-  const onSubmit = useCallback(async (e<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
+  const onSubmit = useCallback(async (e<%=#isTypeScript%>: React.FormEvent<HTMLFormElement><%=/isTypeScript%>) => {
     e.preventDefault();
     const { email } = formData.current;
     setLoading(true);

packages/devextreme-cli/src/templates/react/application/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.tsx

@@ -84,13 +84,19 @@ export default function SideNavInnerToolbar({ title, children }<%=#isTypeScript%
           />
           <ScrollView ref={scrollViewRef} className={'layout-body with-footer'}>
             <div className={'content'}>
-              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-                return item.type !== Footer && item;
+              {React.Children.map(children, (item) => {
+                if (<%=#isTypeScript%>React.isValidElement(item) && <%=/isTypeScript%>item.type !== Footer) {
+                  return item;
+                }
+                return null;
               })}
             </div>
             <div className={'content-block'}>
-              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-                return item.type === Footer && item;
+              {React.Children.map(children, (item) => {
+                if (<%=#isTypeScript%>React.isValidElement(item) && <%=/isTypeScript%>item.type === Footer) {
+                  return item;
+                }
+                return null;
               })}
             </div>
           </ScrollView>

packages/devextreme-cli/src/templates/react/application/src/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.tsx

@@ -83,13 +83,19 @@ export default function SideNavOuterToolbar({ title, children }<%=#isTypeScript%
         <div className={'container'}>
           <ScrollView ref={scrollViewRef} className={'with-footer'}>
             <div className={'content'}>
-              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-                return item.type !== Footer && item;
+              {React.Children.map(children, (item) => {
+                if (<%=#isTypeScript%>React.isValidElement(item) && <%=/isTypeScript%>item.type !== Footer) {
+                  return item;
+                }
+                return null;
               })}
             </div>
             <div className={'content-block'}>
-              {React.Children.map(children, (item<%=#isTypeScript%>: any<%=/isTypeScript%>) => {
-                return item.type === Footer && item;
+              {React.Children.map(children, (item) => {
+                if (<%=#isTypeScript%>React.isValidElement(item) && <%=/isTypeScript%>item.type === Footer) {
+                  return item;
+                }
+                return null;
               })}
             </div>
           </ScrollView>

packages/devextreme-cli/src/templates/react/sample-pages/tasks/tasks.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import 'devextreme/data/odata/store';
+import DataSource from 'devextreme/data/data_source';
 import DataGrid, {
   Column,
   Pager,
@@ -16,7 +17,7 @@ export default function Task() {
 
       <DataGrid
         className={'dx-card content-block'}
-        dataSource={dataSource<%=#isTypeScript%> as any<%=/isTypeScript%>}
+        dataSource={dataSource}
         showBorders={false}
         focusedRowEnabled={true}
         defaultFocusedRowIndex={0}
@@ -83,7 +84,7 @@ export default function Task() {
     </React.Fragment>
 )}
 
-const dataSource = {
+const dataSource = new DataSource({
   store: {
     version: 2,
     type: 'odata',
@@ -101,7 +102,7 @@ const dataSource = {
     'Task_Completion',
     'ResponsibleEmployee/Employee_Full_Name'
   ]
-};
+});
 
 const priorities = [
   { name: 'High', value: 4 },