Simplify the development of custom List views

package.json

@@ -45,8 +45,8 @@
         "@types/react": "^16.9.0",
         "@types/react-redux": "^7.1.1",
         "@types/recompose": "^0.27.0",
-        "@typescript-eslint/eslint-plugin": "^1.9.0",
-        "@typescript-eslint/parser": "^1.9.0",
+        "@typescript-eslint/eslint-plugin": "^3.3.0",
+        "@typescript-eslint/parser": "^3.3.0",
         "babel-eslint": "^10.0.1",
         "cheerio": "~1.0.0-rc.2",
         "concurrently": "^5.1.0",
@@ -69,7 +69,7 @@
         "lint-staged": "^8.1.7",
         "lolex": "~2.3.2",
         "mutationobserver-shim": "^0.3.3",
-        "prettier": "~1.17.1",
+        "prettier": "~1.19.1",
         "raf": "~3.4.1",
         "ts-jest": "^24.0.0",
         "wait-on": "^3.2.0",
@@ -81,6 +81,6 @@
         "cypress"
     ],
     "dependencies": {
-        "typescript": "^3.5.3"
+        "typescript": "^3.7.0"
     }
 }

packages/ra-core/src/auth/useAuthState.ts

@@ -49,7 +49,7 @@ const emptyParams = {};
  *     );
  */
 const useAuthState = (params: any = emptyParams): State => {
-    const [state, setState] = useSafeSetState({
+    const [state, setState] = useSafeSetState<State>({
         loading: true,
         loaded: false,
         authenticated: true, // optimistic
@@ -64,6 +64,7 @@ const useAuthState = (params: any = emptyParams): State => {
                 setState({ loading: false, loaded: true, authenticated: false })
             );
     }, [checkAuth, params, setState]);
+
     return state;
 };
 

packages/ra-core/src/controller/ListContext.tsx

@@ -0,0 +1,55 @@
+import { createContext } from 'react';
+import { ListControllerProps } from './useListController';
+
+/**
+ * Context to store the result of the useListController() hook.
+ *
+ * Use the useListContext() hook to read the context.
+ *
+ * @see useListController
+ * @see useListContext
+ *
+ * @example
+ *
+ * import { useListController, ListContext } from 'ra-core';
+ *
+ * const List = props => {
+ *     const controllerProps = useListController(props);
+ *     return (
+ *         <ListContext.Provider value={controllerProps}>
+ *             ...
+ *         </ListContext.Provider>
+ *     );
+ * };
+ */
+const ListContext = createContext<ListControllerProps>({
+    basePath: null,
+    currentSort: null,
+    data: null,
+    defaultTitle: null,
+    displayedFilters: null,
+    filterValues: null,
+    hasCreate: null,
+    hideFilter: null,
+    ids: null,
+    loaded: null,
+    loading: null,
+    onSelect: null,
+    onToggleItem: null,
+    onUnselectItems: null,
+    page: null,
+    perPage: null,
+    resource: null,
+    selectedIds: null,
+    setFilters: null,
+    setPage: null,
+    setPerPage: null,
+    setSort: null,
+    showFilter: null,
+    total: null,
+    version: null,
+});
+
+ListContext.displayName = 'ListContext';
+
+export default ListContext;

packages/ra-core/src/controller/index.ts

@@ -1,6 +1,7 @@
 import CreateController from './CreateController';
 import EditController from './EditController';
 import ListController from './ListController';
+import ListContext from './ListContext';
 import ShowController from './ShowController';
 import useRecordSelection from './useRecordSelection';
 import useVersion from './useVersion';
@@ -13,6 +14,7 @@ import useListController, {
     sanitizeListRestProps,
     ListControllerProps,
 } from './useListController';
+import useListContext from './useListContext';
 import useEditController, { EditControllerProps } from './useEditController';
 import useCreateController, {
     CreateControllerProps,
@@ -27,6 +29,7 @@ export {
     CreateController,
     EditController,
     ListController,
+    ListContext,
     ShowController,
     useCheckMinimumRequiredProps,
     useListController,
@@ -40,6 +43,7 @@ export {
     useSortState,
     usePaginationState,
     useReference,
+    useListContext,
     useListParams,
     ListControllerProps,
     EditControllerProps,

packages/ra-core/src/controller/useListContext.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+
+import ListContext from './ListContext';
+
+/**
+ * Hook to read the list controller props.
+ *
+ * Must be used within a <ListContext.Provider>
+ */
+const useListContext = () => useContext(ListContext);
+
+export default useListContext;

packages/ra-core/src/controller/useListController.ts

@@ -21,20 +21,18 @@ export interface ListProps {
     filter?: object;
     filters?: ReactElement<any>;
     filterDefaultValues?: object;
-    pagination?: ReactElement<any>;
     perPage?: number;
     sort?: Sort;
     // the props managed by react-admin
-    basePath: string;
+    basePath?: string;
     debounce?: number;
     hasCreate?: boolean;
     hasEdit?: boolean;
     hasList?: boolean;
     hasShow?: boolean;
     location?: Location;
     path?: string;
-    query: ListParams;
-    resource: string;
+    resource?: string;
     [key: string]: any;
 }
 

packages/ra-core/src/dataProvider/useGetMany.ts

@@ -90,7 +90,7 @@ const useGetMany = (
     const data = useSelector((state: ReduxState) =>
         selectMany(state, resource, ids)
     );
-    const [state, setState] = useSafeSetState({
+    const [state, setState] = useSafeSetState<UseGetManyResult>({
         data,
         error: null,
         loading: ids.length !== 0,

packages/ra-core/src/dataProvider/useMutation.ts

@@ -124,7 +124,7 @@ const useMutation = (
     query?: Mutation,
     options?: MutationOptions
 ): UseMutationValue => {
-    const [state, setState] = useSafeSetState({
+    const [state, setState] = useSafeSetState<UseMutationState>({
         data: null,
         error: null,
         total: null,
@@ -204,15 +204,17 @@ export interface MutationOptions {
     withDeclarativeSideEffectsSupport?: boolean;
 }
 
+export interface UseMutationState {
+    data?: any;
+    total?: number;
+    error?: any;
+    loading: boolean;
+    loaded: boolean;
+}
+
 export type UseMutationValue = [
     (query?: Partial<Mutation>, options?: Partial<MutationOptions>) => void,
-    {
-        data?: any;
-        total?: number;
-        error?: any;
-        loading: boolean;
-        loaded: boolean;
-    }
+    UseMutationState
 ];
 
 /**

packages/ra-core/src/export/ExporterContext.ts

@@ -3,7 +3,7 @@ import { createContext } from 'react';
 import { Exporter } from '../types';
 import defaultExporter from './defaultExporter';
 
-const ExporterContext = createContext<Exporter>(defaultExporter);
+const ExporterContext = createContext<Exporter | false>(defaultExporter);
 
 ExporterContext.displayName = 'ExporterContext';
 

packages/ra-ui-materialui/src/auth/LoginForm.tsx

@@ -123,7 +123,7 @@ const LoginForm: FunctionComponent<Props> = props => {
                             variant="contained"
                             type="submit"
                             color="primary"
-                            disabled={loading}
+                            disabled={!!loading}
                             className={classes.button}
                         >
                             {loading && (

packages/ra-ui-materialui/src/layout/Title.js → packages/ra-ui-materialui/src/layout/Title.tsx

@@ -1,10 +1,23 @@
 import * as React from 'react';
-import { cloneElement } from 'react';
+import { FC, cloneElement, ReactElement } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
-import { useTranslate, warning } from 'ra-core';
+import { useTranslate, Record, warning } from 'ra-core';
 
-const Title = ({ className, defaultTitle, locale, record, title, ...rest }) => {
+export interface TitleProps {
+    className?: string;
+    defaultTitle: string;
+    record?: Record;
+    title?: string | ReactElement;
+}
+
+const Title: FC<TitleProps> = ({
+    className,
+    defaultTitle,
+    record,
+    title,
+    ...rest
+}) => {
     const translate = useTranslate();
     const container =
         typeof document !== 'undefined'
@@ -35,8 +48,7 @@ export const TitlePropType = PropTypes.oneOfType([
 Title.propTypes = {
     defaultTitle: PropTypes.string,
     className: PropTypes.string,
-    locale: PropTypes.string,
-    record: PropTypes.object,
+    record: PropTypes.any,
     title: TitlePropType,
 };
 

packages/ra-ui-materialui/src/list/Empty.js → packages/ra-ui-materialui/src/list/Empty.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
+import { FC } from 'react';
+import { Typography, makeStyles } from '@material-ui/core';
 import Inbox from '@material-ui/icons/Inbox';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/styles';
-import { useTranslate } from 'ra-core';
-import { CreateButton } from '../button';
+import { useTranslate, useListContext } from 'ra-core';
 import inflection from 'inflection';
 
+import { ClassesOverride } from '../types';
+import { CreateButton } from '../button';
+
 const useStyles = makeStyles(
     theme => ({
         message: {
@@ -29,8 +31,8 @@ const useStyles = makeStyles(
     { name: 'RaEmpty' }
 );
 
-const Empty = props => {
-    const { resource, basePath } = props;
+const Empty: FC<EmptyProps> = props => {
+    const { resource, basePath } = useListContext();
     const classes = useStyles(props);
     const translate = useTranslate();
 
@@ -67,4 +69,8 @@ const Empty = props => {
     );
 };
 
+export interface EmptyProps {
+    classes?: ClassesOverride<typeof useStyles>;
+}
+
 export default Empty;