Skip to content

Instantly share code, notes, and snippets.

@mohanramphp
Created May 24, 2020 09:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mohanramphp/0be73535020a41a90aa1c5e23cd17c52 to your computer and use it in GitHub Desktop.
Save mohanramphp/0be73535020a41a90aa1c5e23cd17c52 to your computer and use it in GitHub Desktop.
React Dashboard Component
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import config from "../../config";
const Dashboard = () => {
const [dashboard, setDashboard] = useState(null);
const history = useHistory();
const logout = () => {
/* eslint-disable */
const toLogout = confirm("Are you sure to logout ?");
/* eslint-enable */
if (toLogout) {
localStorage.clear();
history.push("/login");
}
};
useEffect(() => {
fetch(`${config.baseUrl}/dashboard`, {
method: "GET",
headers: {
"Content-Type": "application/json",
"auth-token": localStorage.getItem("token"),
},
})
.then((res) => res.json())
.then(({ error, data }) => {
setDashboard(data);
});
}, []);
return (
<>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="/">
Application to handle Authentication using ReactJS
</a>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarText">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="/dashboard">
Dashboard <span className="sr-only">(current)</span>
</a>
</li>
<li className="nav-item">
<span
className="nav-link cursor-pointer"
onClick={() => logout()}
>
Logout
</span>
</li>
</ul>
<span className="navbar-text">Welcome! {dashboard?.user?.name}</span>
</div>
</nav>
<div className="px-3">
<h1>{dashboard?.title}</h1>
<p>{dashboard?.content}</p>
</div>
</>
);
};
export default Dashboard;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment