@stanlemon/app-template 0.2.8 → 0.2.12

package/app.js

@@ -3,19 +3,16 @@ import {
   asyncJsonHandler as handler,
   SimpleUsersDao,
 } from "@stanlemon/server-with-auth";
-import { Low, JSONFile } from "lowdb";
-
-const adapter = new JSONFile("./db.json");
 
+const dao = new SimpleUsersDao();
 const app = createAppServer({
   webpack: "http://localhost:8080",
   secure: ["/api/"],
-  ...new SimpleUsersDao([], adapter),
+  ...dao,
 });
 
-const db = new Low(adapter);
-await db.read();
-db.data.items ||= [];
+export const db = dao.getDb();
+db.read().then(() => (db.data.items = db.data.items || []));
 
 app.get(
   "/api/items",
@@ -24,9 +21,20 @@ app.get(
 
 app.post(
   "/api/items",
-  handler(async (item) => {
-    db.data.items.push(item);
+  handler(async ({ item }) => {
+    db.data.items.push({ item, id: dao.generateId() });
     await db.write();
     return db.data.items;
   })
 );
+
+app.delete(
+  "/api/items/:id",
+  handler(async ({ id }) => {
+    db.data.items = db.data.items.filter((item) => id !== item.id);
+    await db.write();
+    return db.data.items;
+  })
+);
+
+export default app;

package/app.test.js

@@ -0,0 +1,50 @@
+/**
+ * @jest-environment node
+ */
+import request from "supertest";
+import app, { db } from "./app.js";
+
+describe("/app", () => {
+  afterEach(() => {
+    // Prevent data from bleeding over after each test
+    db.data.items = [];
+  });
+
+  it("lists items", async () => {
+    const response = await request(app)
+      .get("/api/items")
+      .set("Accept", "application/json");
+
+    expect(response.headers["content-type"]).toMatch(/json/);
+    expect(response.status).toEqual(200);
+    expect(response.body).toEqual([]);
+  });
+
+  it("add item", async () => {
+    const response = await request(app)
+      .post("/api/items")
+      .set("Accept", "application/json")
+      .send({ item: "hello world" });
+
+    expect(response.headers["content-type"]).toMatch(/json/);
+    expect(response.status).toEqual(200);
+    expect(response.body).toMatchObject([{ item: "hello world" }]);
+  });
+
+  it("delete item", async () => {
+    const response1 = await request(app)
+      .post("/api/items")
+      .set("Accept", "application/json")
+      .send({ item: "hello world" });
+
+    const items = response1.body;
+
+    const response2 = await request(app)
+      .delete(`/api/items/${items[0].id}`)
+      .set("Accept", "application/json");
+
+    expect(response2.headers["content-type"]).toMatch(/json/);
+    expect(response2.status).toEqual(200);
+    expect(response2.body).toMatchObject([]);
+  });
+});

package/jest.config.js

@@ -1 +1 @@
-export { default } from "@stanlemon/webdev/jest.config.js";
+export { default } from "@stanlemon/webdev/jest.config.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stanlemon/app-template",
-  "version": "0.2.8",
+  "version": "0.2.12",
   "description": "A template for creating apps using the webdev package.",
   "author": "Stan Lemon <stanlemon@users.noreply.github.com>",
   "license": "MIT",
@@ -18,15 +18,16 @@
     "lint:format": "eslint --fix --ext js,jsx,ts,tsx ./src/"
   },
   "dependencies": {
-    "@stanlemon/server-with-auth": "0.1.4",
+    "@stanlemon/server-with-auth": "*",
     "@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.6",
-    "@types/react-dom": "^18.0.2"
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
+    "supertest": "^6.2.3"
   }
 }

package/src/App.test.tsx

@@ -1,18 +1,15 @@
-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 App, { ItemData } from "./App";
 import { SessionContext } from "./Session";
 
-const output = ["item one", "item two"];
+const output = [
+  { id: "1", item: "item one" },
+  { id: "2", item: "item two" },
+];
 global.fetch = jest.fn((url, opts: { method: string; body: string }) => {
   if (opts.method === "post") {
-    output.push(JSON.parse(opts.body) as string);
+    output.push(JSON.parse(opts.body) as ItemData);
   }
   return Promise.resolve({
     ok: true,
@@ -21,42 +18,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 +58,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,5 @@
-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 +7,7 @@ import Input from "./Input";
 import Login from "./Login";
 import Register from "./Register";
 
-export type ErrorMessage = {
+export type ErrorResponse = {
   message: string;
 };
 
@@ -14,40 +15,81 @@ export type FormErrors = {
   errors: Record<string, string>;
 };
 
+export type ItemData = {
+  id: string;
+  item: string;
+};
+
+// eslint-disable-next-line max-lines-per-function
 export default function App() {
-  const [value, setValue] = useState<string>("");
-  const [items, setItems] = useState<string[]>([]);
+  const [loaded, setLoaded] = useState<boolean>(false);
+  const [items, setItems] = useState<ItemData[]>([]);
+  const [error, setError] = useState<string | boolean>(false);
 
-  const { session } = useContext(SessionContext);
+  const { session, setSession } = 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<ItemData[], 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<ItemData[], { item: 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 = (id: string) => {
+    fetchApi<ItemData[], string>(
+      `/api/items/${id}`,
+      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 +99,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: ItemData[];
+  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, id }, i) => (
+          <Row key={i} as="li">
+            <button
+              style={{ marginLeft: "auto", order: 2 }}
+              onClick={() => deleteItem(id)}
+            >
+              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 +229,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>