From 51ad46c8bc83fdf6c6204bf0e9ba4dcdb1da245b Mon Sep 17 00:00:00 2001
From: Joseph Cheung <josephktcheung@gmail.com>
Date: Thu, 12 Mar 2020 23:49:50 +0800
Subject: [PATCH] Convert Aside to ts

---
 examples/demo/src/reviews/StarRatingField.tsx |  2 +-
 .../demo/src/visitors/{Aside.js => Aside.tsx} | 79 ++++++++++++++-----
 2 files changed, 60 insertions(+), 21 deletions(-)
 rename examples/demo/src/visitors/{Aside.js => Aside.tsx} (87%)

diff --git a/examples/demo/src/reviews/StarRatingField.tsx b/examples/demo/src/reviews/StarRatingField.tsx
index 66d91bfa662..09d2ebf2028 100644
--- a/examples/demo/src/reviews/StarRatingField.tsx
+++ b/examples/demo/src/reviews/StarRatingField.tsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles({
 });
 
 interface OwnProps {
-    size: 'large' | 'small';
+    size?: 'large' | 'small';
 }
 
 const StarRatingField: FC<FieldProps & OwnProps> = ({
diff --git a/examples/demo/src/visitors/Aside.js b/examples/demo/src/visitors/Aside.tsx
similarity index 87%
rename from examples/demo/src/visitors/Aside.js
rename to examples/demo/src/visitors/Aside.tsx
index b6db569eb31..662ff360480 100644
--- a/examples/demo/src/visitors/Aside.js
+++ b/examples/demo/src/visitors/Aside.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import {
     NumberField,
     TextField,
@@ -27,6 +27,8 @@ import { makeStyles } from '@material-ui/core/styles';
 
 import ProductReferenceField from '../products/ProductReferenceField';
 import StarRatingField from '../reviews/StarRatingField';
+import { Record, RecordMap, Identifier } from 'ra-core';
+import { Order as OrderRecord, Review as ReviewRecord } from '../types';
 
 const useAsideStyles = makeStyles(theme => ({
     root: {
@@ -37,7 +39,12 @@ const useAsideStyles = makeStyles(theme => ({
     },
 }));
 
-const Aside = ({ record, basePath }) => {
+interface AsideProps {
+    record?: Record;
+    basePath?: string;
+}
+
+const Aside: FC<AsideProps> = ({ record, basePath }) => {
     const classes = useAsideStyles();
     return (
         <div className={classes.root}>
@@ -51,7 +58,11 @@ Aside.propTypes = {
     basePath: PropTypes.string,
 };
 
-const EventList = ({ record, basePath }) => {
+interface EventListProps {
+    record?: Record;
+    basePath?: string;
+}
+const EventList: FC<EventListProps> = ({ record, basePath }) => {
     const translate = useTranslate();
     const { data: orders, ids: orderIds } = useGetList(
         'commands',
@@ -170,13 +181,13 @@ const EventList = ({ record, basePath }) => {
             {events.map(event =>
                 event.type === 'order' ? (
                     <Order
-                        record={event.data}
+                        record={event.data as OrderRecord}
                         key={`event_${event.data.id}`}
                         basePath={basePath}
                     />
                 ) : (
                     <Review
-                        record={event.data}
+                        record={event.data as ReviewRecord}
                         key={`review_${event.data.id}`}
                         basePath={basePath}
                     />
@@ -186,23 +197,38 @@ const EventList = ({ record, basePath }) => {
     );
 };
 
-const mixOrdersAndReviews = (orders, orderIds, reviews, reviewIds) => {
-    const eventsFromOrders = orderIds.map(id => ({
+const mixOrdersAndReviews = (
+    orders: RecordMap<OrderRecord>,
+    orderIds: Identifier[],
+    reviews: RecordMap<ReviewRecord>,
+    reviewIds: Identifier[]
+) => {
+    const eventsFromOrders: {
+        type: string;
+        date: any;
+        data: Record;
+    }[] = orderIds.map(id => ({
         type: 'order',
         date: orders[id].date,
         data: orders[id],
     }));
-    const eventsFromReviews = reviewIds.map(id => ({
+    const eventsFromReviews: {
+        type: string;
+        date: any;
+        data: Record;
+    }[] = reviewIds.map(id => ({
         type: 'review',
         date: reviews[id].date,
         data: reviews[id],
     }));
     const events = eventsFromOrders.concat(eventsFromReviews);
-    events.sort((e1, e2) => new Date(e1.date) - new Date(e2.date));
+    events.sort(
+        (e1, e2) => new Date(e1.date).getTime() - new Date(e2.date).getTime()
+    );
     return events;
 };
 
-const useEventStyles = makeStyles({
+const useEventStyles = makeStyles(theme => ({
     card: {
         margin: '0 0 1em 1em',
     },
@@ -215,12 +241,17 @@ const useEventStyles = makeStyles({
         '-webkit-box-orient': 'vertical',
         overflow: 'hidden',
     },
-});
+}));
 
-const Order = ({ record, basePath }) => {
+interface OrderProps {
+    record?: OrderRecord;
+    basePath?: string;
+}
+
+const Order: FC<OrderProps> = ({ record, basePath }) => {
     const translate = useTranslate();
     const classes = useEventStyles();
-    return (
+    return record ? (
         <Card className={classes.card}>
             <CardHeader
                 className={classes.cardHeader}
@@ -229,7 +260,6 @@ const Order = ({ record, basePath }) => {
                         aria-label={translate('resources.commands.name', {
                             smart_count: 1,
                         })}
-                        className={classes.avatar}
                     >
                         <order.icon />
                     </Avatar>
@@ -267,13 +297,18 @@ const Order = ({ record, basePath }) => {
                 }
             />
         </Card>
-    );
+    ) : null;
 };
 
-const Review = ({ record, basePath }) => {
+interface ReviewProps {
+    record?: ReviewRecord;
+    basePath?: string;
+}
+
+const Review: FC<ReviewProps> = ({ record, basePath }) => {
     const translate = useTranslate();
     const classes = useEventStyles();
-    return (
+    return record ? (
         <Card className={classes.card}>
             <CardHeader
                 className={classes.cardHeader}
@@ -282,7 +317,6 @@ const Review = ({ record, basePath }) => {
                         aria-label={translate('resources.reviews.name', {
                             smart_count: 1,
                         })}
-                        className={classes.avatar}
                     >
                         <review.icon />
                     </Avatar>
@@ -309,10 +343,15 @@ const Review = ({ record, basePath }) => {
                 }
             />
         </Card>
-    );
+    ) : null;
 };
 
-const EditButton = ({ record, basePath }) => {
+interface EditButtonProps {
+    record?: Record;
+    basePath?: string;
+}
+
+const EditButton: FC<EditButtonProps> = ({ record, basePath }) => {
     const translate = useTranslate();
     return (
         <Tooltip title={translate('ra.action.edit')}>