feat: add working user page
This commit is contained in:
Sam
parent
7daac080f5
commit
206feb21b8
6 changed files with 155 additions and 28 deletions
44
frontend/src/lib/FieldCard.tsx
Normal file
44
frontend/src/lib/FieldCard.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import {
|
||||
HeartFill,
|
||||
HandThumbsUp,
|
||||
HandThumbsDown,
|
||||
People,
|
||||
EmojiLaughing,
|
||||
} from "react-bootstrap-icons";
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
14
frontend/src/lib/fetch.ts
Normal file
14
frontend/src/lib/fetch.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import axios from "axios";
|
||||
import type { APIError } from "./types";
|
||||
|
||||
export default async function fetchAPI<T>(path: string) {
|
||||
const resp = await axios.get<T | APIError>(`/api/v1${path}`, {
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("pronouns-token"),
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
if (resp.status !== 200) throw resp.data as APIError;
|
||||
|
||||
return resp.data as T;
|
||||
}
|
||||
|
|
@ -1,11 +1,5 @@
|
|||
export interface MeUser {
|
||||
id: string;
|
||||
username: string;
|
||||
display_name: string | null;
|
||||
bio: string | null;
|
||||
avatar_source: string | null;
|
||||
avatar_url: string | null;
|
||||
links: string[] | null;
|
||||
discord: string | null;
|
||||
discord_username: string | null;
|
||||
}
|
||||
|
|
@ -15,9 +9,10 @@ export interface User {
|
|||
username: string;
|
||||
display_name: string | null;
|
||||
bio: string | null;
|
||||
avatar_source: string | null;
|
||||
avatar_url: string | null;
|
||||
links: string[] | null;
|
||||
members: PartialMember[];
|
||||
fields: Field[];
|
||||
}
|
||||
|
||||
export interface PartialMember {
|
||||
|
|
@ -26,6 +21,15 @@ export interface PartialMember {
|
|||
avatar_url: string | null;
|
||||
}
|
||||
|
||||
export interface Field {
|
||||
name: string;
|
||||
favourite: string[] | null;
|
||||
okay: string[] | null;
|
||||
jokingly: string[] | null;
|
||||
friends_only: string[] | null;
|
||||
avoid: string[] | null;
|
||||
}
|
||||
|
||||
export interface APIError {
|
||||
code: ErrorCode;
|
||||
message?: string;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,12 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { ArrowClockwise } from "react-bootstrap-icons";
|
||||
import { selectorFamily, useRecoilValue } from "recoil";
|
||||
import axios from "axios";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import { Helmet } from "react-helmet";
|
||||
|
||||
import type { APIError, User } from "../lib/types";
|
||||
|
||||
const userPageState = selectorFamily({
|
||||
key: "userPageState",
|
||||
get: (username: string) => async () => {
|
||||
const res = await axios.get(`/api/v1/users/${username}`);
|
||||
if (res.status !== 200) {
|
||||
throw res.data as APIError;
|
||||
}
|
||||
|
||||
return res.data as User;
|
||||
},
|
||||
});
|
||||
import fetchAPI from "../lib/fetch";
|
||||
import FieldCard from "../lib/FieldCard";
|
||||
|
||||
function UserPage() {
|
||||
const params = useParams();
|
||||
|
|
@ -23,10 +14,8 @@ function UserPage() {
|
|||
const [user, setUser] = useState<User>(null);
|
||||
|
||||
useEffect(() => {
|
||||
axios.get(`/api/v1/users/${params.username}`).then((res) => {
|
||||
if (res.status !== 200) throw res.data as APIError;
|
||||
|
||||
setUser(res.data as User);
|
||||
fetchAPI<User>(`/users/${params.username}`).then((res) => {
|
||||
setUser(res);
|
||||
});
|
||||
}, []);
|
||||
|
||||
|
|
@ -41,9 +30,56 @@ function UserPage() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-xl font-bold">
|
||||
{user.username} ({user.id})
|
||||
</h1>
|
||||
<Helmet>
|
||||
<title>@{user.username} - pronouns.cc</title>
|
||||
</Helmet>
|
||||
<div className="container mx-auto">
|
||||
<div className="flex flex-col lg:flex-row justify-center lg:justify-start items-center space-y-4 lg:space-y-0 lg:space-x-16 lg:items-start">
|
||||
{user.avatar_url && (
|
||||
<img
|
||||
className="max-w-max lg:max-w-lg rounded-full"
|
||||
src={user.avatar_url}
|
||||
/>
|
||||
)}
|
||||
<div className="flex flex-col lg:mx-auto">
|
||||
{user.display_name && (
|
||||
<h1 className="text-2xl font-bold">{user.display_name}</h1>
|
||||
)}
|
||||
<h3
|
||||
className={`${
|
||||
user.display_name
|
||||
? "text-xl italic text-slate-600 dark:text-slate-400"
|
||||
: "text-2xl font-bold"
|
||||
}`}
|
||||
>
|
||||
@{user.username}
|
||||
</h3>
|
||||
{user.bio && (
|
||||
<ReactMarkdown className="prose dark:prose-invert prose-slate">
|
||||
{user.bio}
|
||||
</ReactMarkdown>
|
||||
)}
|
||||
{user.links.length !== 0 && (
|
||||
<div className="flex flex-col mx-auto lg:ml-auto">
|
||||
{user.links.map((link) => (
|
||||
<a
|
||||
href={link}
|
||||
rel="nofollow noopener noreferrer me"
|
||||
className="hover:underline text-sky-500 dark:text-sky-400"
|
||||
>
|
||||
{link}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 py-2">
|
||||
{user.fields.map((field) => (
|
||||
<FieldCard field={field}></FieldCard>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,10 +10,12 @@
|
|||
"dependencies": {
|
||||
"@sentry/react": "^6.19.7",
|
||||
"@sentry/tracing": "^6.19.7",
|
||||
"@types/react-helmet": "^6.1.5",
|
||||
"axios": "^0.27.2",
|
||||
"react": "^18.0.0",
|
||||
"react-bootstrap-icons": "^1.8.2",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-markdown": "^8.0.3",
|
||||
"react-router-dom": "6",
|
||||
"recoil": "^0.7.2"
|
||||
|
|
|
|||
27
yarn.lock
27
yarn.lock
|
|
@ -430,6 +430,13 @@
|
|||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-helmet@^6.1.5":
|
||||
version "6.1.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.5.tgz#35f89a6b1646ee2bc342a33a9a6c8777933f9083"
|
||||
integrity sha512-/ICuy7OHZxR0YCAZLNg9r7I9aijWUWvxaPR6uTuyxe8tAj5RL4Sw1+R6NhXUtOsarkGYPmaHdBDvuXh2DIN/uA==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react@*", "@types/react@^18.0.0":
|
||||
version "18.0.8"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.8.tgz#a051eb380a9fbcaa404550543c58e1cf5ce4ab87"
|
||||
|
|
@ -1472,6 +1479,21 @@ react-dom@^18.0.0:
|
|||
loose-envify "^1.1.0"
|
||||
scheduler "^0.22.0"
|
||||
|
||||
react-fast-compare@^3.1.1:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
|
||||
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
|
||||
|
||||
react-helmet@^6.1.0:
|
||||
version "6.1.0"
|
||||
resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
|
||||
integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
|
||||
dependencies:
|
||||
object-assign "^4.1.1"
|
||||
prop-types "^15.7.2"
|
||||
react-fast-compare "^3.1.1"
|
||||
react-side-effect "^2.1.0"
|
||||
|
||||
react-is@^16.13.1, react-is@^16.7.0:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
|
|
@ -1523,6 +1545,11 @@ react-router@6.3.0:
|
|||
dependencies:
|
||||
history "^5.2.0"
|
||||
|
||||
react-side-effect@^2.1.0:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
|
||||
integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
|
||||
|
||||
react@^18.0.0:
|
||||
version "18.1.0"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue