Rework onboarding code so its a little easier to control paths

packages/web/components/templates/OnboardingLayout.tsx

@@ -4,6 +4,7 @@ import { VStack, HStack, Box } from '../elements/LayoutPrimitives'
 import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
 import { StyledText } from '../elements/StyledText'
 import { Button } from '../elements/Button'
+import Link from 'next/link'
 
 const TOTAL_ONBOARDING_PAGES = 6
 
@@ -29,24 +30,26 @@ export const OnboardingLayout = ({
   reduceSpace
 }: OnboardingLayoutProps) => {
   const NextButton = () => (
-    <Button
-      style="ctaDarkYellow"
-      css={{ 
-        width: '111px',
-        height: '44px',
-        color: 'rgba(10, 8, 6, 0.8)',
-        fontWeight: 600,
-        fontSize: '16px',
-        textDecoration: 'none',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}
-      as="a"
-      href={nextPage ? nextPage : `/onboarding/0${pageNumber+1}`}
-    >
-      Next
-    </Button>
+    <Link href={nextPage ? nextPage : `/onboarding/0${pageNumber+1}`}>
+      <Button
+        style="ctaDarkYellow"
+        css={{ 
+          width: '111px',
+          height: '44px',
+          color: 'rgba(10, 8, 6, 0.8)',
+          fontWeight: 600,
+          fontSize: '16px',
+          textDecoration: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}
+        as="a"
+        href={nextPage ? nextPage : `/onboarding/0${pageNumber+1}`}
+      >
+        Next
+      </Button>
+    </Link>
   )
 
   return (

packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx

@@ -30,14 +30,17 @@ const optionDetails = [
   },
 ]
 
-const OnboardingPage3 = () => {
+type OnboardingAddNewslettersProps = {
+  pageNumber: number
+}
+
+export const OnboardingAddNewsletters = (props: OnboardingAddNewslettersProps) => {
   return (
     <OnboardingLayout
+      pageNumber={props.pageNumber}
       subTitle="Omnivore creates an email address for you to subscribe to newsletters with."
       description="Subscribe to some newsletters now"
       title="Read all your Newsletters in Omnivore"
-      pageNumber={3}
-      nextPage={'/onboarding/05'}
     >
       <VStack css={{
         marginTop: '$4',
@@ -51,4 +54,3 @@ const OnboardingPage3 = () => {
   )
 }
 
-export default OnboardingPage3

packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx

@@ -13,10 +13,14 @@ const StyledImage = styled('img', {
   }
 })
 
-const OnboardingPage5 = () => {
+type OnboardingOrganizeInstructionsProps = {
+  pageNumber: number
+}
+
+export const OnboardingHighlightInstructions = (props: OnboardingOrganizeInstructionsProps) => {
   return (
     <OnboardingLayout
-      pageNumber={5}
+      pageNumber={props.pageNumber}
       title="Highlight and share"
       subTitle="Information about creating and sharing highlights Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet."
       >
@@ -37,5 +41,3 @@ const OnboardingPage5 = () => {
     </OnboardingLayout>
   )
 }
-
-export default OnboardingPage5

packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx

@@ -6,10 +6,14 @@ import ExtensionsInstallHelp from '../../elements/ExtensionsInstallHelp'
 import { StyledAnchor } from '../../elements/StyledText'
 import { Box } from '../../elements/LayoutPrimitives'
 
-const OnboardingPage2 = () => {
+type OnboardingInstallInstructionsProps = {
+  pageNumber: number
+}
+
+export const OnboardingInstallInstructions = (props: OnboardingInstallInstructionsProps) => {
   return (
     <OnboardingLayout
-      pageNumber={2}
+      pageNumber={props.pageNumber}
       title="Save links to read later"
       subTitle="Save any link to your library using our apps and browser extensions"
       description='Install our apps and browser extensions'
@@ -83,4 +87,3 @@ const OnboardingPage2 = () => {
   )
 }
 
-export default OnboardingPage2

packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx

@@ -34,10 +34,14 @@ const Container = styled(Box, {
   }
 })
 
-const OnboardingPage6 = () => {
+type OnboardingJoinCommunityProps = {
+  pageNumber: number
+}
+
+export const OnboardingJoinCommunity = (props: OnboardingJoinCommunityProps) => {
   return (
     <OnboardingLayout
-      pageNumber={6}
+      pageNumber={props.pageNumber}
       title="Join our Community"
       subTitle='Omnivore is open source and open community, join us.'
       nextPage='/home'
@@ -71,4 +75,3 @@ const OnboardingPage6 = () => {
   )
 }
 
-export default OnboardingPage6

packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx

@@ -7,10 +7,14 @@ const StyledImage = styled('img', {
   position: 'relative',
 })
 
-const OnboardingPage4 = () => {
+type OnboardingOrganizeInstructionsProps = {
+  pageNumber: number
+}
+
+export const OnboardingOrganizeInstructions = (props: OnboardingOrganizeInstructionsProps) => {
   return (
     <OnboardingLayout
-      pageNumber={4}
+      pageNumber={props.pageNumber}
       title="Organize all your content"
       subTitle="Information about archiving and tagging
       Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet."
@@ -51,5 +55,3 @@ const OnboardingPage4 = () => {
     </OnboardingLayout>
   )
 }
-
-export default OnboardingPage4

packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx

@@ -37,10 +37,14 @@ const articleDetails = [
   },
 ]
 
-const OnboardingPage1 = () => {
+type OnboardingReaderPreviewProps = {
+  pageNumber: number
+}
+
+export const OnboardingReaderPreview = (props: OnboardingReaderPreviewProps) => {
   return (
     <OnboardingLayout
-      pageNumber={1}
+      pageNumber={props.pageNumber}
       title="Read Distraction Free"
       subTitle="Omnivore's distraction free reader gives you an uncluttered reading experience"
       description='Add some great reads to your library now:'
@@ -77,5 +81,3 @@ const OnboardingPage1 = () => {
     </OnboardingLayout>
   )
 }
-
-export default OnboardingPage1

packages/web/pages/onboarding/01.tsx

@@ -1,5 +0,0 @@
-import OnboardingPage1 from "../../components/templates/onboarding/01";
-
-export default function OnboardingPage01() {
-  return <OnboardingPage1 />
-}

packages/web/pages/onboarding/02.tsx

@@ -1,5 +0,0 @@
-import OnboardingPage2 from "../../components/templates/onboarding/02";
-
-export default function OnboardingPage02() {
-  return <OnboardingPage2 />
-}

packages/web/pages/onboarding/03.tsx

@@ -1,5 +0,0 @@
-import OnboardingPage3 from "../../components/templates/onboarding/03";
-
-export default function OnboardingPage03() {
-  return <OnboardingPage3 />
-}

packages/web/pages/onboarding/04.tsx

@@ -1,5 +0,0 @@
-import OnboardingPage4 from "../../components/templates/onboarding/04";
-
-export default function OnboardingPage04() {
-  return <OnboardingPage4 />
-}

packages/web/pages/onboarding/05.tsx

@@ -1,5 +0,0 @@
-import OnboardingPage5 from "../../components/templates/onboarding/05";
-
-export default function OnboardingPage05() {
-  return <OnboardingPage5 />
-}

packages/web/pages/onboarding/06.tsx

@@ -1,5 +0,0 @@
-import OnboardingPage6 from "../../components/templates/onboarding/06";
-
-export default function OnboardingPage06() {
-  return <OnboardingPage6 />
-}

packages/web/pages/onboarding/[index].tsx

@@ -0,0 +1,23 @@
+import { useRouter } from "next/router";
+import { OnboardingAddNewsletters } from "../../components/templates/onboarding/OnboardingAddNewsletters";
+import { OnboardingInstallInstructions } from "../../components/templates/onboarding/OnboardingInstallInstructions";
+import { OnboardingJoinCommunity } from "../../components/templates/onboarding/OnboardingJoinCommunity";
+import { OnboardingReaderPreview } from "../../components/templates/onboarding/OnboardingReaderPreview";
+
+export default function Onboarding() {
+  const router = useRouter();
+  const { index: pageNumber } = router.query;
+
+  switch (pageNumber) {
+    case "01":
+      return <OnboardingReaderPreview pageNumber={1} />;
+    case "02":
+      return <OnboardingInstallInstructions pageNumber={2} />;
+    case "03":
+      return <OnboardingAddNewsletters pageNumber={3} />;
+    case "04":
+      return <OnboardingJoinCommunity pageNumber={4} />;
+  }
+
+  return <OnboardingReaderPreview pageNumber={1} />
+}

packages/web/stories/OnboardingLayout.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingLayout from '../components/templates/OnboardingLayout2'
+import OnboardingLayout from '../components/templates/OnboardingLayout'
 
 export default {
   title: 'Components/OnboardingLayout',

packages/web/stories/OnboardingPage1.stories.tsx

@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage1 from '../components/templates/onboarding/01'
+import { OnboardingReaderPreview } from '../components/templates/onboarding/OnboardingReaderPreview'
 
 export default {
   title: 'Onboarding-Pages/01',
-  component: OnboardingPage1,
-} as ComponentMeta<typeof OnboardingPage1>
+  component: OnboardingReaderPreview,
+} as ComponentMeta<typeof OnboardingReaderPreview>
 
-export const OnboardingPage1Story: ComponentStory<typeof OnboardingPage1> = (args: any) => {
+export const OnboardingPage1Story: ComponentStory<typeof OnboardingReaderPreview> = (args: any) => {
   return (
-    <OnboardingPage1 />
+    <OnboardingReaderPreview />
   )
 }

packages/web/stories/OnboardingPage2.stories.tsx

@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage2 from '../components/templates/onboarding/02'
+import { OnboardingInstallInstructions } from '../components/templates/onboarding/OnboardingInstallInstructions'
 
 export default {
   title: 'Onboarding-Pages/02',
-  component: OnboardingPage2,
-} as ComponentMeta<typeof OnboardingPage2>
+  component: OnboardingInstallInstructions,
+} as ComponentMeta<typeof OnboardingInstallInstructions>
 
-export const OnboardingPage2Story: ComponentStory<typeof OnboardingPage2> = (args: any) => {
+export const OnboardingPage2Story: ComponentStory<typeof OnboardingInstallInstructions> = (args: any) => {
   return (
-    <OnboardingPage2 />
+    <OnboardingInstallInstructions />
   )
 }

packages/web/stories/OnboardingPage3.stories.tsx

@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage3 from '../components/templates/onboarding/03'
+import { OnboardingAddNewsletters } from '../components/templates/onboarding/OnboardingAddNewsletters'
 
 export default {
   title: 'Onboarding-Pages/03',
-  component: OnboardingPage3,
-} as ComponentMeta<typeof OnboardingPage3>
+  component: OnboardingAddNewsletters,
+} as ComponentMeta<typeof OnboardingAddNewsletters>
 
-export const OnboardingPage3Story: ComponentStory<typeof OnboardingPage3> = (args: any) => {
+export const OnboardingPage3Story: ComponentStory<typeof OnboardingAddNewsletters> = (args: any) => {
   return (
-    <OnboardingPage3 />
+    <OnboardingAddNewsletters />
   )
 }

packages/web/stories/OnboardingPage4.stories.tsx

@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage4 from '../components/templates/onboarding/04'
+import { OnboardingOrganizeInstructions } from '../components/templates/onboarding/OnboardingOrganizeInstructions'
 
 export default {
   title: 'Onboarding-Pages/04',
-  component: OnboardingPage4,
-} as ComponentMeta<typeof OnboardingPage4>
+  component: OnboardingOrganizeInstructions,
+} as ComponentMeta<typeof OnboardingOrganizeInstructions>
 
-export const OnboardingPage4Story: ComponentStory<typeof OnboardingPage4> = (args: any) => {
+export const OnboardingPage4Story: ComponentStory<typeof OnboardingOrganizeInstructions> = (args: any) => {
   return (
-    <OnboardingPage4 />
+    <OnboardingOrganizeInstructions />
   )
 }

packages/web/stories/OnboardingPage5.stories.tsx

@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage5 from '../components/templates/onboarding/05'
+import { OnboardingHighlightInstructions } from '../components/templates/onboarding/OnboardingHighlightInstructions'
 
 export default {
   title: 'Onboarding-Pages/05',
-  component: OnboardingPage5,
-} as ComponentMeta<typeof OnboardingPage5>
+  component: OnboardingHighlightInstructions,
+} as ComponentMeta<typeof OnboardingHighlightInstructions>
 
-export const OnboardingPage5Story: ComponentStory<typeof OnboardingPage5> = (args: any) => {
+export const OnboardingPage5Story: ComponentStory<typeof OnboardingHighlightInstructions> = (args: any) => {
   return (
-    <OnboardingPage5 />
+    <OnboardingHighlightInstructions />
   )
 }

packages/web/stories/OnboardingPage6.stories.tsx

@@ -1,13 +1,13 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import OnboardingPage6 from '../components/templates/onboarding/06'
+import { OnboardingJoinCommunity } from '../components/templates/onboarding/OnboardingJoinCommunity'
 
 export default {
   title: 'Onboarding-Pages/06',
-  component: OnboardingPage6,
-} as ComponentMeta<typeof OnboardingPage6>
+  component: OnboardingJoinCommunity,
+} as ComponentMeta<typeof OnboardingJoinCommunity>
 
-export const OnboardingPage6Story: ComponentStory<typeof OnboardingPage6> = (args: any) => {
+export const OnboardingPage6Story: ComponentStory<typeof OnboardingJoinCommunity> = (args: any) => {
   return (
-    <OnboardingPage6 />
+    <OnboardingJoinCommunity />
   )
 }