From c8b15573571aff0a76693c6c2d637e00a8624d68 Mon Sep 17 00:00:00 2001
From: Angryman18 <imsmahanta@gmail.com>
Date: Mon, 25 Jul 2022 22:18:30 +0530
Subject: [PATCH] Logout Component added

---
 src/common/header/HeaderNav.jsx            |  2 ++
 src/common/header/Logout.jsx               | 24 ++++++++++++++++++++++
 src/common/playlists/PlayHeaderActions.jsx |  3 +--
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 src/common/header/Logout.jsx

diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx
index a43906832..c629a76ca 100644
--- a/src/common/header/HeaderNav.jsx
+++ b/src/common/header/HeaderNav.jsx
@@ -10,6 +10,7 @@ import { GoX } from "react-icons/go";
 import { Modal, Box, Typography, Menu } from "@mui/material";
 import { useContext } from "react";
 import { SearchContext } from "common/search/search-context";
+import LogOut from './Logout'
 
 const HeaderNav = ({ showBrowse }) => {
   const { showShareModal, setShowShareModal } = useContext(SearchContext);
@@ -152,6 +153,7 @@ const HeaderNav = ({ showBrowse }) => {
               <span className="btn-label">Share</span>
             </button>
           </li>
+          <LogOut />
           <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
             <Box sx={{ p: 4, pt: 2, borderRadius: 2, width: "360px" }}>
               <h3 className="section-title">Show Love</h3>
diff --git a/src/common/header/Logout.jsx b/src/common/header/Logout.jsx
new file mode 100644
index 000000000..8c40214fd
--- /dev/null
+++ b/src/common/header/Logout.jsx
@@ -0,0 +1,24 @@
+import { IoLogOutSharp } from "react-icons/io5";
+import { useAuthenticated, useSignOut } from "@nhost/react";
+
+const LogOut = () => {
+  const isAuthenticated = useAuthenticated();
+  const { signOut } = useSignOut();
+
+  if (!isAuthenticated && process.env.NODE_ENV !== "development") {
+    return null;
+  }
+  return (
+    <li>
+      <button
+        className='app-header-btn app-header-btn--default'
+        onClick={() => signOut()}
+      >
+        <IoLogOutSharp className='icon' />
+        <span className='btn-label'>Logout</span>
+      </button>
+    </li>
+  );
+};
+
+export default LogOut;
diff --git a/src/common/playlists/PlayHeaderActions.jsx b/src/common/playlists/PlayHeaderActions.jsx
index c2facfab6..c800cfae4 100644
--- a/src/common/playlists/PlayHeaderActions.jsx
+++ b/src/common/playlists/PlayHeaderActions.jsx
@@ -39,9 +39,8 @@ const PlayHeaderActions = ({ play }) => {
     setLikeObj(constructLikeData(userId));
   }, [userId, constructLikeData]);
 
-  // i will replace this function and remove the nhost javascript sdk after the new flow gets merged?
   const handleLogin = (value) => {
-    return window.location.href = NHOST.AUTH_URL(window.location.href, value)
+    return window.location = NHOST.AUTH_URL(window.location.href, value)
   };
 
   const onLikeClick = async () => {