Imbus/FrostByte
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Further polishing state management

Browse source
This commit is contained in:
Imbus 2023-11-15 11:17:00 +01:00
parent dccde027d1
commit 307c73591d
2 changed files with 25 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
client-solid/src/GlobalState.tsx
View file

@ -20,6 +20,7 @@ interface LoginContextType {
username: Accessor<string>; username: Accessor<string>;
setUsername: (value: string) => void; setUsername: (value: string) => void;
loggedIn: () => boolean; loggedIn: () => boolean;
logOut: () => void;
} }
// It is unclear to me if this is the idiomatic way to do this in Solid // It is unclear to me if this is the idiomatic way to do this in Solid
@ -45,11 +46,18 @@ export function GlobalStateProvider(props: {
return token() != "" && username() != ""; return token() != "" && username() != "";
} }
function logOut(): void {
localStorage.removeItem("token");
localStorage.removeItem("username");
setToken("");
setUsername("");
}
return ( return (
<> <>
<ModalContext.Provider value={{ loginModalOpen, setLoginModalOpen }}> <ModalContext.Provider value={{ loginModalOpen, setLoginModalOpen }}>
<LoginContext.Provider <LoginContext.Provider
value={{ token, setToken, username, setUsername, loggedIn }} value={{ token, setToken, username, setUsername, loggedIn, logOut }}
> >
{props.children} {props.children}
</LoginContext.Provider> </LoginContext.Provider>

39
client-solid/src/Navbar.tsx
View file

@ -17,41 +17,34 @@ function MenuItem(props: { href: string; children: JSXElement }): JSXElement {
// Represents the menu bar at the top of the page // Represents the menu bar at the top of the page
function Menu(): JSXElement { function Menu(): JSXElement {
const login_ctx = useContext(LoginContext); const login_ctx = useContext(LoginContext)!;
return ( return (
<ul class="menu space-y-2 rounded-box md:menu-horizontal md:space-x-2 md:space-y-0"> <Show when={login_ctx.loggedIn()}>
<MenuItem href="/"> <ul class="menu space-y-2 rounded-box md:menu-horizontal md:space-x-2 md:space-y-0">
<Home /> <MenuItem href="/">
</MenuItem> <Home />
<Show when={login_ctx?.token()}> </MenuItem>
<MenuItem href="/new"> <MenuItem href="/new">
<Plus /> <Plus />
</MenuItem> </MenuItem>
</Show> </ul>
</ul> </Show>
); );
} }
export function Navbar(): JSXElement { export function Navbar(): JSXElement {
const modal_ctx = useContext(ModalContext); const modal_ctx = useContext(ModalContext)!;
const login_ctx = useContext(LoginContext); const login_ctx = useContext(LoginContext)!;
const logout = (): void => {
localStorage.removeItem("token");
localStorage.removeItem("username");
login_ctx?.setToken("");
login_ctx?.setUsername("");
};
const clickHandler = (): void => { const clickHandler = (): void => {
if (login_ctx?.token() != "") logout(); if (login_ctx.loggedIn()) login_ctx.logOut();
else modal_ctx?.setLoginModalOpen(true); else modal_ctx.setLoginModalOpen(true);
}; };
return ( return (
<div class="max-w navbar max-w-3xl rounded-box text-neutral-content md:my-4"> <div class="max-w navbar max-w-3xl rounded-box text-neutral-content md:my-4">
<div class="flex-1"> <div class="flex-1">
<A href={"/"} class="btn btn-ghost pl-1 text-xl normal-case"> <A href={"/"} class="btn btn-ghost text-xl normal-case">
<Flake /> <Flake />
FrostByte FrostByte
</A> </A>
@ -62,12 +55,12 @@ export function Navbar(): JSXElement {
<div class="flex flex-1 justify-end"> <div class="flex flex-1 justify-end">
<A <A
href="#" href="#"
class="btn btn-ghost pr-1 text-sm capitalize" class="btn btn-ghost text-sm capitalize"
onClick={clickHandler} onClick={clickHandler}
> >
{ {
<Show when={login_ctx?.username()} fallback="Login"> <Show when={login_ctx.loggedIn()} fallback="Login">
{login_ctx?.username()} {login_ctx.username()}
</Show> </Show>
} }
<UserCircle /> <UserCircle />