@stanlemon/app-template 0.2.1 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stanlemon/app-template",
-  "version": "0.2.1",
+  "version": "0.2.4",
   "description": "A template for creating apps using the webdev package.",
   "author": "Stan Lemon <stanlemon@users.noreply.github.com>",
   "license": "MIT",
@@ -8,9 +8,11 @@
   "scripts": {
     "start": "node app.js",
     "build": "npm run webpack:build",
+    "tsc": "tsc",
     "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

@@ -22,6 +22,7 @@ export type Session = {
   token: string | null;
   user: User | null;
 };
+
 export type User = {
   name: string | null;
   email: string | null;
@@ -30,6 +31,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 +47,8 @@ export default function App() {
       },
     })
       .then((response) => {
+        setInitialized(true);
+
         if (!response.ok) {
           throw new Error(response.statusText);
         }
@@ -57,51 +61,86 @@ 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 />
-      <div>
-        {!session && (
-          <>
-            <p>
-              <em>You are not currently logged in.</em>
-            </p>
+      {!session && (
+        <Row>
+          <Column>
+            <h2>Login</h2>
             <Login />
-            <Spacer />
+          </Column>
+          <Column>
+            <h2>Register</h2>
             <Register />
-            <Spacer />
-          </>
-        )}
-        {session?.user && (
+          </Column>
+        </Row>
+      )}
+      {session?.user && (
+        <>
           <p>
             <em>You logged in as {session.user.username}.</em>
           </p>
-        )}
-      </div>
-      <Input
-        label="Item"
-        value={value}
-        onChange={(value) => setValue(value)}
-        onEnter={addItem}
-      />
-      <button onClick={addItem}>Add</button>
-
-      <ul>
-        {items.map((item, i) => (
-          <li key={i}>{item}</li>
-        ))}
-      </ul>
+          <Input
+            label="Item"
+            name="item"
+            value={value}
+            onChange={(value) => setValue(value)}
+            onEnter={addItem}
+          />
+          <button onClick={addItem}>Add</button>
+          <ul>
+            {items.map((item, i) => (
+              <li key={i}>{item}</li>
+            ))}
+          </ul>
+        </>
+      )}
     </SessionContext.Provider>
   );
 }
 
-function Spacer() {
-  return <div style={{ minHeight: "2em" }} />;
+function Row({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Column({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        flexBasis: "100%",
+        flex: 1,
+      }}
+    >
+      {children}
+    </div>
+  );
 }

package/src/Input.tsx

@@ -1,5 +1,19 @@
+export interface Props
+  // Inherit everything from input except onChange which we simplify here
+  extends Omit<React.ComponentPropsWithRef<"input">, "onChange"> {
+  type?: string;
+  name: string;
+  value?: string;
+  label?: string;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  onEnter?: () => void;
+  error?: string;
+}
+
 export default function Input({
   type = "text",
+  name,
   value = "",
   label,
   placeholder,
@@ -10,15 +24,8 @@ export default function Input({
     /* noop */
   },
   error,
-}: {
-  type?: string;
-  value?: string;
-  label?: string;
-  placeholder?: string;
-  onChange?: (value: string) => void;
-  onEnter?: () => void;
-  error?: string;
-}) {
+  ...attrs
+}: Props) {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     onChange(e.currentTarget.value);
   };
@@ -31,13 +38,15 @@ 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}
+        {...attrs}
       />
       {error && <div>{error}</div>}
     </>

package/src/Login.tsx

@@ -62,11 +62,14 @@ export default function Login() {
         </div>
       )}
       <Input
+        name="username"
         label="Username"
         value={values.username}
         onChange={(value) => setValues({ ...values, username: value })}
+        autoCapitalize="off"
       />
       <Input
+        name="password"
         type="password"
         label="Password"
         value={values.password}

package/src/Register.tsx

@@ -58,12 +58,15 @@ export default function Register() {
   return (
     <div>
       <Input
+        name="username"
         label="Username"
         value={values.username}
         onChange={(value) => setValues({ ...values, username: value })}
         error={errors.username}
+        autoCapitalize="off"
       />
       <Input
+        name="password"
         type="password"
         label="Password"
         value={values.password}

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,12 +0,0 @@
-{
-  "users": [
-    {
-      "username": "user",
-      "password": "$2a$10$5oHnfhEv5ezdqcVf7k1KNeQ2VVX4Jv0p5tZmhroqbS117umUBrIJO",
-      "id": "defb1788-f2b9-4f74-9a72-f397788592bb",
-      "verification_token": "BkWPUmVb9",
-      "created_at": "2022-03-08T00:42:01.041Z",
-      "last_updated": "2022-03-08T00:42:01.041Z"
-    }
-  ]
-}

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>