Logout Component added

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>

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;

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 () => {