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

feat(frontend): add new field, new field entry, save buttons to edit profile page

Browse source
This commit is contained in:
Sam 2022-11-20 16:54:25 +01:00
parent 459e525415
commit e5b4f78998
4 changed files with 120 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
frontend/components/Button.tsx
View file

@ -10,6 +10,7 @@ export interface Props {
onClick?: MouseEventHandler<HTMLButtonElement>;
style?: ButtonStyle;
bold?: boolean;
noRound?: boolean;
children?: ReactNode;
}
@ -33,7 +34,9 @@ function PrimaryButton(props: Props) {
<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"
className={`bg-blue-500 dark:bg-blue-500 hover:bg-blue-700 hover:dark:bg-blue-800 p-2 ${
!props.noRound && "rounded-md"
} text-white`}
>
<span className={props.bold ? "font-bold" : ""}>{props.children}</span>
</button>
@ -45,7 +48,9 @@ function SuccessButton(props: Props) {
<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"
className={`bg-green-600 dark:bg-green-700 hover:bg-green-700 hover:dark:bg-green-800 p-2 ${
!props.noRound && "rounded-md"
} text-white`}
>
<span className={props.bold ? "font-bold" : ""}>{props.children}</span>
</button>
@ -57,7 +62,9 @@ function DangerButton(props: Props) {
<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"
className={`bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2 ${
!props.noRound && "rounded-md"
} text-white`}
>
<span className={props.bold ? "font-bold" : ""}>{props.children}</span>
</button>

26
frontend/components/Editable.tsx
View file

@ -4,12 +4,14 @@ import {
HandThumbsUp,
Heart,
People,
Plus,
Trash3,
} from "react-bootstrap-icons";
import Card from "./Card";
import TextInput from "./TextInput";
import Button, { ButtonStyle } from "./Button";
import { useState } from "react";
export interface EditField {
id: number;
@ -28,6 +30,8 @@ export enum PronounChoice {
type EditableCardProps = {
field: EditField;
onChangeName: React.ChangeEventHandler<HTMLInputElement>;
onChangePronoun: React.ChangeEventHandler<HTMLInputElement>;
onAddPronoun(pronoun: string): void;
onChangeFavourite(
e: React.MouseEvent<HTMLButtonElement>,
entry: string
@ -40,6 +44,8 @@ type EditableCardProps = {
};
export function EditableCard(props: EditableCardProps) {
const [input, setInput] = useState("");
const footer = (
<div className="flex justify-between">
<TextInput value={props.field.name} onChange={props.onChangeName} />
@ -55,8 +61,12 @@ export function EditableCard(props: EditableCardProps) {
{Object.keys(props.field.pronouns).map((pronoun, index) => {
const choice = props.field.pronouns[pronoun];
return (
<li className="flex justify-between my-1" key={index}>
<div>{pronoun}</div>
<li className="flex justify-between my-1 items-center" key={index}>
<TextInput
value={pronoun}
prevValue={pronoun}
onChange={props.onChangePronoun}
/>
<div className="rounded-md">
<button
type="button"
@ -123,6 +133,18 @@ export function EditableCard(props: EditableCardProps) {
</li>
);
})}
<li className="flex justify-between my-1 items-center">
<TextInput value={input} onChange={(e) => setInput(e.target.value)} />
<Button
style={ButtonStyle.success}
onClick={() => {
props.onAddPronoun(input);
setInput("");
}}
>
<Plus aria-hidden className="inline" /> Add
</Button>
</li>
</ul>
</Card>
);

2
frontend/components/TextInput.tsx
View file

@ -2,6 +2,7 @@ import { ChangeEventHandler } from "react";
export type Props = {
contrastBackground?: boolean;
prevValue?: string;
defaultValue?: string;
value?: string;
onChange?: ChangeEventHandler<HTMLInputElement>;
@ -15,6 +16,7 @@ export default function TextInput(props: Props) {
return (
<input
type="text"
data-prev-value={props.prevValue ?? props.value}
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}

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

@ -1,13 +1,12 @@
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useRecoilState } from "recoil";
import { useRecoilState, useRecoilValue } 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";
import Card from "../../components/Card";
import {
EditableCard,
@ -15,8 +14,11 @@ import {
PronounChoice,
} from "../../components/Editable";
import Button, { ButtonStyle } from "../../components/Button";
import { Plus, Save, Trash } from "react-bootstrap-icons";
export default function Index() {
const [user, setUser] = useRecoilState(userState);
const user = useRecoilValue(userState);
const router = useRouter();
const [state, setState] = useState(cloneDeep(user));
@ -49,6 +51,16 @@ export default function Index() {
: [];
const [fields, setFields] = useState(cloneDeep(originalOrder));
const resetFields = () => {
setFields(cloneDeep(originalOrder));
};
const addField = () => {
if (fields.length >= 25) return;
const lastId = fields[fields.length - 1]?.id ?? 0;
setFields([...fields, { id: lastId + 1, name: "", pronouns: {} }]);
};
useEffect(() => {
if (!user) {
@ -61,11 +73,53 @@ export default function Index() {
}
const fieldsUpdated = !fieldsEqual(fields, originalOrder);
const isEdited = fieldsUpdated;
return (
<div className="container mx-auto">
<h1 className="p-2 border-b border-slate-300 dark:border-slate-600 flex items-center justify-between">
<span className="text-3xl">Editing your profile</span>
{isEdited && (
<Button
style={ButtonStyle.success}
onClick={() =>
updateUser({
displayName: state!.display_name,
bio: state!.bio,
fields,
})
}
>
<Save aria-hidden className="inline" /> Save changes
</Button>
)}
</h1>
<div>{`fieldsUpdated: ${fieldsUpdated}`}</div>
{/* @ts-ignore: This component isn't updated to have a "children" prop yet, but it accepts it just fine. */}
<h3 className="p-2 border-b border-slate-300 dark:border-slate-600 flex items-center justify-between">
<span className="text-xl">Fields</span>
<div className="inline">
<Button
noRound
style={ButtonStyle.success}
onClick={() => addField()}
>
{" "}
<Plus aria-hidden className="inline" />
Add field
</Button>
{fieldsUpdated && (
<Button
noRound
style={ButtonStyle.danger}
onClick={() => resetFields()}
>
<Trash aria-hidden className="inline" />
Reset fields
</Button>
)}
</div>
</h3>
<ReactSortable
handle=".handle"
list={fields}
@ -76,6 +130,22 @@ export default function Index() {
<EditableCard
key={i}
field={field}
onChangePronoun={(e) => {
const prev =
e.target.attributes.getNamedItem("data-prev-value")?.value;
if (!prev || !e.target.value) return;
const choice = field.pronouns[prev];
delete field.pronouns[prev];
field.pronouns[e.target.value] = choice;
setFields([...fields]);
}}
onAddPronoun={(pronoun) => {
field.pronouns[pronoun] = PronounChoice.okay;
setFields([...fields]);
}}
onChangeName={(e) => {
field.name = e.target.value;
setFields([...fields]);
@ -125,8 +195,8 @@ function fieldsEqual(arr1: EditField[], arr2: EditField[]) {
}
async function updateUser(args: {
displayName: string;
bio: string;
displayName: string | null;
bio: string | null;
fields: EditField[];
}) {
const newFields = args.fields.map((editField) => {
@ -139,22 +209,22 @@ async function updateUser(args: {
avoid: [],
};
Object.keys(editField).forEach((pronoun) => {
Object.keys(editField.pronouns).forEach((pronoun) => {
switch (editField.pronouns[pronoun]) {
case PronounChoice.favourite:
field.favourite?.push(pronoun);
field.favourite!.push(pronoun);
break;
case PronounChoice.okay:
field.okay?.push(pronoun);
field.okay!.push(pronoun);
break;
case PronounChoice.jokingly:
field.jokingly?.push(pronoun);
field.jokingly!.push(pronoun);
break;
case PronounChoice.friendsOnly:
field.friends_only?.push(pronoun);
field.friends_only!.push(pronoun);
break;
case PronounChoice.avoid:
field.avoid?.push(pronoun);
field.avoid!.push(pronoun);
break;
}
});
@ -163,8 +233,8 @@ async function updateUser(args: {
});
return await fetchAPI<MeUser>("/users/@me", "PATCH", {
display_name: args.displayName,
bio: args.bio,
display_name: args.displayName ?? null,
bio: args.bio ?? null,
fields: newFields,
});
}