separate 'Overview' (#50)

This commit is contained in:
Michael Quigley 2022-09-19 15:40:01 -04:00
parent 3a45ced9e1
commit 8067b6e9f9
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 56 additions and 53 deletions

View File

@ -1,58 +1,6 @@
import Login from './Login';
import Logout from './Logout';
import Network from './Network';
import Token from './Token';
import Version from './Version';
import { useEffect, useState } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Register from "./Register";
const Overview = () => {
const [user, setUser] = useState();
useEffect(() => {
const localUser = localStorage.getItem("user")
if (localUser) {
setUser(JSON.parse(localUser))
console.log('reloaded user', localUser)
}
}, []);
if (!user) {
return (
<Login loginSuccess={setUser}/>
);
}
const logout = () => {
setUser(null);
localStorage.clear();
}
return (
<div className="zrok">
<div className="container">
<div className="header">
<img alt="ziggy goes to space" src="ziggy.svg" width="65px"/>
<p className="header-title">zrok</p>
<div className={"header-status"}>
<div>
<p>{user.email}</p>
<Version/>
</div>
<div className={"header-controls"}>
<Token user={user}/>
<Logout user={user} logout={logout}/>
</div>
</div>
</div>
<div className="main">
<Network />
</div>
</div>
</div>
);
}
import Overview from "./Overview";
const App = () => {
return (

55
ui/src/Overview.js Normal file
View File

@ -0,0 +1,55 @@
import {useEffect, useState} from "react";
import Login from "./Login";
import Version from "./Version";
import Token from "./Token";
import Logout from "./Logout";
import Network from "./Network";
const Overview = () => {
const [user, setUser] = useState();
useEffect(() => {
const localUser = localStorage.getItem("user")
if (localUser) {
setUser(JSON.parse(localUser))
console.log('reloaded user', localUser)
}
}, []);
if (!user) {
return (
<Login loginSuccess={setUser}/>
);
}
const logout = () => {
setUser(null);
localStorage.clear();
}
return (
<div className="zrok">
<div className="container">
<div className="header">
<img alt="ziggy goes to space" src="ziggy.svg" width="65px"/>
<p className="header-title">zrok</p>
<div className={"header-status"}>
<div>
<p>{user.email}</p>
<Version/>
</div>
<div className={"header-controls"}>
<Token user={user}/>
<Logout user={user} logout={logout}/>
</div>
</div>
</div>
<div className="main">
<Network />
</div>
</div>
</div>
);
}
export default Overview;