From 02085e67da70f277580e2531eed00d48289dfc91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Sat, 7 Mar 2020 20:27:55 +0100
Subject: [PATCH] Add user picture in example fetcher

---
 .../ExampleFetchComponent.tsx.hbs                 | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
index 1282a08e94..d32ac3be94 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
@@ -14,6 +14,11 @@ const useStyles = makeStyles({
   table: {
     minWidth: 650,
   },
+  avatar: {
+    height: 32,
+    width: 32,
+    borderRadius: '50%',
+  },
 });
 
 type User = {
@@ -34,7 +39,7 @@ type User = {
     name: string; // "TFN",
     value: string; // "796260432"
   };
-  picture: object; // {large: "https://randomuser.me/api/portraits/men/95.jpg",…}
+  picture: { medium: string }; // {medium: "https://randomuser.me/api/portraits/men/95.jpg",…}
   nat: string; // "AU"
 };
 
@@ -50,6 +55,7 @@ export const DenseTable: FC<DenseTableProps> = ({ users }) => {
       <Table className={classes.table} size="small" aria-label="a dense table">
         <TableHead>
           <TableRow>
+            <TableCell>Avatar</TableCell>
             <TableCell>Name</TableCell>
             <TableCell>Email</TableCell>
             <TableCell>Nationality</TableCell>
@@ -58,6 +64,13 @@ export const DenseTable: FC<DenseTableProps> = ({ users }) => {
         <TableBody>
           {users.map(user => (
             <TableRow key={user.email}>
+              <TableCell>
+                <img
+                  src={user.picture.medium}
+                  className={classes.avatar}
+                  alt={user.name.first}
+                />
+              </TableCell>
               <TableCell>
                 {user.name.first} {user.name.last}
               </TableCell>