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

feat(frontend): add /u/[user]

This commit is contained in:
Sam 2022-08-17 03:04:06 +02:00
parent eec01dc070
commit 36b7d26723
9 changed files with 222 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/components/BlueLink.tsx Normal file
View File

@ -0,0 +1,14 @@
import Link from "next/link";
export type Props = {
to: string;
children?: React.ReactNode;
};
export default function BlueLink({ to, children }: Props) {
return (
<Link href={to} className="hover:underline text-sky-500 dark:text-sky-400">
{children}
</Link>
);
}

28
frontend/components/Card.tsx Normal file
View File

@ -0,0 +1,28 @@
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>
);
}

64
frontend/components/FieldCard.tsx Normal file
View File

@ -0,0 +1,64 @@
import {
HeartFill,
HandThumbsUp,
HandThumbsDown,
People,
EmojiLaughing,
} from "react-bootstrap-icons";
import BlueLink from "./BlueLink";
import Card from "./Card";
import type { Field } from "../lib/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}`}>
<span>
{sub}/{obj}/{possDet}
</span>
</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" key={entry}>
<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>
);
}

4
frontend/components/Navigation.tsx
View File

@ -72,8 +72,10 @@ export default function Navigation() {
<div className="max-w-8xl mx-auto">
<div className="py-4 mx-4">
<div className="flex items-center">
<Link href="/">
<Link href="/" passHref>
<a>
<Logo />
</a>
</Link>
<div className="ml-auto flex items-center">
<nav className="hidden lg:flex">

8
frontend/lib/fetch.ts
View File

@ -1,19 +1,23 @@
import type { APIError } from "./types";
const apiBase = process.env.API_BASE ?? "http://localhost:8080";
export default async function fetchAPI<T>(
path: string,
method = "GET",
body: any = null
) {
let headers = {};
const token = localStorage.getItem("pronouns-token");
const token =
typeof localStorage !== "undefined" &&
localStorage.getItem("pronouns-token");
if (token) {
headers = {
Authorization: token,
};
}
const resp = await fetch(`/api/v1${path}`, {
const resp = await fetch(`${apiBase}/v1${path}`, {
method,
headers: {
...headers,

12
frontend/next.config.js
View File

@ -2,6 +2,14 @@
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
}
async rewrites() {
return [
{
source: "/api/:path*",
destination: "http://localhost:8080/:path*", // Proxy to Backend
},
];
},
};
module.exports = nextConfig
module.exports = nextConfig;

4
frontend/pages/_app.tsx
View File

@ -3,10 +3,14 @@ import type { AppProps } from "next/app";
import Container from "../components/Container";
import Navigation from "../components/Navigation";
import { RecoilRoot } from "recoil";
import Head from "next/head";
function MyApp({ Component, pageProps }: AppProps) {
return (
<RecoilRoot>
<Head>
<title key="title">pronouns.cc</title>
</Head>
<Navigation />
<Container>
<Component {...pageProps} />

13
frontend/pages/api/hello.ts
View File

@ -1,13 +0,0 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'
type Data = {
name: string
}
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
res.status(200).json({ name: 'John Doe' })
}

92
frontend/pages/u/[user]/index.tsx Normal file
View File

@ -0,0 +1,92 @@
import { GetServerSideProps } from "next";
import Head from "next/head";
import fetchAPI from "../../../lib/fetch";
import { User } from "../../../lib/types";
import FieldCard from "../../../components/FieldCard";
import Card from "../../../components/Card";
import ReactMarkdown from "react-markdown";
interface Props {
user: User;
}
export default function Index({ user }: Props) {
return (
<>
<Head>
<title key="title">@{user.username} - pronouns.cc</title>
</Head>
<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 const getServerSideProps: GetServerSideProps = async (context) => {
try {
const user = await fetchAPI<User>(`/users/${context.params!.user}`);
return { props: { user } };
} catch (e) {
console.log(e);
return { notFound: true };
}
};