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,42 +0,0 @@
|
|||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: calc(10px + 2vmin);
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import { Routes, Route } from "react-router-dom";
|
||||
import "./App.css";
|
||||
import Container from "./lib/Container";
|
||||
import Navigation from "./lib/Navigation";
|
||||
import EditMe from "./pages/EditMe";
|
||||
import Home from "./pages/Home";
|
||||
import Discord from "./pages/login/Discord";
|
||||
import Login from "./pages/login/Login";
|
||||
import User from "./pages/User";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<Navigation />
|
||||
<Container>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/u/:username" element={<User />} />
|
||||
<Route path="/u/:username/:member" element={<User />} />
|
||||
<Route path="/edit" element={<EditMe />} />
|
||||
<Route path="/edit/:member" element={<EditMe />} />
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/login/discord" element={<Discord />} />
|
||||
</Routes>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.5 47.5" style="enable-background:new 0 0 47.5 47.5;" xml:space="preserve" version="1.1" id="svg2"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"><path id="path18" d="M 0,38 38,38 38,0 0,0 0,38 Z"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,47.5)" id="g10"><g id="g12"><g clip-path="url(#clipPath16)" id="g14"><g transform="translate(35.3467,20.1069)" id="g20"><path id="path22" style="fill:#aa8ed6;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 -8.899,3.294 -3.323,10.891 c -0.128,0.42 -0.516,0.708 -0.956,0.708 -0.439,0 -0.828,-0.288 -0.956,-0.708 L -17.456,3.294 -26.356,0 c -0.393,-0.146 -0.653,-0.52 -0.653,-0.938 0,-0.418 0.26,-0.793 0.653,-0.937 l 8.896,-3.293 3.323,-11.223 c 0.126,-0.425 0.516,-0.716 0.959,-0.716 0.443,0 0.833,0.291 0.959,0.716 l 3.324,11.223 8.896,3.293 c 0.392,0.144 0.652,0.519 0.652,0.937 C 0.653,-0.52 0.393,-0.146 0,0"/></g><g transform="translate(15.3472,9.1064)" id="g24"><path id="path26" style="fill:#fcab40;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 -2.313,0.856 -0.9,3.3 c -0.119,0.436 -0.514,0.738 -0.965,0.738 -0.451,0 -0.846,-0.302 -0.965,-0.738 l -0.9,-3.3 L -8.356,0 c -0.393,-0.145 -0.653,-0.52 -0.653,-0.937 0,-0.418 0.26,-0.793 0.653,-0.938 l 2.301,-0.853 0.907,-3.622 c 0.111,-0.444 0.511,-0.756 0.97,-0.756 0.458,0 0.858,0.312 0.97,0.756 L -2.301,-2.728 0,-1.875 c 0.393,0.145 0.653,0.52 0.653,0.938 C 0.653,-0.52 0.393,-0.145 0,0"/></g><g transform="translate(11.0093,30.769)" id="g28"><path id="path30" style="fill:#5dadec;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 -2.365,0.875 -3.24,3.24 c -0.146,0.393 -0.52,0.653 -0.938,0.653 -0.419,0 -0.793,-0.26 -0.938,-0.653 L -5.992,0.875 -8.356,0 c -0.393,-0.146 -0.653,-0.52 -0.653,-0.938 0,-0.418 0.26,-0.792 0.653,-0.938 l 2.364,-0.875 0.876,-2.365 c 0.145,-0.393 0.519,-0.653 0.938,-0.653 0.418,0 0.792,0.26 0.938,0.653 L -2.365,-2.751 0,-1.876 c 0.393,0.146 0.653,0.52 0.653,0.938 C 0.653,-0.52 0.393,-0.146 0,0"/></g></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 2.4 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { RecoilRoot } from "recoil";
|
||||
import * as Sentry from "@sentry/react";
|
||||
import { BrowserTracing } from "@sentry/tracing";
|
||||
|
||||
import App from "./App";
|
||||
import "./index.css";
|
||||
|
||||
if (import.meta.env.VITE_SENTRY_DSN) {
|
||||
Sentry.init({
|
||||
dsn: import.meta.env.VITE_SENTRY_DSN,
|
||||
integrations: [new BrowserTracing()],
|
||||
|
||||
tracesSampleRate: 1.0,
|
||||
});
|
||||
}
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<RecoilRoot>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</RecoilRoot>
|
||||
);
|
||||
|
|
@ -1,295 +0,0 @@
|
|||
import cloneDeep from "lodash/cloneDeep";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { ReactSortable } from "react-sortablejs";
|
||||
import { useRecoilValue } from "recoil";
|
||||
import {
|
||||
EmojiLaughing,
|
||||
HandThumbsDown,
|
||||
HandThumbsUp,
|
||||
Heart,
|
||||
People,
|
||||
Trash3,
|
||||
} from "react-bootstrap-icons";
|
||||
|
||||
import { userState } from "../lib/store";
|
||||
import Loading from "../lib/Loading";
|
||||
import Card from "../lib/Card";
|
||||
import TextInput from "../lib/TextInput";
|
||||
import fetchAPI from "../lib/fetch";
|
||||
import { MeUser, Field } from "../lib/types";
|
||||
|
||||
interface EditField {
|
||||
id: number;
|
||||
name: string;
|
||||
pronouns: Record<string, PronounChoice>;
|
||||
}
|
||||
|
||||
enum PronounChoice {
|
||||
favourite,
|
||||
okay,
|
||||
jokingly,
|
||||
friendsOnly,
|
||||
avoid,
|
||||
}
|
||||
|
||||
function fieldsEqual(arr1: EditField[], arr2: EditField[]) {
|
||||
if (arr1?.length !== arr2?.length) return false;
|
||||
|
||||
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]
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
async function updateUser(args: {
|
||||
displayName: string;
|
||||
bio: string;
|
||||
fields: EditField[];
|
||||
}) {
|
||||
const newFields = args.fields.map((editField) => {
|
||||
const field: Field = {
|
||||
name: editField.name,
|
||||
favourite: [],
|
||||
okay: [],
|
||||
jokingly: [],
|
||||
friends_only: [],
|
||||
avoid: [],
|
||||
};
|
||||
|
||||
Object.keys(editField).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;
|
||||
}
|
||||
});
|
||||
|
||||
return field;
|
||||
});
|
||||
|
||||
return await fetchAPI<MeUser>("/users/@me", "PATCH", {
|
||||
display_name: args.displayName,
|
||||
bio: args.bio,
|
||||
fields: newFields,
|
||||
});
|
||||
}
|
||||
|
||||
export default function EditMe() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const meUser = useRecoilValue(userState);
|
||||
|
||||
useEffect(() => {
|
||||
if (!meUser) {
|
||||
navigate("/");
|
||||
}
|
||||
});
|
||||
if (!meUser) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
const [state, setState] = useState(cloneDeep(meUser));
|
||||
// convert all fields to EditFields
|
||||
const originalOrder = state.fields.map((f, i) => {
|
||||
const field: EditField = {
|
||||
id: i,
|
||||
name: f.name,
|
||||
pronouns: {},
|
||||
};
|
||||
|
||||
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;
|
||||
});
|
||||
|
||||
return field;
|
||||
});
|
||||
|
||||
const [fields, setFields] = useState(cloneDeep(originalOrder));
|
||||
const fieldsUpdated = !fieldsEqual(fields, originalOrder);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto">
|
||||
<div>{`fieldsUpdated: ${fieldsUpdated}`}</div>
|
||||
{/* @ts-ignore: This component isn't updated to have a "children" prop yet, but it accepts it just fine. */}
|
||||
<ReactSortable
|
||||
handle=".handle"
|
||||
list={fields}
|
||||
setList={setFields}
|
||||
className="grid grid-cols-1 xl:grid-cols-2 gap-4 py-2"
|
||||
>
|
||||
{fields.map((field, i) => (
|
||||
<EditableCard
|
||||
key={i}
|
||||
field={field}
|
||||
onChangeName={(e) => {
|
||||
field.name = e.target.value;
|
||||
setFields([...fields]);
|
||||
}}
|
||||
onChangeFavourite={(e, entry: string) => {
|
||||
field.pronouns[entry] = PronounChoice.favourite;
|
||||
setFields([...fields]);
|
||||
}}
|
||||
onChangeOkay={(e, entry: string) => {
|
||||
field.pronouns[entry] = PronounChoice.okay;
|
||||
setFields([...fields]);
|
||||
}}
|
||||
onChangeJokingly={(e, entry: string) => {
|
||||
field.pronouns[entry] = PronounChoice.jokingly;
|
||||
setFields([...fields]);
|
||||
}}
|
||||
onChangeFriends={(e, entry: string) => {
|
||||
field.pronouns[entry] = PronounChoice.friendsOnly;
|
||||
setFields([...fields]);
|
||||
}}
|
||||
onChangeAvoid={(e, entry: string) => {
|
||||
field.pronouns[entry] = PronounChoice.avoid;
|
||||
setFields([...fields]);
|
||||
}}
|
||||
onClickDelete={(_) => {
|
||||
const newFields = [...fields];
|
||||
newFields.splice(i, 1);
|
||||
setFields(newFields);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</ReactSortable>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type EditableCardProps = {
|
||||
field: EditField;
|
||||
onChangeName: React.ChangeEventHandler<HTMLInputElement>;
|
||||
onChangeFavourite(
|
||||
e: React.MouseEvent<HTMLButtonElement>,
|
||||
entry: string
|
||||
): 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;
|
||||
onClickDelete: React.MouseEventHandler<HTMLButtonElement>;
|
||||
};
|
||||
|
||||
function EditableCard(props: EditableCardProps) {
|
||||
const footer = (
|
||||
<div className="flex justify-between">
|
||||
<TextInput value={props.field.name} onChange={props.onChangeName} />
|
||||
<button
|
||||
type="button"
|
||||
onClick={props.onClickDelete}
|
||||
className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2 rounded-md"
|
||||
>
|
||||
<Trash3 aria-hidden className="inline" />{" "}
|
||||
<span className="font-bold">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Card title={props.field.name} draggable footer={footer}>
|
||||
<ul>
|
||||
{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>
|
||||
<div className="rounded-md">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => props.onChangeFavourite(e, pronoun)}
|
||||
className={`${
|
||||
choice == PronounChoice.favourite
|
||||
? "bg-slate-500"
|
||||
: "bg-slate-600"
|
||||
} hover:bg-slate-400 p-2`}
|
||||
>
|
||||
<Heart />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => props.onChangeOkay(e, pronoun)}
|
||||
className={`${
|
||||
choice == PronounChoice.okay
|
||||
? "bg-slate-500"
|
||||
: "bg-slate-600"
|
||||
} hover:bg-slate-400 p-2`}
|
||||
>
|
||||
<HandThumbsUp />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => props.onChangeJokingly(e, pronoun)}
|
||||
className={`${
|
||||
choice == PronounChoice.jokingly
|
||||
? "bg-slate-500"
|
||||
: "bg-slate-600"
|
||||
} hover:bg-slate-400 p-2`}
|
||||
>
|
||||
<EmojiLaughing />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => props.onChangeFriends(e, pronoun)}
|
||||
className={`${
|
||||
choice == PronounChoice.friendsOnly
|
||||
? "bg-slate-500"
|
||||
: "bg-slate-600"
|
||||
} hover:bg-slate-400 p-2`}
|
||||
>
|
||||
<People />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => props.onChangeAvoid(e, pronoun)}
|
||||
className={`${
|
||||
choice == PronounChoice.avoid
|
||||
? "bg-slate-500"
|
||||
: "bg-slate-600"
|
||||
} hover:bg-slate-400 p-2`}
|
||||
>
|
||||
<HandThumbsDown />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2"
|
||||
>
|
||||
<Trash3 />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
// this is a temporary home page, which is why the markdown content is embedded
|
||||
const md = `This will (one day) be a site to create pronoun cards for yourself,
|
||||
similarly to [Pronouny](https://pronouny.xyz/) and [Pronouns.page](https://en.pronouns.page/).
|
||||
|
||||
You'll be able to create multiple profiles that are linked together,
|
||||
useful for plurality ([what?](https://morethanone.info/)) and kin, or even just for fun!
|
||||
|
||||
For now though, there's just this landing page <3
|
||||
(And no, the "Log in" button doesn't do anything either.)
|
||||
|
||||
Check out the (work in progress) source code on [Codeberg](https://codeberg.org/u1f320/pronouns.cc)!`;
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<div className="prose prose-slate dark:prose-invert">
|
||||
<ReactMarkdown>{md}</ReactMarkdown>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { ArrowClockwise } from "react-bootstrap-icons";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import { Helmet } from "react-helmet";
|
||||
|
||||
import type { User } from "../lib/types";
|
||||
import fetchAPI from "../lib/fetch";
|
||||
import FieldCard from "../lib/FieldCard";
|
||||
import Card from "../lib/Card";
|
||||
import { userState } from "../lib/store";
|
||||
import { useRecoilValue } from "recoil";
|
||||
import Loading from "../lib/Loading";
|
||||
|
||||
function UserPage() {
|
||||
const params = useParams();
|
||||
|
||||
const [user, setUser] = useState<User>(null);
|
||||
const meUser = useRecoilValue(userState);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAPI<User>(`/users/${params.username}`).then((res) => {
|
||||
setUser(res);
|
||||
});
|
||||
}, [params.username]);
|
||||
|
||||
if (user == null) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>@{user.username} - pronouns.cc</title>
|
||||
</Helmet>
|
||||
{meUser && meUser.id === user.id && (
|
||||
<div className="lg:w-1/3 mx-auto bg-slate-100 dark:bg-slate-700 shadow rounded-md p-2">
|
||||
<span>
|
||||
You are currently viewing your{" "}
|
||||
<span className="font-bold">public</span> profile.
|
||||
</span>
|
||||
<br />
|
||||
<Link
|
||||
to="/edit"
|
||||
className="hover:underline text-sky-500 dark:text-sky-400"
|
||||
>
|
||||
Edit your profile
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
<div className="container mx-auto">
|
||||
<div className="flex flex-col m-2 p-2 lg:flex-row justify-center lg:justify-start items-center space-y-4 lg:space-y-0 lg:space-x-16 lg:items-start border-b border-slate-200 dark:border-slate-700">
|
||||
{user.avatar_url && (
|
||||
<img className="max-w-xs rounded-full" src={user.avatar_url} />
|
||||
)}
|
||||
<div className="flex flex-col">
|
||||
{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 && user.fields?.length && (
|
||||
<div className="flex flex-col mx-auto lg:ml-auto">
|
||||
{user.links.map((link, index) => (
|
||||
<a
|
||||
key={index}
|
||||
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, index) => (
|
||||
<FieldCard key={index} field={field}></FieldCard>
|
||||
))}
|
||||
{user.links?.length && (
|
||||
<Card title="Links">
|
||||
{user.links.map((link, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href={link}
|
||||
rel="nofollow noopener noreferrer me"
|
||||
className="hover:underline text-sky-500 dark:text-sky-400"
|
||||
>
|
||||
{link}
|
||||
</a>
|
||||
))}
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserPage;
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useRecoilState } from "recoil";
|
||||
import fetchAPI from "../../lib/fetch";
|
||||
import Loading from "../../lib/Loading";
|
||||
import { userState } from "../../lib/store";
|
||||
import { MeUser } from "../../lib/types";
|
||||
|
||||
interface CallbackResponse {
|
||||
has_account: boolean;
|
||||
token?: string;
|
||||
user?: MeUser;
|
||||
|
||||
discord?: string;
|
||||
ticket?: string;
|
||||
require_invite?: boolean;
|
||||
}
|
||||
|
||||
export default function Discord() {
|
||||
const navigate = useNavigate();
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
|
||||
const [state, setState] = useState({
|
||||
hasAccount: false,
|
||||
isLoading: false,
|
||||
token: null,
|
||||
user: null,
|
||||
discord: null,
|
||||
ticket: null,
|
||||
error: null,
|
||||
});
|
||||
|
||||
const [user, setUser] = useRecoilState(userState);
|
||||
|
||||
useEffect(() => {
|
||||
if (state.isLoading) return;
|
||||
setState({ ...state, isLoading: true });
|
||||
|
||||
fetchAPI<CallbackResponse>("/auth/discord/callback", "POST", {
|
||||
callback_domain: window.location.origin,
|
||||
code: params.get("code"),
|
||||
state: params.get("state"),
|
||||
}).then(
|
||||
(resp) => {
|
||||
setState({
|
||||
hasAccount: resp.has_account,
|
||||
isLoading: false,
|
||||
token: resp.token,
|
||||
user: resp.user,
|
||||
discord: resp.discord,
|
||||
ticket: resp.ticket,
|
||||
error: null,
|
||||
});
|
||||
|
||||
console.log("token:", resp.token);
|
||||
localStorage.setItem("pronouns-token", resp.token);
|
||||
|
||||
setUser(resp.user);
|
||||
},
|
||||
(err) => {
|
||||
console.log(err);
|
||||
setState({ ...state, error: err, isLoading: false });
|
||||
}
|
||||
);
|
||||
}, []);
|
||||
|
||||
if (user) {
|
||||
// we got a token + user, save it and return to the home page
|
||||
navigate("/");
|
||||
}
|
||||
|
||||
if (user || state.isLoading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
return <>wow such login</>;
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useRecoilValue } from "recoil";
|
||||
import fetchAPI from "../../lib/fetch";
|
||||
import Loading from "../../lib/Loading";
|
||||
import { userState } from "../../lib/store";
|
||||
|
||||
interface URLsResponse {
|
||||
discord: string;
|
||||
}
|
||||
|
||||
export default function Login() {
|
||||
const [state, setState] = useState({
|
||||
loading: false,
|
||||
error: null,
|
||||
discord: "",
|
||||
});
|
||||
|
||||
if (useRecoilValue(userState) !== null) {
|
||||
const nav = useNavigate();
|
||||
nav("/");
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (state.loading) return;
|
||||
setState({ ...state, loading: true });
|
||||
|
||||
fetchAPI<URLsResponse>("/auth/urls", "POST", {
|
||||
callback_domain: window.location.origin,
|
||||
}).then(
|
||||
(resp) => {
|
||||
setState({ loading: false, error: null, discord: resp.discord });
|
||||
},
|
||||
(err) => {
|
||||
console.log(err);
|
||||
setState({ ...state, loading: false, error: err });
|
||||
}
|
||||
);
|
||||
}, []);
|
||||
|
||||
if (state.loading) {
|
||||
return <Loading />;
|
||||
} else if (state.error) {
|
||||
return <>Error: {`${state.error}`}</>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<a href={state.discord}>Login with Discord</a>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue