@stanlemon/app-template 0.3.19 → 0.3.21

package/src/Session.tsx

@@ -1,66 +1,103 @@
-import React, { useState, useEffect, createContext } from "react";
-import { ErrorMessage } from "./App";
-
-export const SessionContext = createContext<{
-  session: SessionData;
-  setSession: React.Dispatch<React.SetStateAction<SessionData>>;
-}>({
-  session: {
-    token: null,
-    user: null,
-  },
-  setSession: () => {},
-});
+import React, { useState, useEffect, useContext, createContext } from "react";
+import { useCookies } from "react-cookie";
+import { ErrorMessage } from "./components/";
+import fetchApi from "./helpers/fetchApi";
+
+type SessionContextProperties = {
+  initialized: boolean;
+  token: string | null;
+  user: ProfileData | null;
+  error: string | null;
+  message: string | null;
+};
+
+export type SessionContextData = SessionContextProperties & {
+  setInitialized: React.Dispatch<React.SetStateAction<boolean>>;
+  setToken: React.Dispatch<React.SetStateAction<string | null>>;
+  setUser: (user: ProfileData | null) => void;
+  setError: React.Dispatch<React.SetStateAction<string | null>>;
+  setMessage: React.Dispatch<React.SetStateAction<string | null>>;
+};
+
+const DEFAULT_SESSION_CONTEXT_DATA: SessionContextData = {
+  initialized: false,
+  setInitialized: () => {},
+  token: null,
+  setToken: () => {},
+  user: null,
+  setUser: () => {},
+  error: null,
+  setError: () => {},
+  message: null,
+  setMessage: () => {},
+};
+
+export const SessionContext = createContext<SessionContextData>(
+  DEFAULT_SESSION_CONTEXT_DATA
+);
 
 export type SessionData = {
   token: string | null;
-  user: UserData | null;
+  user: ProfileData | null;
 };
 
-export type UserData = {
-  name: string | null;
-  email: string | null;
+export type ProfileData = {
   username: string;
-  password: string;
+  name: string;
+  email: string;
 };
 
 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,
-  });
+  return (
+    <SessionAware>
+      <SessionLoader>{children}</SessionLoader>
+    </SessionAware>
+  );
+}
 
-  useEffect(() => {
-    fetch("/auth/session", {
-      headers: {
-        Authorization: `Bearer ${session.token || ""}`,
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-    })
-      .then((response) => {
-        setInitialized(true);
+export function SessionLoader({ children }: { children: React.ReactNode }) {
+  const {
+    initialized,
+    setInitialized,
+    token,
+    setToken,
+    setUser,
+    error,
+    setError,
+  } = useContext(SessionContext);
+  const [cookies, setCookie] = useCookies(["session_token"]);
 
-        if (!response.ok) {
-          throw new ErrorMessage(response.statusText);
-        }
-        return response;
-      })
-      .then((response) => response.json())
+  const checkSession = () => {
+    fetchApi<SessionData, null>("/auth/session", token || cookies.session_token)
       .then((session: SessionData) => {
-        setSession(session);
+        if (session) {
+          setCookie("session_token", session.token, { path: "/" });
+          setToken(session.token);
+          setUser(session.user);
+        }
       })
-      .catch((err: Error) => {
-        if (err.message === "Unauthorized") {
-          return;
+      .catch((err) => {
+        if (err.message !== "Unauthorized") {
+          setError(err.message);
         }
-        setError(err.message);
+      })
+      .finally(() => {
+        setInitialized(true);
       });
-  }, [session?.token, initialized]);
+  };
 
-  if (error) {
+  useEffect(() => {
+    if (!initialized) {
+      checkSession();
+    }
+
+    // Refresh the session every 30 seconds
+    const intervalId = setInterval(checkSession, 1000 * 30);
+
+    return () => clearInterval(intervalId);
+  }, [token]);
+
+  if (!initialized && error) {
     return <ErrorMessage error={error} />;
   }
 
@@ -72,10 +109,48 @@ export default function Session({ children }: { children: React.ReactNode }) {
     );
   }
 
-  const contextValue = { session, setSession };
+  return children;
+}
+
+export function SessionAware({
+  initialized: defaultInitialized = false,
+  token: defaultToken = null,
+  user: defaultUser = null,
+  error: defaultError = null,
+  message: defaultMessage = null,
+  children,
+}: Partial<SessionContextProperties> & { children: React.ReactNode }) {
+  const [initialized, setInitialized] = useState<boolean>(defaultInitialized);
+  const [token, setToken] = useState<string | null>(defaultToken);
+  const [user, setUser] = useState<ProfileData | null>(defaultUser);
+  const [error, setError] = useState<string | null>(defaultError);
+  const [message, setMessage] = useState<string | null>(defaultMessage);
 
   return (
-    <SessionContext.Provider value={contextValue}>
+    <SessionContext.Provider
+      value={{
+        initialized,
+        setInitialized,
+        token,
+        setToken,
+        user,
+        // Allow for partial setting of user data
+        setUser: (user: ProfileData | null) => {
+          if (!user) {
+            setUser(null);
+            return;
+          }
+          setUser((oldUser: React.SetStateAction<ProfileData | null>) => ({
+            ...oldUser,
+            ...user,
+          }));
+        },
+        error,
+        setError,
+        message,
+        setMessage,
+      }}
+    >
       {children}
     </SessionContext.Provider>
   );

package/src/components/Column.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export function Column({
+  as = "div",
+  children,
+}: {
+  as?: keyof React.JSX.IntrinsicElements;
+  children?: React.ReactNode;
+}) {
+  return React.createElement(
+    as,
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        flexBasis: "100%",
+        flex: "1 1 0",
+      },
+    },
+    children
+  );
+}
+
+export default Column;

package/src/components/ErrorMessage.tsx

@@ -0,0 +1,16 @@
+export function ErrorMessage({
+  error,
+}: {
+  error: string | boolean | undefined | null;
+}) {
+  if (error) {
+    return (
+      <p style={{ color: "red" }}>
+        <strong>An error has occurred:</strong> {error}
+      </p>
+    );
+  }
+  return <></>;
+}
+
+export default ErrorMessage;

package/src/components/Header.jsx

@@ -0,0 +1,14 @@
+// While typescript is preferred, you can also use good ol javascript too!
+/**
+ *
+ * @param {Object} props
+ * @param {number} [props.level]
+ * @param {React.ReactNode} [props.children]
+ * @returns {JSX.Element}
+ */
+export function Header({ level = 1, children = "Hello World!" }) {
+  const Tag = `h${level}`;
+  return <Tag>{children}</Tag>;
+}
+
+export default Header;

package/src/{Input.tsx → components/Input.tsx}

@@ -1,3 +1,4 @@
+import React from "react";
 export interface Props
   // Inherit everything from input except onChange which we simplify here
   extends Omit<React.ComponentPropsWithRef<"input">, "onChange"> {
@@ -8,10 +9,10 @@ export interface Props
   placeholder?: string;
   onChange?: (value: string) => void;
   onEnter?: () => void;
-  error?: string;
+  error?: string | null | undefined;
 }
 
-export default function Input({
+export function Input({
   type = "text",
   name,
   value = "",
@@ -29,7 +30,7 @@ export default function Input({
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     onChange(e.currentTarget.value);
   };
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
     if (e.key === "Enter") {
       e.preventDefault();
       onEnter();
@@ -37,18 +38,20 @@ export default function Input({
   };
 
   return (
-    <>
+    <div style={{ marginBottom: ".75em" }}>
       {label && <label htmlFor={name}>{label}</label>}
       <input
         type={type}
         id={name}
         onChange={handleChange}
-        onKeyPress={handleKeyPress}
+        onKeyDown={handleKeyDown}
         placeholder={placeholder}
         value={value}
         {...attrs}
       />
-      {error && <div>{error}</div>}
-    </>
+      {error && <div style={{ color: "red" }}>{error}</div>}
+    </div>
   );
 }
+
+export default Input;

package/src/components/Row.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export function Row({
+  as = "div",
+  children,
+}: {
+  as?: keyof React.JSX.IntrinsicElements;
+  children?: React.ReactNode;
+}) {
+  return React.createElement(
+    as,
+    {
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%",
+      },
+    },
+    children
+  );
+}
+
+export default Row;

package/src/components/Spacer.tsx

@@ -0,0 +1,5 @@
+export function Spacer({ height = "2em" }: { height?: string | number }) {
+  return <div style={{ height, minHeight: height }} />;
+}
+
+export default Spacer;

package/src/components/SuccessMessage.tsx

@@ -0,0 +1,12 @@
+export function SuccessMessage({
+  message,
+}: {
+  message: string | boolean | undefined | null;
+}) {
+  if (message) {
+    return <p style={{ color: "green" }}>{message}</p>;
+  }
+  return <></>;
+}
+
+export default SuccessMessage;

package/src/components/index.tsx

@@ -0,0 +1,7 @@
+export * from "./Column";
+export * from "./ErrorMessage";
+export * from "./Header";
+export * from "./Input";
+export * from "./Row";
+export * from "./Spacer";
+export * from "./SuccessMessage";

package/src/helpers/fetchApi.tsx

@@ -0,0 +1,73 @@
+export function fetchApi<T, P>(
+  url: string,
+  token: string | null | undefined = null,
+  method = "get",
+  data?: P
+): Promise<T> {
+  return (
+    fetch(url, {
+      method: method,
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        // Only send the authorization header if we have a bearer token
+        ...(token ? { Authorization: `Bearer ${token ?? ""}` } : {}),
+      },
+      body: JSON.stringify(data),
+    })
+      // This allows us to have both the status code and the body
+      .then((response) =>
+        response.text().then((body) => ({
+          ok: response.ok,
+          status: response.status,
+          statusText: response.statusText,
+          body,
+        }))
+      )
+      .then(({ ok, status, statusText, body }) => {
+        if (!ok) {
+          throw new ApiError(status, statusText, quietJSONParse(body));
+        }
+
+        return JSON.parse(body) as T;
+      })
+  );
+}
+/**
+ * Parse JSON and eat any parse errors.
+ * @param body text
+ * @returns json or null
+ */
+function quietJSONParse<T>(body: string): T | null {
+  try {
+    return JSON.parse(body);
+  } catch (err) {
+    return null;
+  }
+}
+
+export default fetchApi;
+
+export class ApiError extends Error {
+  #code: number;
+
+  get code(): number {
+    return this.#code;
+  }
+
+  #body: Record<string, unknown>;
+
+  get body(): Record<string, unknown> {
+    return this.#body;
+  }
+
+  constructor(
+    code: number,
+    message: string,
+    body: Record<string, unknown> | null
+  ) {
+    super(message);
+    this.#code = code;
+    this.#body = body ?? {};
+  }
+}

package/src/index.tsx

@@ -2,6 +2,8 @@ import { createRoot } from "react-dom/client";
 import App from "./App";
 import Session from "./Session";
 
+document.title = "App";
+
 const root = createRoot(
   document.body.appendChild(document.createElement("div"))
 );

package/src/views/Account.test.tsx

@@ -0,0 +1,87 @@
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Account, PasswordRequest, ProfileForm } from "./";
+import { SessionAware } from "../Session";
+import fetchApi from "../helpers/fetchApi";
+
+jest.mock("../helpers/fetchApi");
+
+describe("<Account/>", () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it("profile updated", async () => {
+    const mockedFetchApi = fetchApi as jest.MockedFunction<
+      typeof fetchApi<ProfileForm, ProfileForm>
+    >;
+    mockedFetchApi.mockResolvedValue({
+      name: "Jean Luc Picard",
+      email: "jeanluc@starfleet.com",
+    });
+
+    render(
+      <SessionAware>
+        <Account />
+      </SessionAware>
+    );
+
+    expect(screen.getByText('Account for ""')).toBeInTheDocument();
+    expect(screen.getByText("Profile")).toBeInTheDocument();
+    expect(screen.getByText("Password")).toBeInTheDocument();
+
+    await userEvent.type(screen.getByLabelText("Name"), "Jean Luc Picard");
+
+    fireEvent.click(screen.getByText("Save", { selector: "button" }));
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Account for "Jean Luc Picard"')
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("password changed", async () => {
+    const mockedFetchApi = fetchApi as jest.MockedFunction<
+      typeof fetchApi<null, PasswordRequest>
+    >;
+    mockedFetchApi.mockResolvedValue(null);
+
+    render(
+      <SessionAware>
+        <Account />
+      </SessionAware>
+    );
+
+    expect(screen.getByText('Account for ""')).toBeInTheDocument();
+    expect(screen.getByText("Profile")).toBeInTheDocument();
+    expect(screen.getByText("Password")).toBeInTheDocument();
+
+    const current_password = "P@ssw0rd1";
+    const password = "P@ssw0rd2";
+
+    await userEvent.type(
+      screen.getByLabelText("Current Password"),
+      current_password
+    );
+
+    await userEvent.type(screen.getByLabelText("New Password"), password);
+
+    await userEvent.type(
+      screen.getByLabelText("Repeat New Password"),
+      password
+    );
+
+    fireEvent.click(screen.getByText("Update", { selector: "button" }));
+
+    await waitFor(() => {
+      expect(mockedFetchApi.mock.calls).toHaveLength(1);
+    });
+
+    expect(mockedFetchApi.mock.calls[0][3]).toEqual({
+      current_password,
+      password,
+    });
+  });
+});

package/src/views/Account.tsx

@@ -0,0 +1,22 @@
+import { useContext } from "react";
+import { SessionContext } from "../Session";
+import { Header, Spacer } from "../components";
+import { Profile, Password } from "./";
+import { Link } from "wouter";
+
+export function Account() {
+  const { user } = useContext(SessionContext);
+
+  return (
+    <>
+      <Header>Account for "{user?.name ?? user?.username ?? ""}"</Header>
+      <Profile />
+      <Spacer />
+      <Password />
+      <Spacer />
+      <Link href="/">Return Home</Link>
+    </>
+  );
+}
+
+export default Account;

package/src/views/Items.test.tsx

@@ -0,0 +1,53 @@
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Items, { ItemData } from "./Items";
+import { SessionAware } from "../Session";
+import fetchApi from "../helpers/fetchApi";
+
+jest.mock("../helpers/fetchApi");
+
+describe("<Items/>", () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it("renders", async () => {
+    const output = [
+      { id: "1", item: "item one" },
+      { id: "2", item: "item two" },
+    ];
+
+    const mockedFetchApi = fetchApi as jest.MockedFunction<
+      typeof fetchApi<ItemData[], null>
+    >;
+    mockedFetchApi.mockResolvedValue(output);
+
+    render(
+      <SessionAware>
+        <Items />
+      </SessionAware>
+    );
+
+    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");
+
+    // This is the response that will be provided on the add call
+    mockedFetchApi.mockResolvedValue([
+      ...output,
+      { id: "3", item: "item three" },
+    ]);
+
+    // Click the add button
+    fireEvent.click(screen.getByText("Add", { selector: "button" }));
+
+    expect(mockedFetchApi.mock.calls[1][3]).toEqual({ item: "item three" });
+
+    // Now we should have a list item with the text we entered
+    expect(await screen.findByText("item three")).toBeInTheDocument();
+  });
+});