From ac0f2334aa46a331be1c5d46d1e0f740c1e0e2bb Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Sat, 10 Apr 2021 01:38:01 +0200
Subject: [PATCH] [TypeScript] Fix minor type errors in ra-ui-material-ui and
 validate

---
 examples/simple/src/comments/CommentEdit.tsx  |  9 ++--
 examples/simple/src/comments/CommentList.tsx  |  6 +--
 examples/simple/src/comments/PostPreview.tsx  | 41 ++++++++++++++-----
 .../simple/src/comments/PostQuickCreate.tsx   |  5 ++-
 examples/simple/src/posts/PostCreate.tsx      |  2 +-
 examples/simple/src/posts/PostEdit.tsx        | 12 ++++--
 examples/simple/src/posts/PostList.tsx        |  8 ++--
 examples/simple/src/posts/PostShow.tsx        |  5 ++-
 examples/simple/src/posts/PostTitle.tsx       |  4 +-
 .../simple/src/posts/TagReferenceInput.tsx    |  8 +++-
 examples/simple/src/users/UserCreate.tsx      | 15 +++----
 packages/ra-core/src/form/validate.ts         | 28 +++++++++----
 .../src/button/BulkExportButton.tsx           |  2 +-
 .../ra-ui-materialui/src/detail/ShowView.tsx  |  2 +-
 .../src/field/TranslatableFields.tsx          |  6 +--
 .../ra-ui-materialui/src/form/Toolbar.tsx     |  7 +++-
 16 files changed, 103 insertions(+), 57 deletions(-)

diff --git a/examples/simple/src/comments/CommentEdit.tsx b/examples/simple/src/comments/CommentEdit.tsx
index 97425b6b54f..f480054ede6 100644
--- a/examples/simple/src/comments/CommentEdit.tsx
+++ b/examples/simple/src/comments/CommentEdit.tsx
@@ -13,10 +13,11 @@ import {
     TextInput,
     Title,
     minLength,
+    Record,
 } from 'react-admin'; // eslint-disable-line import/no-unresolved
 
-const LinkToRelatedPost = ({ record }) => (
-    <Link to={`/posts/${record.post_id}`}>
+const LinkToRelatedPost = ({ record }: { record?: Record }) => (
+    <Link to={`/posts/${record?.post_id}`}>
         <Typography variant="caption" color="inherit" align="right">
             See related post
         </Typography>
@@ -33,9 +34,9 @@ const useEditStyles = makeStyles({
     },
 });
 
-const OptionRenderer = ({ record }) => (
+const OptionRenderer = ({ record }: { record?: Record }) => (
     <span>
-        {record.title} - {record.id}
+        {record?.title} - {record?.id}
     </span>
 );
 
diff --git a/examples/simple/src/comments/CommentList.tsx b/examples/simple/src/comments/CommentList.tsx
index 1a0716f0fc8..a2d54edaa74 100644
--- a/examples/simple/src/comments/CommentList.tsx
+++ b/examples/simple/src/comments/CommentList.tsx
@@ -14,7 +14,7 @@ import {
     Typography,
     useMediaQuery,
 } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import jsonExport from 'jsonexport/dist';
 import {
     ListBase,
@@ -76,7 +76,7 @@ const CommentPagination = () => {
     const translate = useTranslate();
     const nbPages = Math.ceil(total / perPage) || 1;
     if (!loading && (total === 0 || (ids && !ids.length))) {
-        return <PaginationLimit total={total} page={page} ids={ids} />;
+        return <PaginationLimit />;
     }
 
     return (
@@ -209,7 +209,7 @@ const CommentList = props => (
 );
 
 const ListView = () => {
-    const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm'));
+    const isSmall = useMediaQuery<Theme>(theme => theme.breakpoints.down('sm'));
     const { defaultTitle } = useListContext();
     return (
         <>
diff --git a/examples/simple/src/comments/PostPreview.tsx b/examples/simple/src/comments/PostPreview.tsx
index 89d0934c7e2..67a26212ce1 100644
--- a/examples/simple/src/comments/PostPreview.tsx
+++ b/examples/simple/src/comments/PostPreview.tsx
@@ -1,20 +1,39 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { SimpleShowLayout, TextField } from 'react-admin';
+import {
+    SimpleShowLayout,
+    TextField,
+    ReduxState,
+    Identifier,
+    Record,
+} from 'react-admin';
 
-const PostPreview = props => {
-    const record = useSelector(
-        state =>
-            state.admin.resources[props.resource]
-                ? state.admin.resources[props.resource].data[props.id]
-                : null,
-        [props.resource, props.id]
+const PostPreview = ({
+    id,
+    basePath,
+    resource,
+}: {
+    id: Identifier;
+    basePath: string;
+    resource: string;
+}) => {
+    const record = useSelector<ReduxState, Record>(state =>
+        state.admin.resources[resource]
+            ? state.admin.resources[resource].data[id]
+            : null
     );
-    const version = useSelector(state => state.admin.ui.viewVersion);
-    useSelector(state => state.admin.loading > 0);
+    const version = useSelector<ReduxState, number>(
+        state => state.admin.ui.viewVersion
+    );
+    useSelector<ReduxState>(state => state.admin.loading > 0);
 
     return (
-        <SimpleShowLayout version={version} record={record} {...props}>
+        <SimpleShowLayout
+            version={version}
+            record={record}
+            basePath={basePath}
+            resource={resource}
+        >
             <TextField source="id" />
             <TextField source="title" />
             <TextField source="teaser" />
diff --git a/examples/simple/src/comments/PostQuickCreate.tsx b/examples/simple/src/comments/PostQuickCreate.tsx
index fc777811a66..df4b1ca1914 100644
--- a/examples/simple/src/comments/PostQuickCreate.tsx
+++ b/examples/simple/src/comments/PostQuickCreate.tsx
@@ -11,6 +11,7 @@ import {
     Toolbar,
     required,
     showNotification,
+    ReduxState,
 } from 'react-admin'; // eslint-disable-line import/no-unresolved
 
 import CancelButton from './PostQuickCreateCancelButton';
@@ -36,7 +37,9 @@ const useStyles = makeStyles({
 const PostQuickCreate = ({ onCancel, onSave, ...props }) => {
     const classes = useStyles();
     const dispatch = useDispatch();
-    const submitting = useSelector(state => state.admin.loading > 0);
+    const submitting = useSelector<ReduxState, boolean>(
+        state => state.admin.loading > 0
+    );
 
     const handleSave = useCallback(
         values => {
diff --git a/examples/simple/src/posts/PostCreate.tsx b/examples/simple/src/posts/PostCreate.tsx
index cfc4d227c2a..f4bf3df8113 100644
--- a/examples/simple/src/posts/PostCreate.tsx
+++ b/examples/simple/src/posts/PostCreate.tsx
@@ -73,7 +73,7 @@ const PostCreate = ({ permissions, ...props }) => {
                 toolbar={<PostCreateToolbar />}
                 initialValues={initialValues}
                 validate={values => {
-                    const errors = {};
+                    const errors = {} as any;
                     ['title', 'teaser'].forEach(field => {
                         if (!values[field]) {
                             errors[field] = 'Required field';
diff --git a/examples/simple/src/posts/PostEdit.tsx b/examples/simple/src/posts/PostEdit.tsx
index de8a6a5e0dc..948b25ce895 100644
--- a/examples/simple/src/posts/PostEdit.tsx
+++ b/examples/simple/src/posts/PostEdit.tsx
@@ -29,12 +29,12 @@ import {
     required,
     FormDataConsumer,
 } from 'react-admin'; // eslint-disable-line import/no-unresolved
-import { Box } from '@material-ui/core';
+import { Box, BoxProps } from '@material-ui/core';
 
 import PostTitle from './PostTitle';
 import TagReferenceInput from './TagReferenceInput';
 
-const EditActions = ({ basePath, data, hasShow }) => (
+const EditActions = ({ basePath, data, hasShow }: any) => (
     <TopToolbar>
         <CloneButton
             className="button-clone"
@@ -45,7 +45,11 @@ const EditActions = ({ basePath, data, hasShow }) => (
     </TopToolbar>
 );
 
-const SanitizedBox = ({ fullWidth, basePath, ...props }) => <Box {...props} />;
+const SanitizedBox = ({
+    fullWidth,
+    basePath,
+    ...props
+}: BoxProps & { fullWidth?: boolean; basePath?: string }) => <Box {...props} />;
 
 const PostEdit = ({ permissions, ...props }) => (
     <Edit title={<PostTitle />} actions={<EditActions />} {...props}>
@@ -147,7 +151,7 @@ const PostEdit = ({ permissions, ...props }) => (
                         <TextInput source="url" validate={required()} />
                     </SimpleFormIterator>
                 </ArrayInput>
-                <DateInput source="published_at" options={{ locale: 'pt' }} />
+                <DateInput source="published_at" />
                 <SelectInput
                     allowEmpty
                     resettable
diff --git a/examples/simple/src/posts/PostList.tsx b/examples/simple/src/posts/PostList.tsx
index 07c961e9e11..a361ba87544 100644
--- a/examples/simple/src/posts/PostList.tsx
+++ b/examples/simple/src/posts/PostList.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Children, Fragment, cloneElement, memo } from 'react';
 import BookIcon from '@material-ui/icons/Book';
 import { Chip, useMediaQuery } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import lodashGet from 'lodash/get';
 import jsonExport from 'jsonexport/dist';
 import {
@@ -35,7 +35,7 @@ const useQuickFilterStyles = makeStyles(theme => ({
         marginBottom: theme.spacing(1),
     },
 }));
-const QuickFilter = ({ label }) => {
+const QuickFilter = ({ label, source, defaultValue }) => {
     const translate = useTranslate();
     const classes = useQuickFilterStyles();
     return <Chip className={classes.chip} label={translate(label)} />;
@@ -81,7 +81,7 @@ const useStyles = makeStyles(theme => ({
     publishedAt: { fontStyle: 'italic' },
 }));
 
-const PostListBulkActions = memo(props => (
+const PostListBulkActions = memo(({ children, ...props }) => (
     <Fragment>
         <ResetViewsButton {...props} />
         <BulkDeleteButton {...props} />
@@ -121,7 +121,7 @@ const PostPanel = ({ id, record, resource }) => (
 
 const PostList = props => {
     const classes = useStyles();
-    const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm'));
+    const isSmall = useMediaQuery<Theme>(theme => theme.breakpoints.down('sm'));
     return (
         <List
             {...props}
diff --git a/examples/simple/src/posts/PostShow.tsx b/examples/simple/src/posts/PostShow.tsx
index 37719ccaf04..75688fc5520 100644
--- a/examples/simple/src/posts/PostShow.tsx
+++ b/examples/simple/src/posts/PostShow.tsx
@@ -21,17 +21,18 @@ import {
     UrlField,
     useShowController,
     useLocale,
+    Record,
 } from 'react-admin';
 import { Link } from 'react-router-dom';
 import { Button } from '@material-ui/core';
 import PostTitle from './PostTitle';
 
-const CreateRelatedComment = ({ record }) => (
+const CreateRelatedComment = ({ record }: { record?: Record }) => (
     <Button
         component={Link}
         to={{
             pathname: '/comments/create',
-            state: { record: { post_id: record.id } },
+            state: { record: { post_id: record?.id } },
         }}
     >
         Add comment
diff --git a/examples/simple/src/posts/PostTitle.tsx b/examples/simple/src/posts/PostTitle.tsx
index 6f4756b0638..25d3f287e0d 100644
--- a/examples/simple/src/posts/PostTitle.tsx
+++ b/examples/simple/src/posts/PostTitle.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useTranslate } from 'react-admin';
+import { useTranslate, Record } from 'react-admin';
 
-export default ({ record }) => {
+export default ({ record }: { record?: Record }) => {
     const translate = useTranslate();
     return (
         <span>
diff --git a/examples/simple/src/posts/TagReferenceInput.tsx b/examples/simple/src/posts/TagReferenceInput.tsx
index a549da4a5a3..1083e911048 100644
--- a/examples/simple/src/posts/TagReferenceInput.tsx
+++ b/examples/simple/src/posts/TagReferenceInput.tsx
@@ -18,7 +18,13 @@ const useStyles = makeStyles({
     },
 });
 
-const TagReferenceInput = ({ ...props }) => {
+const TagReferenceInput = ({
+    ...props
+}: {
+    reference: string;
+    source: string;
+    label?: string;
+}) => {
     const classes = useStyles();
     const { change } = useForm();
     const [filter, setFilter] = useState(true);
diff --git a/examples/simple/src/users/UserCreate.tsx b/examples/simple/src/users/UserCreate.tsx
index b959c1c6936..03013d2ba2a 100644
--- a/examples/simple/src/users/UserCreate.tsx
+++ b/examples/simple/src/users/UserCreate.tsx
@@ -13,14 +13,7 @@ import {
 
 import Aside from './Aside';
 
-const UserEditToolbar = ({
-    permissions,
-    hasList,
-    hasEdit,
-    hasShow,
-    hasCreate,
-    ...props
-}) => (
+const UserEditToolbar = ({ permissions, ...props }) => (
     <Toolbar {...props}>
         <SaveButton
             label="user.action.save_and_show"
@@ -39,8 +32,10 @@ const UserEditToolbar = ({
 );
 
 const isValidName = async value =>
-    new Promise(resolve =>
-        setTimeout(resolve(value === 'Admin' ? "Can't be Admin" : undefined))
+    new Promise<string>(resolve =>
+        setTimeout(() =>
+            resolve(value === 'Admin' ? "Can't be Admin" : undefined)
+        )
     );
 
 const UserCreate = ({ permissions, ...props }) => (
diff --git a/packages/ra-core/src/form/validate.ts b/packages/ra-core/src/form/validate.ts
index b9fe964d43d..c9d3a68a2e0 100644
--- a/packages/ra-core/src/form/validate.ts
+++ b/packages/ra-core/src/form/validate.ts
@@ -23,7 +23,18 @@ export type Validator = (
     value: any,
     values: any,
     props: any
-) => ValidationErrorMessage | null | undefined;
+) =>
+    | ValidationErrorMessage
+    | null
+    | undefined
+    | Promise<ValidationErrorMessage | null | undefined>;
+
+// type predicate, see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
+function isValidationErrorMessageWithArgs(
+    error: ReturnType<Validator>
+): error is ValidationErrorMessageWithArgs {
+    return error.hasOwnProperty('message');
+}
 
 interface MessageFuncParams {
     args: any;
@@ -74,18 +85,21 @@ export const composeValidators = (...validators) => async (
     const allValidators = (Array.isArray(validators[0])
         ? validators[0]
         : validators
-    ).filter(isFunction);
+    ).filter(isFunction) as Validator[];
 
     for (const validator of allValidators) {
         const errorPromise = validator(value, values, meta);
 
         if (errorPromise) {
-            let error = errorPromise;
-
-            if (errorPromise.then) {
-                error = await errorPromise;
+            if (typeof errorPromise == 'string') {
+                return errorPromise;
+            }
+            if (isValidationErrorMessageWithArgs(errorPromise)) {
+                return errorPromise;
             }
 
+            const error = await errorPromise;
+
             if (error) {
                 return error;
             }
@@ -102,7 +116,7 @@ export const composeSyncValidators = (...validators) => (
     const allValidators = (Array.isArray(validators[0])
         ? validators[0]
         : validators
-    ).filter(isFunction);
+    ).filter(isFunction) as Validator[];
 
     for (const validator of allValidators) {
         const error = validator(value, values, meta);
diff --git a/packages/ra-ui-materialui/src/button/BulkExportButton.tsx b/packages/ra-ui-materialui/src/button/BulkExportButton.tsx
index 8299acfe315..2e95c057a5d 100644
--- a/packages/ra-ui-materialui/src/button/BulkExportButton.tsx
+++ b/packages/ra-ui-materialui/src/button/BulkExportButton.tsx
@@ -104,7 +104,7 @@ interface Props {
     icon?: JSX.Element;
     label?: string;
     onClick?: (e: Event) => void;
-    selectedIds: Identifier[];
+    selectedIds?: Identifier[];
     resource?: string;
 }
 
diff --git a/packages/ra-ui-materialui/src/detail/ShowView.tsx b/packages/ra-ui-materialui/src/detail/ShowView.tsx
index f9cc6783380..f21598a8282 100644
--- a/packages/ra-ui-materialui/src/detail/ShowView.tsx
+++ b/packages/ra-ui-materialui/src/detail/ShowView.tsx
@@ -96,7 +96,7 @@ export const ShowView = (props: ShowViewProps) => {
 
 interface ShowViewProps
     extends ShowProps,
-        Omit<ShowControllerProps, 'resource'> {
+        Partial<Omit<ShowControllerProps, 'resource'>> {
     children: ReactElement;
 }
 
diff --git a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
index 7078ab887a1..26ff3333a38 100644
--- a/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
+++ b/packages/ra-ui-materialui/src/field/TranslatableFields.tsx
@@ -104,11 +104,11 @@ export const TranslatableFields = (
 };
 
 export interface TranslatableFieldsProps extends UseTranslatableOptions {
-    basePath: string;
+    basePath?: string;
     children: ReactNode;
     classes?: ClassesOverride<typeof useStyles>;
-    record: Record;
-    resource: string;
+    record?: Record;
+    resource?: string;
     selector?: ReactElement;
     groupKey?: string;
 }
diff --git a/packages/ra-ui-materialui/src/form/Toolbar.tsx b/packages/ra-ui-materialui/src/form/Toolbar.tsx
index 6da22b8de54..b1e86319f4a 100644
--- a/packages/ra-ui-materialui/src/form/Toolbar.tsx
+++ b/packages/ra-ui-materialui/src/form/Toolbar.tsx
@@ -8,7 +8,9 @@ import {
     ReactNode,
 } from 'react';
 import PropTypes from 'prop-types';
-import MuiToolbar from '@material-ui/core/Toolbar';
+import MuiToolbar, {
+    ToolbarProps as MuiToolbarProps,
+} from '@material-ui/core/Toolbar';
 import withWidth from '@material-ui/core/withWidth';
 import { makeStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
@@ -203,7 +205,8 @@ const Toolbar: FC<ToolbarProps> = props => {
     );
 };
 
-export interface ToolbarProps<RecordType extends Record = Record> {
+export interface ToolbarProps<RecordType extends Record = Record>
+    extends Omit<MuiToolbarProps, 'classes'> {
     children?: ReactNode;
     alwaysEnableSaveButton?: boolean;
     className?: string;