Crews!

package.json

@@ -15,6 +15,7 @@
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
     "react-router-dom": "^6.18.0",
+    "react-router-typesafe": "^1.4.4",
     "zustand": "^4.4.6"
   },
   "devDependencies": {

src/App.tsx

@@ -14,6 +14,10 @@ export default function Root() {
         </ul>
 
         <ul>
+          <li>
+            <Link to="/crews">Crews</Link>
+          </li>
+
           <CurrentAccount />
         </ul>
       </nav>

src/api/crew.ts

@@ -0,0 +1,124 @@
+import { useAuthStore } from "../stores";
+import { CrewResponse, Result, SimpleCrewResponse } from "./types";
+import { tryFetch } from "./util";
+
+export async function getCrews() {
+  const token = useAuthStore.getState().key;
+  if (token == null) return null;
+
+  const req = await fetch(
+    `${import.meta.env.VITE_SLOP_CREW_SERVER}api/crew/crews`,
+    {
+      headers: {
+        Authorization: token
+      }
+    }
+  );
+
+  if (!req.ok) return null;
+  const res: SimpleCrewResponse[] = await req.json();
+  return res;
+}
+
+export async function getCrew(id: string) {
+  const token = useAuthStore.getState().key;
+  if (token == null) return null;
+
+  const req = await fetch(
+    `${import.meta.env.VITE_SLOP_CREW_SERVER}api/crew/${id}`,
+    {
+      headers: {
+        Authorization: token
+      }
+    }
+  );
+
+  if (!req.ok) return null;
+  const res: CrewResponse = await req.json();
+  return res;
+}
+
+export async function create(
+  name: string,
+  tag: string
+): Promise<Result<SimpleCrewResponse, string>> {
+  const token = useAuthStore.getState().key;
+  if (token == null) {
+    return {
+      ok: false,
+      error: "You must be logged in to create a crew"
+    };
+  }
+
+  const req = await tryFetch(
+    `${import.meta.env.VITE_SLOP_CREW_SERVER}api/crew/create`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: token
+      },
+      body: JSON.stringify({
+        name,
+        tag
+      })
+    }
+  );
+
+  if (!req.ok) return req;
+  const res: SimpleCrewResponse = await req.value.json();
+  return { ok: true, value: res };
+}
+
+export async function promote(
+  crew: string,
+  user: string
+): Promise<Result<null, string>> {
+  const token = useAuthStore.getState().key;
+  if (token == null) {
+    return {
+      ok: false,
+      error: "You must be logged in to promote a user"
+    };
+  }
+
+  const req = await tryFetch(
+    `${
+      import.meta.env.VITE_SLOP_CREW_SERVER
+    }api/crew/${crew}/promote?id=${user}`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: token
+      }
+    }
+  );
+  if (!req.ok) return req;
+  return { ok: true, value: null };
+}
+
+export async function join(
+  code: string
+): Promise<Result<SimpleCrewResponse, string>> {
+  const token = useAuthStore.getState().key;
+  if (token == null) {
+    return {
+      ok: false,
+      error: "You must be logged in to join a crew"
+    };
+  }
+
+  const req = await tryFetch(
+    `${import.meta.env.VITE_SLOP_CREW_SERVER}api/crew/join?code=${code}`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: token
+      }
+    }
+  );
+
+  if (!req.ok) return req;
+  const res: SimpleCrewResponse = await req.value.json();
+  return { ok: true, value: res };
+}

src/api/types.ts

@@ -7,3 +7,30 @@ export type MeResponse = {
 export type AuthResponse = MeResponse & {
   key: string;
 };
+
+export type SimpleCrewResponse = {
+  id: string;
+  name: string;
+  tag: string;
+};
+
+export type CrewResponse = SimpleCrewResponse & {
+  members: CrewMember[];
+};
+
+export type CrewMember = {
+  id: string;
+  username: string;
+  owner: boolean;
+  avatar: string | null;
+};
+
+export type Result<T, E> =
+  | {
+      ok: true;
+      value: T;
+    }
+  | {
+      ok: false;
+      error: E;
+    };

src/api/util.ts

@@ -0,0 +1,36 @@
+import { Result } from "./types";
+
+export async function tryFetch(
+  input: string,
+  info: RequestInit
+): Promise<Result<Response, string>> {
+  let req;
+  try {
+    req = await fetch(input, info);
+  } catch (e) {
+    console.error(e);
+
+    if (e instanceof Error) {
+      return { ok: false, error: e.message };
+    } else {
+      return { ok: false, error: "Unknown error" };
+    }
+  }
+
+  if (!req.ok) {
+    const text = await req.text();
+    if (text == "") {
+      return {
+        ok: false,
+        error: `Unknown error: ${req.status} ${req.statusText}`
+      };
+    } else {
+      return { ok: false, error: text };
+    }
+  }
+
+  return {
+    ok: true,
+    value: req
+  };
+}

src/components/Avatar.tsx

@@ -0,0 +1,17 @@
+type HasAvatar = {
+  id: string;
+  avatar: string | null;
+  username: string;
+};
+
+export default function Avatar({ person }: { person: HasAvatar }) {
+  if (person.avatar == null) return <></>;
+
+  return (
+    <img
+      className="avatar"
+      src={`https://cdn.discordapp.com/avatars/${person.id}/${person.avatar}.png`}
+      alt={person.username}
+    />
+  );
+}

src/components/CurrentAccount.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useAuthStore } from "../stores";
 import { getMe } from "../api/auth";
 import { Link } from "react-router-dom";
+import Avatar from "./Avatar";
 
 export default function CurrentAccount() {
   const token = useAuthStore((state) => state.key);
@@ -22,13 +23,7 @@ export default function CurrentAccount() {
     <li>
       <details role="list">
         <summary aria-haspopup="listbox" role="link" className="currentAccount">
-          {cachedMe.avatar != null && (
-            <img
-              src={`https://cdn.discordapp.com/avatars/${cachedMe.id}/${cachedMe.avatar}.png`}
-              alt={cachedMe.username}
-            />
-          )}
-
+          <Avatar person={cachedMe} />
           {cachedMe.username}
         </summary>