Convert products demo example into typescript

examples/demo/src/products/GridList.js → examples/demo/src/products/GridList.tsx

@@ -1,12 +1,14 @@
-import React from 'react';
 import MuiGridList from '@material-ui/core/GridList';
 import GridListTile from '@material-ui/core/GridListTile';
 import GridListTileBar from '@material-ui/core/GridListTileBar';
 import { makeStyles } from '@material-ui/core/styles';
-import withWidth from '@material-ui/core/withWidth';
-import { Link } from 'react-router-dom';
-import { NumberField } from 'react-admin';
+import withWidth, { WithWidth } from '@material-ui/core/withWidth';
 import { linkToRecord } from 'ra-core';
+import React, { FC } from 'react';
+import { NumberField } from 'react-admin';
+import { Link } from 'react-router-dom';
+import { DatagridProps, Product } from '../types';
+import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
 
 const useStyles = makeStyles(theme => ({
     root: {
@@ -33,18 +35,21 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-const getColsForWidth = width => {
+const getColsForWidth = (width: Breakpoint) => {
     if (width === 'xs') return 2;
     if (width === 'sm') return 3;
     if (width === 'md') return 4;
     if (width === 'lg') return 5;
     return 6;
 };
 
-const times = (nbChildren, fn) =>
+const times = (nbChildren: number, fn: (key: number) => any) =>
     Array.from({ length: nbChildren }, (_, key) => fn(key));
 
-const LoadingGridList = ({ width, nbItems = 10 }) => {
+const LoadingGridList: FC<GridProps & { nbItems?: number }> = ({
+    width,
+    nbItems = 10,
+}) => {
     const classes = useStyles();
     return (
         <div className={classes.root}>
@@ -64,8 +69,11 @@ const LoadingGridList = ({ width, nbItems = 10 }) => {
     );
 };
 
-const LoadedGridList = ({ ids, data, basePath, width }) => {
+const LoadedGridList: FC<GridProps> = ({ ids, data, basePath, width }) => {
     const classes = useStyles();
+
+    if (!ids || !data) return null;
+
     return (
         <div className={classes.root}>
             <MuiGridList
@@ -75,6 +83,7 @@ const LoadedGridList = ({ ids, data, basePath, width }) => {
             >
                 {ids.map(id => (
                     <GridListTile
+                        // @ts-ignore
                         component={Link}
                         key={id}
                         to={linkToRecord(basePath, data[id].id)}
@@ -106,7 +115,9 @@ const LoadedGridList = ({ ids, data, basePath, width }) => {
     );
 };
 
-const GridList = ({ loaded, ...props }) =>
+interface GridProps extends DatagridProps<Product>, WithWidth {}
+
+const GridList: FC<GridProps> = ({ loaded, ...props }) =>
     loaded ? <LoadedGridList {...props} /> : <LoadingGridList {...props} />;
 
 export default withWidth()(GridList);

examples/demo/src/products/Poster.js → examples/demo/src/products/Poster.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import { makeStyles } from '@material-ui/core/styles';
+import React, { FC } from 'react';
+import { FieldProps, Product } from '../types';
 
 const useStyles = makeStyles({
     root: { display: 'inline-block', marginTop: '1em', zIndex: 2 },
@@ -14,8 +15,11 @@ const useStyles = makeStyles({
     },
 });
 
-const Poster = ({ record }) => {
+const Poster: FC<FieldProps<Product>> = ({ record }) => {
     const classes = useStyles();
+
+    if (!record) return null;
+
     return (
         <Card className={classes.root}>
             <CardContent className={classes.content}>

examples/demo/src/products/ProductCreate.js → examples/demo/src/products/ProductCreate.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import {
     Create,
     FormTab,
@@ -12,6 +12,7 @@ import {
 import { InputAdornment } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import RichTextInput from 'ra-input-rich-text';
+import { CreateComponentProps } from '../types';
 
 export const styles = {
     price: { width: '7em' },
@@ -24,7 +25,7 @@ export const styles = {
 
 const useStyles = makeStyles(styles);
 
-const ProductCreate = props => {
+const ProductCreate: FC<CreateComponentProps> = props => {
     const classes = useStyles();
     return (
         <Create {...props}>

examples/demo/src/products/ProductEdit.js → examples/demo/src/products/ProductEdit.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import {
     Datagrid,
     DateField,
@@ -22,22 +22,26 @@ import CustomerReferenceField from '../visitors/CustomerReferenceField';
 import StarRatingField from '../reviews/StarRatingField';
 import Poster from './Poster';
 import { styles as createStyles } from './ProductCreate';
+import { Product, EditComponentProps } from '../types';
 
-const ProductTitle = ({ record }) => <span>Poster #{record.reference}</span>;
+interface ProductTitleProps {
+    record?: Product;
+}
 
-const styles = {
+const ProductTitle: FC<ProductTitleProps> = ({ record }) =>
+    record ? <span>Poster #{record.reference}</span> : null;
+
+const useStyles = makeStyles({
     ...createStyles,
     comment: {
         maxWidth: '20em',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
     },
-};
-
-const useStyles = makeStyles(styles);
+});
 
-const ProductEdit = props => {
+const ProductEdit: FC<EditComponentProps> = props => {
     const classes = useStyles();
     return (
         <Edit {...props} title={<ProductTitle />}>

examples/demo/src/products/ProductList.js → examples/demo/src/products/ProductList.tsx

@@ -1,4 +1,7 @@
-import React from 'react';
+import Chip from '@material-ui/core/Chip';
+import { makeStyles } from '@material-ui/core/styles';
+import { InputProps } from 'ra-core';
+import React, { FC } from 'react';
 import {
     Filter,
     List,
@@ -9,8 +12,7 @@ import {
     SelectInput,
     useTranslate,
 } from 'react-admin';
-import Chip from '@material-ui/core/Chip';
-import { makeStyles } from '@material-ui/core/styles';
+import { FilterProps, ListComponentProps } from '../types';
 import GridList from './GridList';
 
 const useQuickFilterStyles = makeStyles(theme => ({
@@ -19,13 +21,23 @@ const useQuickFilterStyles = makeStyles(theme => ({
     },
 }));
 
-const QuickFilter = ({ label }) => {
+const QuickFilter: FC<InputProps> = ({ label }) => {
     const translate = useTranslate();
     const classes = useQuickFilterStyles();
     return <Chip className={classes.root} label={translate(label)} />;
 };
 
-export const ProductFilter = props => (
+interface FilterParams {
+    q?: string;
+    category_id?: string;
+    width_gte?: number;
+    width_lte?: number;
+    height_gte?: number;
+    height_lte?: number;
+    stock_lte?: number;
+}
+
+export const ProductFilter: FC<FilterProps<FilterParams>> = props => (
     <Filter {...props}>
         <SearchInput source="q" alwaysOn />
         <ReferenceInput
@@ -47,7 +59,7 @@ export const ProductFilter = props => (
     </Filter>
 );
 
-const ProductList = props => (
+const ProductList: FC<ListComponentProps> = props => (
     <List
         {...props}
         filters={<ProductFilter />}

examples/demo/src/products/ProductReferenceField.js → examples/demo/src/products/ProductReferenceField.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { ReferenceField, TextField } from 'react-admin';
+import { FieldProps } from './../types';
 
-const ProductReferenceField = props => (
+const ProductReferenceField: FC<FieldProps & { resource: string }> = props => (
     <ReferenceField
         label="Product"
         source="product_id"

examples/demo/src/types.ts

@@ -135,6 +135,14 @@ export interface ShowComponentProps<
     id: string;
 }
 
+export interface CreateComponentProps<
+    Params extends ResourceMatch = { id: string },
+    C extends StaticContext = StaticContext,
+    S = H.LocationState
+> extends ResourceComponentProps<Params, C, S> {
+    id: string;
+}
+
 declare global {
     interface Window {
         restServer: any;