Add ability to rename crews

SlopCrew · Nov 30, 2023 · 4ff9b2e · 4ff9b2e
1 parent 730077a
commit 4ff9b2e
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 1 deletion.
diff --git a/src/api/crew.ts b/src/api/crew.ts
@@ -70,6 +70,38 @@ export async function create(
   return { ok: true, value: res };
 }
 
+export async function update(
+  crew: string,
+  name: string,
+  tag: string
+): Promise<Result<null, string>> {
+  const token = useAuthStore.getState().key;
+  if (token == null) {
+    return {
+      ok: false,
+      error: "You must be logged in to update a crew"
+    };
+  }
+
+  const req = await tryFetch(
+    `${import.meta.env.VITE_SLOP_CREW_SERVER}api/crew/${crew}`,
+    {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: token
+      },
+      body: JSON.stringify({
+        name,
+        tag
+      })
+    }
+  );
+
+  if (!req.ok) return req;
+  return { ok: true, value: null };
+}
+
 export async function promote(
   crew: string,
   user: string

diff --git a/src/routes/crews/CrewSettings.tsx b/src/routes/crews/CrewSettings.tsx
@@ -5,7 +5,72 @@ import { useNavigate, useRevalidator } from "react-router-dom";
 import { CrewResponse, MeResponse } from "../../api/types";
 import HiddenCode from "../../components/HiddenCode";
 import { useRequiredAuth } from "../../util";
-import { createInvite, deleteInvite, nukeItFromOrbit } from "../../api/crew";
+import {
+  createInvite,
+  deleteInvite,
+  nukeItFromOrbit,
+  update
+} from "../../api/crew";
+import TMPInput from "../../components/TMPInput.tsx";
+import Important from "../../components/Important.tsx";
+
+function CrewUpdate({ crew }: { crew: CrewResponse }) {
+  const revalidator = useRevalidator();
+  const name = React.createRef<HTMLInputElement>();
+  const tag = React.createRef<HTMLInputElement>();
+
+  const [working, setWorking] = React.useState<boolean>(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  return (
+    <section className="smolPadding">
+      <h2>Name & tag</h2>
+
+      {error != null && <Important type="danger" message={error} />}
+
+      <input
+        type="text"
+        ref={name}
+        defaultValue={crew.name}
+        placeholder="Crew name"
+        minLength={3}
+        maxLength={32}
+      />
+
+      <TMPInput
+        ref={tag}
+        defaultValue={crew.tag}
+        placeholder="Crew tag"
+        minLength={3}
+        maxLength={32}
+      />
+
+      <button
+        className="normalWidthButton"
+        disabled={working}
+        onClick={async () => {
+          const nameVal = name.current?.value;
+          const tagVal = tag.current?.value;
+          if (nameVal == null || tagVal == null) return;
+
+          setWorking(true);
+          setError(null);
+
+          const req = await update(crew.id, nameVal, tagVal);
+          setWorking(false);
+
+          if (!req.ok) {
+            setError(req.error);
+          } else {
+            revalidator.revalidate();
+          }
+        }}
+      >
+        Update
+      </button>
+    </section>
+  );
+}
 
 function CrewSettingsInner({
   crew,
@@ -23,6 +88,8 @@ function CrewSettingsInner({
     <>
       <h1>Crew settings</h1>
 
+      <CrewUpdate crew={crew} />
+
       <section className="smolPadding">
         <h2>Invites</h2>