@stanlemon/app-template 0.3.20 → 0.3.21

package/app.js

@@ -1,20 +1,37 @@
+import EventEmitter from "node:events";
 import {
   createAppServer,
+  createSchemas,
   asyncJsonHandler as handler,
-  createDb,
+  createLowDb,
+  EVENTS,
   LowDBUserDao,
 } from "@stanlemon/server-with-auth";
+import Joi from "joi";
 import { v4 as uuid } from "uuid";
 
-export const db = createDb();
+export const db = createLowDb();
 const dao = new LowDBUserDao(db);
 
 db.data.items = db.data.items || [];
 
+const eventEmitter = new EventEmitter();
+eventEmitter.on(EVENTS.USER_CREATED, (user) => {
+  // eslint-disable-next-line no-console
+  console.log("New user signed up!", user);
+  // Now send an email so they can verify!
+});
+
 export const app = createAppServer({
   webpack: "http://localhost:8080",
   secure: ["/api/"],
   dao,
+  eventEmitter,
+  schemas: createSchemas({
+    name: Joi.string().required().label("Name"),
+    email: Joi.string().email().required().label("Email"),
+  }),
+  jwtExpireInMinutes: 3, // Customize the jwt session window, default is 10
 });
 
 app.get(
@@ -39,3 +56,6 @@ app.delete(
     return db.data.items;
   })
 );
+
+app.spa();
+app.catch404s("/api/*");

package/package.json

@@ -1,35 +1,39 @@
 {
   "name": "@stanlemon/app-template",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "description": "A template for creating apps using the webdev package.",
   "author": "Stan Lemon <stanlemon@users.noreply.github.com>",
   "license": "MIT",
   "type": "module",
   "scripts": {
     "start": "node app.js",
+    "start:prod": "NODE_ENV=production node app.js",
+    "start:dev": "NODE_ENV=development nodemon --ignore ./db.json app.js",
     "build": "npm run webpack:build",
     "tsc": "tsc",
     "webpack:serve": "webpack serve",
     "webpack:build": "NODE_ENV=production webpack",
-    "dev": "concurrently \"npm run webpack:serve\" \"npm run start\"",
-    "test": "jest",
+    "dev": "NODE_ENV=development concurrently \"npm run webpack:serve\" \"npm run start:dev\"",
+    "test": "jest --detectOpenHandles",
     "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/"
+    "lint:fix": "eslint --fix --ext js,jsx,ts,tsx ./src/"
   },
   "dependencies": {
     "@stanlemon/server-with-auth": "*",
     "@stanlemon/webdev": "*",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-cookie": "^6.1.3",
+    "react-dom": "^18.2.0",
+    "wouter": "^2.12.1"
   },
   "devDependencies": {
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.2.46",
+    "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "concurrently": "^8.2.2",
     "supertest": "^6.3.3"
   }
-}
+}

package/src/App.test.tsx

@@ -1,62 +1,69 @@
-import { render, screen, fireEvent, act } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import App, { ItemData } from "./App";
-import { SessionContext } from "./Session";
-
-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 ItemData);
-  }
-  return Promise.resolve({
-    ok: true,
-    json: () => Promise.resolve(output),
+import "@testing-library/jest-dom";
+import { render, screen, waitFor } from "@testing-library/react";
+import App from "./App";
+import { ItemData } from "./views";
+import { SessionAware } from "./Session";
+import fetchApi from "./helpers/fetchApi";
+
+jest.mock("./helpers/fetchApi");
+
+describe("<App/>", () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
   });
-}) as jest.Mock;
-
-test("<App/>", async () => {
-  render(
-    <SessionContext.Provider
-      value={{
-        session: {
-          token: "abcd",
-          user: {
-            username: "user",
-            password: "password",
-            name: "user",
-            email: "user@example.com",
-          },
-        },
-        setSession: () => {},
-      }}
-    >
-      <App />
-    </SessionContext.Provider>
-  );
-
-  // The auth text is present
-  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")).toBeInTheDocument();
-
-  expect(await screen.findByText("item two")).toBeInTheDocument();
-
-  // Type some data into the input
-  await userEvent.type(screen.getByLabelText("Item"), "item three");
-
-  // Click the add button
-  act(() => {
-    fireEvent.click(screen.getByText("Add", { selector: "button" }));
+
+  it("logged out", async () => {
+    render(
+      <SessionAware initialized={true} token={null} user={null}>
+        <App />
+      </SessionAware>
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "Hello World!" })
+    ).toBeInTheDocument();
+
+    expect(screen.getByRole("heading", { name: "Login" })).toBeInTheDocument();
+
+    expect(
+      screen.getByRole("heading", { name: "Sign Up" })
+    ).toBeInTheDocument();
   });
 
-  // Now we should have a list item with the text we entered
-  expect(await screen.findByText("item three")).toBeInTheDocument();
+  it("logged in", async () => {
+    const mockedFetchApi = fetchApi as jest.MockedFunction<
+      typeof fetchApi<ItemData[], null>
+    >;
+    mockedFetchApi.mockResolvedValue([]);
+
+    render(
+      <SessionAware
+        initialized={true}
+        token="abcd"
+        user={{
+          username: "user",
+          name: "user",
+          email: "user@example.com",
+        }}
+      >
+        <App />
+      </SessionAware>
+    );
+
+    // The header is present
+    expect(
+      screen.getByRole("heading", { name: "Hello World!" })
+    ).toBeInTheDocument();
+
+    // The auth text is present
+    expect(
+      screen.queryByText("You are logged in as", { exact: false })
+    ).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("heading", { name: "New Item" })
+      ).toBeInTheDocument();
+    });
+  });
 });

package/src/App.tsx

@@ -1,238 +1,87 @@
-import React, { useState, useContext, useEffect } from "react";
-
+import { useContext, useEffect } from "react";
+import { useCookies } from "react-cookie";
+import { Switch, Route, Link } from "wouter";
 import "./App.less";
 import { SessionContext } from "./Session";
-import Header from "./Header";
-import Input from "./Input";
-import Login from "./Login";
-import Register from "./Register";
-
-export type ErrorResponse = {
-  message: string;
-};
-
-export type FormErrors = {
-  errors: Record<string, string>;
-};
+import {
+  Column,
+  ErrorMessage,
+  SuccessMessage,
+  Header,
+  Row,
+  Spacer,
+} from "./components/";
+import { Login, SignUp, Verify, Items, Account } from "./views/";
 
-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<ItemData[]>([]);
-  const [error, setError] = useState<string | boolean>(false);
-
-  const { session, setSession } = useContext(SessionContext);
+  const { error, message, user, setUser, setToken, setMessage } =
+    useContext(SessionContext);
+  const [, , removeCookie] = useCookies(["session_token"]);
 
-  const catchError = (err: Error) => {
-    if (err.message === "Unauthorized") {
-      return;
-    }
-    setError(err.message);
+  const logout = () => {
+    removeCookie("session_token", { path: "/" });
+    setToken(null);
+    setUser(null);
   };
 
   useEffect(() => {
-    if (loaded) {
-      return;
-    }
+    // After 10 seconds, clear out any messages
+    const timer = setTimeout(() => {
+      setMessage(null);
+    }, 1000 * 10);
 
-    fetchApi<ItemData[], null>("/api/items", session?.token || "")
-      .then((items) => {
-        setLoaded(true);
-        setItems(items);
-      })
-      .catch(catchError);
+    return () => clearTimeout(timer);
   });
 
-  const saveItem = (item: string) => {
-    fetchApi<ItemData[], { item: string }>(
-      "/api/items",
-      session?.token || "",
-      "post",
-      {
-        item,
-      }
-    )
-      .then((items) => {
-        setItems(items);
-      })
-      .catch(catchError);
-  };
-
-  const deleteItem = (id: string) => {
-    fetchApi<ItemData[], string>(
-      `/api/items/${id}`,
-      session?.token || "",
-      "delete"
-    )
-      .then((items) => {
-        setItems(items);
-      })
-      .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 />
-          </Column>
-        </Row>
+      <SuccessMessage message={message} />
+      {!user && (
+        <Switch>
+          <Route path="/">
+            <Row>
+              <Column>
+                <h2>Login</h2>
+                <Login />
+              </Column>
+              <Column />
+              <Column>
+                <h2>Sign Up</h2>
+                <SignUp />
+              </Column>
+            </Row>
+          </Route>
+          <Route path="/verify/:token">
+            {({ token: verificationToken }: { token: string }) => (
+              <Verify token={verificationToken} />
+            )}
+          </Route>
+        </Switch>
       )}
-      {session.user && (
+      {user && (
         <>
           <p>
-            <em>You are logged in as {session.user?.username}.</em>{" "}
+            <em>
+              You are logged in as <Link href="/account">{user?.username}</Link>
+              .
+            </em>{" "}
             <span style={{ cursor: "pointer" }} onClick={logout}>
               (logout)
             </span>
           </p>
-          <ItemList items={items} saveItem={saveItem} deleteItem={deleteItem} />
+          <Switch>
+            <Route path="/">
+              <Items />
+            </Route>
+            <Route path="/account">
+              <Account />
+            </Route>
+          </Switch>
+          <Spacer />
         </>
       )}
-      <Spacer />
     </>
   );
 }
-
-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 (
-    <>
-      <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
-  );
-}
-
-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 1 0",
-      },
-    },
-    children
-  );
-}
-
-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?: P
-): Promise<T> {
-  return fetch(url, {
-    method: method,
-    headers: {
-      Authorization: `Bearer ${token}`,
-      Accept: "application/json",
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(data),
-  }).then((response) => {
-    if (!response.ok) {
-      throw new Error(response.statusText);
-    }
-    return response.json() as Promise<T>;
-  });
-}