@stanlemon/app-template 0.2.0 → 0.2.3

package/app.js

@@ -4,12 +4,7 @@ import {
   SimpleUsersDao,
 } from "@stanlemon/server-with-auth";
 
-const users = new SimpleUsersDao([
-  {
-    username: "user",
-    password: "password",
-  },
-]);
+const users = new SimpleUsersDao();
 
 const app = createAppServer({
   webpack: "http://localhost:8080",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stanlemon/app-template",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "description": "A template for creating apps using the webdev package.",
   "author": "Stan Lemon <stanlemon@users.noreply.github.com>",
   "license": "MIT",
@@ -11,6 +11,7 @@
     "webpack:serve": "webpack serve",
     "webpack:build": "NODE_ENV=production webpack",
     "test": "jest",
+    "test:watch": "jest -w",
     "test:coverage": "jest --coverage",
     "lint": "eslint --ext js,jsx,ts,tsx ./src/",
     "lint:format": "eslint --fix --ext js,jsx,ts,tsx ./src/"

package/src/App.test.tsx

@@ -1,18 +1,45 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+  act,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import App from "./App";
 
-test.skip("<App/>", () => {
-  render(<App />);
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    ok: true,
+    json: () =>
+      Promise.resolve({
+        token: "token",
+        user: {
+          name: "Test Tester",
+          email: "test@test.com",
+          username: "test",
+          password: "password",
+        },
+      }),
+  })
+) as jest.Mock;
 
-  // The header is present
-  expect(screen.getByRole("heading")).toHaveTextContent("Hello World!");
+test("<App/>", async () => {
+  act(() => {
+    render(<App />);
+  });
+
+  // A fetch request will be made, and then the page will be initialized, wait for that
+  await waitFor(() => {
+    // The header is present
+    expect(screen.getByRole("heading")).toHaveTextContent("Hello World!");
+  });
 
   // Type some data into the input
-  userEvent.type(screen.getByRole("textbox"), "The first item");
+  await userEvent.type(screen.getByLabelText("Item"), "The first item");
 
   // Click the add button
-  fireEvent.click(screen.getByRole("button"));
+  fireEvent.click(screen.getByText("Add", { selector: "button" }));
 
   // Now we should have a list item with the text we entered
   expect(screen.getByRole("listitem")).toHaveTextContent("The first item");

package/src/App.tsx

@@ -30,6 +30,7 @@ export type User = {
 };
 
 export default function App() {
+  const [initialized, setInitialized] = useState<boolean>(false);
   const [session, setSession] = useState<Session | null>(null);
   const [value, setValue] = useState<string>("");
   const [items, setItems] = useState<string[]>([]);
@@ -45,6 +46,8 @@ export default function App() {
       },
     })
       .then((response) => {
+        setInitialized(true);
+
         if (!response.ok) {
           throw new Error(response.statusText);
         }
@@ -57,13 +60,21 @@ export default function App() {
       .catch((err) => {
         console.error(err);
       });
-  }, [session?.token]);
+  }, [session?.token, initialized]);
 
   const addItem = () => {
     setItems([...items, value]);
     setValue("");
   };
 
+  if (!initialized) {
+    return (
+      <div>
+        <em>Loading...</em>
+      </div>
+    );
+  }
+
   return (
     <SessionContext.Provider value={contextValue}>
       <Header />
@@ -87,6 +98,7 @@ export default function App() {
       </div>
       <Input
         label="Item"
+        name="item"
         value={value}
         onChange={(value) => setValue(value)}
         onEnter={addItem}

package/src/Input.tsx

@@ -1,5 +1,6 @@
 export default function Input({
   type = "text",
+  name,
   value = "",
   label,
   placeholder,
@@ -9,13 +10,16 @@ export default function Input({
   onEnter = () => {
     /* noop */
   },
+  error,
 }: {
   type?: string;
+  name: string;
   value?: string;
   label?: string;
   placeholder?: string;
   onChange?: (value: string) => void;
   onEnter?: () => void;
+  error?: string;
 }) {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     onChange(e.currentTarget.value);
@@ -29,14 +33,16 @@ export default function Input({
 
   return (
     <>
-      {label && <label>{label}</label>}
+      {label && <label htmlFor={name}>{label}</label>}
       <input
         type={type}
+        id={name}
         onChange={handleChange}
         onKeyPress={handleKeyPress}
         placeholder={placeholder}
         value={value}
       />
+      {error && <div>{error}</div>}
     </>
   );
 }

package/src/Login.tsx

@@ -62,15 +62,18 @@ export default function Login() {
         </div>
       )}
       <Input
+        name="username"
         label="Username"
         value={values.username}
         onChange={(value) => setValues({ ...values, username: value })}
       />
       <Input
+        name="password"
         type="password"
         label="Password"
         value={values.password}
         onChange={(value) => setValues({ ...values, password: value })}
+        onEnter={onSubmit}
       />
       <button onClick={onSubmit}>Login</button>
     </div>

package/src/Register.tsx

@@ -4,7 +4,7 @@ import Input from "./Input";
 
 // eslint-disable-next-line max-lines-per-function
 export default function Register() {
-  const [error, setError] = useState<string | null>(null);
+  const [errors, setErrors] = useState<Record<string, string>>({});
   const [values, setValues] = useState<User>({
     name: "",
     email: "",
@@ -17,7 +17,7 @@ export default function Register() {
   };
 
   const onSubmit = () => {
-    setError(null);
+    setErrors({});
     fetch("/auth/register", {
       headers: {
         Accept: "application/json",
@@ -43,10 +43,10 @@ export default function Register() {
           status: number;
           data: Record<string, unknown>;
         }) => {
-          console.log(ok, status, data);
-
           if (ok) {
             setSession(data as Session);
+          } else {
+            setErrors((data as FormErrors).errors);
           }
         }
       )
@@ -57,32 +57,20 @@ export default function Register() {
 
   return (
     <div>
-      {error && (
-        <div>
-          <strong>{error}</strong>
-        </div>
-      )}
-      <Input
-        label="Name"
-        value={values.name || ""}
-        onChange={(value) => setValues({ ...values, name: value })}
-      />
-      <Input
-        type="email"
-        label="Email"
-        value={values.email || ""}
-        onChange={(value) => setValues({ ...values, email: value })}
-      />
       <Input
+        name="username"
         label="Username"
         value={values.username}
         onChange={(value) => setValues({ ...values, username: value })}
+        error={errors.username}
       />
       <Input
+        name="password"
         type="password"
         label="Password"
         value={values.password}
         onChange={(value) => setValues({ ...values, password: value })}
+        error={errors.password}
       />
       <button onClick={onSubmit}>Register</button>
     </div>

package/src/index.tsx

@@ -1,4 +1,17 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+const root = createRoot(
+  document.body.appendChild(document.createElement("div"))
+);
+root.render(<App />);
+
+const link = document.createElement("link");
+link.setAttribute("rel", "stylesheet");
+link.setAttribute("type", "text/css");
+link.setAttribute(
+  "href",
+  "https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css"
+);
+
+document.getElementsByTagName("head")[0].appendChild(link);

package/db.json

@@ -1,10 +0,0 @@
-{
-  "users": [
-    {
-      "username": "user",
-      "password": "password",
-      "id": "857866e3-8f76-4fc1-be6c-9c785fbdf593",
-      "last_logged_in": "2022-03-06T13:02:35.423-05:00"
-    }
-  ]
-}

package/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">
-  <title>App</title>
-</head>
-
-<body>
-  <noscript>
-    You need to enable JavaScript to run this app.
-  </noscript>
-  <div id="root"></div>
-</body>
-
-</html>