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

feat: add /users/@me endpoint, add edit button to profile page

Browse source
This commit is contained in:
Sam 2022-05-13 16:43:28 +02:00
parent d2f4e09a01
commit 15797b679c
8 changed files with 115 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/lib/Card.tsx Normal file
View file

@ -0,0 +1,14 @@
import React, { PropsWithChildren } from "react";
export type Props = PropsWithChildren<{ title: string }>;
export default function Card({ title, children }: Props) {
return (
<div className="bg-slate-100 dark:bg-slate-700 rounded-md shadow">
<h1 className="text-2xl p-2 border-b border-zinc-200 dark:border-slate-800">
{title}
</h1>
<div className="flex flex-col p-2">{children}</div>
</div>
);
}

58
frontend/src/lib/FieldCard.tsx
View file

@ -6,39 +6,37 @@ import {
EmojiLaughing,
} from "react-bootstrap-icons";
import Card from "./Card";
import type { Field } from "./types";
export default function FieldCard({ field }: { field: Field }) {
return (
<div className=" bg-slate-100 dark:bg-slate-700 rounded-md shadow">
<h1 className="text-2xl p-2 border-b border-zinc-200 dark:border-slate-800">{field.name}</h1>
<div className="flex flex-col p-2">
{field.favourite.map((entry) => (
<p className="text-lg font-bold">
<HeartFill className="inline" /> {entry}
</p>
))}
{field.okay.length !== 0 && (
<p>
<HandThumbsUp className="inline" /> {field.okay.join(", ")}
</p>
)}
{field.jokingly.length !== 0 && (
<p>
<EmojiLaughing className="inline" /> {field.jokingly.join(", ")}
</p>
)}
{field.friends_only.length !== 0 && (
<p>
<People className="inline" /> {field.friends_only.join(", ")}
</p>
)}
{field.avoid.length !== 0 && (
<p className="text-slate-600 dark:text-slate-400">
<HandThumbsDown className="inline" /> {field.avoid.join(", ")}
</p>
)}
</div>
</div>
<Card title={field.name}>
{field.favourite.map((entry) => (
<p className="text-lg font-bold">
<HeartFill className="inline" /> {entry}
</p>
))}
{field.okay.length !== 0 && (
<p>
<HandThumbsUp className="inline" /> {field.okay.join(", ")}
</p>
)}
{field.jokingly.length !== 0 && (
<p>
<EmojiLaughing className="inline" /> {field.jokingly.join(", ")}
</p>
)}
{field.friends_only.length !== 0 && (
<p>
<People className="inline" /> {field.friends_only.join(", ")}
</p>
)}
{field.avoid.length !== 0 && (
<p className="text-slate-600 dark:text-slate-400">
<HandThumbsDown className="inline" /> {field.avoid.join(", ")}
</p>
)}
</Card>
);
}

2
frontend/src/lib/Navigation.tsx
View file

@ -45,7 +45,7 @@ function Navigation() {
const nav = user ? (
<>
<NavItem to="/me">@{user.username}</NavItem>
<NavItem to={`/u/${user.username}`}>@{user.username}</NavItem>
<NavItem to="/settings">Settings</NavItem>
<NavItem to="/logout">Log out</NavItem>
</>

5
frontend/src/lib/store.ts
View file

@ -27,3 +27,8 @@ async function getCurrentUser() {
return null;
}
export function isMeUser(id: string): boolean {
const meUser = useRecoilValue(userState);
return meUser && meUser.id === id;
}