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>
);
}

27
frontend/components/Editable.tsx
View file

@ -9,6 +9,7 @@ import {
import Card from "./Card";
import TextInput from "./TextInput";
import Button, { ButtonStyle } from "./Button";
export interface EditField {
id: number;
@ -42,14 +43,9 @@ export function EditableCard(props: EditableCardProps) {
const footer = (
<div className="flex justify-between">
<TextInput value={props.field.name} onChange={props.onChangeName} />
<button
type="button"
onClick={props.onClickDelete}
className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2 rounded-md"
>
<Trash3 aria-hidden className="inline" />{" "}
<span className="font-bold">Delete</span>
</button>
<Button style={ButtonStyle.danger} onClick={props.onClickDelete}>
<Trash3 aria-hidden className="inline" /> Delete
</Button>
</div>
);
@ -65,7 +61,8 @@ export function EditableCard(props: EditableCardProps) {
<button
type="button"
onClick={(e) => props.onChangeFavourite(e, pronoun)}
className={`${choice == PronounChoice.favourite
className={`${
choice == PronounChoice.favourite
? "bg-slate-500"
: "bg-slate-600"
} hover:bg-slate-400 p-2`}
@ -75,7 +72,8 @@ export function EditableCard(props: EditableCardProps) {
<button
type="button"
onClick={(e) => props.onChangeOkay(e, pronoun)}
className={`${choice == PronounChoice.okay
className={`${
choice == PronounChoice.okay
? "bg-slate-500"
: "bg-slate-600"
} hover:bg-slate-400 p-2`}
@ -85,7 +83,8 @@ export function EditableCard(props: EditableCardProps) {
<button
type="button"
onClick={(e) => props.onChangeJokingly(e, pronoun)}
className={`${choice == PronounChoice.jokingly
className={`${
choice == PronounChoice.jokingly
? "bg-slate-500"
: "bg-slate-600"
} hover:bg-slate-400 p-2`}
@ -95,7 +94,8 @@ export function EditableCard(props: EditableCardProps) {
<button
type="button"
onClick={(e) => props.onChangeFriends(e, pronoun)}
className={`${choice == PronounChoice.friendsOnly
className={`${
choice == PronounChoice.friendsOnly
? "bg-slate-500"
: "bg-slate-600"
} hover:bg-slate-400 p-2`}
@ -105,7 +105,8 @@ export function EditableCard(props: EditableCardProps) {
<button
type="button"
onClick={(e) => props.onChangeAvoid(e, pronoun)}
className={`${choice == PronounChoice.avoid
className={`${
choice == PronounChoice.avoid
? "bg-slate-500"
: "bg-slate-600"
} hover:bg-slate-400 p-2`}

7
frontend/components/TextInput.tsx
View file

@ -1,16 +1,21 @@
import { ChangeEventHandler } from "react";
export type Props = {
contrastBackground?: boolean;
defaultValue?: string;
value?: string;
onChange?: ChangeEventHandler<HTMLInputElement>;
};
export default function TextInput(props: Props) {
const bg = props.contrastBackground
? "bg-slate-50 dark:bg-slate-700"
: "bg-white dark:bg-slate-800";
return (
<input
type="text"
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"
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 {
BadRequest = 400,
Forbidden = 403,
NotFound = 404,
MethodNotAllowed = 405,
TooManyRequests = 429,
InternalServerError = 500,
InvalidState = 1001,
InvalidOAuthCode = 1002,
InvalidToken = 1003,
InviteRequired = 1004,
InvalidTicket = 1005,
InvalidUsername = 1006,
UsernameTaken = 1007,
InvitesDisabled = 1008,
InviteLimitReached = 1009,
InviteAlreadyUsed = 1010,
UserNotFound = 2001,
MemberNotFound = 3001,
MemberLimitReached = 3002,
RequestTooBig = 4001,
}
export interface SignupRequest {

1
frontend/package.json
View file

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

8
frontend/pages/_error.js
View file

@ -16,10 +16,10 @@
* - https://reactjs.org/docs/error-boundaries.html
*/
import * as Sentry from '@sentry/nextjs';
import NextErrorComponent from 'next/error';
import * as Sentry from "@sentry/nextjs";
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
// compensate for https://github.com/vercel/next.js/issues/8592
// Sentry.captureUnderscoreErrorException(props);
@ -27,7 +27,7 @@ const CustomErrorComponent = props => {
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
// time to send the error before the lambda exits
await Sentry.captureUnderscoreErrorException(contextData);

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

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

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

@ -9,7 +9,11 @@ import cloneDeep from "lodash/cloneDeep";
import { ReactSortable } from "react-sortablejs";
import Card from "../../components/Card";
import { EditableCard, EditField, PronounChoice } from "../../components/Editable";
import {
EditableCard,
EditField,
PronounChoice,
} from "../../components/Editable";
export default function Index() {
const [user, setUser] = useRecoilState(userState);
@ -19,7 +23,7 @@ export default function Index() {
if (!user) {
router.push("/");
}
}, [user])
}, [user]);
if (!user) {
return <Loading />;
@ -27,7 +31,8 @@ export default function Index() {
const [state, setState] = useState(cloneDeep(user));
const originalOrder = state.fields ? state.fields.map((f, i) => {
const originalOrder = state.fields
? state.fields.map((f, i) => {
const field: EditField = {
id: i,
name: f.name,
@ -51,7 +56,8 @@ export default function Index() {
});
return field;
}) : [];
})
: [];
const [fields, setFields] = useState(cloneDeep(originalOrder));
const fieldsUpdated = !fieldsEqual(fields, originalOrder);

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

@ -5,6 +5,9 @@ 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 { stat } from "fs";
import Button, { ButtonStyle } from "../../components/Button";
interface CallbackResponse {
has_account: boolean;
@ -41,20 +44,25 @@ export default function Discord() {
error: null,
requireInvite: false,
});
const [formData, setFormData] = useState<{ username: string, invite: string }>({ username: "", invite: "" });
const [formData, setFormData] = useState<{
username: string;
invite: string;
}>({ username: "", invite: "" });
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>(
"/auth/discord/callback",
"POST",
{
fetchAPI<CallbackResponse>("/auth/discord/callback", "POST", {
callback_domain: window.location.origin,
code: router.query.code,
state: router.query.state,
}
).then(resp => {
})
.then((resp) => {
setState({
hasAccount: resp.has_account,
isLoading: false,
@ -63,8 +71,9 @@ export default function Discord() {
discord: resp.discord || null,
ticket: resp.ticket || null,
requireInvite: resp.require_invite,
});
})
}).catch(e => {
.catch((e) => {
setState({
hasAccount: false,
isLoading: false,
@ -75,7 +84,7 @@ export default function Discord() {
ticket: null,
requireInvite: false,
});
})
});
// we got a token + user, save it and return to the home page
if (state.token) {
@ -86,14 +95,29 @@ export default function Discord() {
}
}, [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
const signup = async () => {
try {
const resp = await fetchAPI<SignupResponse>("/auth/discord/signup", "POST", {
const resp = await fetchAPI<SignupResponse>(
"/auth/discord/signup",
"POST",
{
ticket: state.ticket,
username: formData.username,
invite_code: formData.invite,
});
}
);
setUser(resp.user);
localStorage.setItem("pronouns-token", resp.token);
@ -104,9 +128,13 @@ 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>
<p>
You{"'"}ve logged in with Discord as{" "}
<strong className="font-bold">{state.discord}</strong>.
</p>
{state.error && (
<div className="bg-red-600 dark:bg-red-700 p-2 rounded-md">
@ -117,20 +145,29 @@ export default function Discord() {
<label>
<span className="font-bold">Username</span>
<TextInput value={formData.username} onChange={(e) => setFormData({ ...formData, username: e.target.value })} />
<TextInput
contrastBackground
value={formData.username}
onChange={(e) =>
setFormData({ ...formData, username: e.target.value })
}
/>
</label>
{state.requireInvite && (
<label>
<span className="font-bold">Invite code</span>
<TextInput value={formData.invite} onChange={(e) => setFormData({ ...formData, invite: e.target.value })} />
<TextInput
contrastBackground
value={formData.invite}
onChange={(e) =>
setFormData({ ...formData, invite: e.target.value })
}
/>
</label>
)}
<button
type="button"
onClick={() => signup()}
className="bg-green-600 dark:bg-green-700 hover:bg-green-700 hover:dark:bg-green-800 p-2 rounded-md"
>
<span className="font-bold">Create account</span>
</button>
</>;
<Button style={ButtonStyle.success} onClick={() => signup()}>
Create account
</Button>
</>
);
}

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

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

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.
// 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;
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
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.
// 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;
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
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"
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:
version "2.0.1"
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"