From acfed6173235867166449f1190efbcf907f8fbc6 Mon Sep 17 00:00:00 2001
From: Mohammed Faragallah <o0frego0o@hotmail.com>
Date: Sat, 2 May 2020 17:44:04 +0200
Subject: [PATCH 1/3] convert products example into typescript

---
 .../products/{GridList.js => GridList.tsx}    | 29 +++++++++++++------
 .../src/products/{Poster.js => Poster.tsx}    |  8 +++--
 .../{ProductCreate.js => ProductCreate.tsx}   |  5 ++--
 .../{ProductEdit.js => ProductEdit.tsx}       | 18 +++++++-----
 .../{ProductList.js => ProductList.tsx}       | 24 +++++++++++----
 ...enceField.js => ProductReferenceField.tsx} |  5 ++--
 .../demo/src/products/{index.js => index.tsx} |  0
 examples/demo/src/types.ts                    |  8 +++++
 8 files changed, 69 insertions(+), 28 deletions(-)
 rename examples/demo/src/products/{GridList.js => GridList.tsx} (82%)
 rename examples/demo/src/products/{Poster.js => Poster.tsx} (81%)
 rename examples/demo/src/products/{ProductCreate.js => ProductCreate.tsx} (96%)
 rename examples/demo/src/products/{ProductEdit.js => ProductEdit.tsx} (92%)
 rename examples/demo/src/products/{ProductList.js => ProductList.tsx} (74%)
 rename examples/demo/src/products/{ProductReferenceField.js => ProductReferenceField.tsx} (70%)
 rename examples/demo/src/products/{index.js => index.tsx} (100%)

diff --git a/examples/demo/src/products/GridList.js b/examples/demo/src/products/GridList.tsx
similarity index 82%
rename from examples/demo/src/products/GridList.js
rename to examples/demo/src/products/GridList.tsx
index a003f90b946..43e0235aa4a 100644
--- a/examples/demo/src/products/GridList.js
+++ b/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,7 +35,7 @@ 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;
@@ -41,10 +43,13 @@ const getColsForWidth = width => {
     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);
diff --git a/examples/demo/src/products/Poster.js b/examples/demo/src/products/Poster.tsx
similarity index 81%
rename from examples/demo/src/products/Poster.js
rename to examples/demo/src/products/Poster.tsx
index 74274585b79..aa04a948f56 100644
--- a/examples/demo/src/products/Poster.js
+++ b/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}>
diff --git a/examples/demo/src/products/ProductCreate.js b/examples/demo/src/products/ProductCreate.tsx
similarity index 96%
rename from examples/demo/src/products/ProductCreate.js
rename to examples/demo/src/products/ProductCreate.tsx
index 2f02178083a..fc7e0021c15 100644
--- a/examples/demo/src/products/ProductCreate.js
+++ b/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}>
diff --git a/examples/demo/src/products/ProductEdit.js b/examples/demo/src/products/ProductEdit.tsx
similarity index 92%
rename from examples/demo/src/products/ProductEdit.js
rename to examples/demo/src/products/ProductEdit.tsx
index 0ca1f713784..d37b16dfdce 100644
--- a/examples/demo/src/products/ProductEdit.js
+++ b/examples/demo/src/products/ProductEdit.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import {
     Datagrid,
     DateField,
@@ -22,10 +22,16 @@ 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',
@@ -33,11 +39,9 @@ const styles = {
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
     },
-};
-
-const useStyles = makeStyles(styles);
+});
 
-const ProductEdit = props => {
+const ProductEdit: FC<EditComponentProps> = props => {
     const classes = useStyles();
     return (
         <Edit {...props} title={<ProductTitle />}>
diff --git a/examples/demo/src/products/ProductList.js b/examples/demo/src/products/ProductList.tsx
similarity index 74%
rename from examples/demo/src/products/ProductList.js
rename to examples/demo/src/products/ProductList.tsx
index 30db1872cad..c55a27ee7b1 100644
--- a/examples/demo/src/products/ProductList.js
+++ b/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 />}
diff --git a/examples/demo/src/products/ProductReferenceField.js b/examples/demo/src/products/ProductReferenceField.tsx
similarity index 70%
rename from examples/demo/src/products/ProductReferenceField.js
rename to examples/demo/src/products/ProductReferenceField.tsx
index 431dd15989e..4799aa9680d 100644
--- a/examples/demo/src/products/ProductReferenceField.js
+++ b/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"
diff --git a/examples/demo/src/products/index.js b/examples/demo/src/products/index.tsx
similarity index 100%
rename from examples/demo/src/products/index.js
rename to examples/demo/src/products/index.tsx
diff --git a/examples/demo/src/types.ts b/examples/demo/src/types.ts
index ae18e61dc89..c1b0b0cd922 100644
--- a/examples/demo/src/types.ts
+++ b/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;

From 66094477e919d396160b23ad177d343524b72284 Mon Sep 17 00:00:00 2001
From: Mohammed Faragallah <o0frego0o@hotmail.com>
Date: Sun, 24 May 2020 19:23:29 +0200
Subject: [PATCH 2/3] add resource to fieldprops

---
 examples/demo/src/products/ProductReferenceField.tsx | 2 +-
 examples/demo/src/types.ts                           | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/examples/demo/src/products/ProductReferenceField.tsx b/examples/demo/src/products/ProductReferenceField.tsx
index 4799aa9680d..5e1a6d0e997 100644
--- a/examples/demo/src/products/ProductReferenceField.tsx
+++ b/examples/demo/src/products/ProductReferenceField.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { ReferenceField, TextField } from 'react-admin';
 import { FieldProps } from './../types';
 
-const ProductReferenceField: FC<FieldProps & { resource: string }> = props => (
+const ProductReferenceField: FC<FieldProps> = props => (
     <ReferenceField
         label="Product"
         source="product_id"
diff --git a/examples/demo/src/types.ts b/examples/demo/src/types.ts
index c1b0b0cd922..d9ba01fd0dc 100644
--- a/examples/demo/src/types.ts
+++ b/examples/demo/src/types.ts
@@ -73,6 +73,7 @@ export interface FieldProps<T extends Record = Record> {
     record?: T;
     source?: string;
     basePath?: string;
+    resource: string;
 }
 
 export interface Review extends Record {

From 03d6e056077d7c0fde9b82997608ff4e406cc3e1 Mon Sep 17 00:00:00 2001
From: Mohammed Faragallah <o0frego0o@hotmail.com>
Date: Sun, 24 May 2020 19:23:42 +0200
Subject: [PATCH 3/3] revert gridlist

---
 .../products/{GridList.tsx => GridList.js}    | 29 ++++++-------------
 1 file changed, 9 insertions(+), 20 deletions(-)
 rename examples/demo/src/products/{GridList.tsx => GridList.js} (82%)

diff --git a/examples/demo/src/products/GridList.tsx b/examples/demo/src/products/GridList.js
similarity index 82%
rename from examples/demo/src/products/GridList.tsx
rename to examples/demo/src/products/GridList.js
index 43e0235aa4a..a003f90b946 100644
--- a/examples/demo/src/products/GridList.tsx
+++ b/examples/demo/src/products/GridList.js
@@ -1,14 +1,12 @@
+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, { WithWidth } from '@material-ui/core/withWidth';
-import { linkToRecord } from 'ra-core';
-import React, { FC } from 'react';
-import { NumberField } from 'react-admin';
+import withWidth from '@material-ui/core/withWidth';
 import { Link } from 'react-router-dom';
-import { DatagridProps, Product } from '../types';
-import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
+import { NumberField } from 'react-admin';
+import { linkToRecord } from 'ra-core';
 
 const useStyles = makeStyles(theme => ({
     root: {
@@ -35,7 +33,7 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-const getColsForWidth = (width: Breakpoint) => {
+const getColsForWidth = width => {
     if (width === 'xs') return 2;
     if (width === 'sm') return 3;
     if (width === 'md') return 4;
@@ -43,13 +41,10 @@ const getColsForWidth = (width: Breakpoint) => {
     return 6;
 };
 
-const times = (nbChildren: number, fn: (key: number) => any) =>
+const times = (nbChildren, fn) =>
     Array.from({ length: nbChildren }, (_, key) => fn(key));
 
-const LoadingGridList: FC<GridProps & { nbItems?: number }> = ({
-    width,
-    nbItems = 10,
-}) => {
+const LoadingGridList = ({ width, nbItems = 10 }) => {
     const classes = useStyles();
     return (
         <div className={classes.root}>
@@ -69,11 +64,8 @@ const LoadingGridList: FC<GridProps & { nbItems?: number }> = ({
     );
 };
 
-const LoadedGridList: FC<GridProps> = ({ ids, data, basePath, width }) => {
+const LoadedGridList = ({ ids, data, basePath, width }) => {
     const classes = useStyles();
-
-    if (!ids || !data) return null;
-
     return (
         <div className={classes.root}>
             <MuiGridList
@@ -83,7 +75,6 @@ const LoadedGridList: FC<GridProps> = ({ ids, data, basePath, width }) => {
             >
                 {ids.map(id => (
                     <GridListTile
-                        // @ts-ignore
                         component={Link}
                         key={id}
                         to={linkToRecord(basePath, data[id].id)}
@@ -115,9 +106,7 @@ const LoadedGridList: FC<GridProps> = ({ ids, data, basePath, width }) => {
     );
 };
 
-interface GridProps extends DatagridProps<Product>, WithWidth {}
-
-const GridList: FC<GridProps> = ({ loaded, ...props }) =>
+const GridList = ({ loaded, ...props }) =>
     loaded ? <LoadedGridList {...props} /> : <LoadingGridList {...props} />;
 
 export default withWidth()(GridList);