@stanlemon/app-template 0.3.20 → 0.3.21

package/src/views/Items.tsx

@@ -0,0 +1,84 @@
+import { useState, useEffect, useContext } from "react";
+import { SessionContext } from "../Session";
+import { Input, Row, Spacer } from "../components/";
+import { fetchApi } from "../helpers/fetchApi";
+
+export type ItemData = {
+  id: string;
+  item: string;
+};
+
+export function Items() {
+  const { token, setError } = useContext(SessionContext);
+  const [items, setItems] = useState<ItemData[]>([]);
+  const [value, setValue] = useState<string>("");
+
+  const catchError = (err: Error) => {
+    setError(err.message);
+  };
+
+  const saveItem = (item: string) => {
+    fetchApi<ItemData[], { item: string }>("/api/items", token, "post", {
+      item,
+    })
+      .then((items) => {
+        setItems(items);
+      })
+      .catch(catchError);
+  };
+
+  const deleteItem = (id: string) => {
+    fetchApi<ItemData[], string>(`/api/items/${id}`, token, "delete")
+      .then((items) => {
+        setItems(items);
+      })
+      .catch(catchError);
+  };
+
+  const addItem = () => {
+    if (value.trim() === "") {
+      return;
+    }
+    saveItem(value);
+    setValue("");
+  };
+
+  useEffect(() => {
+    fetchApi<ItemData[], null>("/api/items", token)
+      .then((items) => {
+        setItems(items ?? []);
+      })
+      .catch(catchError);
+  }, []);
+
+  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 default Items;

package/src/views/Login.tsx

@@ -0,0 +1,57 @@
+import { useState, useContext } from "react";
+import { Input, Spacer } from "../components/";
+import { ProfileData, SessionContext, SessionData } from "../Session";
+import fetchApi, { ApiError } from "../helpers/fetchApi";
+
+export type LoginForm = {
+  username: string;
+  password: string;
+};
+
+export function Login() {
+  const [values, setValues] = useState<LoginForm>({
+    username: "",
+    password: "",
+  });
+
+  const { setToken, setUser, setError } = useContext(SessionContext);
+
+  const onSubmit = () => {
+    setError(null);
+    fetchApi<SessionData, LoginForm>("/auth/login", null, "post", values)
+      .then((session: SessionData) => {
+        setToken(session.token as string);
+        setUser(session.user as ProfileData);
+        setError(null);
+      })
+      .catch((err: ApiError) => {
+        if (err.message === "Unauthorized") {
+          setError(err.body.message as string);
+        }
+      });
+  };
+
+  return (
+    <>
+      <Input
+        name="username"
+        label="Username"
+        value={values.username}
+        onChange={(value) => setValues({ ...values, username: value })}
+        autoCapitalize="off"
+      />
+      <Input
+        name="password"
+        type="password"
+        label="Password"
+        value={values.password}
+        onChange={(value) => setValues({ ...values, password: value })}
+        onEnter={onSubmit}
+      />
+      <Spacer />
+      <button onClick={onSubmit}>Login</button>
+    </>
+  );
+}
+
+export default Login;

package/src/views/Password.tsx

@@ -0,0 +1,89 @@
+import { useContext, useState } from "react";
+import { SessionContext } from "../Session";
+import { Header, Input } from "../components";
+import fetchApi, { ApiError } from "../helpers/fetchApi";
+
+export type PasswordForm = {
+  current_password: string;
+  new_password1: string;
+  new_password2: string;
+};
+
+export type PasswordRequest = {
+  current_password: string;
+  password: string;
+};
+
+export const DEFAULT_PASSWORD_DATA: PasswordForm = {
+  current_password: "",
+  new_password1: "",
+  new_password2: "",
+};
+
+export function Password() {
+  const { token, setMessage, setError } = useContext(SessionContext);
+  const [password, setPassword] = useState<PasswordForm>(DEFAULT_PASSWORD_DATA);
+  const [errors, setErrors] = useState<Partial<PasswordForm>>({});
+
+  const storePassword = (key: keyof PasswordForm, value: string) => {
+    setPassword({ ...password, [key]: value });
+  };
+  const savePassword = () => {
+    setErrors({});
+
+    if (password.new_password1 !== password.new_password2) {
+      setErrors({ new_password2: "Passwords do not match" });
+      return;
+    }
+
+    fetchApi<null, PasswordRequest>("/auth/password", token, "post", {
+      current_password: password.current_password,
+      password: password.new_password1,
+    })
+      .then(() => {
+        setPassword(DEFAULT_PASSWORD_DATA);
+        setErrors({});
+        setMessage("Password updated.");
+        setError(null);
+      })
+      .catch((err: ApiError) => {
+        if (err.code === 400) {
+          setErrors({ ...(err.body.errors as PasswordForm) });
+        }
+      });
+  };
+
+  return (
+    <>
+      <Header level={2}>Password</Header>
+      <Input
+        name="current_password"
+        type="password"
+        label="Current Password"
+        value={password.current_password}
+        error={errors.current_password}
+        onChange={(value) => storePassword("current_password", value)}
+      />
+      <Input
+        name="new_password1"
+        type="password"
+        label="New Password"
+        value={password.new_password1}
+        error={errors.new_password1}
+        onChange={(value) => storePassword("new_password1", value)}
+      />
+      <Input
+        name="new_password2"
+        type="password"
+        label="Repeat New Password"
+        value={password.new_password2}
+        error={errors.new_password2}
+        onChange={(value) => storePassword("new_password2", value)}
+      />
+
+      <button onClick={savePassword}>Update</button>
+    </>
+  );
+}
+
+export default Password;

package/src/views/Profile.tsx

@@ -0,0 +1,66 @@
+import { useContext, useState } from "react";
+import { ProfileData, SessionContext } from "../Session";
+import { Header, Input } from "../components";
+import fetchApi, { ApiError } from "../helpers/fetchApi";
+
+export type ProfileForm = {
+  name: string;
+  email: string;
+};
+export const DEFAULT_PROFILE_DATA: ProfileForm = {
+  name: "",
+  email: "",
+};
+
+export function Profile() {
+  const { token, user, setUser, setMessage } = useContext(SessionContext);
+  const [errors, setErrors] = useState<Partial<ProfileForm>>({});
+  const [profile, setProfile] = useState<ProfileForm>({
+    ...DEFAULT_PROFILE_DATA,
+    name: user?.name ?? "",
+    email: user?.email ?? "",
+  });
+
+  const storeProfile = (key: keyof ProfileForm, value: string) => {
+    setProfile({ ...profile, [key]: value });
+  };
+
+  const saveProfile = () => {
+    setErrors({});
+    fetchApi<ProfileData, ProfileForm>("/auth/user", token, "put", profile)
+      .then((newProfile) => {
+        setProfile(newProfile);
+        setUser(newProfile);
+        setErrors({});
+        setMessage("Profile saved.");
+      })
+      .catch((err: ApiError) => {
+        if (err.code === 400) {
+          setErrors({ ...(err.body.errors as ProfileForm) });
+        }
+      });
+  };
+
+  return (
+    <>
+      <Header level={2}>Profile</Header>
+      <Input
+        name="name"
+        label="Name"
+        value={profile.name}
+        error={errors.name}
+        onChange={(value) => storeProfile("name", value)}
+      />
+      <Input
+        name="email"
+        label="Email"
+        value={profile.email}
+        error={errors.email}
+        onChange={(value) => storeProfile("email", value)}
+      />
+      <button onClick={saveProfile}>Save</button>
+    </>
+  );
+}
+
+export default Profile;

package/src/views/SignUp.tsx

@@ -0,0 +1,82 @@
+import { useState, useContext } from "react";
+import { Input, Spacer } from "../components/";
+import { SessionContext, ProfileData, SessionData } from "../Session";
+import fetchApi, { ApiError } from "../helpers/fetchApi";
+
+export type FormErrors = {
+  errors: Record<string, string>;
+};
+
+export type SignUpForm = {
+  name: string;
+  email: string;
+  username: string;
+  password: string;
+};
+
+export function SignUp() {
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [values, setValues] = useState<SignUpForm>({
+    name: "",
+    email: "",
+    username: "",
+    password: "",
+  });
+
+  const { setToken, setUser, setError } = useContext(SessionContext);
+
+  const onSubmit = () => {
+    setErrors({});
+    fetchApi<SessionData, SignUpForm>("/auth/signup", null, "post", values)
+      .then((session: SessionData) => {
+        setToken(session.token as string);
+        setUser(session.user as ProfileData);
+      })
+      .catch((err: ApiError) => {
+        if (err.message !== "Unauthorized") {
+          setError(err.body.message as string);
+        }
+      });
+  };
+
+  return (
+    <>
+      <Input
+        name="username"
+        label="Username"
+        value={values.username}
+        onChange={(value) => setValues({ ...values, username: value })}
+        error={errors?.username}
+        autoCapitalize="off"
+      />
+      <Input
+        name="name"
+        label="Name"
+        value={values.name}
+        onChange={(value) => setValues({ ...values, name: value })}
+        error={errors?.name}
+        autoCapitalize="off"
+      />
+      <Input
+        name="email"
+        label="Email"
+        value={values.email}
+        onChange={(value) => setValues({ ...values, email: value })}
+        error={errors?.email}
+        autoCapitalize="off"
+      />
+      <Input
+        name="password"
+        type="password"
+        label="Password"
+        value={values.password}
+        onChange={(value) => setValues({ ...values, password: value })}
+        error={errors?.password}
+      />
+      <Spacer />
+      <button onClick={onSubmit}>Sign Up</button>
+    </>
+  );
+}
+
+export default SignUp;

package/src/views/Verify.tsx

@@ -0,0 +1,24 @@
+import { useContext, useEffect } from "react";
+import fetchApi, { ApiError } from "../helpers/fetchApi";
+import { SessionContext } from "../Session";
+
+export function Verify({ token = null }: { token: string | null }) {
+  const { setError, setMessage } = useContext(SessionContext);
+
+  useEffect(() => {
+    fetchApi(`/auth/verify/${token}`)
+      .then((res) => {
+        setMessage("Successfully verified your account!");
+      })
+      .catch((err: ApiError) => {
+        if (err.message === "Bad Request") {
+          setError(err.body.message as string);
+          console.error(err, err.message, err.body);
+        }
+      });
+  }, []);
+
+  return <></>;
+}
+
+export default Verify;

package/src/views/index.tsx

@@ -0,0 +1,7 @@
+export * from "./Login";
+export * from "./SignUp";
+export * from "./Items";
+export * from "./Account";
+export * from "./Password";
+export * from "./Profile";
+export * from "./Verify";

package/src/Header.jsx

@@ -1,4 +0,0 @@
-// While typescript is preferred, you can also use good ol javascript too!
-export default function Header() {
-  return <h1>Hello World!</h1>;
-}

package/src/Login.tsx

@@ -1,82 +0,0 @@
-import { useState, useContext } from "react";
-import { ErrorResponse, Spacer } 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<UserData>({
-    name: "",
-    email: "",
-    username: "",
-    password: "",
-  });
-
-  const { setSession } = useContext(SessionContext);
-
-  const onSubmit = () => {
-    setError(null);
-    fetch("/auth/login", {
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      method: "POST",
-      body: JSON.stringify(values),
-    })
-      .then((response) =>
-        response.json().then((data: Record<string, unknown>) => ({
-          ok: response.ok,
-          status: response.status,
-          data,
-        }))
-      )
-      .then(
-        ({
-          ok,
-          status,
-          data,
-        }: {
-          ok: boolean;
-          status: number;
-          data: Record<string, unknown>;
-        }) => {
-          if (ok) {
-            setSession(data as SessionData);
-          } else {
-            setError((data as ErrorResponse).message);
-          }
-        }
-      )
-      .catch((err: Error) => {
-        setError(err.message);
-      });
-  };
-
-  return (
-    <>
-      {error && (
-        <div>
-          <strong>{error}</strong>
-        </div>
-      )}
-      <Input
-        name="username"
-        label="Username"
-        value={values.username}
-        onChange={(value) => setValues({ ...values, username: value })}
-        autoCapitalize="off"
-      />
-      <Input
-        name="password"
-        type="password"
-        label="Password"
-        value={values.password}
-        onChange={(value) => setValues({ ...values, password: value })}
-        onEnter={onSubmit}
-      />
-      <Spacer />
-      <button onClick={onSubmit}>Login</button>
-    </>
-  );
-}

package/src/Register.tsx

@@ -1,82 +0,0 @@
-import { useState, useContext } from "react";
-import { FormErrors, ErrorMessage, Spacer } 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 [error, setError] = useState<string | boolean>(false);
-  const [errors, setErrors] = useState<Record<string, string>>({});
-  const [values, setValues] = useState<UserData>({
-    name: "",
-    email: "",
-    username: "",
-    password: "",
-  });
-
-  const { setSession } = useContext(SessionContext);
-
-  const onSubmit = () => {
-    setErrors({});
-    fetch("/auth/register", {
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-      },
-      method: "POST",
-      body: JSON.stringify(values),
-    })
-      .then((response) =>
-        response.json().then((data: Record<string, unknown>) => ({
-          ok: response.ok,
-          status: response.status,
-          data,
-        }))
-      )
-      .then(
-        ({
-          ok,
-          status,
-          data,
-        }: {
-          ok: boolean;
-          status: number;
-          data: Record<string, unknown>;
-        }) => {
-          if (ok) {
-            setSession(data as SessionData);
-          } else {
-            setErrors((data as FormErrors).errors);
-          }
-        }
-      )
-      .catch((err: Error) => {
-        // Put any generis error onto the username field
-        setError(err.message);
-      });
-  };
-
-  return (
-    <>
-      <ErrorMessage error={error} />
-      <Input
-        name="username"
-        label="Username"
-        value={values.username}
-        onChange={(value) => setValues({ ...values, username: value })}
-        error={errors.username}
-        autoCapitalize="off"
-      />
-      <Input
-        name="password"
-        type="password"
-        label="Password"
-        value={values.password}
-        onChange={(value) => setValues({ ...values, password: value })}
-        error={errors.password}
-      />
-      <Spacer />
-      <button onClick={onSubmit}>Register</button>
-    </>
-  );
-}