{content.map((label, index) => (
@@ -259,63 +193,62 @@ function LabelList({ content }: { content: Name[] | Pronoun[] }) {
);
}
-function LabelStatusIcon({ status }: { status: WordStatus }) {
+function LabelStatusIcon({ status }: { status: LabelStatus }) {
return React.createElement(
{
- [WordStatus.Favourite]: HeartFill,
- [WordStatus.Okay]: HandThumbsUp,
- [WordStatus.Jokingly]: EmojiLaughing,
- [WordStatus.FriendsOnly]: People,
- [WordStatus.Avoid]: HandThumbsDown,
+ [LabelStatus.Favourite]: HeartFill,
+ [LabelStatus.Okay]: HandThumbsUp,
+ [LabelStatus.Jokingly]: EmojiLaughing,
+ [LabelStatus.FriendsOnly]: People,
+ [LabelStatus.Avoid]: HandThumbsDown,
}[status],
{ className: "inline" }
);
}
-function LabelsLine({ labels }: { labels: Name[] | Pronoun[] }) {
- if (!labels?.length) return <>;
- const status = labels[0].status;
- const text = labels
- .map((label) =>
- "name" in label
- ? label.name
- : label.display_text ?? label.pronouns.split("/").slice(0, 2).join("/")
- )
- .join(", ");
- return (
+function LabelsLine({
+ status,
+ texts,
+}: {
+ status: LabelStatus;
+ texts: string[];
+}) {
+ return !texts.length ? (
+ <>
+ ) : (
- {text}
+ {texts.join(", ")}
);
}
-function LabelLine({ label }: { label: Name | Pronoun }) {
- return
;
+function LabelLine({ label }: { label: Label }) {
+ return
;
}
function FieldCardGrid({ fields }: { fields: Field[] }) {
return (
- {fields?.map((field, index) => (
+ {fields.map((field, index) => (
))}
);
}
-const fieldEntryStatus: { [key in string]: WordStatus } = {
- favourite: WordStatus.Favourite,
- okay: WordStatus.Okay,
- jokingly: WordStatus.Jokingly,
- friends_only: WordStatus.FriendsOnly,
- avoid: WordStatus.Avoid,
-};
+const labelStatusOrder: LabelStatus[] = [
+ LabelStatus.Favourite,
+ LabelStatus.Okay,
+ LabelStatus.Jokingly,
+ LabelStatus.FriendsOnly,
+ LabelStatus.Avoid,
+];
function FieldCard({
field,
@@ -326,13 +259,13 @@ function FieldCard({
}) {
return (
- {Object.entries(fieldEntryStatus).map(([statusName, status], i) => (
+ {labelStatusOrder.map((status, i) => (
({
- name,
- status,
- }))}
+ status={status}
+ texts={field.labels
+ .filter((x) => x.status === status)
+ .map((x) => x.display())}
/>
))}
diff --git a/frontend/lib/types.ts b/frontend/lib/api-fetch.ts
similarity index 56%
rename from frontend/lib/types.ts
rename to frontend/lib/api-fetch.ts
index 5f677fc..835c1d9 100644
--- a/frontend/lib/types.ts
+++ b/frontend/lib/api-fetch.ts
@@ -1,28 +1,36 @@
+/** An array returned by the API. (Can be `null` due to a quirk in Go.) */
+export type Arr
= T[] | null;
+
export interface PartialPerson {
id: string;
name: string;
display_name: string | null;
- avatar_urls: string[] | null;
+ avatar_urls: Arr;
}
+
export type PartialUser = PartialPerson;
+
export type PartialMember = PartialPerson;
-interface _Person extends PartialPerson {
+/** The shared interface of `Member` and `User`.
+ * A typical `_Person` is only one of those two, so consider using `Person` instead.
+ */
+export interface _Person extends PartialPerson {
bio: string | null;
- links: string[] | null;
- names: Name[] | null;
- pronouns: Pronoun[] | null;
- fields: Field[] | null;
+ links: Arr;
+ names: Arr;
+ pronouns: Arr;
+ fields: Arr;
+}
+
+export interface User extends _Person {
+ members: Arr;
}
export interface Member extends _Person {
user: PartialUser;
}
-export interface User extends _Person {
- members: PartialMember[] | null;
-}
-
export type Person = Member | User;
export interface MeUser extends User {
@@ -43,11 +51,11 @@ export interface Pronoun {
export interface Field {
name: string;
- favourite: string[] | null;
- okay: string[] | null;
- jokingly: string[] | null;
- friends_only: string[] | null;
- avoid: string[] | null;
+ favourite: Arr;
+ okay: Arr;
+ jokingly: Arr;
+ friends_only: Arr;
+ avoid: Arr;
}
export interface APIError {
@@ -101,3 +109,28 @@ export interface SignupResponse {
user: MeUser;
token: string;
}
+
+const apiBase = process.env.API_BASE ?? "/api";
+
+export async function fetchAPI(
+ path: string,
+ method = "GET",
+ body: any = null
+) {
+ const token =
+ typeof localStorage !== "undefined" &&
+ localStorage.getItem("pronouns-token");
+
+ const resp = await fetch(`${apiBase}/v1${path}`, {
+ method,
+ headers: {
+ ...token ? { Authorization: token } : {},
+ "Content-Type": "application/json",
+ },
+ body: body ? JSON.stringify(body) : null,
+ });
+
+ const data = await resp.json();
+ if (resp.status < 200 || resp.status >= 300) throw data as APIError;
+ return data as T;
+}
\ No newline at end of file
diff --git a/frontend/lib/api.ts b/frontend/lib/api.ts
new file mode 100644
index 0000000..a9967ae
--- /dev/null
+++ b/frontend/lib/api.ts
@@ -0,0 +1,209 @@
+import * as API from "./api-fetch";
+import { fetchAPI } from './api-fetch';
+
+function getDomain(): string {
+ const domain = typeof window !== "undefined" ? window.location.origin : process.env.DOMAIN;
+ if (!domain) throw new Error('process.env.DOMAIN not set');
+ return domain;
+}
+
+export class PartialPerson {
+ id: string;
+ name: string;
+ displayName: string | null;
+ avatarUrls: string[];
+ constructor({ id, name, display_name, avatar_urls }: API.PartialPerson) {
+ this.id = id;
+ this.name = name;
+ this.displayName = display_name;
+ this.avatarUrls = avatar_urls ?? [];
+ }
+
+ display(): string {
+ return this.displayName ?? this.name;
+ }
+}
+
+export class PartialUser extends PartialPerson {}
+
+export class PartialMember extends PartialPerson {}
+
+abstract class _Person extends PartialPerson {
+ bio: string | null;
+ links: string[];
+ names: Name[];
+ pronouns: Pronouns[];
+ fields: Field[];
+ constructor(apiData: API._Person) {
+ super(apiData);
+ const { bio, links, names, pronouns, fields } = apiData;
+ this.bio = bio;
+ this.links = links ?? [];
+ this.names = (names ?? []).map(x => new Name(x));
+ this.pronouns = (pronouns ?? []).map(x => new Pronouns(x));
+ this.fields = (fields ?? []).map(x => new Field(x));
+ }
+
+ abstract fullHandle(): string
+
+ shortHandle(): string {
+ return this.fullHandle();
+ }
+
+ abstract relativeURL(): string
+
+ absoluteURL(): string {
+ return `${getDomain()}${this.relativeURL()}`;
+ }
+}
+
+export class User extends _Person {
+ partialMembers: PartialMember[];
+ constructor(apiData: API.User) {
+ super(apiData);
+ const { members } = apiData;
+ this.partialMembers = (members ?? []).map(x => new PartialMember(x));
+ }
+
+ static async fetchFromName(name: string): Promise {
+ return new User(await fetchAPI(`/users/${name}`));
+ }
+
+ fullHandle(): string {
+ return `@${this.name}`;
+ }
+
+ shortHandle(): string {
+ return this.fullHandle();
+ }
+
+ relativeURL(): string {
+ return `/u/${this.name}`;
+ }
+}
+
+export class Member extends _Person {
+ partialUser: PartialUser;
+ constructor(apiData: API.Member) {
+ super(apiData);
+ const { user } = apiData;
+ this.partialUser = new PartialUser(user);
+ }
+
+ static async fetchFromUserAndMemberName(userName: string, memberName: string): Promise {
+ return new Member(await fetchAPI(`/users/${userName}/members/${memberName}`));
+ }
+
+ fullHandle(): string {
+ return `${this.name}@${this.partialUser.name}`;
+ }
+
+ relativeURL(): string {
+ return `/u/${this.partialUser.name}/${this.name}`;
+ }
+}
+
+export type Person = Member | User;
+
+export class MeUser extends User {
+ discord: string | null;
+ discordUsername: string | null;
+ constructor(apiData: API.MeUser) {
+ super(apiData);
+ const { discord, discord_username } = apiData;
+ this.discord = discord;
+ this.discordUsername = discord_username;
+ }
+
+ static async fetchMe(): Promise {
+ return new MeUser(await fetchAPI("/users/@me"));
+ }
+}
+
+export enum LabelType {
+ Name = 1,
+ Pronouns = 2,
+ Unspecified = 3,
+}
+
+export const LabelStatus = API.WordStatus;
+export type LabelStatus = API.WordStatus;
+
+export interface LabelData {
+ type?: LabelType
+ displayText: string | null
+ text: string
+ status: LabelStatus
+}
+
+export class Label {
+ type: LabelType;
+ displayText: string | null;
+ text: string;
+ status: LabelStatus;
+ constructor({ type, displayText, text, status }: LabelData) {
+ this.type = type ?? LabelType.Unspecified;
+ this.displayText = displayText;
+ this.text = text;
+ this.status = status;
+ }
+
+ display(): string {
+ return this.displayText ?? this.text;
+ }
+
+ shortDisplay(): string {
+ return this.display();
+ }
+}
+
+export class Name extends Label {
+ constructor({ name, status }: API.Name) {
+ super({
+ type: LabelType.Name,
+ displayText: null,
+ text: name,
+ status,
+ });
+ }
+}
+
+export class Pronouns extends Label {
+ constructor({ display_text, pronouns, status }: API.Pronoun) {
+ super({
+ type: LabelType.Pronouns,
+ displayText: display_text ?? null,
+ text: pronouns,
+ status,
+ });
+ }
+
+ get pronouns(): string[] { return this.text.split('/'); }
+ set pronouns(to: string[]) { this.text = to.join('/'); }
+
+ shortDisplay(): string {
+ return this.displayText ?? this.pronouns.splice(0, 2).join('/');
+ }
+}
+
+export class Field {
+ name: string;
+ labels: Label[];
+ constructor({ name, favourite, okay, jokingly, friends_only, avoid }: API.Field) {
+ this.name = name;
+ function transpose(arr: API.Arr, status: LabelStatus): Label[] {
+ return (arr ?? []).map(text => new Label({
+ displayText: null,
+ text,
+ status,
+ }));
+ }
+ this.labels = [
+ ...transpose(favourite, LabelStatus.Favourite),
+ ...transpose(okay, LabelStatus.Okay),
+ ...transpose(jokingly, LabelStatus.Jokingly),
+ ...transpose(friends_only, LabelStatus.FriendsOnly),
+ ...transpose(avoid, LabelStatus.Avoid),
+ ];
+ }
+}
\ No newline at end of file
diff --git a/frontend/lib/fetch.ts b/frontend/lib/fetch.ts
deleted file mode 100644
index 4a3ed3e..0000000
--- a/frontend/lib/fetch.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { APIError } from "./types";
-
-const apiBase = process.env.API_BASE ?? "/api";
-
-export default async function fetchAPI(
- path: string,
- method = "GET",
- body: any = null
-) {
- let headers = {};
- const token =
- typeof localStorage !== "undefined" &&
- localStorage.getItem("pronouns-token");
- if (token) {
- headers = {
- Authorization: token,
- };
- }
-
- const resp = await fetch(`${apiBase}/v1${path}`, {
- method,
- headers: {
- ...headers,
- "Content-Type": "application/json",
- },
- body: body ? JSON.stringify(body) : null,
- });
-
- const data = await resp.json();
- if (resp.status < 200 || resp.status >= 300) throw data as APIError;
- return data as T;
-}
diff --git a/frontend/lib/state.ts b/frontend/lib/state.ts
index 5b263de..faeca38 100644
--- a/frontend/lib/state.ts
+++ b/frontend/lib/state.ts
@@ -1,5 +1,5 @@
import { atom } from "recoil";
-import { MeUser } from "./types";
+import { MeUser } from "./api-fetch";
export const userState = atom({
key: "userState",
diff --git a/frontend/pages/edit/profile.tsx b/frontend/pages/edit/profile.tsx
index 93bff8d..4d0288a 100644
--- a/frontend/pages/edit/profile.tsx
+++ b/frontend/pages/edit/profile.tsx
@@ -2,9 +2,6 @@ import { useRouter } from "next/router";
import { useCallback, useEffect, useState } from "react";
import { useRecoilState } from "recoil";
import Loading from "../../components/Loading";
-import fetchAPI from "../../lib/fetch";
-import { userState } from "../../lib/state";
-import { MeUser, Field } from "../../lib/types";
import cloneDeep from "lodash/cloneDeep";
import { ReactSortable } from "react-sortablejs";
@@ -21,6 +18,8 @@ import toast from "../../lib/toast";
import ReactCodeMirror from "@uiw/react-codemirror";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import ReactMarkdown from "react-markdown";
+import { userState } from "../../lib/state";
+import { fetchAPI, Field, MeUser } from "../../lib/api-fetch";
export default function Index() {
const [user, setUser] = useRecoilState(userState);
diff --git a/frontend/pages/login/discord.tsx b/frontend/pages/login/discord.tsx
index b3a7a36..5cee65c 100644
--- a/frontend/pages/login/discord.tsx
+++ b/frontend/pages/login/discord.tsx
@@ -1,15 +1,14 @@
import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import { useRecoilState } from "recoil";
-import fetchAPI from "../../lib/fetch";
import { userState } from "../../lib/state";
-import { APIError, MeUser, SignupResponse } from "../../lib/types";
import TextInput from "../../components/TextInput";
import Loading from "../../components/Loading";
import Button, { ButtonStyle } from "../../components/Button";
import Notice from "../../components/Notice";
import BlueLink from "../../components/BlueLink";
import toast from "../../lib/toast";
+import { fetchAPI, MeUser, SignupResponse } from "../../lib/api-fetch";
interface CallbackResponse {
has_account: boolean;
diff --git a/frontend/pages/login/index.tsx b/frontend/pages/login/index.tsx
index 410f41a..60b61d4 100644
--- a/frontend/pages/login/index.tsx
+++ b/frontend/pages/login/index.tsx
@@ -2,7 +2,7 @@ import { GetServerSideProps } from "next";
import { useRouter } from "next/router";
import { useRecoilValue } from "recoil";
import Head from "next/head";
-import fetchAPI from "../../lib/fetch";
+import { fetchAPI } from "../../lib/api-fetch";
import { userState } from "../../lib/state";
interface URLsResponse {
diff --git a/frontend/pages/u/[user]/[member].tsx b/frontend/pages/u/[user]/[member].tsx
index 03c2398..73e22b4 100644
--- a/frontend/pages/u/[user]/[member].tsx
+++ b/frontend/pages/u/[user]/[member].tsx
@@ -1,26 +1,30 @@
import { GetServerSideProps } from "next";
-import fetchAPI from "../../../lib/fetch";
-import { Member } from "../../../lib/types";
import PersonPage from "../../../components/PersonPage";
+import { Member } from "../../../lib/api";
+import * as API from "../../../lib/api-fetch";
interface Props {
- member: Member;
+ member: API.Member;
}
export default function MemberPage({ member }: Props) {
- return ;
+ return ;
}
export const getServerSideProps: GetServerSideProps = async (context) => {
- try {
- const member = await fetchAPI(
- `/users/${context.params!.user}/members/${context.params!.member}`
- );
+ const userName = context.params!.user;
+ if (typeof userName !== "string") return { notFound: true };
+ const memberName = context.params!.member;
+ if (typeof memberName !== "string") return { notFound: true };
- return { props: { member } };
+ try {
+ return {
+ props: {
+ member: await API.fetchAPI(`/users/${context.params!.user}/members/${context.params!.member}`),
+ },
+ };
} catch (e) {
console.log(e);
-
return { notFound: true };
}
};
diff --git a/frontend/pages/u/[user]/index.tsx b/frontend/pages/u/[user]/index.tsx
index 4cce9e7..a417273 100644
--- a/frontend/pages/u/[user]/index.tsx
+++ b/frontend/pages/u/[user]/index.tsx
@@ -1,22 +1,21 @@
import { GetServerSideProps } from "next";
import PersonPage from "../../../components/PersonPage";
-import fetchAPI from "../../../lib/fetch";
-import { PartialMember, User } from "../../../lib/types";
+import { User } from "../../../lib/api";
+import * as API from "../../../lib/api-fetch";
interface Props {
- user: User;
- partialMembers: PartialMember[];
+ user: API.User;
}
export default function Index({ user }: Props) {
- return ;
+ return ;
}
export const getServerSideProps: GetServerSideProps = async (context) => {
- const name = context.params!.user;
+ const userName = context.params!.user;
+ if (typeof userName !== "string") return { notFound: true };
try {
- const user = await fetchAPI(`/users/${name}`);
- return { props: { user } };
+ return { props: { user: await API.fetchAPI(`/users/${userName}`) } };
} catch (e) {
console.log(e);
return { notFound: true };