From 8008d81bd58781ba8cb05a4f993f3636fc176404 Mon Sep 17 00:00:00 2001
From: Uri Goldshtein <uri.goldshtein@gmail.com>
Date: Mon, 27 May 2019 18:34:20 +0200
Subject: [PATCH] Step 11.5: Add sign-out button that ChatsNavbar

---
 .../ChatsListScreen/ChatsNavbar.tsx           | 38 ++++++++++++++++++-
 src/components/ChatsListScreen/index.tsx      |  2 +-
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/components/ChatsListScreen/ChatsNavbar.tsx b/src/components/ChatsListScreen/ChatsNavbar.tsx
index 61047eded..e17eaaddb 100644
--- a/src/components/ChatsListScreen/ChatsNavbar.tsx
+++ b/src/components/ChatsListScreen/ChatsNavbar.tsx
@@ -1,14 +1,48 @@
 import React from 'react';
-import { Toolbar } from '@material-ui/core';
+import { Button, Toolbar } from '@material-ui/core';
 import styled from 'styled-components';
+import SignOutIcon from '@material-ui/icons/PowerSettingsNew';
+import { useCallback } from 'react';
+import { useSignOut } from '../../services/auth.service';
+import { History } from 'history';
 
 const Container = styled(Toolbar)`
+  display: flex;
   background-color: var(--primary-bg);
   color: var(--primary-text);
   font-size: 20px;
   line-height: 40px;
 `;
 
-const ChatsNavbar: React.FC = () => <Container>Whatsapp Clone</Container>;
+const Title = styled.div`
+  flex: 1;
+`;
+
+const LogoutButton = styled(Button)`
+  color: var(--primary-text) !important;
+`;
+
+interface ChildComponentProps {
+  history: History;
+}
+
+const ChatsNavbar: React.FC<ChildComponentProps> = ({ history }) => {
+  const signOut = useSignOut();
+
+  const handleSignOut = useCallback(() => {
+    signOut().then(() => {
+      history.replace('/sign-in');
+    });
+  }, [history, signOut]);
+
+  return (
+    <Container>
+      <Title>Whatsapp Clone</Title>
+      <LogoutButton data-testid="sign-out-button" onClick={handleSignOut}>
+        <SignOutIcon />
+      </LogoutButton>
+    </Container>
+  );
+};
 
 export default ChatsNavbar;
diff --git a/src/components/ChatsListScreen/index.tsx b/src/components/ChatsListScreen/index.tsx
index d10ac0bd5..01503cb53 100644
--- a/src/components/ChatsListScreen/index.tsx
+++ b/src/components/ChatsListScreen/index.tsx
@@ -14,7 +14,7 @@ interface ChatsListScreenProps {
 
 const ChatsListScreen: React.FC<ChatsListScreenProps> = ({ history }) => (
   <Container>
-    <ChatsNavbar />
+    <ChatsNavbar history={history} />
     <ChatsList history={history} />
   </Container>
 );