fix: fix discord login page

2022-11-17 17:33:59 +01:00 · 2022-11-17 17:33:59 +01:00 · a67ecbf51d
parent ec980bc67f
commit a67ecbf51d
4 changed files with 110 additions and 69 deletions
--- 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",
--- 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,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</>;
+}
--- 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,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}`);
--- 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"