-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(client): move some pages away from getServerSideProps
- Loading branch information
Ivo
committed
Apr 23, 2023
1 parent
78f63cf
commit 9b03c48
Showing
8 changed files
with
193 additions
and
122 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,100 @@ | ||
import { useEffect, useState } from "react"; | ||
import { SubmitHandler, useForm } from "react-hook-form"; | ||
import { zodResolver } from "@hookform/resolvers/zod"; | ||
import { Lock, LogIn, UserPlus } from "lucide-react"; | ||
import { useRouter } from "next/router"; | ||
import { signIn, useSession } from "next-auth/react"; | ||
import { useTranslation } from "next-i18next"; | ||
|
||
import { Button } from "@app/components/Button"; | ||
import { TextButton } from "@app/components/Button/Text"; | ||
import { Input } from "@app/components/Input"; | ||
import { Spinner } from "@app/components/Spinner"; | ||
import { | ||
AuthFormSchema, | ||
AuthFormSchemaType | ||
} from "@app/schemas/components/auth/auth.zod"; | ||
|
||
export function SignInForm() { | ||
const { t } = useTranslation(["signin"]); | ||
const { status } = useSession(); | ||
const [isAuthenticating, setIsAuthenticating] = useState(false); | ||
const { | ||
register, | ||
reset, | ||
formState: { errors }, | ||
handleSubmit | ||
} = useForm<AuthFormSchemaType>({ | ||
resolver: zodResolver(AuthFormSchema) | ||
}); | ||
const router = useRouter(); | ||
|
||
useEffect(() => { | ||
if (status === "authenticated") { | ||
router.push("/my-dynamics"); | ||
} | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
}, [status]); | ||
|
||
const handleAuth: SubmitHandler<AuthFormSchemaType> = async ({ | ||
identifier, | ||
password | ||
}) => { | ||
setIsAuthenticating(true); | ||
signIn("credentials", { | ||
identifier, | ||
password, | ||
redirect: false | ||
}) | ||
.then(() => reset()) | ||
.finally(() => setIsAuthenticating(false)); | ||
}; | ||
|
||
return ( | ||
<form | ||
className="flex flex-col gap-y-2.5 lg:mx-auto lg:w-1/2" | ||
onSubmit={handleSubmit(handleAuth)} | ||
> | ||
<Input | ||
error={errors.identifier} | ||
label={t("navigation:forms.identifier.title")} | ||
placeholder={t("navigation:forms.identifier.placeholder")} | ||
{...register("identifier")} | ||
/> | ||
<Input | ||
error={errors.password} | ||
label={t("navigation:forms.password.title")} | ||
placeholder={t("navigation:forms.password.placeholder")} | ||
type="password" | ||
{...register("password")} | ||
/> | ||
<Button | ||
disabled={isAuthenticating} | ||
LeftIcon={!isAuthenticating ? LogIn : undefined} | ||
type="submit" | ||
> | ||
{isAuthenticating ? <Spinner /> : null} | ||
{t("navigation:forms.submit")} | ||
</Button> | ||
<div className="flex gap-x-2"> | ||
<TextButton | ||
className="text-sm" | ||
iconClassName="h-4 w-4" | ||
LeftIcon={Lock} | ||
type="button" | ||
> | ||
{t("navigation:forms.lost-password")} | ||
</TextButton> | ||
<TextButton | ||
className="text-sm" | ||
iconClassName="h-4 w-4" | ||
LeftIcon={UserPlus} | ||
onClick={() => router.push("/register")} | ||
type="button" | ||
> | ||
{t("navigation:forms.new-user")} | ||
</TextButton> | ||
</div> | ||
</form> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import { GetStaticPropsContext, GetStaticPropsResult } from "next"; | ||
import { serverSideTranslations } from "next-i18next/serverSideTranslations"; | ||
|
||
type IncomingGSP<P> = (ctx: GetStaticPropsContext) => Promise<P>; | ||
|
||
type WithSPTranslationsPropsResult = GetStaticPropsResult<{ | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
[key: string]: any; | ||
}>; | ||
|
||
type WithSPTranslationsOptions = { | ||
namespaces: string[]; | ||
// any options you eventually would like to pass (required role...) | ||
}; | ||
|
||
export function withSPTranslations( | ||
incomingGSP?: IncomingGSP<WithSPTranslationsPropsResult> | null, | ||
options?: WithSPTranslationsOptions | ||
) { | ||
return async ( | ||
ctx: GetStaticPropsContext | ||
): Promise<WithSPTranslationsPropsResult> => { | ||
const namespaces = options ? options.namespaces : []; | ||
|
||
if (incomingGSP) { | ||
const incomingGSPResult = await incomingGSP(ctx); | ||
|
||
if ("props" in incomingGSPResult) { | ||
return { | ||
props: { | ||
...incomingGSPResult.props, | ||
...(await serverSideTranslations(ctx.locale ?? "en-US", [ | ||
"common", | ||
"navigation", | ||
...namespaces | ||
])) | ||
} | ||
}; | ||
} | ||
|
||
if ("redirect" in incomingGSPResult) { | ||
return { redirect: { ...incomingGSPResult.redirect } }; | ||
} | ||
|
||
if ("notFound" in incomingGSPResult) { | ||
return { notFound: incomingGSPResult.notFound }; | ||
} | ||
} | ||
|
||
return { | ||
props: { | ||
...(await serverSideTranslations(ctx.locale ?? "en-US", [ | ||
"common", | ||
"navigation", | ||
...namespaces | ||
])) | ||
} | ||
}; | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters