extract registration to a component

src/pages/Index.tsx

@@ -4,12 +4,11 @@ import { backend, UserInfo } from "../utils";
 import { Card } from "../components/Card";
 import { AxiosError } from "axios";
 
+const userIdKey = "UserId";
+const usernameKey = "Username";
 
 export function Index() {
-    const [loading, setLoading] = createSignal(false);
+    const [userInfo, setUserInfo] = createSignal<UserInfo | null>(null);
-    const [userInfo] = createSignal<UserInfo | null>(null);
-    const [error, setError] = createSignal("");
-    const [username, setUsername] = createSignal("");
 
     onMount(() => {
         // attempt to get userinfo from localstorage
@@ -17,34 +16,6 @@ export function Index() {
         console.log("validating userinfo in localstorage");
     });
 
-    // Register a user in the backend, get their user_id, store it in localStorage.
-    const registerUser = async(ev: Event) => {
-        ev.preventDefault();
-
-        setLoading(true);
-        setError("");
-        try {
-            const user = username();
-
-            if (user.length === 0) {
-                throw new Error("Username is empty");
-            }
-
-            const response = await backend.get(`/register?username=${user}`);
-            console.log(response.data);
-        } catch (_e) {
-            const e = _e as AxiosError<{error: string}>;
-
-            if (e.response && e.response.data && e.response.data.error) {
-                setError(e.response.data.error);
-            } else {
-                setError(e.message);
-            }
-        } finally {
-            setLoading(false);
-        }
-    };
-
     return (
         <div class="w-[40rem] mx-auto bg-c-bg-2 my-4 p-4 rounded shadow-md">
             <h1 class="text-c-on-bg text-3xl font-black pb-4">
@@ -55,34 +26,10 @@ export function Index() {
             <div class="py-4">
                 <h2 class="text-xl py-2 font-black">Play:</h2>
                 <Show when={userInfo() === null}>
-                    <form onSubmit={(ev) => registerUser(ev)}>
+                    <UserRegistration setUserInfo={setUserInfo} />
-                        <label for="index-register-name">Enter your name (3 to 20 letters, numbers or undescores):</label>
-                        <br />
-                        <input
-                            id="index-register-name"
-                            class="inline-block px-2 py-1 my-2 border border-c-border-1 rounded-md bg-c-bg text-c-on-bg"
-                            type="text"
-                            value={username()}
-                            required
-                            pattern="[a-zA-Z0-9_]{3,20}"
-                            onInput={(ev) => setUsername(ev.target.value)}
-                        />
-                        <br />
-                        <button
-                            class="inline-block py-2 px-4 rounded bg-teal-500 dark:bg-teal-700 text-white
-                            disabled:opacity-50 disabled:cursor-not-allowed"
-                            type="submit"
-                            disabled={loading()}
-                        >
-                            Register
-                        </button>
-                    </form>
                 </Show>
                 <Show when={userInfo() !== null}>
-                    <p>:D</p>
+                    <p>:D (user registered)</p>
-                </Show>
-                <Show when={error() !== ""}>
-                    <p class="bg-red-700 text-red-50 inline-block py-1 px-2 my-2 rounded">Error: {error()}</p>
                 </Show>
             </div>
             <hr />
@@ -112,3 +59,68 @@ export function Index() {
         </div>
     );
 }
+
+function UserRegistration(props: {setUserInfo: (u: UserInfo) => void}) {
+    const [loading, setLoading] = createSignal(false);
+    const [error, setError] = createSignal("");
+    const [username, setUsername] = createSignal("");
+
+    // Register a user in the backend, get their user_id, store it in localStorage.
+    const registerUser = async(ev: Event) => {
+        ev.preventDefault();
+
+        setLoading(true);
+        setError("");
+        try {
+            const user = username();
+
+            if (user.length === 0) {
+                throw new Error("Username is empty");
+            }
+
+            const response = await backend.get(`/register?username=${user}`);
+            props.setUserInfo(response.data);
+            localStorage.setItem(userIdKey, response.data.UserId);
+            localStorage.setItem(usernameKey, response.data.Username);
+        } catch (_e) {
+            const e = _e as AxiosError<{error: string}>;
+
+            if (e.response && e.response.data && e.response.data.error) {
+                setError(e.response.data.error);
+            } else {
+                setError(e.message);
+            }
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <form onSubmit={(ev) => registerUser(ev)}>
+            <label for="index-register-name">Enter your name (3 to 20 letters, numbers or undescores):</label>
+            <br />
+            <input
+                id="index-register-name"
+                class="inline-block px-2 py-1 my-2 border border-c-border-1 rounded-md bg-c-bg text-c-on-bg"
+                type="text"
+                value={username()}
+                required
+                pattern="[a-zA-Z0-9_]{3,20}"
+                onInput={(ev) => setUsername(ev.target.value)}
+            />
+            <br />
+            <button
+                class="inline-block py-2 px-4 rounded bg-teal-500 dark:bg-teal-700 text-white
+                            disabled:opacity-50 disabled:cursor-not-allowed"
+                type="submit"
+                disabled={loading()}
+            >
+                            Register
+            </button>
+            <Show when={error() !== ""}>
+                <p class="bg-red-700 text-red-50 inline-block py-1 px-2 my-2 rounded">Error: {error()}</p>
+            </Show>
+        </form>
+    );
+}
+

src/utils.ts

@@ -5,7 +5,7 @@ export const backend = axios.create({
 });
 
 export type UserInfo = {
-    useruiid: number,
+    UserId: number,
-    username: string,
+    Username: string,
 }