From 239a7e1e7df638b3d77fb7f2220a5b377e2cd814 Mon Sep 17 00:00:00 2001
From: Uri Goldshtein <uri.goldshtein@gmail.com>
Date: Thu, 16 May 2019 18:34:37 +0200
Subject: [PATCH] Step 2.4: Use Material components

---
 src/components/ChatsListScreen/ChatsList.tsx   | 9 +++++----
 src/components/ChatsListScreen/ChatsNavbar.tsx | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/ChatsListScreen/ChatsList.tsx b/src/components/ChatsListScreen/ChatsList.tsx
index be9c0c8c9..a44cbe747 100644
--- a/src/components/ChatsListScreen/ChatsList.tsx
+++ b/src/components/ChatsListScreen/ChatsList.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { chats } from '../../db';
 import moment from 'moment';
+import { List, ListItem } from '@material-ui/core';
 
 const ChatsList: React.FC = () => (
   <div>
-    <ul>
+    <List>
       {chats.map((chat) => (
-        <li key={chat.id}>
+        <ListItem key={chat.id} button>
           <img src={chat.picture} alt="Profile" />
           <div>{chat.name}</div>
           {chat.lastMessage && (
@@ -15,9 +16,9 @@ const ChatsList: React.FC = () => (
               <div>{moment(chat.lastMessage.createdAt).format('HH:mm')}</div>
             </React.Fragment>
           )}
-        </li>
+        </ListItem>
       ))}
-    </ul>
+    </List>
   </div>
 );
 
diff --git a/src/components/ChatsListScreen/ChatsNavbar.tsx b/src/components/ChatsListScreen/ChatsNavbar.tsx
index 2a320aaf8..8e6713284 100644
--- a/src/components/ChatsListScreen/ChatsNavbar.tsx
+++ b/src/components/ChatsListScreen/ChatsNavbar.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
+import { Toolbar } from '@material-ui/core';
 
-const ChatsNavbar: React.FC = () => <div>Whatsapp Clone</div>;
+const ChatsNavbar: React.FC = () => <Toolbar>Whatsapp Clone</Toolbar>;
 
 export default ChatsNavbar;