@stanlemon/app-template 0.2.7 → 0.2.10

package/app.js

@@ -30,3 +30,12 @@ app.post(
     return db.data.items;
   })
 );
+
+app.delete(
+  "/api/items/:item",
+  handler(async ({ item }) => {
+    db.data.items = db.data.items.filter((i) => i !== item);
+    await db.write();
+    return db.data.items;
+  })
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stanlemon/app-template",
-  "version": "0.2.7",
+  "version": "0.2.10",
   "description": "A template for creating apps using the webdev package.",
   "author": "Stan Lemon <stanlemon@users.noreply.github.com>",
   "license": "MIT",
@@ -20,13 +20,13 @@
   "dependencies": {
     "@stanlemon/server-with-auth": "0.1.4",
     "@stanlemon/webdev": "*",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "devDependencies": {
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^14.1.1",
-    "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.1"
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3"
   }
 }

package/src/App.test.tsx

@@ -1,10 +1,4 @@
-import {
-  render,
-  screen,
-  fireEvent,
-  waitFor,
-  act,
-} from "@testing-library/react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import App from "./App";
 import { SessionContext } from "./Session";
@@ -21,42 +15,36 @@ global.fetch = jest.fn((url, opts: { method: string; body: string }) => {
 }) as jest.Mock;
 
 test("<App/>", async () => {
-  act(() => {
-    render(
-      <SessionContext.Provider
-        value={{
-          session: {
-            token: "abcd",
-            user: {
-              username: "user",
-              password: "password",
-              name: "user",
-              email: "user@example.com",
-            },
+  render(
+    <SessionContext.Provider
+      value={{
+        session: {
+          token: "abcd",
+          user: {
+            username: "user",
+            password: "password",
+            name: "user",
+            email: "user@example.com",
           },
-          setSession: () => {},
-        }}
-      >
-        <App />
-      </SessionContext.Provider>
-    );
-  });
+        },
+        setSession: () => {},
+      }}
+    >
+      <App />
+    </SessionContext.Provider>
+  );
 
   // The auth text is present
-  expect(screen.getByText("You logged in as user")).toBeInTheDocument();
+  expect(screen.getByText("You are logged in as user.")).toBeInTheDocument();
 
   // The header is present
   expect(
     screen.getByRole("heading", { name: "Hello World!" })
   ).toBeInTheDocument();
 
-  expect(
-    await screen.findByText("item one", { selector: "li" })
-  ).toBeInTheDocument();
+  expect(await screen.findByText("item one")).toBeInTheDocument();
 
-  expect(
-    await screen.findByText("item two", { selector: "li" })
-  ).toBeInTheDocument();
+  expect(await screen.findByText("item two")).toBeInTheDocument();
 
   // Type some data into the input
   await userEvent.type(screen.getByLabelText("Item"), "item three");
@@ -67,7 +55,5 @@ test("<App/>", async () => {
   });
 
   // Now we should have a list item with the text we entered
-  expect(
-    await screen.findByText("item three", { selector: "li" })
-  ).toBeInTheDocument();
+  expect(await screen.findByText("item three")).toBeInTheDocument();
 });

package/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useContext, useEffect } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import "./App.less";
 import { SessionContext } from "./Session";
 import Header from "./Header";
@@ -6,7 +6,7 @@ import Input from "./Input";
 import Login from "./Login";
 import Register from "./Register";
 
-export type ErrorMessage = {
+export type ErrorResponse = {
   message: string;
 };
 
@@ -15,39 +15,67 @@ export type FormErrors = {
 };
 
 export default function App() {
-  const [value, setValue] = useState<string>("");
+  const [loaded, setLoaded] = useState<boolean>(false);
   const [items, setItems] = useState<string[]>([]);
+  const [error, setError] = useState<string | boolean>(false);
+
+  const { session, setSession } = useContext(SessionContext);
 
-  const { session } = useContext(SessionContext);
+  const catchError = (err: Error) => {
+    if (err.message === "Unauthorized") {
+      return;
+    }
+    setError(err.message);
+  };
 
-  const itemsJson = JSON.stringify(items);
   useEffect(() => {
-    fetchApi("/api/items", session?.token || "")
-      .then((items: string[]) => {
+    if (loaded) {
+      return;
+    }
+
+    fetchApi<string[], null>("/api/items", session?.token || "")
+      .then((items) => {
+        setLoaded(true);
         setItems(items);
       })
-      .catch((err) => console.error(err));
-  }, [itemsJson, session?.token]);
+      .catch(catchError);
+  });
 
-  const addItem = () => {
-    setValue("");
+  const saveItem = (item: string) => {
+    fetchApi<string[], string>("/api/items", session?.token || "", "post", item)
+      .then((items) => {
+        setItems(items);
+      })
+      .catch(catchError);
+  };
 
-    fetchApi("/api/items", session?.token || "", "post", value)
-      .then((items: string[]) => {
+  const deleteItem = (item: string) => {
+    fetchApi<string[], string>(
+      "/api/items/" + item,
+      session?.token || "",
+      "delete"
+    )
+      .then((items) => {
         setItems(items);
       })
-      .catch((err) => console.error(err));
+      .catch(catchError);
+  };
+
+  const logout = () => {
+    setSession({ token: null, user: null });
   };
 
   return (
     <>
       <Header />
+      <ErrorMessage error={error} />
       {!session.user && (
         <Row>
           <Column>
             <h2>Login</h2>
             <Login />
           </Column>
+          <Column />
           <Column>
             <h2>Register</h2>
             <Register />
@@ -57,63 +85,128 @@ export default function App() {
       {session.user && (
         <>
           <p>
-            <em>You logged in as {session.user?.username}</em>
+            <em>You are logged in as {session.user?.username}.</em>{" "}
+            <span style={{ cursor: "pointer" }} onClick={logout}>
+              (logout)
+            </span>
           </p>
-          <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>
+          <ItemList items={items} saveItem={saveItem} deleteItem={deleteItem} />
         </>
       )}
+      <Spacer />
     </>
   );
 }
 
-function Row({ children }: { children: React.ReactNode }) {
+function ItemList({
+  items,
+  saveItem,
+  deleteItem,
+}: {
+  items: string[];
+  saveItem(item: string): void;
+  deleteItem(item: string): void;
+}) {
+  const [value, setValue] = useState<string>("");
+
+  const addItem = () => {
+    saveItem(value);
+    setValue("");
+  };
+
   return (
-    <div
-      style={{
+    <>
+      <h2>New Item</h2>
+      <Input
+        label="Item"
+        name="item"
+        value={value}
+        onChange={(value) => setValue(value)}
+        onEnter={addItem}
+      />
+      <button onClick={addItem}>Add</button>
+      <Spacer />
+      <h2>My Items</h2>
+      <ul style={{ padding: 0 }}>
+        {items.map((item, i) => (
+          <Row key={i} as="li">
+            <button
+              style={{ marginLeft: "auto", order: 2 }}
+              onClick={() => deleteItem(item)}
+            >
+              Delete
+            </button>
+            <div>{item}</div>
+          </Row>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+export function Row({
+  as = "div",
+  children,
+}: {
+  as?: keyof JSX.IntrinsicElements;
+  children?: React.ReactNode;
+}) {
+  return React.createElement(
+    as,
+    {
+      style: {
         display: "flex",
         flexDirection: "row",
         flexWrap: "wrap",
         width: "100%",
-      }}
-    >
-      {children}
-    </div>
+      },
+    },
+    children
   );
 }
 
-function Column({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      style={{
+export function Spacer({ height = "2em" }: { height?: string | number }) {
+  return <div style={{ height, minHeight: height }} />;
+}
+
+export function Column({
+  as = "div",
+  children,
+}: {
+  as?: keyof JSX.IntrinsicElements;
+  children?: React.ReactNode;
+}) {
+  return React.createElement(
+    as,
+    {
+      style: {
         display: "flex",
         flexDirection: "column",
         flexBasis: "100%",
-        flex: 1,
-      }}
-    >
-      {children}
-    </div>
+        flex: "1 1 0",
+      },
+    },
+    children
   );
 }
 
-function fetchApi(
+export function ErrorMessage({ error }: { error: string | boolean }) {
+  if (error) {
+    return (
+      <p>
+        <strong>An error has occurred:</strong> {error}
+      </p>
+    );
+  }
+  return <></>;
+}
+
+function fetchApi<T, P>(
   url: string,
   token: string,
   method = "get",
-  data?: any
-): Promise<any> {
+  data?: P
+): Promise<T> {
   return fetch(url, {
     method: method,
     headers: {
@@ -122,12 +215,10 @@ function fetchApi(
       "Content-Type": "application/json",
     },
     body: JSON.stringify(data),
-  })
-    .then((response) => {
-      if (!response.ok) {
-        throw new Error(response.statusText);
-      }
-      return response;
-    })
-    .then((response) => response.json());
+  }).then((response) => {
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+    return response.json() as Promise<T>;
+  });
 }

package/src/Login.tsx

@@ -1,5 +1,5 @@
 import { useState, useContext } from "react";
-import { ErrorMessage } from "./App";
+import { ErrorResponse, Spacer } from "./App";
 import { SessionContext, SessionData, UserData } from "./Session";
 import Input from "./Input";
 
@@ -44,17 +44,17 @@ export default function Login() {
           if (ok) {
             setSession(data as SessionData);
           } else {
-            setError((data as ErrorMessage).message);
+            setError((data as ErrorResponse).message);
           }
         }
       )
-      .catch((err) => {
-        console.error("error", err);
+      .catch((err: Error) => {
+        setError(err.message);
       });
   };
 
   return (
-    <div>
+    <>
       {error && (
         <div>
           <strong>{error}</strong>
@@ -75,7 +75,8 @@ export default function Login() {
         onChange={(value) => setValues({ ...values, password: value })}
         onEnter={onSubmit}
       />
+      <Spacer />
       <button onClick={onSubmit}>Login</button>
-    </div>
+    </>
   );
 }

package/src/Register.tsx

@@ -1,10 +1,11 @@
 import { useState, useContext } from "react";
-import { FormErrors } from "./App";
+import { FormErrors, ErrorMessage, Spacer } from "./App";
 import { SessionData, UserData, SessionContext } from "./Session";
 import Input from "./Input";
 
 // eslint-disable-next-line max-lines-per-function
 export default function Register() {
+  const [error, setError] = useState<string | boolean>(false);
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [values, setValues] = useState<UserData>({
     name: "",
@@ -49,13 +50,15 @@ export default function Register() {
           }
         }
       )
-      .catch((err) => {
-        console.error("error", err);
+      .catch((err: Error) => {
+        // Put any generis error onto the username field
+        setError(err.message);
       });
   };
 
   return (
-    <div>
+    <>
+      <ErrorMessage error={error} />
       <Input
         name="username"
         label="Username"
@@ -72,7 +75,8 @@ export default function Register() {
         onChange={(value) => setValues({ ...values, password: value })}
         error={errors.password}
       />
+      <Spacer />
       <button onClick={onSubmit}>Register</button>
-    </div>
+    </>
   );
 }

package/src/Session.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, createContext } from "react";
+import { ErrorMessage } from "./App";
 
 export const SessionContext = createContext<{
   session: SessionData;
@@ -23,8 +24,9 @@ export type UserData = {
   password: string;
 };
 
-export default function Session({ children }: { children: React.ReactChild }) {
+export default function Session({ children }: { children: React.ReactNode }) {
   const [initialized, setInitialized] = useState<boolean>(false);
+  const [error, setError] = useState<string | boolean>(false);
   const [session, setSession] = useState<SessionData>({
     token: null,
     user: null,
@@ -42,7 +44,7 @@ export default function Session({ children }: { children: React.ReactChild }) {
         setInitialized(true);
 
         if (!response.ok) {
-          throw new Error(response.statusText);
+          throw new ErrorMessage(response.statusText);
         }
         return response;
       })
@@ -50,11 +52,18 @@ export default function Session({ children }: { children: React.ReactChild }) {
       .then((session: SessionData) => {
         setSession(session);
       })
-      .catch((err) => {
-        console.error(err);
+      .catch((err: Error) => {
+        if (err.message === "Unauthorized") {
+          return;
+        }
+        setError(err.message);
       });
   }, [session?.token, initialized]);
 
+  if (error) {
+    return <ErrorMessage error={error} />;
+  }
+
   if (!initialized) {
     return (
       <div>