From 9f3685caede89a888e93853557e3a6ec36fd4cef Mon Sep 17 00:00:00 2001 From: Imbus Date: Wed, 15 Nov 2023 14:21:14 +0100 Subject: [PATCH] Breaking apart some large components --- client-solid/package.json | 2 +- client-solid/src/GlobalState.tsx | 16 ++++-- client-solid/src/LoginButton.tsx | 23 +++++++++ client-solid/src/LoginModal.tsx | 6 +-- client-solid/src/Menu.tsx | 36 ++++++++++++++ client-solid/src/Navbar.tsx | 56 ++------------------- client-solid/src/RegLogin/Login.tsx | 66 +++++++++--------------- client-solid/src/RegLogin/Register.tsx | 69 ++++++++++---------------- client-solid/src/api.ts | 36 ++++++++++++++ 9 files changed, 165 insertions(+), 145 deletions(-) create mode 100644 client-solid/src/LoginButton.tsx create mode 100644 client-solid/src/Menu.tsx diff --git a/client-solid/package.json b/client-solid/package.json index fd79256..d82d4c0 100644 --- a/client-solid/package.json +++ b/client-solid/package.json @@ -34,4 +34,4 @@ "vite-plugin-qrcode": "^0.2.2", "vite-plugin-solid": "^2.7.2" } -} +} \ No newline at end of file diff --git a/client-solid/src/GlobalState.tsx b/client-solid/src/GlobalState.tsx index 4cb3476..b70596b 100644 --- a/client-solid/src/GlobalState.tsx +++ b/client-solid/src/GlobalState.tsx @@ -10,8 +10,8 @@ import { // So far we only have one modal, but we can add more later // by adding more fields to this interface, or maybe an enum interface ModalContextType { - loginModalOpen: Accessor; - setLoginModalOpen: (value: boolean) => void; + isOpen: Accessor; + setOpen: (value: boolean) => void; } interface LoginContextType { @@ -21,6 +21,7 @@ interface LoginContextType { setUsername: (value: string) => void; loggedIn: () => boolean; logOut: () => void; + logIn: (username: string, token: string) => void; } // It is unclear to me if this is the idiomatic way to do this in Solid @@ -46,6 +47,13 @@ export function GlobalStateProvider(props: { return token() != "" && username() != ""; } + function logIn (username: string, token: string): void { + setUsername(username); + setToken(token); + localStorage.setItem("token", token); + localStorage.setItem("username", username); + } + function logOut(): void { localStorage.removeItem("token"); localStorage.removeItem("username"); @@ -55,9 +63,9 @@ export function GlobalStateProvider(props: { return ( <> - + {props.children} diff --git a/client-solid/src/LoginButton.tsx b/client-solid/src/LoginButton.tsx new file mode 100644 index 0000000..d4867bf --- /dev/null +++ b/client-solid/src/LoginButton.tsx @@ -0,0 +1,23 @@ +import { JSXElement, Show, useContext } from "solid-js"; + +import { LoginContext, ModalContext } from "./GlobalState"; +import { UserCircle } from "./Icons"; + +export function LoginButton(): JSXElement { + const modal_ctx = useContext(ModalContext)!; + const login_ctx = useContext(LoginContext)!; + + const clickHandler = (): void => { + if (login_ctx.loggedIn()) login_ctx.logOut(); + else modal_ctx.setOpen(true); + }; + + return ( +
+ + {login_ctx.username()} + + +
+ ); +} diff --git a/client-solid/src/LoginModal.tsx b/client-solid/src/LoginModal.tsx index 4266145..f7d5541 100644 --- a/client-solid/src/LoginModal.tsx +++ b/client-solid/src/LoginModal.tsx @@ -8,16 +8,16 @@ export function LoginModal(): JSXElement { const modal_ctx = useContext(ModalContext)!; const closeModal = (): void => { - modal_ctx.setLoginModalOpen(false); + modal_ctx.setOpen(false); }; // Close the modal when the component is unmounted onCleanup(() => { - modal_ctx.setLoginModalOpen(false); + modal_ctx.setOpen(false); }); return ( - +
diff --git a/client-solid/src/Menu.tsx b/client-solid/src/Menu.tsx new file mode 100644 index 0000000..4aac8ba --- /dev/null +++ b/client-solid/src/Menu.tsx @@ -0,0 +1,36 @@ +import { A } from "@solidjs/router"; +import { JSXElement, Show, useContext } from "solid-js"; + +import { LoginContext } from "./GlobalState"; +import { Home, Plus } from "./Icons"; + +// Represents a single list item in the menu bar +export function MenuItem(props: { + href: string; + children: JSXElement; +}): JSXElement { + return ( +
  • + + {props.children} + +
    • + ); +} + +// Represents the menu bar at the top of the page +export function Menu(): JSXElement { + const login_ctx = useContext(LoginContext)!; + return ( + +
      + + + + + + +
    +     + ); +} diff --git a/client-solid/src/Navbar.tsx b/client-solid/src/Navbar.tsx index fed39b0..d06443e 100644 --- a/client-solid/src/Navbar.tsx +++ b/client-solid/src/Navbar.tsx @@ -1,46 +1,11 @@ import { A } from "@solidjs/router"; -import { JSXElement, Show, useContext } from "solid-js"; +import { JSXElement } from "solid-js"; -import { LoginContext, ModalContext } from "./GlobalState"; -import { Flake, Home, Plus, UserCircle } from "./Icons"; - -// Represents a single list item in the menu bar -function MenuItem(props: { href: string; children: JSXElement }): JSXElement { - return ( -
  • - - {props.children} - -
    • - ); -} - -// Represents the menu bar at the top of the page -function Menu(): JSXElement { - const login_ctx = useContext(LoginContext)!; - return ( - -
      - - - - - - -
    -     - ); -} +import { Flake } from "./Icons"; +import { LoginButton } from "./LoginButton"; +import { Menu } from "./Menu"; export function Navbar(): JSXElement { - const modal_ctx = useContext(ModalContext)!; - const login_ctx = useContext(LoginContext)!; - - const clickHandler = (): void => { - if (login_ctx.loggedIn()) login_ctx.logOut(); - else modal_ctx.setLoginModalOpen(true); - }; - return (
    @@ -53,18 +18,7 @@ export function Navbar(): JSXElement {
    - - { - - {login_ctx.username()} - - } - - +
    ); diff --git a/client-solid/src/RegLogin/Login.tsx b/client-solid/src/RegLogin/Login.tsx index 6548b2e..481811c 100644 --- a/client-solid/src/RegLogin/Login.tsx +++ b/client-solid/src/RegLogin/Login.tsx @@ -1,10 +1,11 @@ -import { JSXElement, createSignal, useContext } from "solid-js"; +import { JSXElement, Show, createSignal, useContext } from "solid-js"; import { LoginContext, ModalContext } from "../GlobalState"; +import { AuthResponse, submitLogin } from "../api"; export function LoginForm(): JSXElement { - const modal_ctx = useContext(ModalContext); - const login_ctx = useContext(LoginContext); + const modal_ctx = useContext(ModalContext)!; + const login_ctx = useContext(LoginContext)!; const [username, setUsername] = createSignal(""); const [password, setPassword] = createSignal(""); const [waiting, setWaiting] = createSignal(false); @@ -18,22 +19,25 @@ export function LoginForm(): JSXElement { }, 1000); } + const clearFields = (): void => { + setUsername(""); + setPassword(""); + }; + + const success = (response: AuthResponse): void => { + setWaiting(false); + setError(false); + clearFields(); + login_ctx.logIn(response.username, response.token); + modal_ctx.setOpen(false); + }; + async function loginPress(e: Event): Promise { e.preventDefault(); setWaiting(true); - submitLogin(username(), password()).then((token): void => { - if (token != "") { - setWaiting(false); - setError(false); - login_ctx?.setUsername(username()); - login_ctx?.setToken(token); - modal_ctx?.setLoginModalOpen(false); - setUsername(""); - setPassword(""); - } else { - loginFailed(); - } - }); + const data = await submitLogin(username(), password()); + if (data) success(data as AuthResponse); + else loginFailed(); } return ( @@ -59,35 +63,13 @@ export function LoginForm(): JSXElement { /> ); } - -// This function is responsible for sending the login request to the server -// and storing the token in localstorage -export async function submitLogin( - username: string, - password: string -): Promise { - if (username == "" || password == "") return ""; - const response = await fetch("/api/login", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ username, password }), - }); - - if (response.ok) { - const data = await response.json(); - if (data.token && data.username) { - localStorage.setItem("token", data.token); - localStorage.setItem("username", data.username); - return data.token; - } - } - return ""; -} diff --git a/client-solid/src/RegLogin/Register.tsx b/client-solid/src/RegLogin/Register.tsx index 0e09d10..2f23194 100644 --- a/client-solid/src/RegLogin/Register.tsx +++ b/client-solid/src/RegLogin/Register.tsx @@ -1,10 +1,11 @@ -import { JSXElement, createSignal, useContext } from "solid-js"; +import { JSXElement, Show, createSignal, useContext } from "solid-js"; import { LoginContext, ModalContext } from "../GlobalState"; +import { AuthResponse, submitRegistration } from "../api"; export function RegisterForm(): JSXElement { - const modal_ctx = useContext(ModalContext); - const login_ctx = useContext(LoginContext); + const modal_ctx = useContext(ModalContext)!; + const login_ctx = useContext(LoginContext)!; const [username, setUsername] = createSignal(""); const [password, setPassword] = createSignal(""); const [captcha, setCaptcha] = createSignal(""); @@ -19,24 +20,26 @@ export function RegisterForm(): JSXElement { }, 1000); } + const clearFields = (): void => { + setUsername(""); + setPassword(""); + setCaptcha(""); + }; + + const success = (response: AuthResponse): void => { + setWaiting(false); + setError(false); + clearFields(); + login_ctx.logIn(response.username, response.token); + modal_ctx.setOpen(false); + }; + async function regPress(e: Event): Promise { e.preventDefault(); setWaiting(true); - submitRegistration(username(), password(), captcha()).then( - (token): void => { - if (token != "") { - setWaiting(false); - setError(false); - login_ctx?.setUsername(username()); - login_ctx?.setToken(token); - modal_ctx?.setLoginModalOpen(false); - setUsername(""); - setPassword(""); - } else { - loginFailed(); - } - } - ); + const data = await submitRegistration(username(), password(), captcha()); + if (data) success(data as AuthResponse); + else loginFailed(); } return ( @@ -72,35 +75,13 @@ export function RegisterForm(): JSXElement { /> ); } - -// This function is responsible for sending the login request to the server -// and storing the token in localstorage -export async function submitRegistration( - username: string, - password: string, - captcha: string -): Promise { - const response = await fetch("/api/register", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ username, password, captcha }), - }); - - if (response.ok) { - const data = await response.json(); - if (data.token && data.username) { - localStorage.setItem("token", data.token); - localStorage.setItem("username", data.username); - return data.token; - } - } - return ""; -} diff --git a/client-solid/src/api.ts b/client-solid/src/api.ts index 8aba575..34aca91 100644 --- a/client-solid/src/api.ts +++ b/client-solid/src/api.ts @@ -16,6 +16,12 @@ export interface Post extends NewPost { votes: Votes; } +// This is what the login and registration responses look like +export interface AuthResponse { + username: string; + token: string; +} + export async function getPosts(): Promise { const res = await fetch("/api/posts"); const data = await res.json(); @@ -37,3 +43,33 @@ export async function createPost(post: NewPost): Promise { body: JSON.stringify(post), }); } + +// Send the registration request to the server +export async function submitRegistration( + username: string, + password: string, + captcha: string +): Promise { + const response = await fetch("/api/register", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ username, password, captcha }), + }); + + if (response.ok) return await response.json(); +} + +// Send the login request to the server +export async function submitLogin( + username: string, + password: string +): Promise { + if (username == "" || password == "") return; + const response = await fetch("/api/login", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ username, password }), + }); + + if (response.ok) return await response.json(); +} \ No newline at end of file