diff --git a/frontend/package.json b/frontend/package.json index 18f44f2..9c5b32b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -9,6 +9,8 @@ }, "dependencies": { "@sentry/nextjs": "^7.13.0", + "@types/lodash": "^4.14.189", + "lodash": "^4.17.21", "next": "12.2.2", "react": "18.2.0", "react-bootstrap-icons": "^1.8.4", diff --git a/frontend/pages/login/discord.tsx b/frontend/pages/login/discord.tsx index 4a85a6c..a55f647 100644 --- a/frontend/pages/login/discord.tsx +++ b/frontend/pages/login/discord.tsx @@ -1,6 +1,5 @@ -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { useRouter } from "next/router"; -import { GetServerSideProps } from "next"; import { useRecoilState } from "recoil"; import fetchAPI from "../../lib/fetch"; import { userState } from "../../lib/state"; @@ -26,59 +25,62 @@ interface State { error?: any; } -export default function Discord(props: State) { +export default function Discord() { const router = useRouter(); const [user, setUser] = useRecoilState(userState); + const [state, setState] = useState({ + hasAccount: false, + isLoading: false, + token: null, + user: null, + discord: null, + ticket: null, + error: null, + }); useEffect(() => { - // we got a token + user, save it and return to the home page - if (props.token) { - localStorage.setItem("pronouns-token", props.token); - setUser(props.user!); + if (!router.query.code || !router.query.state) { return; } - router.push("/"); - } - }, [props.token, props.user, setUser, router]); - - return <>wow such login; -} - -export const getServerSideProps: GetServerSideProps = async ( - context -) => { - try { - const resp = await fetchAPI( + fetchAPI( "/auth/discord/callback", "POST", { - callback_domain: process.env.DOMAIN, - code: context.query.code, - state: context.query.state, + callback_domain: window.location.origin, + code: router.query.code, + state: router.query.state, } - ); - - return { - props: { + ).then(resp => { + setState({ hasAccount: resp.has_account, isLoading: false, token: resp.token || null, user: resp.user || null, discord: resp.discord || null, ticket: resp.ticket || null, - }, - }; - } catch (e: any) { - return { - props: { - hasAccount: false, - isLoading: false, - error: e, - token: null, - user: null, - discord: null, - ticket: null, - }, - }; - } -}; + }) + }).catch(e => { + return { + props: { + hasAccount: false, + isLoading: false, + error: e, + token: null, + user: null, + discord: null, + ticket: null, + }, + }; + }) + + // we got a token + user, save it and return to the home page + if (state.token) { + window.localStorage.setItem("pronouns-token", state.token); + setUser(state.user!); + + router.push("/"); + } + }, [state.token, state.user, setState, router]); + + return <>wow such login; +} diff --git a/frontend/pages/u/[user]/index.tsx b/frontend/pages/u/[user]/index.tsx index 263c895..42e8126 100644 --- a/frontend/pages/u/[user]/index.tsx +++ b/frontend/pages/u/[user]/index.tsx @@ -1,7 +1,7 @@ import { GetServerSideProps } from "next"; import Head from "next/head"; import fetchAPI from "../../../lib/fetch"; -import { User } from "../../../lib/types"; +import { Name, Pronoun, User, WordStatus } from "../../../lib/types"; import FieldCard from "../../../components/FieldCard"; import Card from "../../../components/Card"; import ReactMarkdown from "react-markdown"; @@ -10,6 +10,8 @@ import { userState } from "../../../lib/state"; import { useRecoilValue } from "recoil"; import Link from "next/link"; import FallbackImage from "../../../components/FallbackImage"; +import { ReactNode } from "react"; +import { EmojiLaughing, HandThumbsDown, HandThumbsUp, HeartFill, People } from "react-bootstrap-icons"; interface Props { user: User; @@ -46,23 +48,16 @@ export default function Index({ user }: Props) { urls={user.avatar_urls} alt={`@${user.username}'s avatar`} /> - // eslint-disable-next-line @next/next/no-img-element - // {`@${user.username}'s )}
{user.display_name && (

{user.display_name}

)}

@{user.username}

@@ -71,7 +66,7 @@ export default function Index({ user }: Props) { {user.bio} )} - {user.links?.length && user.fields?.length && ( + {user.links?.length && (
{user.links.map((link, index) => (
+ {user.names?.length > 0 &&
+ {user.names.map((name, index) => )} +
} + {user.pronouns?.length > 0 &&
+ {user.pronouns.map((pronoun, index) => )} +
}
); } +const entryIcon = (status: WordStatus) => { + let icon: ReactNode; + + switch (status) { + case WordStatus.Favourite: + icon = ; + break; + case WordStatus.Okay: + icon = ; + break; + case WordStatus.Jokingly: + icon = ; + break; + case WordStatus.FriendsOnly: + icon = + break; + case WordStatus.Avoid: + icon = + break; + } + + return icon; +} + +function NameEntry(props: { name: Name }) { + const { name } = props; + + return

+ {entryIcon(name.status)} {name.name} +

+} + +function PronounEntry(props: { pronoun: Pronoun }) { + const { pronoun } = props; + + return

+ {entryIcon(pronoun.status)} {pronoun.display_text ?? pronoun.pronouns.split("/").slice(0, 2).join("/")} +

+} + export const getServerSideProps: GetServerSideProps = async (context) => { try { const user = await fetchAPI(`/users/${context.params!.user}`); diff --git a/frontend/yarn.lock b/frontend/yarn.lock index ed77e2f..ed55887 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -333,6 +333,11 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== +"@types/lodash@^4.14.189": + version "4.14.189" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.189.tgz#975ff8c38da5ae58b751127b19ad5e44b5b7f6d2" + integrity sha512-kb9/98N6X8gyME9Cf7YaqIMvYGnBSWqEci6tiettE6iJWH1XdJz/PO8LB0GtLCG7x8dU3KWhZT+lA1a35127tA== + "@types/mdast@^3.0.0": version "3.0.10" resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af" @@ -1740,6 +1745,11 @@ lodash.merge@^4.6.2: resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== +lodash@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== + loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"