DNY client (5 – Menu and filtering authenticated content)

dny-client-5 source code
src/core/Menu.js

We first look at how we decide whether a link is active or not. We do so by looking at the history’s path name and the current path. If they match, then we’re on that page and we color it orange.

The way how we get history is to import withRouter from ‘react-router-dom’ and then using it as middleware on our Menu component.

import React from 'react'

import { Link, withRouter} from 'react-router-dom'

const isActive = (history, path) => {

if (history.location.pathname === path) return {color: "#ff9900"}

else return {color: "#000000"}

}

The history object is returned to our component as an object. Within this object, we look at property location, and find the pathname of what page we’re on.

// history object

{

"length":7,

"action":"POP",

"location": {

"pathname":"/signin",

"search":"",

"hash":"",

"key":"irdfys"

}

Then we implement signout functionality for when we click on sign out link.
1) We first clear out jwt from the local storage
2) we then make a request to the server for it to signout the current user.

export const signout = (next) => {

console.log('Menu.js - sign out function execute')

if (typeof window !== "undefined") localStorage.removeItem("jwt")

next()

return fetch("http://localhost:8080/signout", {

method: "GET"

}).then(response => {

console.log('signout', response)

return response.json()

}).catch(err => console.log(err))

}

Finally, we implment the filtering of which menu item should be visible depending on whether we’re authenticated or not.

Basically, if our local storage has jwt property, then we’re signed in. We need to get this string, parse it into an JS object, and return it. Else, if this jwt property is empty, then we’re not signed in.

export const isAuthenticated = () => {

if (typeof window == "undefined") { return false }

if (localStorage.getItem("jwt")) {

// gets string from localString's key jwt

// parse this string into a JS object

let obj = JSON.parse(localStorage.getItem("jwt"))

console.log('user obj', obj);

return JSON.parse(localStorage.getItem("jwt"))

} else { return false }

}

We then copy and paste template html into our code. Then use the previous functionality for
1) signing out
2) filtering menu items
3) coloring the active link

// use destructuring to get history property from props

const Menu = ({history}) => (

<div>

{!isAuthenticated() && (

</li>

</li>

</li>

</>)}

{isAuthenticated() && (

</li>

<a className="nav-link"

style={

(isActive(history, "/signout"), {cursor: "pointer" })

}

onClick={() => signout( () => history.push('/') )}

Sign Out

</a>

</li>

<a className="nav-link">{isAuthenticated().user.name}</a>

</li>

</>)}

</ul>

</div>

)

export default withRouter(Menu);