Merge pull request #4758 from MohammedFaragallah/products-ts

Convert products demo example into typescript
marmelab · May 27, 2020 · e1269b8 · e1269b8
2 parents e1e03c9 + 7418be9
commit e1269b8
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 20 deletions.
diff --git a/examples/demo/src/products/Poster.js → examples/demo/src/products/Poster.tsx b/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}>

diff --git a/examples/demo/src/products/ProductCreate.js → examples/demo/src/products/ProductCreate.tsx b/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}>

diff --git a/examples/demo/src/products/ProductEdit.js → examples/demo/src/products/ProductEdit.tsx b/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,
@@ -23,10 +23,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',
@@ -38,11 +44,9 @@ const styles = {
         maxWidth: '40em',
         display: 'block',
     },
-};
-
-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 → examples/demo/src/products/ProductList.tsx b/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 />}

diff --git a/...emo/src/products/ProductReferenceField.js → ...mo/src/products/ProductReferenceField.tsx b/...emo/src/products/ProductReferenceField.js → ...mo/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> = props => (
     <ReferenceField
         label="Product"
         source="product_id"

diff --git a/examples/demo/src/products/index.js → examples/demo/src/products/index.tsx b/examples/demo/src/products/index.js → examples/demo/src/products/index.tsx
diff --git a/examples/demo/src/types.ts b/examples/demo/src/types.ts
@@ -56,7 +56,6 @@ export interface Customer extends Record {
 export type OrderStatus = 'ordered' | 'delivered' | 'cancelled';
 
 export interface Order extends Record {
-    date: string;
     status: OrderStatus;
     basket: BasketItem[];
     date: Date;
@@ -166,6 +165,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;