import * as PropTypes from 'prop-types' ; import * as React from 'react' ; import { Link } from 'react-router-dom' ; import { PublicUser } from 'shared/user/PublicUser' ; import { SubMenu } from '../SubMenu/SubMenu.controller' ; import { HeaderLoggedIn , HeaderContainer , HeaderLoggedOut , HeaderLogo , HeaderMenuItem , HeaderStyled } from "./Header.style" ; type HeaderViewProps = { user ? : PublicUser ; removeAuthUserCallback : ( ) => void ; } ; const SubMenuItem = ( ) => { return ( < HeaderMenuItem > < SubMenu options = { [ { name : "OCEAN 101" , path : "/ocean101" } , { name : "INTRO TO DATA DEFI" , path : "/introToDataDefi" } , { name : "COMPUTE-TO-DATA" , path : "/ComputeToData" } ] } label = { "COURSES" } selectCallback = { ( ) => { } } /> < /HeaderMenuItem>); } ; export const HeaderView = ( { user , removeAuthUserCallback } ) => { return ( < HeaderStyled > < Link to = "/" > < HeaderLogo alt = "logo" src = "/logo.svg" / > < /Link> { user ? loggedInHeader ( { user , removeAuthUserCallback } ) : loggedOutHeader ( ) } < /HeaderStyled>); } ; function loggedOutHeader ( ) { return ( < HeaderLoggedOut > < SubMenuItem /> < Link to = "/sign-up" > < HeaderMenuItem > SIGN UP < /HeaderMenuItem> < /Link> < Link to = "/about" > < HeaderMenuItem > ABOUT < /HeaderMenuItem> < /Link> < Link to = "/login" > < HeaderMenuItem > LOGIN < /HeaderMenuItem> < /Link> < /HeaderLoggedOut>); } function loggedInHeader ( { user , removeAuthUserCallback } ) { return ( < HeaderLoggedIn > < SubMenuItem /> < Link to = { `/user/${ user ?. username }` } > < HeaderMenuItem > { user ?. username } < /HeaderMenuItem> < /Link> < Link to = "/about" > < HeaderMenuItem > ABOUT < /HeaderMenuItem> < /Link> < Link to = "/" onClick = { ( ) => { removeAuthUserCallback ( ) ; } } > < HeaderMenuItem > LOGOUT < /HeaderMenuItem> < /Link> < /HeaderLoggedIn>); } HeaderView . propTypes = { user : PropTypes . object , removeAuthUserCallback : PropTypes . func . isRequired , } ; HeaderView . defaultProps = { } ;