@stanlemon/app-template 0.2.10 → 0.2.14

package/app.js

@@ -3,19 +3,19 @@ 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(() => {
+  if (!db.data) db.data = { items: [] };
+  db.data.items = db.data.items || [];
+});
 
 app.get(
   "/api/items",
@@ -24,18 +24,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/:item",
-  handler(async ({ item }) => {
-    db.data.items = db.data.items.filter((i) => i !== item);
+  "/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.10",
+  "version": "0.2.14",
   "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.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.8",
-    "@types/react-dom": "^18.0.3"
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/user-event": "^14.2.0",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "supertest": "^6.2.3"
   }
 }

package/src/App.test.tsx

@@ -1,12 +1,15 @@
 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,

package/src/App.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useContext, useEffect } from "react";
+
 import "./App.less";
 import { SessionContext } from "./Session";
 import Header from "./Header";
@@ -14,9 +15,15 @@ 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 [loaded, setLoaded] = useState<boolean>(false);
-  const [items, setItems] = useState<string[]>([]);
+  const [items, setItems] = useState<ItemData[]>([]);
   const [error, setError] = useState<string | boolean>(false);
 
   const { session, setSession } = useContext(SessionContext);
@@ -33,7 +40,7 @@ export default function App() {
       return;
     }
 
-    fetchApi<string[], null>("/api/items", session?.token || "")
+    fetchApi<ItemData[], null>("/api/items", session?.token || "")
       .then((items) => {
         setLoaded(true);
         setItems(items);
@@ -42,16 +49,23 @@ export default function App() {
   });
 
   const saveItem = (item: string) => {
-    fetchApi<string[], string>("/api/items", session?.token || "", "post", item)
+    fetchApi<ItemData[], { item: string }>(
+      "/api/items",
+      session?.token || "",
+      "post",
+      {
+        item,
+      }
+    )
       .then((items) => {
         setItems(items);
       })
       .catch(catchError);
   };
 
-  const deleteItem = (item: string) => {
-    fetchApi<string[], string>(
-      "/api/items/" + item,
+  const deleteItem = (id: string) => {
+    fetchApi<ItemData[], string>(
+      `/api/items/${id}`,
       session?.token || "",
       "delete"
     )
@@ -103,7 +117,7 @@ function ItemList({
   saveItem,
   deleteItem,
 }: {
-  items: string[];
+  items: ItemData[];
   saveItem(item: string): void;
   deleteItem(item: string): void;
 }) {
@@ -128,11 +142,11 @@ function ItemList({
       <Spacer />
       <h2>My Items</h2>
       <ul style={{ padding: 0 }}>
-        {items.map((item, i) => (
+        {items.map(({ item, id }, i) => (
           <Row key={i} as="li">
             <button
               style={{ marginLeft: "auto", order: 2 }}
-              onClick={() => deleteItem(item)}
+              onClick={() => deleteItem(id)}
             >
               Delete
             </button>