demo reviews/segments refactor to typescript

examples/demo/src/orders/Basket.tsx

@@ -37,7 +37,7 @@ const Basket: FC<FieldProps<Order>> = ({ record }) => {
 
             return productIds
                 .map<Product>(
-                    (productId: string) =>
+                    productId =>
                         state.admin.resources.products.data[
                             productId
                         ] as Product

examples/demo/src/reviews/AcceptButton.js → examples/demo/src/reviews/AcceptButton.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
 import ThumbUp from '@material-ui/icons/ThumbUp';
 import { useTranslate, useUpdate, useNotify, useRedirect } from 'react-admin';
+import { Review } from './../types';
 
 /**
  * This custom button demonstrate using useUpdate to update data
  */
-const AcceptButton = ({ record }) => {
+const AcceptButton: FC<{ record: Review }> = ({ record }) => {
     const translate = useTranslate();
     const notify = useNotify();
     const redirectTo = useRedirect();
@@ -56,7 +57,7 @@ const AcceptButton = ({ record }) => {
 };
 
 AcceptButton.propTypes = {
-    record: PropTypes.object,
+    record: PropTypes.any,
 };
 
 export default AcceptButton;

examples/demo/src/reviews/BulkAcceptButton.js → examples/demo/src/reviews/BulkAcceptButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 import ThumbUp from '@material-ui/icons/ThumbUp';
 import {
@@ -9,8 +9,9 @@ import {
     useUnselectAll,
     CRUD_UPDATE_MANY,
 } from 'react-admin';
+import { BulkActionProps } from '../types';
 
-const BulkAcceptButton = ({ selectedIds }) => {
+const BulkAcceptButton: FC<BulkActionProps> = ({ selectedIds }) => {
     const notify = useNotify();
     const redirectTo = useRedirect();
     const unselectAll = useUnselectAll('reviews');

examples/demo/src/reviews/BulkRejectButton.js → examples/demo/src/reviews/BulkRejectButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 import ThumbDown from '@material-ui/icons/ThumbDown';
 import {
@@ -9,8 +9,9 @@ import {
     useUnselectAll,
     CRUD_UPDATE_MANY,
 } from 'react-admin';
+import { BulkActionProps } from '../types';
 
-const BulkRejectButton = ({ selectedIds }) => {
+const BulkRejectButton: FC<BulkActionProps> = ({ selectedIds }) => {
     const notify = useNotify();
     const redirectTo = useRedirect();
     const unselectAll = useUnselectAll('reviews');

examples/demo/src/reviews/RejectButton.js → examples/demo/src/reviews/RejectButton.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
 import ThumbDown from '@material-ui/icons/ThumbDown';
 import { useTranslate, useUpdate, useNotify, useRedirect } from 'react-admin';
+import { Review } from '../types';
 
 /**
  * This custom button demonstrate using a custom action to update data
  */
-const RejectButton = ({ record }) => {
+const RejectButton: FC<{ record: Review }> = ({ record }) => {
     const translate = useTranslate();
     const notify = useNotify();
     const redirectTo = useRedirect();
@@ -57,7 +58,7 @@ const RejectButton = ({ record }) => {
 };
 
 RejectButton.propTypes = {
-    record: PropTypes.object,
+    record: PropTypes.any,
 };
 
 export default RejectButton;

examples/demo/src/reviews/ReviewEdit.js → examples/demo/src/reviews/ReviewEdit.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import {
     useEditController,
     useTranslate,
@@ -15,6 +15,7 @@ import ProductReferenceField from '../products/ProductReferenceField';
 import CustomerReferenceField from '../visitors/CustomerReferenceField';
 import StarRatingField from './StarRatingField';
 import ReviewEditToolbar from './ReviewEditToolbar';
+import { EditComponentProps } from '../types';
 
 const useStyles = makeStyles(theme => ({
     root: {
@@ -41,7 +42,11 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-const ReviewEdit = ({ onCancel, ...props }) => {
+interface Props extends EditComponentProps {
+    onCancel: () => void;
+}
+
+const ReviewEdit: FC<Props> = ({ onCancel, ...props }) => {
     const classes = useStyles();
     const controllerProps = useEditController(props);
     const translate = useTranslate();
@@ -69,7 +74,6 @@ const ReviewEdit = ({ onCancel, ...props }) => {
                 toolbar={<ReviewEditToolbar />}
             >
                 <CustomerReferenceField formClassName={classes.inlineField} />
-
                 <ProductReferenceField formClassName={classes.inlineField} />
                 <DateField source="date" formClassName={classes.inlineField} />
                 <StarRatingField formClassName={classes.inlineField} />

examples/demo/src/reviews/ReviewEditToolbar.js → examples/demo/src/reviews/ReviewEditToolbar.tsx

@@ -1,10 +1,11 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, FC } from 'react';
 import MuiToolbar from '@material-ui/core/Toolbar';
 import { makeStyles } from '@material-ui/core/styles';
 
 import { SaveButton, DeleteButton } from 'react-admin';
 import AcceptButton from './AcceptButton';
 import RejectButton from './RejectButton';
+import { ToolbarProps, Review } from '../types';
 
 const useStyles = makeStyles(theme => ({
     root: {
@@ -14,7 +15,7 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-const ReviewEditToolbar = ({
+const ReviewEditToolbar: FC<ToolbarProps<Review>> = ({
     basePath,
     handleSubmitWithRedirect,
     invalid,
@@ -23,6 +24,8 @@ const ReviewEditToolbar = ({
     saving,
 }) => {
     const classes = useStyles();
+
+    if (!record) return null;
     return (
         <MuiToolbar className={classes.root}>
             {record.status === 'pending' ? (

examples/demo/src/reviews/ReviewFilter.js → examples/demo/src/reviews/ReviewFilter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import {
     AutocompleteInput,
     DateInput,
@@ -8,12 +8,23 @@ import {
     SelectInput,
 } from 'react-admin';
 import { makeStyles } from '@material-ui/core/styles';
+import { FilterProps, ReviewStatus, Customer } from '../types';
+import { Identifier } from 'ra-core';
 
 const useFilterStyles = makeStyles({
     status: { width: 150 },
 });
 
-const ReviewFilter = props => {
+interface FilterParams {
+    q?: string;
+    status?: ReviewStatus;
+    date_gte?: string;
+    date_lte?: string;
+    customer_id?: Identifier;
+    product_id?: Identifier;
+}
+
+const ReviewFilter: FC<FilterProps<FilterParams>> = props => {
     const classes = useFilterStyles();
     return (
         <Filter {...props}>
@@ -29,7 +40,7 @@ const ReviewFilter = props => {
             />
             <ReferenceInput source="customer_id" reference="customers">
                 <AutocompleteInput
-                    optionText={choice =>
+                    optionText={(choice: Customer) =>
                         `${choice.first_name} ${choice.last_name}`
                     }
                 />

examples/demo/src/reviews/ReviewList.js → examples/demo/src/reviews/ReviewList.tsx

@@ -1,16 +1,17 @@
-import React, { Fragment, useCallback } from 'react';
+import React, { Fragment, useCallback, FC } from 'react';
 import classnames from 'classnames';
 import { BulkDeleteButton, List } from 'react-admin';
 import { Route, useHistory } from 'react-router-dom';
-import { Drawer, useMediaQuery, makeStyles } from '@material-ui/core';
+import { Drawer, useMediaQuery, makeStyles, Theme } from '@material-ui/core';
 import BulkAcceptButton from './BulkAcceptButton';
 import BulkRejectButton from './BulkRejectButton';
 import ReviewListMobile from './ReviewListMobile';
 import ReviewListDesktop from './ReviewListDesktop';
 import ReviewFilter from './ReviewFilter';
 import ReviewEdit from './ReviewEdit';
+import { BulkActionProps, ListComponentProps } from '../types';
 
-const ReviewsBulkActionButtons = props => (
+const ReviewsBulkActionButtons: FC<BulkActionProps> = props => (
     <Fragment>
         <BulkAcceptButton {...props} />
         <BulkRejectButton {...props} />
@@ -37,9 +38,11 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-const ReviewList = props => {
+const ReviewList: FC<ListComponentProps<{ id: string }>> = props => {
     const classes = useStyles();
-    const isXSmall = useMediaQuery(theme => theme.breakpoints.down('xs'));
+    const isXSmall = useMediaQuery<Theme>(theme =>
+        theme.breakpoints.down('xs')
+    );
     const history = useHistory();
 
     const handleClose = useCallback(() => {
@@ -73,8 +76,9 @@ const ReviewList = props => {
                                 ) : (
                                     <ReviewListDesktop
                                         selectedRow={
-                                            isMatch &&
-                                            parseInt(match.params.id, 10)
+                                            isMatch
+                                                ? parseInt(match.params.id, 10)
+                                                : undefined
                                         }
                                     />
                                 )}

examples/demo/src/reviews/ReviewListDesktop.js → examples/demo/src/reviews/ReviewListDesktop.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { Datagrid, DateField, TextField } from 'react-admin';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 
@@ -7,6 +7,8 @@ import CustomerReferenceField from '../visitors/CustomerReferenceField';
 import StarRatingField from './StarRatingField';
 
 import rowStyle from './rowStyle';
+import { DatagridProps } from './../types';
+import { Identifier } from 'ra-core';
 
 const useListStyles = makeStyles({
     headerRow: {
@@ -28,7 +30,11 @@ const useListStyles = makeStyles({
     },
 });
 
-const ReviewListDesktop = ({ selectedRow, ...props }) => {
+interface Props extends DatagridProps {
+    selectedRow: Identifier;
+}
+
+const ReviewListDesktop: FC<Props> = ({ selectedRow, ...props }) => {
     const classes = useListStyles();
     const theme = useTheme();
     return (