Step 2.4: Use Material components

Urigo · May 20, 2020 · 239a7e1 · 239a7e1
1 parent b78def5
commit 239a7e1
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git 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
@@ -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;