fix: fix discord login page

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",

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,49 +25,41 @@ 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<State>({
+    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<State> = async (
-  context
-) => {
-  try {
-    const resp = await fetchAPI<CallbackResponse>(
+    fetchAPI<CallbackResponse>(
       "/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) {
+      })
+    }).catch(e => {
       return {
         props: {
           hasAccount: false,
@@ -80,5 +71,16 @@ export const getServerSideProps: GetServerSideProps<State> = async (
           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</>;
 }
-};

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,20 +48,13 @@ export default function Index({ user }: Props) {
               urls={user.avatar_urls}
               alt={`@${user.username}'s avatar`}
             />
-            // eslint-disable-next-line @next/next/no-img-element
-            // <img
-            //   className="max-w-xs rounded-full"
-            //   src={user.avatar_url}
-            //   alt={`@${user.username}'s avatar`}
-            // />
           )}
           <div className="flex flex-col">
             {user.display_name && (
               <h1 className="text-2xl font-bold">{user.display_name}</h1>
             )}
             <h3
-              className={`${
-                user.display_name
+              className={`${user.display_name
                 ? "text-xl italic text-slate-600 dark:text-slate-400"
                 : "text-2xl font-bold"
                 }`}
@@ -71,7 +66,7 @@ export default function Index({ user }: Props) {
                 {user.bio}
               </ReactMarkdown>
             )}
-            {user.links?.length && user.fields?.length && (
+            {user.links?.length && (
               <div className="flex flex-col mx-auto lg:ml-auto">
                 {user.links.map((link, index) => (
                   <a
@@ -87,30 +82,62 @@ export default function Index({ user }: Props) {
             )}
           </div>
         </div>
+        {user.names?.length > 0 && <div className="border-b border-slate-200 dark:border-slate-700">
+          {user.names.map((name, index) => <NameEntry name={name} key={index} />)}
+        </div>}
+        {user.pronouns?.length > 0 && <div className="border-b border-slate-200 dark:border-slate-700">
+          {user.pronouns.map((pronoun, index) => <PronounEntry pronoun={pronoun} key={index} />)}
+        </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>
     </>
   );
 }
 
+const entryIcon = (status: WordStatus) => {
+  let icon: ReactNode;
+
+  switch (status) {
+    case WordStatus.Favourite:
+      icon = <HeartFill className="inline" />;
+      break;
+    case WordStatus.Okay:
+      icon = <HandThumbsUp className="inline" />;
+      break;
+    case WordStatus.Jokingly:
+      icon = <EmojiLaughing className="inline" />;
+      break;
+    case WordStatus.FriendsOnly:
+      icon = <People className="inline" />
+      break;
+    case WordStatus.Avoid:
+      icon = <HandThumbsDown className="inline" />
+      break;
+  }
+
+  return icon;
+}
+
+function NameEntry(props: { name: Name }) {
+  const { name } = props;
+
+  return <p className={`text-lg ${name.status === WordStatus.Favourite && "font-bold"}`}>
+    {entryIcon(name.status)} {name.name}
+  </p>
+}
+
+function PronounEntry(props: { pronoun: Pronoun }) {
+  const { pronoun } = props;
+
+  return <p className={`text-lg ${pronoun.status === WordStatus.Favourite && "font-bold"}`}>
+    {entryIcon(pronoun.status)} {pronoun.display_text ?? pronoun.pronouns.split("/").slice(0, 2).join("/")}
+  </p>
+}
+
 export const getServerSideProps: GetServerSideProps = async (context) => {
   try {
     const user = await fetchAPI<User>(`/users/${context.params!.user}`);

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"