fix: fix discord login page

This commit is contained in:
Sam 2022-11-17 17:33:59 +01:00
parent ec980bc67f
commit a67ecbf51d
4 changed files with 110 additions and 69 deletions

View File

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

View File

@ -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</>;
}
};

View File

@ -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}`);

View File

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