@stanlemon/app-template 0.2.4 → 0.2.8

package/app.js

@@ -3,16 +3,30 @@ import {
   asyncJsonHandler as handler,
   SimpleUsersDao,
 } from "@stanlemon/server-with-auth";
+import { Low, JSONFile } from "lowdb";
 
-const users = new SimpleUsersDao();
+const adapter = new JSONFile("./db.json");
 
 const app = createAppServer({
   webpack: "http://localhost:8080",
   secure: ["/api/"],
-  ...users,
+  ...new SimpleUsersDao([], adapter),
 });
 
+const db = new Low(adapter);
+await db.read();
+db.data.items ||= [];
+
 app.get(
-  "/api/users",
-  handler(() => ({ users: users.users }))
+  "/api/items",
+  handler(() => db.data.items)
+);
+
+app.post(
+  "/api/items",
+  handler(async (item) => {
+    db.data.items.push(item);
+    await db.write();
+    return db.data.items;
+  })
 );

package/package.json

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

package/src/App.test.tsx

@@ -7,40 +7,67 @@ import {
 } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import App from "./App";
+import { SessionContext } from "./Session";
 
-global.fetch = jest.fn(() =>
-  Promise.resolve({
+const output = ["item one", "item two"];
+global.fetch = jest.fn((url, opts: { method: string; body: string }) => {
+  if (opts.method === "post") {
+    output.push(JSON.parse(opts.body) as string);
+  }
+  return Promise.resolve({
     ok: true,
-    json: () =>
-      Promise.resolve({
-        token: "token",
-        user: {
-          name: "Test Tester",
-          email: "test@test.com",
-          username: "test",
-          password: "password",
-        },
-      }),
-  })
-) as jest.Mock;
+    json: () => Promise.resolve(output),
+  });
+}) as jest.Mock;
 
 test("<App/>", async () => {
   act(() => {
-    render(<App />);
+    render(
+      <SessionContext.Provider
+        value={{
+          session: {
+            token: "abcd",
+            user: {
+              username: "user",
+              password: "password",
+              name: "user",
+              email: "user@example.com",
+            },
+          },
+          setSession: () => {},
+        }}
+      >
+        <App />
+      </SessionContext.Provider>
+    );
   });
 
-  // 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!");
-  });
+  // The auth text is present
+  expect(screen.getByText("You 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 two", { selector: "li" })
+  ).toBeInTheDocument();
 
   // Type some data into the input
-  await userEvent.type(screen.getByLabelText("Item"), "The first item");
+  await userEvent.type(screen.getByLabelText("Item"), "item three");
 
   // Click the add button
-  fireEvent.click(screen.getByText("Add", { selector: "button" }));
+  act(() => {
+    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");
+  expect(
+    await screen.findByText("item three", { selector: "li" })
+  ).toBeInTheDocument();
 });

package/src/App.tsx

@@ -1,15 +1,11 @@
-import { useState, useEffect, createContext } from "react";
+import { useState, useContext, useEffect } from "react";
 import "./App.less";
+import { SessionContext } from "./Session";
 import Header from "./Header";
 import Input from "./Input";
 import Login from "./Login";
 import Register from "./Register";
 
-export const SessionContext = createContext<{
-  session: Session | null;
-  setSession: React.Dispatch<React.SetStateAction<Session | null>>;
-} | null>(null);
-
 export type ErrorMessage = {
   message: string;
 };
@@ -18,68 +14,35 @@ export type FormErrors = {
   errors: Record<string, string>;
 };
 
-export type Session = {
-  token: string | null;
-  user: User | null;
-};
-
-export type User = {
-  name: string | null;
-  email: string | null;
-  username: string;
-  password: string;
-};
-
 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[]>([]);
 
-  const contextValue = { session, setSession };
+  const { session } = useContext(SessionContext);
 
+  const itemsJson = JSON.stringify(items);
   useEffect(() => {
-    fetch("/auth/session", {
-      headers: {
-        Authorization: `Bearer ${session?.token || ""}`,
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-    })
-      .then((response) => {
-        setInitialized(true);
-
-        if (!response.ok) {
-          throw new Error(response.statusText);
-        }
-        return response;
+    fetchApi("/api/items", session?.token || "")
+      .then((items: string[]) => {
+        setItems(items);
       })
-      .then((response) => response.json())
-      .then((session: Session) => {
-        setSession(session);
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-  }, [session?.token, initialized]);
+      .catch((err) => console.error(err));
+  }, [itemsJson, session?.token]);
 
   const addItem = () => {
-    setItems([...items, value]);
     setValue("");
-  };
 
-  if (!initialized) {
-    return (
-      <div>
-        <em>Loading...</em>
-      </div>
-    );
-  }
+    fetchApi("/api/items", session?.token || "", "post", value)
+      .then((items: string[]) => {
+        setItems(items);
+      })
+      .catch((err) => console.error(err));
+  };
 
   return (
-    <SessionContext.Provider value={contextValue}>
+    <>
       <Header />
-      {!session && (
+      {!session.user && (
         <Row>
           <Column>
             <h2>Login</h2>
@@ -91,10 +54,10 @@ export default function App() {
           </Column>
         </Row>
       )}
-      {session?.user && (
+      {session.user && (
         <>
           <p>
-            <em>You logged in as {session.user.username}.</em>
+            <em>You logged in as {session.user?.username}</em>
           </p>
           <Input
             label="Item"
@@ -111,7 +74,7 @@ export default function App() {
           </ul>
         </>
       )}
-    </SessionContext.Provider>
+    </>
   );
 }
 
@@ -144,3 +107,27 @@ function Column({ children }: { children: React.ReactNode }) {
     </div>
   );
 }
+
+function fetchApi(
+  url: string,
+  token: string,
+  method = "get",
+  data?: any
+): Promise<any> {
+  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;
+    })
+    .then((response) => response.json());
+}

package/src/Login.tsx

@@ -1,19 +1,18 @@
 import { useState, useContext } from "react";
-import { Session, User, SessionContext, ErrorMessage } from "./App";
+import { ErrorMessage } from "./App";
+import { SessionContext, SessionData, UserData } from "./Session";
 import Input from "./Input";
 
 export default function Login() {
   const [error, setError] = useState<string | null>(null);
-  const [values, setValues] = useState<User>({
+  const [values, setValues] = useState<UserData>({
     name: "",
     email: "",
     username: "",
     password: "",
   });
 
-  const { setSession } = useContext(SessionContext) || {
-    setSession: () => {},
-  };
+  const { setSession } = useContext(SessionContext);
 
   const onSubmit = () => {
     setError(null);
@@ -43,7 +42,7 @@ export default function Login() {
           data: Record<string, unknown>;
         }) => {
           if (ok) {
-            setSession(data as Session);
+            setSession(data as SessionData);
           } else {
             setError((data as ErrorMessage).message);
           }

package/src/Register.tsx

@@ -1,20 +1,19 @@
 import { useState, useContext } from "react";
-import { Session, User, SessionContext, FormErrors } from "./App";
+import { FormErrors } 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 [errors, setErrors] = useState<Record<string, string>>({});
-  const [values, setValues] = useState<User>({
+  const [values, setValues] = useState<UserData>({
     name: "",
     email: "",
     username: "",
     password: "",
   });
 
-  const { setSession } = useContext(SessionContext) || {
-    setSession: () => {},
-  };
+  const { setSession } = useContext(SessionContext);
 
   const onSubmit = () => {
     setErrors({});
@@ -44,7 +43,7 @@ export default function Register() {
           data: Record<string, unknown>;
         }) => {
           if (ok) {
-            setSession(data as Session);
+            setSession(data as SessionData);
           } else {
             setErrors((data as FormErrors).errors);
           }

package/src/Session.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect, createContext } from "react";
+
+export const SessionContext = createContext<{
+  session: SessionData;
+  setSession: React.Dispatch<React.SetStateAction<SessionData>>;
+}>({
+  session: {
+    token: null,
+    user: null,
+  },
+  setSession: () => {},
+});
+
+export type SessionData = {
+  token: string | null;
+  user: UserData | null;
+};
+
+export type UserData = {
+  name: string | null;
+  email: string | null;
+  username: string;
+  password: string;
+};
+
+export default function Session({ children }: { children: React.ReactChild }) {
+  const [initialized, setInitialized] = useState<boolean>(false);
+  const [session, setSession] = useState<SessionData>({
+    token: null,
+    user: null,
+  });
+
+  useEffect(() => {
+    fetch("/auth/session", {
+      headers: {
+        Authorization: `Bearer ${session.token || ""}`,
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) => {
+        setInitialized(true);
+
+        if (!response.ok) {
+          throw new Error(response.statusText);
+        }
+        return response;
+      })
+      .then((response) => response.json())
+      .then((session: SessionData) => {
+        setSession(session);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }, [session?.token, initialized]);
+
+  if (!initialized) {
+    return (
+      <div>
+        <em>Loading...</em>
+      </div>
+    );
+  }
+
+  const contextValue = { session, setSession };
+
+  return (
+    <SessionContext.Provider value={contextValue}>
+      {children}
+    </SessionContext.Provider>
+  );
+}

package/src/index.tsx

@@ -1,10 +1,15 @@
 import { createRoot } from "react-dom/client";
 import App from "./App";
+import Session from "./Session";
 
 const root = createRoot(
   document.body.appendChild(document.createElement("div"))
 );
-root.render(<App />);
+root.render(
+  <Session>
+    <App />
+  </Session>
+);
 
 const link = document.createElement("link");
 link.setAttribute("rel", "stylesheet");