Skip to content

Instantly share code, notes, and snippets.

@florianwalther-private
Last active March 7, 2023 02:33
Show Gist options
  • Save florianwalther-private/351a6151e0514b1f16fa777d62939328 to your computer and use it in GitHub Desktop.
Save florianwalther-private/351a6151e0514b1f16fa777d62939328 to your computer and use it in GitHub Desktop.
_app.tsx structure
interface AppContext {
showLoginModal: () => void,
showTooManyRequestsMessage: () => void,
}
export const AppContext = createContext<AppContext>({
showLoginModal: () => { throw new Error("Context not implemented") },
showTooManyRequestsMessage: () => { throw new Error("Context not implemented") },
});
const inter = Inter({ subsets: ["latin"] });
export default function App({ Component, pageProps }: AppProps) {
const router = useRouter();
const [showSignUpModal, setShowSignUpModal] = useState(false);
const [showLoginModal, setShowLoginModal] = useState(false);
const [showResetPasswordModal, setShowResetPasswordModal] = useState(false);
const { user } = useAuthenticatedUser();
useEffect(() => {
if (user && !user.username && !router.asPath.startsWith("/onboarding")) {
router.push("/onboarding?returnTo=" + encodeURIComponent(router.asPath));
}
}, [user, router]);
const [contextProviderObject] = useState({
showLoginModal: () => setShowLoginModal(true),
showTooManyRequestsMessage: () => alert("You're trying to often. Please wait a bit"),
});
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Example App</title>
<meta name="description" content="A full-stack NextJS app" />
<link rel="icon" href="/favicon.ico" />
<meta property="og:image" key="og:image" content="https://mywebsite.co /images/social_media_preview_image.png" />
<meta name="twitter:card" content="summary_large_image" />
</Head>
<SSRProvider>
<AppContext.Provider value={contextProviderObject}>
<div className={inter.className}>
<NextNProgress
color='#21FA90'
showOnShallow={false}
/>
<NavBar
onSignUpClicked={() => setShowSignUpModal(true)}
onLoginClicked={() => setShowLoginModal(true)}
/>
<main> {/* Okay because next/Head moves the head out of the body */}
<Container className={styles.pageContainer}>
<Component {...pageProps} />
</Container>
</main>
<Footer />
{showSignUpModal &&
<SignUpModal
onDismiss={() => setShowSignUpModal(false)}
onLoginInstead={() => {
setShowSignUpModal(false);
setShowLoginModal(true);
}} />
}
{showLoginModal &&
<LoginModal
onDismiss={() => setShowLoginModal(false)}
onSignUpInstead={() => {
setShowLoginModal(false);
setShowSignUpModal(true);
}}
onForgotPasswordClicked={() => {
setShowLoginModal(false);
setShowResetPasswordModal(true)
}} />
}
{showResetPasswordModal &&
<ResetPasswordModal
onDismiss={() => setShowResetPasswordModal(false)}
onSignUpClicked={() => {
setShowResetPasswordModal(false);
setShowSignUpModal(true);
}}
/>
}
</div>
</AppContext.Provider>
</SSRProvider>
</>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment