mirrors
/
tailscale
mirror of https://github.com/tailscale/tailscale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

client/web: move useNodeData out of App component 

Only loading data once auth request has completed.

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
This commit is contained in:
Sonia Appasamy 2023-11-07 13:07:57 -05:00 committed by Sonia Appasamy
parent d530153d2f
commit 0753ad6cf8
1 changed files with 51 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
client/web/src/components/app.tsx
View File

@ -13,47 +13,64 @@ import DeviceDetailsView from "./views/device-details-view"
export default function App() { export default function App() {
const { data: auth, loading: loadingAuth, newSession } = useAuth() const { data: auth, loading: loadingAuth, newSession } = useAuth()
return (
<main className="min-w-sm max-w-lg mx-auto py-14 px-5">
{loadingAuth ? (
<div className="text-center py-14">Loading...</div> // TODO(sonia): add a loading view
) : (
<WebClient auth={auth} newSession={newSession} />
)}
</main>
)
}
function WebClient({
auth,
newSession,
}: {
auth?: AuthResponse
newSession: () => Promise<void>
}) {
const { data, refreshData, updateNode } = useNodeData() const { data, refreshData, updateNode } = useNodeData()
useEffect(() => { useEffect(() => {
refreshData() refreshData()
}, [auth, refreshData]) }, [auth, refreshData])
if (!data) {
return <div className="text-center py-14">Loading...</div> // TODO(sonia): add a loading view
}
return ( return (
<main className="min-w-sm max-w-lg mx-auto py-14 px-5"> <>
{loadingAuth || !data ? ( {/* TODO(sonia): get rid of the conditions here once full/readonly
<div className="text-center py-14">Loading...</div> // TODO(sonia): add a loading view * views live on same components */}
) : ( {data.DebugMode === "full" && auth?.ok && <Header node={data} />}
<> <Switch>
{/* TODO(sonia): get rid of the conditions here once full/readonly <Route path="/">
* views live on same components */} <HomeView
{data.DebugMode === "full" && auth?.ok && <Header node={data} />} auth={auth}
<Switch> data={data}
<Route path="/"> newSession={newSession}
<HomeView refreshData={refreshData}
auth={auth} updateNode={updateNode}
data={data} />
newSession={newSession} </Route>
refreshData={refreshData} {data.DebugMode !== "" && (
updateNode={updateNode} <>
/> <Route path="/details">
<DeviceDetailsView node={data} />
</Route> </Route>
{data.DebugMode !== "" && ( <Route path="/subnets">{/* TODO */}Subnet router</Route>
<> <Route path="/ssh">{/* TODO */}Tailscale SSH server</Route>
<Route path="/details"> <Route path="/serve">{/* TODO */}Share local content</Route>
<DeviceDetailsView node={data} /> </>
</Route> )}
<Route path="/subnets">{/* TODO */}Subnet router</Route> <Route>
<Route path="/ssh">{/* TODO */}Tailscale SSH server</Route> <h2 className="mt-8">Page not found</h2>
<Route path="/serve">{/* TODO */}Share local content</Route> </Route>
</> </Switch>
)} </>
<Route>
<h2 className="mt-8">Page not found</h2>
</Route>
</Switch>
</>
)}
</main>
) )
} }