fix: fix discord login page
This commit is contained in:
parent
ec980bc67f
commit
a67ecbf51d
4 changed files with 110 additions and 69 deletions
|
|
@ -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<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) {
|
||||
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</>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// <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
|
||||
? "text-xl italic text-slate-600 dark:text-slate-400"
|
||||
: "text-2xl font-bold"
|
||||
}`}
|
||||
className={`${user.display_name
|
||||
? "text-xl italic text-slate-600 dark:text-slate-400"
|
||||
: "text-2xl font-bold"
|
||||
}`}
|
||||
>
|
||||
@{user.username}
|
||||
</h3>
|
||||
|
|
@ -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}`);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue