Last active
March 7, 2023 02:33
-
-
Save florianwalther-private/351a6151e0514b1f16fa777d62939328 to your computer and use it in GitHub Desktop.
_app.tsx structure
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
| 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