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

Compare commits

base: Imbus:7246050c06666769a8bd2b9c857ae5ce1288d582
Branches Tags
Imbus:master
Imbus:dev
Imbus:legacy
..
compare: Imbus:dccde027d102cd1adcec63800499163dde6af2b5
Branches Tags
Imbus:master
Imbus:dev
Imbus:legacy

No commits in common. "7246050c06666769a8bd2b9c857ae5ce1288d582" and "dccde027d102cd1adcec63800499163dde6af2b5" have entirely different histories.
7246050c06 ... dccde027d1

3 changed files with 24 additions and 62 deletions
Show stats Expand all files Collapse all files

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

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

37
client-solid/src/Icons.tsx
View file

@ -115,40 +115,3 @@ export function Home(): JSXElement {
</svg>
);
}
export function ThumbUp(): JSXElement {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z"
/>
</svg>
);
}
export function ThumbDown(): JSXElement {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 01-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 00.303-.54m.023-8.25H16.48a4.5 4.5 0 01-1.423-.23l-3.114-1.04a4.5 4.5 0 00-1.423-.23H6.504c-.618 0-1.217.247-1.605.729A11.95 11.95 0 002.25 12c0 .434.023.863.068 1.285C2.427 14.306 3.346 15 4.372 15h3.126c.618 0 .991.724.725 1.282A7.471 7.471 0 007.5 19.5a2.25 2.25 0 002.25 2.25.75.75 0 00.75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 002.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384"
/>
</svg>
);
}

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

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