feat(frontend): incomplete port to next.js
This commit is contained in:
Sam
parent
b9c30379ee
commit
eec01dc070
50 changed files with 2874 additions and 3163 deletions
|
|
@ -1,14 +0,0 @@
|
|||
import { Link } from "react-router-dom";
|
||||
|
||||
export type Props = {
|
||||
to: string;
|
||||
children?: React.ReactNode;
|
||||
};
|
||||
|
||||
export default function BlueLink({ to, children }: Props) {
|
||||
return (
|
||||
<Link to={to} className="hover:underline text-sky-500 dark:text-sky-400">
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import React, { ReactNode } from "react";
|
||||
|
||||
export type Props = {
|
||||
children?: ReactNode | undefined;
|
||||
title: string;
|
||||
draggable?: boolean;
|
||||
footer?: ReactNode | undefined;
|
||||
};
|
||||
|
||||
export default function Card({ title, draggable, children, footer }: 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${
|
||||
draggable && " handle hover:cursor-grab"
|
||||
}`}
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
<div className="flex flex-col p-2">{children}</div>
|
||||
{footer && (
|
||||
<div className="p-2 border-t border-zinc-200 dark:border-slate-800">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
export default function Container(props: React.PropsWithChildren<{}>) {
|
||||
return <div className="m-2 lg:m-4">{props.children}</div>;
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
import {
|
||||
HeartFill,
|
||||
HandThumbsUp,
|
||||
HandThumbsDown,
|
||||
People,
|
||||
EmojiLaughing,
|
||||
} from "react-bootstrap-icons";
|
||||
import BlueLink from "./BlueLink";
|
||||
|
||||
import Card from "./Card";
|
||||
import type { Field } from "./types";
|
||||
|
||||
function linkPronoun(input: string) {
|
||||
if (input.includes(" ") || input.split("/").length !== 5)
|
||||
return <span>{input}</span>;
|
||||
|
||||
const [sub, obj, possDet, possPro, reflexive] = input.split("/");
|
||||
|
||||
return (
|
||||
<BlueLink to={`/pronouns/${sub}/${obj}/${possDet}/${possPro}/${reflexive}`}>
|
||||
{sub}/{obj}/{possDet}
|
||||
</BlueLink>
|
||||
);
|
||||
}
|
||||
|
||||
export default function FieldCard({
|
||||
field,
|
||||
draggable,
|
||||
}: {
|
||||
field: Field;
|
||||
draggable?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<Card title={field.name} draggable={draggable}>
|
||||
{field.favourite.map((entry) => (
|
||||
<p className="text-lg font-bold">
|
||||
<HeartFill className="inline" /> {linkPronoun(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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { ThreeDots } from "react-bootstrap-icons";
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="flex flex-col pt-32 items-center">
|
||||
<ThreeDots size={64} className="animate-bounce" aria-hidden="true" />
|
||||
<span className="font-bold text-xl">Loading...</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import { ReactNode, PropsWithChildren } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export interface Props {
|
||||
children?: ReactNode | undefined;
|
||||
to: string;
|
||||
plain?: boolean | undefined; // Do not wrap in <li></li>
|
||||
}
|
||||
|
||||
export default function NavItem(props: Props) {
|
||||
const ret = <Link
|
||||
className="hover:text-sky-500 dark:hover:text-sky-400"
|
||||
to={props.to}
|
||||
>
|
||||
{props.children}
|
||||
</Link>
|
||||
|
||||
if (props.plain) {
|
||||
return ret
|
||||
}
|
||||
return <li>{ret}</li>;
|
||||
}
|
||||
|
|
@ -1,123 +0,0 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { MoonStars, Sun, List } from "react-bootstrap-icons";
|
||||
|
||||
import NavItem from "./NavItem";
|
||||
import Logo from "./logo";
|
||||
import { useRecoilState } from "recoil";
|
||||
import { userState } from "./store";
|
||||
import fetchAPI from "./fetch";
|
||||
import { APIError, ErrorCode, MeUser } from "./types";
|
||||
|
||||
function Navigation() {
|
||||
const [user, setUser] = useRecoilState(userState);
|
||||
|
||||
useEffect(() => {
|
||||
if (user) return;
|
||||
|
||||
fetchAPI<MeUser>("/users/@me").then(
|
||||
(res) => setUser(res),
|
||||
(err) => {
|
||||
console.log("fetching /users/@me", err);
|
||||
if (
|
||||
(err as APIError).code == ErrorCode.InvalidToken ||
|
||||
(err as APIError).code == ErrorCode.Forbidden
|
||||
) {
|
||||
localStorage.removeItem("pronouns-token");
|
||||
}
|
||||
}
|
||||
);
|
||||
}, []);
|
||||
|
||||
const [darkTheme, setDarkTheme] = useState<boolean>(
|
||||
localStorage.theme === "dark" ||
|
||||
(!("theme" in localStorage) &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||||
);
|
||||
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
|
||||
if (darkTheme) {
|
||||
document.documentElement.classList.add("dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
}
|
||||
|
||||
const storeTheme = (useDarkTheme: boolean | null) => {
|
||||
if (useDarkTheme === null) {
|
||||
localStorage.removeItem("theme");
|
||||
} else {
|
||||
localStorage.setItem("theme", useDarkTheme ? "dark" : "light");
|
||||
}
|
||||
};
|
||||
|
||||
const nav = user ? (
|
||||
<>
|
||||
<NavItem to={`/u/${user.username}`}>@{user.username}</NavItem>
|
||||
<NavItem to="/settings">Settings</NavItem>
|
||||
<NavItem to="/logout">Log out</NavItem>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<NavItem to="/login">Log in</NavItem>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-white/75 dark:bg-slate-800/75 w-full backdrop-blur border-slate-200 dark:border-slate-700 border-b">
|
||||
<div className="max-w-8xl mx-auto">
|
||||
<div className="py-4 mx-4">
|
||||
<div className="flex items-center">
|
||||
<Link to="/">
|
||||
<Logo />
|
||||
</Link>
|
||||
<div className="ml-auto flex items-center">
|
||||
<nav className="hidden lg:flex">
|
||||
<ul className="flex space-x-4 font-bold">{nav}</ul>
|
||||
</nav>
|
||||
<div className="flex border-l border-slate-200 ml-4 pl-4 lg:ml-6 lg:pl-6 lg:mr-2 dark:border-slate-700 space-x-2 lg:space-x-4">
|
||||
<div
|
||||
onClick={() => {
|
||||
setDarkTheme(!darkTheme);
|
||||
storeTheme(!darkTheme);
|
||||
}}
|
||||
title={
|
||||
darkTheme ? "Switch to light mode" : "Switch to dark mode"
|
||||
}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{darkTheme ? (
|
||||
<Sun className="hover:text-sky-400" size={24} />
|
||||
) : (
|
||||
<MoonStars size={24} className="hover:text-sky-500" />
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setShowMenu(!showMenu)}
|
||||
title="Show menu"
|
||||
className="cursor-pointer flex lg:hidden"
|
||||
>
|
||||
<List
|
||||
className="dark:hover:text-sky-400 hover:text-sky-500"
|
||||
size={24}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
className={`lg:hidden p-4 border-slate-200 dark:border-slate-700 border-b ${
|
||||
showMenu ? "flex" : "hidden"
|
||||
}`}
|
||||
>
|
||||
<ul className="flex flex-col space-y-4 font-bold">{nav}</ul>
|
||||
</nav>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navigation;
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { ChangeEventHandler } from "react";
|
||||
|
||||
export type Props = {
|
||||
defaultValue?: string;
|
||||
value?: string;
|
||||
onChange?: ChangeEventHandler<HTMLInputElement>;
|
||||
};
|
||||
|
||||
export default function TextInput(props: Props) {
|
||||
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"
|
||||
defaultValue={props.defaultValue}
|
||||
value={props.value}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import axios from "axios";
|
||||
import type { APIError } from "./types";
|
||||
|
||||
export default async function fetchAPI<T>(
|
||||
path: string,
|
||||
method = "GET",
|
||||
body: any = null
|
||||
) {
|
||||
let headers = {};
|
||||
const token = localStorage.getItem("pronouns-token");
|
||||
if (token) {
|
||||
headers = {
|
||||
Authorization: token,
|
||||
};
|
||||
}
|
||||
|
||||
const resp = await fetch(`/api/v1${path}`, {
|
||||
method,
|
||||
headers: {
|
||||
...headers,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: body ? JSON.stringify(body) : null,
|
||||
});
|
||||
|
||||
const data = await resp.json();
|
||||
if (resp.status !== 200) throw data as APIError;
|
||||
return data as T;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -1,34 +0,0 @@
|
|||
import axios from "axios";
|
||||
import { atom, useRecoilState, useRecoilValue } from "recoil";
|
||||
import fetchAPI from "./fetch";
|
||||
import { APIError, ErrorCode, MeUser } from "./types";
|
||||
|
||||
export const userState = atom<MeUser>({
|
||||
key: "userState",
|
||||
default: getCurrentUser(),
|
||||
});
|
||||
|
||||
async function getCurrentUser() {
|
||||
const token = localStorage.getItem("pronouns-token");
|
||||
if (!token) return null;
|
||||
|
||||
try {
|
||||
return await fetchAPI<MeUser>("/users/@me");
|
||||
} catch (e) {
|
||||
if (
|
||||
(e as APIError).code === ErrorCode.Forbidden ||
|
||||
(e as APIError).code === ErrorCode.InvalidToken
|
||||
) {
|
||||
localStorage.removeItem("pronouns-token");
|
||||
}
|
||||
|
||||
console.log("Error fetching /users/@me:", e);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export function isMeUser(id: string): boolean {
|
||||
const meUser = useRecoilValue(userState);
|
||||
return meUser && meUser.id === id;
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
export interface MeUser extends User {
|
||||
avatar_source: string | null;
|
||||
discord: string | null;
|
||||
discord_username: string | null;
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: string;
|
||||
username: string;
|
||||
display_name: string | null;
|
||||
bio: string | null;
|
||||
avatar_url: string | null;
|
||||
links: string[] | null;
|
||||
members: PartialMember[];
|
||||
fields: Field[];
|
||||
}
|
||||
|
||||
export interface PartialMember {
|
||||
id: string;
|
||||
name: string;
|
||||
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;
|
||||
details?: string;
|
||||
}
|
||||
|
||||
export enum ErrorCode {
|
||||
BadRequest = 400,
|
||||
Forbidden = 403,
|
||||
InternalServerError = 500,
|
||||
|
||||
InvalidState = 1001,
|
||||
InvalidOAuthCode = 1002,
|
||||
InvalidToken = 1003,
|
||||
|
||||
UserNotFound = 2001,
|
||||
}
|
||||
|
||||
export interface SignupRequest {
|
||||
username: string;
|
||||
ticket: string;
|
||||
invite_code?: string;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue