FreakU
/
pronounsfu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(frontend): support new fields

This commit is contained in:
Sam 2023-03-04 23:03:30 +01:00
parent b41ca0b753
commit 66a0830ef2
No known key found for this signature in database
GPG Key ID: B4EF20DDE721CAA1
2 changed files with 51 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/components/Editable.tsx
View File

@ -12,19 +12,12 @@ import Card from "./Card";
import TextInput from "./TextInput";
import Button, { ButtonStyle } from "./Button";
import { useState } from "react";
import { WordStatus } from "../lib/api-fetch";
export interface EditField {
id: number;
name: string;
pronouns: Record<string, PronounChoice>;
}
export enum PronounChoice {
favourite,
okay,
jokingly,
friendsOnly,
avoid,
values: Array<{ value: string; status: WordStatus }>;
}
type EditableCardProps = {
@ -32,15 +25,15 @@ type EditableCardProps = {
onChangeName: React.ChangeEventHandler<HTMLInputElement>;
onChangePronoun: React.ChangeEventHandler<HTMLInputElement>;
onAddPronoun(pronoun: string): void;
onDeletePronoun(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
onDeletePronoun(e: React.MouseEvent<HTMLButtonElement>, index: number): void;
onChangeFavourite(
e: React.MouseEvent<HTMLButtonElement>,
entry: string
index: number
): void;
onChangeOkay(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
onChangeJokingly(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
onChangeFriends(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
onChangeAvoid(e: React.MouseEvent<HTMLButtonElement>, entry: string): void;
onChangeOkay(e: React.MouseEvent<HTMLButtonElement>, index: number): void;
onChangeJokingly(e: React.MouseEvent<HTMLButtonElement>, index: number): void;
onChangeFriends(e: React.MouseEvent<HTMLButtonElement>, index: number): void;
onChangeAvoid(e: React.MouseEvent<HTMLButtonElement>, index: number): void;
onClickDelete: React.MouseEventHandler<HTMLButtonElement>;
};
@ -76,21 +69,20 @@ export function EditableCard(props: EditableCardProps) {
return (
<Card title={props.field.name} draggable footer={footer}>
<ul>
{Object.keys(props.field.pronouns).map((pronoun, index) => {
const choice = props.field.pronouns[pronoun];
{props.field.values.map((value, index) => {
return (
<li className="flex justify-between my-1 items-center" key={index}>
<TextInput
value={pronoun}
prevValue={pronoun}
value={value.value}
prevValue={value.value}
onChange={props.onChangePronoun}
/>
<div className="rounded-md">
<button
type="button"
onClick={(e) => props.onChangeFavourite(e, pronoun)}
onClick={(e) => props.onChangeFavourite(e, index)}
className={`${
choice == PronounChoice.favourite
value.status == WordStatus.Favourite
? "bg-slate-500"
: "bg-slate-600"
} text-white hover:bg-slate-400 p-2`}
@ -99,9 +91,9 @@ export function EditableCard(props: EditableCardProps) {
</button>
<button
type="button"
onClick={(e) => props.onChangeOkay(e, pronoun)}
onClick={(e) => props.onChangeOkay(e, index)}
className={`${
choice == PronounChoice.okay
value.status == WordStatus.Okay
? "bg-slate-500"
: "bg-slate-600"
} text-white hover:bg-slate-400 p-2`}
@ -110,9 +102,9 @@ export function EditableCard(props: EditableCardProps) {
</button>
<button
type="button"
onClick={(e) => props.onChangeJokingly(e, pronoun)}
onClick={(e) => props.onChangeJokingly(e, index)}
className={`${
choice == PronounChoice.jokingly
value.status == WordStatus.Jokingly
? "bg-slate-500"
: "bg-slate-600"
} text-white hover:bg-slate-400 p-2`}
@ -121,9 +113,9 @@ export function EditableCard(props: EditableCardProps) {
</button>
<button
type="button"
onClick={(e) => props.onChangeFriends(e, pronoun)}
onClick={(e) => props.onChangeFriends(e, index)}
className={`${
choice == PronounChoice.friendsOnly
value.status == WordStatus.FriendsOnly
? "bg-slate-500"
: "bg-slate-600"
} text-white hover:bg-slate-400 p-2`}
@ -132,9 +124,9 @@ export function EditableCard(props: EditableCardProps) {
</button>
<button
type="button"
onClick={(e) => props.onChangeAvoid(e, pronoun)}
onClick={(e) => props.onChangeAvoid(e, index)}
className={`${
choice == PronounChoice.avoid
value.status == WordStatus.Avoid
? "bg-slate-500"
: "bg-slate-600"
} text-white hover:bg-slate-400 p-2`}
@ -143,7 +135,7 @@ export function EditableCard(props: EditableCardProps) {
</button>
<button
type="button"
onClick={(e) => props.onDeletePronoun(e, pronoun)}
onClick={(e) => props.onDeletePronoun(e, index)}
className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2"
>
<Trash3 />

94
frontend/pages/edit/profile.tsx
View File

@ -10,13 +10,9 @@ import { ReactSortable } from "react-sortablejs";
import { useRecoilState, useRecoilValue } from "recoil";
import Button, { ButtonStyle } from "../../components/Button";
import {
EditableCard,
EditField,
PronounChoice,
} from "../../components/Editable";
import { EditableCard, EditField } from "../../components/Editable";
import Loading from "../../components/Loading";
import { fetchAPI, Field, MeUser } from "../../lib/api-fetch";
import { fetchAPI, Field, MeUser, WordStatus } from "../../lib/api-fetch";
import { themeState, userState } from "../../lib/state";
import toast from "../../lib/toast";
@ -31,23 +27,11 @@ export default function Index() {
const field: EditField = {
id: i,
name: f.name,
pronouns: {},
values: [],
};
f.favourite?.forEach((val) => {
field.pronouns[val] = PronounChoice.favourite;
});
f.okay?.forEach((val) => {
field.pronouns[val] = PronounChoice.okay;
});
f.jokingly?.forEach((val) => {
field.pronouns[val] = PronounChoice.jokingly;
});
f.friends_only?.forEach((val) => {
field.pronouns[val] = PronounChoice.friendsOnly;
});
f.avoid?.forEach((val) => {
field.pronouns[val] = PronounChoice.avoid;
f.entries?.forEach((entry) => {
field.values.push(entry);
});
return field;
@ -67,7 +51,7 @@ export default function Index() {
setFields([
...fields,
{ id: lastId + 1, name: `Field #${lastId + 2}`, pronouns: {} },
{ id: lastId + 1, name: `Field #${lastId + 2}`, values: [] },
]);
};
@ -176,43 +160,43 @@ export default function Index() {
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;
const idx = field.values.findIndex((val) => val.value === prev);
if (idx !== -1) {
field.values[idx].value = e.target.value;
}
setFields([...fields]);
}}
onAddPronoun={(pronoun) => {
field.pronouns[pronoun] = PronounChoice.okay;
field.values.push({ value: pronoun, status: WordStatus.Okay });
setFields([...fields]);
}}
onDeletePronoun={(e, pronoun) => {
delete field.pronouns[pronoun];
onDeletePronoun={(e, index) => {
delete field.values[index];
setFields([...fields]);
}}
onChangeName={(e) => {
field.name = e.target.value;
setFields([...fields]);
}}
onChangeFavourite={(e, entry: string) => {
field.pronouns[entry] = PronounChoice.favourite;
onChangeFavourite={(e, index) => {
field.values[index].status = WordStatus.Favourite;
setFields([...fields]);
}}
onChangeOkay={(e, entry: string) => {
field.pronouns[entry] = PronounChoice.okay;
onChangeOkay={(e, index) => {
field.values[index].status = WordStatus.Okay;
setFields([...fields]);
}}
onChangeJokingly={(e, entry: string) => {
field.pronouns[entry] = PronounChoice.jokingly;
onChangeJokingly={(e, index) => {
field.values[index].status = WordStatus.Jokingly;
setFields([...fields]);
}}
onChangeFriends={(e, entry: string) => {
field.pronouns[entry] = PronounChoice.friendsOnly;
onChangeFriends={(e, index) => {
field.values[index].status = WordStatus.FriendsOnly;
setFields([...fields]);
}}
onChangeAvoid={(e, entry: string) => {
field.pronouns[entry] = PronounChoice.avoid;
onChangeAvoid={(e, index) => {
field.values[index].status = WordStatus.Avoid;
setFields([...fields]);
}}
onClickDelete={(_) => {
@ -233,8 +217,10 @@ function fieldsEqual(arr1: EditField[], arr2: EditField[]) {
if (!arr1.every((_, i) => arr1[i].id === arr2[i].id)) return false;
return arr1.every((_, i) =>
Object.keys(arr1[i].pronouns).every(
(val) => arr1[i].pronouns[val] === arr2[i].pronouns[val]
arr1[i].values.every(
(val, j) =>
val.value === arr2[i].values[j].value &&
val.status === arr2[i].values[j].status
)
);
}
@ -247,32 +233,10 @@ async function updateUser(args: {
const newFields = args.fields.map((editField) => {
const field: Field = {
name: editField.name,
favourite: [],
okay: [],
jokingly: [],
friends_only: [],
avoid: [],
entries: [],
};
Object.keys(editField.pronouns).forEach((pronoun) => {
switch (editField.pronouns[pronoun]) {
case PronounChoice.favourite:
field.favourite!.push(pronoun);
break;
case PronounChoice.okay:
field.okay!.push(pronoun);
break;
case PronounChoice.jokingly:
field.jokingly!.push(pronoun);
break;
case PronounChoice.friendsOnly:
field.friends_only!.push(pronoun);
break;
case PronounChoice.avoid:
field.avoid!.push(pronoun);
break;
}
});
field.entries = [...editField.values];
return field;
});