@stanlemon/app-template 0.2.3 → 0.2.7

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.3",
+  "version": "0.2.7",
   "description": "A template for creating apps using the webdev package.",
   "author": "Stan Lemon <stanlemon@users.noreply.github.com>",
   "license": "MIT",
@@ -8,6 +8,7 @@
   "scripts": {
     "start": "node app.js",
     "build": "npm run webpack:build",
+    "tsc": "tsc",
     "webpack:serve": "webpack serve",
     "webpack:build": "NODE_ENV=production webpack",
     "test": "jest",
@@ -17,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.5",
+    "@types/react-dom": "^18.0.1"
   }
 }

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,102 +14,120 @@ 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;
-      })
-      .then((response) => response.json())
-      .then((session: Session) => {
-        setSession(session);
+    fetchApi("/api/items", session?.token || "")
+      .then((items: string[]) => {
+        setItems(items);
       })
-      .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 />
-      <div>
-        {!session && (
-          <>
-            <p>
-              <em>You are not currently logged in.</em>
-            </p>
+      {!session.user && (
+        <Row>
+          <Column>
+            <h2>Login</h2>
             <Login />
-            <Spacer />
+          </Column>
+          <Column>
+            <h2>Register</h2>
             <Register />
-            <Spacer />
-          </>
-        )}
-        {session?.user && (
+          </Column>
+        </Row>
+      )}
+      {session.user && (
+        <>
           <p>
-            <em>You logged in as {session.user.username}.</em>
+            <em>You logged in as {session.user?.username}</em>
           </p>
-        )}
-      </div>
-      <Input
-        label="Item"
-        name="item"
-        value={value}
-        onChange={(value) => setValue(value)}
-        onEnter={addItem}
-      />
-      <button onClick={addItem}>Add</button>
+          <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>
+        </>
+      )}
+    </>
+  );
+}
 
-      <ul>
-        {items.map((item, i) => (
-          <li key={i}>{item}</li>
-        ))}
-      </ul>
-    </SessionContext.Provider>
+function Row({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%",
+      }}
+    >
+      {children}
+    </div>
   );
 }
 
-function Spacer() {
-  return <div style={{ minHeight: "2em" }} />;
+function Column({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        flexBasis: "100%",
+        flex: 1,
+      }}
+    >
+      {children}
+    </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/Input.tsx

@@ -1,3 +1,16 @@
+export interface Props
+  // Inherit everything from input except onChange which we simplify here
+  extends Omit<React.ComponentPropsWithRef<"input">, "onChange"> {
+  type?: string;
+  name: string;
+  value?: string;
+  label?: string;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  onEnter?: () => void;
+  error?: string;
+}
+
 export default function Input({
   type = "text",
   name,
@@ -11,16 +24,8 @@ export default function Input({
     /* noop */
   },
   error,
-}: {
-  type?: string;
-  name: string;
-  value?: string;
-  label?: string;
-  placeholder?: string;
-  onChange?: (value: string) => void;
-  onEnter?: () => void;
-  error?: string;
-}) {
+  ...attrs
+}: Props) {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     onChange(e.currentTarget.value);
   };
@@ -41,6 +46,7 @@ export default function Input({
         onKeyPress={handleKeyPress}
         placeholder={placeholder}
         value={value}
+        {...attrs}
       />
       {error && <div>{error}</div>}
     </>

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);
           }
@@ -66,6 +65,7 @@ export default function Login() {
         label="Username"
         value={values.username}
         onChange={(value) => setValues({ ...values, username: value })}
+        autoCapitalize="off"
       />
       <Input
         name="password"

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);
           }
@@ -63,6 +62,7 @@ export default function Register() {
         value={values.username}
         onChange={(value) => setValues({ ...values, username: value })}
         error={errors.username}
+        autoCapitalize="off"
       />
       <Input
         name="password"

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");