sam/pronounscc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor: extract Button to component, reformat all files with Prettier

Browse source
This commit is contained in:
Sam 2022-11-18 14:11:52 +01:00
parent 1080d8a0cd
commit bfdaafeb0a
15 changed files with 504 additions and 335 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/.prettierignore Normal file
View file

@ -0,0 +1 @@
.next

65
frontend/components/Button.tsx Normal file
View file

@ -0,0 +1,65 @@
import { MouseEventHandler, ReactNode } from "react";
export enum ButtonStyle {
primary,
success,
danger,
}
export interface Props {
onClick?: MouseEventHandler<HTMLButtonElement>;
style?: ButtonStyle;
bold?: boolean;
children?: ReactNode;
}
export default function Button(props: Props) {
if (props.style === undefined) {
return PrimaryButton(props);
}
switch (props.style) {
case ButtonStyle.primary:
return PrimaryButton(props);
case ButtonStyle.success:
return SuccessButton(props);
case ButtonStyle.danger:
return DangerButton(props);
}
}
function PrimaryButton(props: Props) {
return (
<button
type="button"
onClick={props.onClick}
className="bg-blue-500 dark:bg-blue-500 hover:bg-blue-700 hover:dark:bg-blue-800 p-2 rounded-md text-white"
>
<span className={props.bold ? "font-bold" : ""}>{props.children}</span>
</button>
);
}
function SuccessButton(props: Props) {
return (
<button
type="button"
onClick={props.onClick}
className="bg-green-600 dark:bg-green-700 hover:bg-green-700 hover:dark:bg-green-800 p-2 rounded-md text-white"
>
<span className={props.bold ? "font-bold" : ""}>{props.children}</span>
</button>
);
}
function DangerButton(props: Props) {
return (
<button
type="button"
onClick={props.onClick}
className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2 rounded-md text-white"
>
<span className={props.bold ? "font-bold" : ""}>{props.children}</span>
</button>
);
}

221
frontend/components/Editable.tsx
View file

@ -1,128 +1,129 @@
import { import {
EmojiLaughing, EmojiLaughing,
HandThumbsDown, HandThumbsDown,
HandThumbsUp, HandThumbsUp,
Heart, Heart,
People, People,
Trash3, Trash3,
} from "react-bootstrap-icons"; } from "react-bootstrap-icons";
import Card from "./Card"; import Card from "./Card";
import TextInput from "./TextInput"; import TextInput from "./TextInput";
import Button, { ButtonStyle } from "./Button";
export interface EditField { export interface EditField {
id: number; id: number;
name: string; name: string;
pronouns: Record<string, PronounChoice>; pronouns: Record<string, PronounChoice>;
} }
export enum PronounChoice { export enum PronounChoice {
favourite, favourite,
okay, okay,
jokingly, jokingly,
friendsOnly, friendsOnly,
avoid, avoid,
} }
type EditableCardProps = { type EditableCardProps = {
field: EditField; field: EditField;
onChangeName: React.ChangeEventHandler<HTMLInputElement>; onChangeName: React.ChangeEventHandler<HTMLInputElement>;
onChangeFavourite( onChangeFavourite(
e: React.MouseEvent<HTMLButtonElement>, e: React.MouseEvent<HTMLButtonElement>,
entry: string entry: string
): void; ): void;
onChangeOkay(e: React.MouseEvent<HTMLButtonElement>, entry: string): void; onChangeOkay(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
onChangeJokingly(e: React.MouseEvent<HTMLButtonElement>, entry: string): void; onChangeJokingly(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
onChangeFriends(e: React.MouseEvent<HTMLButtonElement>, entry: string): void; onChangeFriends(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
onChangeAvoid(e: React.MouseEvent<HTMLButtonElement>, entry: string): void; onChangeAvoid(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
onClickDelete: React.MouseEventHandler<HTMLButtonElement>; onClickDelete: React.MouseEventHandler<HTMLButtonElement>;
}; };
export function EditableCard(props: EditableCardProps) { export function EditableCard(props: EditableCardProps) {
const footer = ( const footer = (
<div className="flex justify-between"> <div className="flex justify-between">
<TextInput value={props.field.name} onChange={props.onChangeName} /> <TextInput value={props.field.name} onChange={props.onChangeName} />
<button <Button style={ButtonStyle.danger} onClick={props.onClickDelete}>
type="button" <Trash3 aria-hidden className="inline" /> Delete
onClick={props.onClickDelete} </Button>
className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2 rounded-md" </div>
> );
<Trash3 aria-hidden className="inline" />{" "}
<span className="font-bold">Delete</span>
</button>
</div>
);
return ( return (
<Card title={props.field.name} draggable footer={footer}> <Card title={props.field.name} draggable footer={footer}>
<ul> <ul>
{Object.keys(props.field.pronouns).map((pronoun, index) => { {Object.keys(props.field.pronouns).map((pronoun, index) => {
const choice = props.field.pronouns[pronoun]; const choice = props.field.pronouns[pronoun];
return ( return (
<li className="flex justify-between my-1" key={index}> <li className="flex justify-between my-1" key={index}>
<div>{pronoun}</div> <div>{pronoun}</div>
<div className="rounded-md"> <div className="rounded-md">
<button <button
type="button" type="button"
onClick={(e) => props.onChangeFavourite(e, pronoun)} onClick={(e) => props.onChangeFavourite(e, pronoun)}
className={`${choice == PronounChoice.favourite className={`${
? "bg-slate-500" choice == PronounChoice.favourite
: "bg-slate-600" ? "bg-slate-500"
} hover:bg-slate-400 p-2`} : "bg-slate-600"
> } hover:bg-slate-400 p-2`}
<Heart /> >
</button> <Heart />
<button </button>
type="button" <button
onClick={(e) => props.onChangeOkay(e, pronoun)} type="button"
className={`${choice == PronounChoice.okay onClick={(e) => props.onChangeOkay(e, pronoun)}
? "bg-slate-500" className={`${
: "bg-slate-600" choice == PronounChoice.okay
} hover:bg-slate-400 p-2`} ? "bg-slate-500"
> : "bg-slate-600"
<HandThumbsUp /> } hover:bg-slate-400 p-2`}
</button> >
<button <HandThumbsUp />
type="button" </button>
onClick={(e) => props.onChangeJokingly(e, pronoun)} <button
className={`${choice == PronounChoice.jokingly type="button"
? "bg-slate-500" onClick={(e) => props.onChangeJokingly(e, pronoun)}
: "bg-slate-600" className={`${
} hover:bg-slate-400 p-2`} choice == PronounChoice.jokingly
> ? "bg-slate-500"
<EmojiLaughing /> : "bg-slate-600"
</button> } hover:bg-slate-400 p-2`}
<button >
type="button" <EmojiLaughing />
onClick={(e) => props.onChangeFriends(e, pronoun)} </button>
className={`${choice == PronounChoice.friendsOnly <button
? "bg-slate-500" type="button"
: "bg-slate-600" onClick={(e) => props.onChangeFriends(e, pronoun)}
} hover:bg-slate-400 p-2`} className={`${
> choice == PronounChoice.friendsOnly
<People /> ? "bg-slate-500"
</button> : "bg-slate-600"
<button } hover:bg-slate-400 p-2`}
type="button" >
onClick={(e) => props.onChangeAvoid(e, pronoun)} <People />
className={`${choice == PronounChoice.avoid </button>
? "bg-slate-500" <button
: "bg-slate-600" type="button"
} hover:bg-slate-400 p-2`} onClick={(e) => props.onChangeAvoid(e, pronoun)}
> className={`${
<HandThumbsDown /> choice == PronounChoice.avoid
</button> ? "bg-slate-500"
<button : "bg-slate-600"
type="button" } hover:bg-slate-400 p-2`}
className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2" >
> <HandThumbsDown />
<Trash3 /> </button>
</button> <button
</div> type="button"
</li> className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2"
); >
})} <Trash3 />
</ul> </button>
</Card> </div>
); </li>
);
})}
</ul>
</Card>
);
} }

29
frontend/components/TextInput.tsx
View file

@ -1,19 +1,24 @@
import { ChangeEventHandler } from "react"; import { ChangeEventHandler } from "react";
export type Props = { export type Props = {
defaultValue?: string; contrastBackground?: boolean;
value?: string; defaultValue?: string;
onChange?: ChangeEventHandler<HTMLInputElement>; value?: string;
onChange?: ChangeEventHandler<HTMLInputElement>;
}; };
export default function TextInput(props: Props) { export default function TextInput(props: Props) {
return ( const bg = props.contrastBackground
<input ? "bg-slate-50 dark:bg-slate-700"
type="text" : "bg-white dark:bg-slate-800";
className="p-1 lg:p-2 rounded-md bg-white border-slate-300 text-black dark:bg-slate-800 dark:border-slate-900 dark:text-white"
defaultValue={props.defaultValue} return (
value={props.value} <input
onChange={props.onChange} type="text"
/> className={`p-1 lg:p-2 rounded-md ${bg} border-slate-300 text-black dark:border-slate-900 dark:text-white`}
); defaultValue={props.defaultValue}
value={props.value}
onChange={props.onChange}
/>
);
} }

15
frontend/lib/types.ts
View file

@ -69,13 +69,28 @@ export enum WordStatus {
export enum ErrorCode { export enum ErrorCode {
BadRequest = 400, BadRequest = 400,
Forbidden = 403, Forbidden = 403,
NotFound = 404,
MethodNotAllowed = 405,
TooManyRequests = 429,
InternalServerError = 500, InternalServerError = 500,
InvalidState = 1001, InvalidState = 1001,
InvalidOAuthCode = 1002, InvalidOAuthCode = 1002,
InvalidToken = 1003, InvalidToken = 1003,
InviteRequired = 1004,
InvalidTicket = 1005,
InvalidUsername = 1006,
UsernameTaken = 1007,
InvitesDisabled = 1008,
InviteLimitReached = 1009,
InviteAlreadyUsed = 1010,
UserNotFound = 2001, UserNotFound = 2001,
MemberNotFound = 3001,
MemberLimitReached = 3002,
RequestTooBig = 4001,
} }
export interface SignupRequest { export interface SignupRequest {

1
frontend/package.json
View file

@ -32,6 +32,7 @@
"eslint": "8.19.0", "eslint": "8.19.0",
"eslint-config-next": "12.2.2", "eslint-config-next": "12.2.2",
"postcss": "^8.4.14", "postcss": "^8.4.14",
"prettier": "2.7.1",
"tailwindcss": "^3.1.6", "tailwindcss": "^3.1.6",
"typescript": "4.7.4" "typescript": "4.7.4"
} }

8
frontend/pages/_error.js
View file

@ -16,10 +16,10 @@
* - https://reactjs.org/docs/error-boundaries.html * - https://reactjs.org/docs/error-boundaries.html
*/ */
import * as Sentry from '@sentry/nextjs'; import * as Sentry from "@sentry/nextjs";
import NextErrorComponent from 'next/error'; import NextErrorComponent from "next/error";
const CustomErrorComponent = props => { const CustomErrorComponent = (props) => {
// If you're using a Nextjs version prior to 12.2.1, uncomment this to // If you're using a Nextjs version prior to 12.2.1, uncomment this to
// compensate for https://github.com/vercel/next.js/issues/8592 // compensate for https://github.com/vercel/next.js/issues/8592
// Sentry.captureUnderscoreErrorException(props); // Sentry.captureUnderscoreErrorException(props);
@ -27,7 +27,7 @@ const CustomErrorComponent = props => {
return <NextErrorComponent statusCode={props.statusCode} />; return <NextErrorComponent statusCode={props.statusCode} />;
}; };
CustomErrorComponent.getInitialProps = async contextData => { CustomErrorComponent.getInitialProps = async (contextData) => {
// In case this is running in a serverless function, await this in order to give Sentry // In case this is running in a serverless function, await this in order to give Sentry
// time to send the error before the lambda exits // time to send the error before the lambda exits
await Sentry.captureUnderscoreErrorException(contextData); await Sentry.captureUnderscoreErrorException(contextData);

4
frontend/pages/edit/member/[member]/index.tsx
View file

@ -1,3 +1,3 @@
export default function EditMember() { export default function EditMember() {
return <>Editing a member!</>; return <>Editing a member!</>;
} }

12
frontend/pages/edit/member/index.tsx
View file

@ -3,10 +3,10 @@ import { useEffect } from "react";
import Loading from "../../../components/Loading"; import Loading from "../../../components/Loading";
export default function Redirect() { export default function Redirect() {
const router = useRouter(); const router = useRouter();
useEffect(() => { useEffect(() => {
router.push("/") router.push("/");
}, []) }, []);
return <Loading />; return <Loading />;
} }

238
frontend/pages/edit/profile.tsx
View file

@ -9,156 +9,162 @@ import cloneDeep from "lodash/cloneDeep";
import { ReactSortable } from "react-sortablejs"; import { ReactSortable } from "react-sortablejs";
import Card from "../../components/Card"; import Card from "../../components/Card";
import { EditableCard, EditField, PronounChoice } from "../../components/Editable"; import {
EditableCard,
EditField,
PronounChoice,
} from "../../components/Editable";
export default function Index() { export default function Index() {
const [user, setUser] = useRecoilState(userState); const [user, setUser] = useRecoilState(userState);
const router = useRouter(); const router = useRouter();
useEffect(() => {
if (!user) {
router.push("/");
}
}, [user])
useEffect(() => {
if (!user) { if (!user) {
return <Loading />; router.push("/");
} }
}, [user]);
const [state, setState] = useState(cloneDeep(user)); if (!user) {
return <Loading />;
}
const originalOrder = state.fields ? state.fields.map((f, i) => { const [state, setState] = useState(cloneDeep(user));
const originalOrder = state.fields
? state.fields.map((f, i) => {
const field: EditField = { const field: EditField = {
id: i, id: i,
name: f.name, name: f.name,
pronouns: {}, pronouns: {},
}; };
f.favourite?.forEach((val) => { f.favourite?.forEach((val) => {
field.pronouns[val] = PronounChoice.favourite; field.pronouns[val] = PronounChoice.favourite;
}); });
f.okay?.forEach((val) => { f.okay?.forEach((val) => {
field.pronouns[val] = PronounChoice.okay; field.pronouns[val] = PronounChoice.okay;
}); });
f.jokingly?.forEach((val) => { f.jokingly?.forEach((val) => {
field.pronouns[val] = PronounChoice.jokingly; field.pronouns[val] = PronounChoice.jokingly;
}); });
f.friends_only?.forEach((val) => { f.friends_only?.forEach((val) => {
field.pronouns[val] = PronounChoice.friendsOnly; field.pronouns[val] = PronounChoice.friendsOnly;
}); });
f.avoid?.forEach((val) => { f.avoid?.forEach((val) => {
field.pronouns[val] = PronounChoice.avoid; field.pronouns[val] = PronounChoice.avoid;
}); });
return field; return field;
}) : []; })
: [];
const [fields, setFields] = useState(cloneDeep(originalOrder)); const [fields, setFields] = useState(cloneDeep(originalOrder));
const fieldsUpdated = !fieldsEqual(fields, originalOrder); const fieldsUpdated = !fieldsEqual(fields, originalOrder);
return ( return (
<div className="container mx-auto"> <div className="container mx-auto">
<div>{`fieldsUpdated: ${fieldsUpdated}`}</div> <div>{`fieldsUpdated: ${fieldsUpdated}`}</div>
{/* @ts-ignore: This component isn't updated to have a "children" prop yet, but it accepts it just fine. */} {/* @ts-ignore: This component isn't updated to have a "children" prop yet, but it accepts it just fine. */}
<ReactSortable <ReactSortable
handle=".handle" handle=".handle"
list={fields} list={fields}
setList={setFields} setList={setFields}
className="grid grid-cols-1 xl:grid-cols-2 gap-4 py-2" className="grid grid-cols-1 xl:grid-cols-2 gap-4 py-2"
> >
{fields.map((field, i) => ( {fields.map((field, i) => (
<EditableCard <EditableCard
key={i} key={i}
field={field} field={field}
onChangeName={(e) => { onChangeName={(e) => {
field.name = e.target.value; field.name = e.target.value;
setFields([...fields]); setFields([...fields]);
}} }}
onChangeFavourite={(e, entry: string) => { onChangeFavourite={(e, entry: string) => {
field.pronouns[entry] = PronounChoice.favourite; field.pronouns[entry] = PronounChoice.favourite;
setFields([...fields]); setFields([...fields]);
}} }}
onChangeOkay={(e, entry: string) => { onChangeOkay={(e, entry: string) => {
field.pronouns[entry] = PronounChoice.okay; field.pronouns[entry] = PronounChoice.okay;
setFields([...fields]); setFields([...fields]);
}} }}
onChangeJokingly={(e, entry: string) => { onChangeJokingly={(e, entry: string) => {
field.pronouns[entry] = PronounChoice.jokingly; field.pronouns[entry] = PronounChoice.jokingly;
setFields([...fields]); setFields([...fields]);
}} }}
onChangeFriends={(e, entry: string) => { onChangeFriends={(e, entry: string) => {
field.pronouns[entry] = PronounChoice.friendsOnly; field.pronouns[entry] = PronounChoice.friendsOnly;
setFields([...fields]); setFields([...fields]);
}} }}
onChangeAvoid={(e, entry: string) => { onChangeAvoid={(e, entry: string) => {
field.pronouns[entry] = PronounChoice.avoid; field.pronouns[entry] = PronounChoice.avoid;
setFields([...fields]); setFields([...fields]);
}} }}
onClickDelete={(_) => { onClickDelete={(_) => {
const newFields = [...fields]; const newFields = [...fields];
newFields.splice(i, 1); newFields.splice(i, 1);
setFields(newFields); setFields(newFields);
}} }}
/> />
))} ))}
</ReactSortable> </ReactSortable>
</div> </div>
); );
} }
function fieldsEqual(arr1: EditField[], arr2: EditField[]) { function fieldsEqual(arr1: EditField[], arr2: EditField[]) {
if (arr1?.length !== arr2?.length) return false; if (arr1?.length !== arr2?.length) return false;
if (!arr1.every((_, i) => arr1[i].id === arr2[i].id)) return false; if (!arr1.every((_, i) => arr1[i].id === arr2[i].id)) return false;
return arr1.every((_, i) => return arr1.every((_, i) =>
Object.keys(arr1[i].pronouns).every( Object.keys(arr1[i].pronouns).every(
(val) => arr1[i].pronouns[val] === arr2[i].pronouns[val] (val) => arr1[i].pronouns[val] === arr2[i].pronouns[val]
) )
); );
} }
async function updateUser(args: { async function updateUser(args: {
displayName: string; displayName: string;
bio: string; bio: string;
fields: EditField[]; fields: EditField[];
}) { }) {
const newFields = args.fields.map((editField) => { const newFields = args.fields.map((editField) => {
const field: Field = { const field: Field = {
name: editField.name, name: editField.name,
favourite: [], favourite: [],
okay: [], okay: [],
jokingly: [], jokingly: [],
friends_only: [], friends_only: [],
avoid: [], avoid: [],
}; };
Object.keys(editField).forEach((pronoun) => { Object.keys(editField).forEach((pronoun) => {
switch (editField.pronouns[pronoun]) { switch (editField.pronouns[pronoun]) {
case PronounChoice.favourite: case PronounChoice.favourite:
field.favourite?.push(pronoun); field.favourite?.push(pronoun);
break; break;
case PronounChoice.okay: case PronounChoice.okay:
field.okay?.push(pronoun); field.okay?.push(pronoun);
break; break;
case PronounChoice.jokingly: case PronounChoice.jokingly:
field.jokingly?.push(pronoun); field.jokingly?.push(pronoun);
break; break;
case PronounChoice.friendsOnly: case PronounChoice.friendsOnly:
field.friends_only?.push(pronoun); field.friends_only?.push(pronoun);
break; break;
case PronounChoice.avoid: case PronounChoice.avoid:
field.avoid?.push(pronoun); field.avoid?.push(pronoun);
break; break;
} }
});
return field;
}); });
return await fetchAPI<MeUser>("/users/@me", "PATCH", { return field;
display_name: args.displayName, });
bio: args.bio,
fields: newFields, return await fetchAPI<MeUser>("/users/@me", "PATCH", {
}); display_name: args.displayName,
bio: args.bio,
fields: newFields,
});
} }

159
frontend/pages/login/discord.tsx
View file

@ -5,6 +5,9 @@ import fetchAPI from "../../lib/fetch";
import { userState } from "../../lib/state"; import { userState } from "../../lib/state";
import { APIError, MeUser, SignupResponse } from "../../lib/types"; import { APIError, MeUser, SignupResponse } from "../../lib/types";
import TextInput from "../../components/TextInput"; import TextInput from "../../components/TextInput";
import Loading from "../../components/Loading";
import { stat } from "fs";
import Button, { ButtonStyle } from "../../components/Button";
interface CallbackResponse { interface CallbackResponse {
has_account: boolean; has_account: boolean;
@ -41,41 +44,47 @@ export default function Discord() {
error: null, error: null,
requireInvite: false, requireInvite: false,
}); });
const [formData, setFormData] = useState<{ username: string, invite: string }>({ username: "", invite: "" }); const [formData, setFormData] = useState<{
username: string;
invite: string;
}>({ username: "", invite: "" });
useEffect(() => { useEffect(() => {
if (!router.query.code || !router.query.state) { return; } if (!router.query.code || !router.query.state) {
return;
}
if (state.ticket || state.token) {
return;
}
fetchAPI<CallbackResponse>( fetchAPI<CallbackResponse>("/auth/discord/callback", "POST", {
"/auth/discord/callback", callback_domain: window.location.origin,
"POST", code: router.query.code,
{ state: router.query.state,
callback_domain: window.location.origin,
code: router.query.code,
state: router.query.state,
}
).then(resp => {
setState({
hasAccount: resp.has_account,
isLoading: false,
token: resp.token || null,
user: resp.user || null,
discord: resp.discord || null,
ticket: resp.ticket || null,
requireInvite: resp.require_invite,
})
}).catch(e => {
setState({
hasAccount: false,
isLoading: false,
error: e,
token: null,
user: null,
discord: null,
ticket: null,
requireInvite: false,
});
}) })
.then((resp) => {
setState({
hasAccount: resp.has_account,
isLoading: false,
token: resp.token || null,
user: resp.user || null,
discord: resp.discord || null,
ticket: resp.ticket || null,
requireInvite: resp.require_invite,
});
})
.catch((e) => {
setState({
hasAccount: false,
isLoading: false,
error: e,
token: null,
user: null,
discord: null,
ticket: null,
requireInvite: false,
});
});
// we got a token + user, save it and return to the home page // we got a token + user, save it and return to the home page
if (state.token) { if (state.token) {
@ -86,14 +95,29 @@ export default function Discord() {
} }
}, [state.token, state.user, setState, router]); }, [state.token, state.user, setState, router]);
if (!state.ticket && !state.error) {
return <Loading />;
} else if (state.error) {
return (
<div className="bg-red-600 dark:bg-red-700 p-2 rounded-md">
<p>Error: {state.error.message ?? state.error}</p>
<p>Try again?</p>
</div>
);
}
// user needs to create an account // user needs to create an account
const signup = async () => { const signup = async () => {
try { try {
const resp = await fetchAPI<SignupResponse>("/auth/discord/signup", "POST", { const resp = await fetchAPI<SignupResponse>(
ticket: state.ticket, "/auth/discord/signup",
username: formData.username, "POST",
invite_code: formData.invite, {
}); ticket: state.ticket,
username: formData.username,
invite_code: formData.invite,
}
);
setUser(resp.user); setUser(resp.user);
localStorage.setItem("pronouns-token", resp.token); localStorage.setItem("pronouns-token", resp.token);
@ -104,33 +128,46 @@ export default function Discord() {
} }
}; };
return <> return (
<h1 className="font-bold text-lg">Get started</h1> <>
<p>You{"'"}ve logged in with Discord as <strong className="font-bold">{state.discord}</strong>.</p> <h1 className="font-bold text-lg">Get started</h1>
<p>
You{"'"}ve logged in with Discord as{" "}
<strong className="font-bold">{state.discord}</strong>.
</p>
{state.error && ( {state.error && (
<div className="bg-red-600 dark:bg-red-700 p-2 rounded-md"> <div className="bg-red-600 dark:bg-red-700 p-2 rounded-md">
<p>Error: {state.error.message ?? state.error}</p> <p>Error: {state.error.message ?? state.error}</p>
<p>Try again?</p> <p>Try again?</p>
</div> </div>
)} )}
<label>
<span className="font-bold">Username</span>
<TextInput value={formData.username} onChange={(e) => setFormData({ ...formData, username: e.target.value })} />
</label>
{state.requireInvite && (
<label> <label>
<span className="font-bold">Invite code</span> <span className="font-bold">Username</span>
<TextInput value={formData.invite} onChange={(e) => setFormData({ ...formData, invite: e.target.value })} /> <TextInput
contrastBackground
value={formData.username}
onChange={(e) =>
setFormData({ ...formData, username: e.target.value })
}
/>
</label> </label>
)} {state.requireInvite && (
<button <label>
type="button" <span className="font-bold">Invite code</span>
onClick={() => signup()} <TextInput
className="bg-green-600 dark:bg-green-700 hover:bg-green-700 hover:dark:bg-green-800 p-2 rounded-md" contrastBackground
> value={formData.invite}
<span className="font-bold">Create account</span> onChange={(e) =>
</button> setFormData({ ...formData, invite: e.target.value })
</>; }
/>
</label>
)}
<Button style={ButtonStyle.success} onClick={() => signup()}>
Create account
</Button>
</>
);
} }

69
frontend/pages/u/[user]/index.tsx
View file

@ -11,7 +11,13 @@ import { useRecoilValue } from "recoil";
import Link from "next/link"; import Link from "next/link";
import FallbackImage from "../../../components/FallbackImage"; import FallbackImage from "../../../components/FallbackImage";
import { ReactNode } from "react"; import { ReactNode } from "react";
import { EmojiLaughing, HandThumbsDown, HandThumbsUp, HeartFill, People } from "react-bootstrap-icons"; import {
EmojiLaughing,
HandThumbsDown,
HandThumbsUp,
HeartFill,
People,
} from "react-bootstrap-icons";
interface Props { interface Props {
user: User; user: User;
@ -54,10 +60,11 @@ export default function Index({ user }: Props) {
<h1 className="text-2xl font-bold">{user.display_name}</h1> <h1 className="text-2xl font-bold">{user.display_name}</h1>
)} )}
<h3 <h3
className={`${user.display_name className={`${
? "text-xl italic text-slate-600 dark:text-slate-400" user.display_name
: "text-2xl font-bold" ? "text-xl italic text-slate-600 dark:text-slate-400"
}`} : "text-2xl font-bold"
}`}
> >
@{user.username} @{user.username}
</h3> </h3>
@ -82,12 +89,20 @@ export default function Index({ user }: Props) {
)} )}
</div> </div>
</div> </div>
{user.names?.length > 0 && <div className="border-b border-slate-200 dark:border-slate-700"> {user.names?.length > 0 && (
{user.names.map((name, index) => <NameEntry name={name} key={index} />)} <div className="border-b border-slate-200 dark:border-slate-700">
</div>} {user.names.map((name, index) => (
{user.pronouns?.length > 0 && <div className="border-b border-slate-200 dark:border-slate-700"> <NameEntry name={name} key={index} />
{user.pronouns.map((pronoun, index) => <PronounEntry pronoun={pronoun} key={index} />)} ))}
</div>} </div>
)}
{user.pronouns?.length > 0 && (
<div className="border-b border-slate-200 dark:border-slate-700">
{user.pronouns.map((pronoun, index) => (
<PronounEntry pronoun={pronoun} key={index} />
))}
</div>
)}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 py-2"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4 py-2">
{user.fields?.map((field, index) => ( {user.fields?.map((field, index) => (
<FieldCard key={index} field={field}></FieldCard> <FieldCard key={index} field={field}></FieldCard>
@ -112,30 +127,44 @@ const entryIcon = (status: WordStatus) => {
icon = <EmojiLaughing className="inline" />; icon = <EmojiLaughing className="inline" />;
break; break;
case WordStatus.FriendsOnly: case WordStatus.FriendsOnly:
icon = <People className="inline" /> icon = <People className="inline" />;
break; break;
case WordStatus.Avoid: case WordStatus.Avoid:
icon = <HandThumbsDown className="inline" /> icon = <HandThumbsDown className="inline" />;
break; break;
} }
return icon; return icon;
} };
function NameEntry(props: { name: Name }) { function NameEntry(props: { name: Name }) {
const { name } = props; const { name } = props;
return <p className={`text-lg ${name.status === WordStatus.Favourite && "font-bold"}`}> return (
{entryIcon(name.status)} {name.name} <p
</p> className={`text-lg ${
name.status === WordStatus.Favourite && "font-bold"
}`}
>
{entryIcon(name.status)} {name.name}
</p>
);
} }
function PronounEntry(props: { pronoun: Pronoun }) { function PronounEntry(props: { pronoun: Pronoun }) {
const { pronoun } = props; const { pronoun } = props;
return <p className={`text-lg ${pronoun.status === WordStatus.Favourite && "font-bold"}`}> return (
{entryIcon(pronoun.status)} {pronoun.display_text ?? pronoun.pronouns.split("/").slice(0, 2).join("/")} <p
</p> className={`text-lg ${
pronoun.status === WordStatus.Favourite && "font-bold"
}`}
>
{entryIcon(pronoun.status)}{" "}
{pronoun.display_text ??
pronoun.pronouns.split("/").slice(0, 2).join("/")}
</p>
);
} }
export const getServerSideProps: GetServerSideProps = async (context) => { export const getServerSideProps: GetServerSideProps = async (context) => {

6
frontend/sentry.client.config.js
View file

@ -2,12 +2,14 @@
// The config you add here will be used whenever a page is visited. // The config you add here will be used whenever a page is visited.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/ // https://docs.sentry.io/platforms/javascript/guides/nextjs/
import * as Sentry from '@sentry/nextjs'; import * as Sentry from "@sentry/nextjs";
const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN; const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
Sentry.init({ Sentry.init({
dsn: SENTRY_DSN || 'https://91af8c15c9cf4153aa260b7f57457d8f@o575775.ingest.sentry.io/6390139', dsn:
SENTRY_DSN ||
"https://91af8c15c9cf4153aa260b7f57457d8f@o575775.ingest.sentry.io/6390139",
// Adjust this value in production, or use tracesSampler for greater control // Adjust this value in production, or use tracesSampler for greater control
tracesSampleRate: 1.0, tracesSampleRate: 1.0,
// ... // ...

6
frontend/sentry.server.config.js
View file

@ -2,12 +2,14 @@
// The config you add here will be used whenever the server handles a request. // The config you add here will be used whenever the server handles a request.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/ // https://docs.sentry.io/platforms/javascript/guides/nextjs/
import * as Sentry from '@sentry/nextjs'; import * as Sentry from "@sentry/nextjs";
const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN; const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
Sentry.init({ Sentry.init({
dsn: SENTRY_DSN || 'https://91af8c15c9cf4153aa260b7f57457d8f@o575775.ingest.sentry.io/6390139', dsn:
SENTRY_DSN ||
"https://91af8c15c9cf4153aa260b7f57457d8f@o575775.ingest.sentry.io/6390139",
// Adjust this value in production, or use tracesSampler for greater control // Adjust this value in production, or use tracesSampler for greater control
tracesSampleRate: 1.0, tracesSampleRate: 1.0,
// ... // ...

5
frontend/yarn.lock
View file

@ -2379,6 +2379,11 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
prettier@2.7.1:
version "2.7.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
process-nextick-args@~2.0.0: process-nextick-args@~2.0.0:
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"