fix: make frontend build

This commit is contained in:
Sam 2022-11-19 03:01:20 +01:00
parent 6237ea940f
commit 08554eef38
2 changed files with 66 additions and 42 deletions

View File

@ -18,20 +18,9 @@ import {
export default function Index() { export default function Index() {
const [user, setUser] = useRecoilState(userState); const [user, setUser] = useRecoilState(userState);
const router = useRouter(); const router = useRouter();
useEffect(() => {
if (!user) {
router.push("/");
}
}, [user]);
if (!user) {
return <Loading />;
}
const [state, setState] = useState(cloneDeep(user)); const [state, setState] = useState(cloneDeep(user));
const originalOrder = state.fields const originalOrder = state?.fields
? state.fields.map((f, i) => { ? state.fields.map((f, i) => {
const field: EditField = { const field: EditField = {
id: i, id: i,
@ -60,6 +49,17 @@ export default function Index() {
: []; : [];
const [fields, setFields] = useState(cloneDeep(originalOrder)); const [fields, setFields] = useState(cloneDeep(originalOrder));
useEffect(() => {
if (!user) {
router.push("/");
}
}, [user]);
if (!user) {
return <Loading />;
}
const fieldsUpdated = !fieldsEqual(fields, originalOrder); const fieldsUpdated = !fieldsEqual(fields, originalOrder);
return ( return (

View File

@ -3,10 +3,9 @@ import { useRouter } from "next/router";
import { useRecoilState } from "recoil"; import { useRecoilState } from "recoil";
import fetchAPI from "../../lib/fetch"; import fetchAPI from "../../lib/fetch";
import { userState } from "../../lib/state"; import { userState } from "../../lib/state";
import { APIError, MeUser, SignupResponse } from "../../lib/types"; import { MeUser, SignupResponse } from "../../lib/types";
import TextInput from "../../components/TextInput"; import TextInput from "../../components/TextInput";
import Loading from "../../components/Loading"; import Loading from "../../components/Loading";
import { stat } from "fs";
import Button, { ButtonStyle } from "../../components/Button"; import Button, { ButtonStyle } from "../../components/Button";
import Notice from "../../components/Notice"; import Notice from "../../components/Notice";
@ -54,7 +53,7 @@ export default function Discord() {
if (!router.query.code || !router.query.state) { if (!router.query.code || !router.query.state) {
return; return;
} }
if (state.ticket || state.token) { if (!state.ticket && !state.token) {
return; return;
} }
@ -130,13 +129,7 @@ export default function Discord() {
}; };
return ( return (
<> <div>
<h1 className="font-bold text-lg">Get started</h1>
<p>
You{"'"}ve logged in with Discord as{" "}
<strong className="font-bold">{state.discord}</strong>.
</p>
{state.error && ( {state.error && (
<Notice style={ButtonStyle.danger} header="Create account error"> <Notice style={ButtonStyle.danger} header="Create account error">
<p>{state.error.message ?? state.error}</p> <p>{state.error.message ?? state.error}</p>
@ -144,31 +137,62 @@ export default function Discord() {
</Notice> </Notice>
)} )}
<label> <div className="border-slate-200 dark:border-slate-700 border rounded max-w-xl">
<span className="font-bold">Username</span> <div className="border-b border-slate-200 dark:border-slate-700 p-2">
<TextInput <h1 className="font-bold text-xl">Get started</h1>
contrastBackground </div>
value={formData.username} <div className="px-2 pt-2">
onChange={(e) => <p>
setFormData({ ...formData, username: e.target.value }) Just one more thing!
} <br />
/> <strong className="font-bold">{state.discord}</strong>, you need to
</label> choose a username
{state.requireInvite && ( {state.requireInvite && " and fill in an invite code"} before you
<label> create an account!
<span className="font-bold">Invite code</span> </p>
</div>
<label className="block px-2 pb-3 pt-2">
<span className="block font-bold p-2 text-slate-800 dark:text-slate-200">
Username
</span>
<TextInput <TextInput
contrastBackground contrastBackground
value={formData.invite} value={formData.username}
onChange={(e) => onChange={(e) =>
setFormData({ ...formData, invite: e.target.value }) setFormData({ ...formData, username: e.target.value })
} }
/> />
</label> </label>
)} {state.requireInvite && (
<Button style={ButtonStyle.success} onClick={() => signup()}> <label className="block px-2 pb-3 pt-2">
Create account <span className="block p-2 text-slate-800 dark:text-slate-200">
</Button> Invite code <span className="font-bold">Invite code</span>
</> <span className="font-italic">
(an existing user can give you this!)
</span>
</span>
<TextInput
contrastBackground
value={formData.invite}
onChange={(e) =>
setFormData({ ...formData, invite: e.target.value })
}
/>
</label>
)}
<div className="bg-slate-100 dark:bg-slate-700 border-t border-slate-200 dark:border-slate-700">
<span className="block p-3">
<Button style={ButtonStyle.success} onClick={() => signup()}>
Create account
</Button>
</span>
<span className="block px-3 pb-3">
<span className="font-bold">Note:</span> by clicking &quot;Create
account&quot;, you agree to the terms of service and the privacy
policy.
</span>
</div>
</div>
</div>
); );
} }