From 5c9005881ddbe3306e20e1fd42a7a6457bb58909 Mon Sep 17 00:00:00 2001 From: Ryan Date: Tue, 4 Apr 2023 16:22:14 -0500 Subject: [PATCH 01/12] Add OnBoarding page and redirect from home page --- pages/index.tsx | 39 ++++++++++++++++++++++++++++---------- pages/onBoarding/index.tsx | 25 ++++++++++++++++++++++++ 2 files changed, 54 insertions(+), 10 deletions(-) create mode 100644 pages/onBoarding/index.tsx diff --git a/pages/index.tsx b/pages/index.tsx index 3441a824..b435d3b4 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,7 @@ import { Box, Button, Container, Typography } from '@mui/material'; import jwt from 'jsonwebtoken'; import { NextPage } from 'next'; +import { useRouter } from 'next/router'; import React from 'react'; import Cookies from 'universal-cookie'; @@ -10,32 +11,50 @@ import { AUTH_COOKIE_NAME } from 'shared/constants'; interface Props { isAuthed: boolean; + seenOnBoarding: boolean; } const Index: NextPage = props => { const [isAuthed, setIsAuthed] = React.useState(props.isAuthed); + const [seenOnBoarding, setSeenOnBoarding] = React.useState(props.seenOnBoarding); + const router = useRouter(); + + // to avoid this error: + // During Pre-rendering (SSR or SSG) you tried to access a router method push, replace, back, which is not supported. + React.useEffect(() => { + const { query } = router; + if (query.seenOnBoarding === 'true') { + setSeenOnBoarding(true); + // reset query parameters once user gets back to home page + router.replace({ + pathname: '/', + query: {}, + }); + } else if (!seenOnBoarding && isAuthed) { + router.push('/onBoarding'); + } + }, []); const onLogout = async () => { const axios = createAxiosInstance(); await axios.post('/api/auth/logout'); setIsAuthed(false); + setSeenOnBoarding(false); }; return ( - - + + dev-directory - - - You are {!isAuthed ? 'not' : ''} logged in - + + You are {!isAuthed ? 'not' : ''} logged in {isAuthed ? ( - ) : ( - )} @@ -53,9 +72,9 @@ Index.getInitialProps = async ({ req }) => { const axios = createAxiosInstance(req); await axios.get('/api/users/' + payload.user_id); - return { isAuthed: true }; + return { isAuthed: true, seenOnBoarding: false }; } catch (error) { - return { isAuthed: false }; + return { isAuthed: false, seenOnBoarding: false }; } }; diff --git a/pages/onBoarding/index.tsx b/pages/onBoarding/index.tsx new file mode 100644 index 00000000..e2719eb3 --- /dev/null +++ b/pages/onBoarding/index.tsx @@ -0,0 +1,25 @@ +import { Box, Button, Container, Typography } from '@mui/material'; +import { NextPage } from 'next'; +import { useRouter } from 'next/router'; + +const Index: NextPage = () => { + const router = useRouter(); + const onDismiss = () => { + router.push('/?seenOnBoarding=true'); + }; + + return ( + + + OnBoarding + + + + + + ); +}; + +export default Index; From 5403234845f22ecd2d7841e8cf47af8c704e4774 Mon Sep 17 00:00:00 2001 From: Ryan Date: Wed, 5 Apr 2023 10:45:08 -0500 Subject: [PATCH 02/12] revert jsx from single quote to double quote --- pages/index.tsx | 10 +++++----- pages/onBoarding/index.tsx | 8 ++++---- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index b435d3b4..6f1c5c93 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -43,18 +43,18 @@ const Index: NextPage = props => { }; return ( - - + + dev-directory - + You are {!isAuthed ? 'not' : ''} logged in {isAuthed ? ( - ) : ( - )} diff --git a/pages/onBoarding/index.tsx b/pages/onBoarding/index.tsx index e2719eb3..41454c79 100644 --- a/pages/onBoarding/index.tsx +++ b/pages/onBoarding/index.tsx @@ -9,12 +9,12 @@ const Index: NextPage = () => { }; return ( - - + + OnBoarding - - From 9bab224dd199dad3d31d3af37993024c6b7cf2a3 Mon Sep 17 00:00:00 2001 From: Ryan Date: Wed, 5 Apr 2023 11:56:57 -0500 Subject: [PATCH 03/12] remove all onboarding logic from index.tsx as it was in the wrong place --- pages/index.tsx | 25 ++----------------------- 1 file changed, 2 insertions(+), 23 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 6f1c5c93..32a56de5 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,7 +1,6 @@ import { Box, Button, Container, Typography } from '@mui/material'; import jwt from 'jsonwebtoken'; import { NextPage } from 'next'; -import { useRouter } from 'next/router'; import React from 'react'; import Cookies from 'universal-cookie'; @@ -11,35 +10,15 @@ import { AUTH_COOKIE_NAME } from 'shared/constants'; interface Props { isAuthed: boolean; - seenOnBoarding: boolean; } const Index: NextPage = props => { const [isAuthed, setIsAuthed] = React.useState(props.isAuthed); - const [seenOnBoarding, setSeenOnBoarding] = React.useState(props.seenOnBoarding); - const router = useRouter(); - - // to avoid this error: - // During Pre-rendering (SSR or SSG) you tried to access a router method push, replace, back, which is not supported. - React.useEffect(() => { - const { query } = router; - if (query.seenOnBoarding === 'true') { - setSeenOnBoarding(true); - // reset query parameters once user gets back to home page - router.replace({ - pathname: '/', - query: {}, - }); - } else if (!seenOnBoarding && isAuthed) { - router.push('/onBoarding'); - } - }, []); const onLogout = async () => { const axios = createAxiosInstance(); await axios.post('/api/auth/logout'); setIsAuthed(false); - setSeenOnBoarding(false); }; return ( @@ -72,9 +51,9 @@ Index.getInitialProps = async ({ req }) => { const axios = createAxiosInstance(req); await axios.get('/api/users/' + payload.user_id); - return { isAuthed: true, seenOnBoarding: false }; + return { isAuthed: true }; } catch (error) { - return { isAuthed: false, seenOnBoarding: false }; + return { isAuthed: false }; } }; From 5ece939afa4a0f9dd4e134710c43535b155bc013 Mon Sep 17 00:00:00 2001 From: Ryan Date: Wed, 5 Apr 2023 12:04:06 -0500 Subject: [PATCH 04/12] change redirect to be to /onboarding route instead of / --- pages/auth-redirect.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/pages/auth-redirect.tsx b/pages/auth-redirect.tsx index 2ab85315..931f144b 100644 --- a/pages/auth-redirect.tsx +++ b/pages/auth-redirect.tsx @@ -8,7 +8,7 @@ const AuthRedirect: React.FC = () => { const useAuthCode = async (code: string) => { await axios.post('/api/auth/login', { code }); - router.push('/'); + router.push('/onboarding'); }; React.useEffect(() => { @@ -18,7 +18,9 @@ const AuthRedirect: React.FC = () => { }, [router.query.code]); return ( -
+
+ +
); }; From 656dd2fd06acbd7794b3b96c301bbf57ba280985 Mon Sep 17 00:00:00 2001 From: Ryan Date: Wed, 5 Apr 2023 12:04:47 -0500 Subject: [PATCH 05/12] change onDismiss to onSkip and redirect to / --- pages/onBoarding/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pages/onBoarding/index.tsx b/pages/onBoarding/index.tsx index 41454c79..50f2133b 100644 --- a/pages/onBoarding/index.tsx +++ b/pages/onBoarding/index.tsx @@ -4,8 +4,8 @@ import { useRouter } from 'next/router'; const Index: NextPage = () => { const router = useRouter(); - const onDismiss = () => { - router.push('/?seenOnBoarding=true'); + const onSkip = () => { + router.push('/'); }; return ( @@ -14,7 +14,7 @@ const Index: NextPage = () => { OnBoarding - From eb9ba64d2146a418b1b75e660b5308c4a3858e77 Mon Sep 17 00:00:00 2001 From: Ryan Date: Wed, 5 Apr 2023 12:12:07 -0500 Subject: [PATCH 06/12] replace dismiss with skip on onboarding page --- pages/onBoarding/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/onBoarding/index.tsx b/pages/onBoarding/index.tsx index 50f2133b..48475259 100644 --- a/pages/onBoarding/index.tsx +++ b/pages/onBoarding/index.tsx @@ -15,7 +15,7 @@ const Index: NextPage = () => { From 33e06582bdac9fca94e231b3acd3942e2dd51bc9 Mon Sep 17 00:00:00 2001 From: Ryan Date: Wed, 5 Apr 2023 16:04:49 -0500 Subject: [PATCH 07/12] remove formatting change on pages/index.tsx --- pages/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/pages/index.tsx b/pages/index.tsx index 32a56de5..3441a824 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -27,7 +27,9 @@ const Index: NextPage = props => { dev-directory - You are {!isAuthed ? 'not' : ''} logged in + + You are {!isAuthed ? 'not' : ''} logged in + {isAuthed ? ( + + + ); From 36208b8925c70861350c44b2217c2bcfcb1b5a8f Mon Sep 17 00:00:00 2001 From: Ryan Date: Thu, 6 Apr 2023 10:34:35 -0500 Subject: [PATCH 12/12] rename Index Component to Onboarding --- pages/onboarding/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/onboarding/index.tsx b/pages/onboarding/index.tsx index 7cc62f36..0efa831b 100644 --- a/pages/onboarding/index.tsx +++ b/pages/onboarding/index.tsx @@ -2,7 +2,7 @@ import { Box, Button, Container, Typography } from '@mui/material'; import { NextPage } from 'next'; import Link from 'next/link'; -const Index: NextPage = () => { +const Onboarding: NextPage = () => { return ( @@ -19,4 +19,4 @@ const Index: NextPage = () => { ); }; -export default Index; +export default Onboarding;