[Landing] Cache pricing plans on a json file to avoid making unnecessary api requests

Author: brunolemos

landing/.gitignore

@@ -7,5 +7,6 @@ dist
 node_modules
 npm-debug.log*
 out
+scripts/out
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*

landing/package.json

@@ -7,6 +7,7 @@
     "clean": "shx rm -f *.tsbuildinfo && shx rm -rf dist && mkdirp dist",
     "compile": "cd .",
     "deploy": "yarn now",
+    "export": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node ./src/scripts/refresh-cached-public-plans && next build && next export",
     "format": "prettier --write '{.,src/**}/*.{js,jsx,ts,tsx}'",
     "lint": "tslint -p .",
     "now": "now",
@@ -39,8 +40,10 @@
     "@types/stripe-v3": "3.1.9",
     "@types/styled-jsx": "2.2.8",
     "mkdirp": "0.5.1",
+    "node-fetch": "2.6.0",
     "now": "16.7.1",
     "prettier": "1.18.2",
+    "ts-node": "8.6.2",
     "tslint": "5.20.1",
     "tslint-config-airbnb": "5.11.2",
     "tslint-config-prettier": "1.18.0",

landing/pages/pricing.tsx

@@ -1,26 +1,11 @@
 import { NextPage } from 'next'
 
-import { setPublicPlansCache } from '../src/context/PlansContext'
 import PricingPage from '../src/pages/PricingPage'
 
 export interface PricingPageProps {}
 
 const Pricing: NextPage<PricingPageProps> = props => {
-  console.log('xxx pricing page', props)
   return <PricingPage />
 }
 
 export default Pricing
-
-export function unstable_getStaticProps() {
-  setPublicPlansCache(value => ({
-    ...value,
-    freeTrialDays: 1234,
-  }))
-
-  return {
-    props: {
-      test: 1234,
-    },
-  }
-}

landing/src/components/sections/CTAButtons.tsx

@@ -47,6 +47,7 @@ export default function CTAButtons(props: CTAButtonsProps) {
       ) : os ? (
         <>
           {paidPlans.length === 1 &&
+          paidPlans[0] &&
           !paidPlans[0].interval &&
           paidPlans[0].amount ? (
             <Button
@@ -82,13 +83,13 @@ export default function CTAButtons(props: CTAButtonsProps) {
               target="_top"
               className="mb-2 mr-2"
             >
-              {paidPlans[0].trialPeriodDays
+              {paidPlans[0] && paidPlans[0].trialPeriodDays
                 ? 'Start free trial'
                 : 'See pricing'}
             </Button>
           )}
 
-          {!!(freeTrialDays && plans.some(plan => !plan.amount)) && (
+          {!!(freeTrialDays && plans.some(plan => !!plan && !plan.amount)) && (
             <Button
               type="neutral"
               href="/download?autostart"

landing/src/components/sections/header/Header.tsx

@@ -93,7 +93,7 @@ export default function Header(props: HeaderProps) {
             </HeaderLink> */}
 
             {!!(
-              (freeTrialDays && plans.some(plan => !plan.amount)) ||
+              (freeTrialDays && plans.some(plan => !!plan && !plan.amount)) ||
               (authData &&
                 authData.appToken &&
                 (freeTrialDays || (authData.plan && authData.plan.amount)))

landing/src/components/sections/pricing/PricingPlanBlock.tsx

@@ -9,11 +9,11 @@ import qs from 'qs'
 import React from 'react'
 
 import { useAuth } from '../../../context/AuthContext'
+import { usePlans } from '../../../context/PlansContext'
 import { getPurchaseOrSubscribeRoute } from '../../../helpers'
 import { useLocalizedPlanDetails } from '../../../hooks/use-localized-plan-details'
 import Button from '../../common/buttons/Button'
 import CheckLabel from '../../common/CheckLabel'
-import { usePlans } from '../../../context/PlansContext'
 
 export interface PricingPlanBlockProps {
   banner?: string | boolean
@@ -37,14 +37,17 @@ export function PricingPlanBlock(props: PricingPlanBlockProps) {
   const { authData } = useAuth()
   const { plans } = usePlans()
   const localizedPlan = useLocalizedPlanDetails(plan)
+
+  if (!localizedPlan) return null
+
   const userPlan = authData && authData.plan
   const userPlanIsActive =
-    userPlan && userPlan.id && plans.find(p => p.id === userPlan!.id)
-  const isMyPlan = userPlan && userPlan.id === localizedPlan.id
+    userPlan && userPlan.id && plans.find(p => p && p.id === userPlan!.id)
+  const isMyPlan = !!(userPlan && userPlan.id === localizedPlan.id)
 
   const banner = userPlanIsActive
     ? isMyPlan
-      ? localizedPlan.interval
+      ? localizedPlan && localizedPlan.interval
         ? 'Current localizedPlan'
         : 'You bought this'
       : _banner || true
@@ -101,7 +104,7 @@ export function PricingPlanBlock(props: PricingPlanBlockProps) {
       `Free for ${localizedPlan.trialPeriodDays} days`
   } else if (
     localizedPlan.amount &&
-    plans.some(p => !p.amount && p.trialPeriodDays)
+    plans.some(p => p && !p.amount && p.trialPeriodDays)
   ) {
     //
   } else if (localizedPlan.trialPeriodDays) {

landing/src/components/sections/pricing/PricingPlans.tsx

@@ -15,8 +15,8 @@ export function PricingPlans(_props: PricingPlansProps) {
   const { plans } = usePlans()
 
   const shouldShowPlanTypeTabs =
-    plans.some(plan => plan.type !== 'team') &&
-    plans.some(plan => plan.type === 'team')
+    plans.some(plan => plan && plan.type !== 'team') &&
+    plans.some(plan => plan && plan.type === 'team')
 
   const [_tab, setTab] = useState<PlanType | undefined>(undefined)
   const tab =
@@ -39,7 +39,7 @@ export function PricingPlans(_props: PricingPlansProps) {
     )
 
     return filteredPlans.map(plan =>
-      plan.amount > 0 ? (
+      plan && plan.amount > 0 ? (
         <PricingPlanBlock
           key={`pricing-plan-${plan.id}`}
           banner={plan.banner}
@@ -51,7 +51,7 @@ export function PricingPlans(_props: PricingPlansProps) {
           plan={plan}
           totalNumberOfVisiblePlans={filteredPlans.length}
         />
-      ) : (
+      ) : plan ? (
         <PricingPlanBlock
           key={`pricing-plan-${plan.cannonicalId}`}
           banner
@@ -60,7 +60,7 @@ export function PricingPlans(_props: PricingPlansProps) {
           plan={plan}
           totalNumberOfVisiblePlans={filteredPlans.length}
         />
-      ),
+      ) : null,
     )
   }, [tab])
 
@@ -81,17 +81,19 @@ export function PricingPlans(_props: PricingPlansProps) {
       )}
 
       <div className="flex flex-row lg:justify-center items-stretch -ml-8 sm:ml-0 -mr-8 sm:mr-0 pl-8 sm:pl-0 pr-8 sm:pr-0 overflow-x-scroll md:overflow-x-auto">
-        {pricingPlanComponents.map((component, index) => (
-          <Fragment key={`${component.key}-container`}>
-            {component}
+        {pricingPlanComponents.map((component, index) =>
+          component ? (
+            <Fragment key={`${component.key}-container`}>
+              {component}
 
-            {index < pricingPlanComponents.length - 1 ? (
-              <div className="pr-2 sm:pr-6" />
-            ) : (
-              <div className="pr-2" />
-            )}
-          </Fragment>
-        ))}
+              {index < pricingPlanComponents.length - 1 ? (
+                <div className="pr-2 sm:pr-6" />
+              ) : (
+                <div className="pr-2" />
+              )}
+            </Fragment>
+          ) : null,
+        )}
       </div>
 
       <p className="block sm:hidden mb-4" />

landing/src/components/sections/subscribe/SubscribeForm.tsx

@@ -38,7 +38,7 @@ export const SubscribeForm = injectStripe<SubscribeFormProps>(
     const Router = useRouter()
     const { Paddle } = usePaddleLoader()
 
-    const localizedPlan = useLocalizedPlanDetails(plan)
+    const localizedPlan = useLocalizedPlanDetails(plan)!
 
     const isMountedRef = useIsMountedRef()
 

landing/src/context/PlansContext.tsx

@@ -1,23 +1,17 @@
-import { constants, Plan } from '@brunolemos/devhub-core'
 import React, { useContext, useEffect, useState } from 'react'
 
-import { getDefaultDevHubHeaders } from '../helpers'
-import { useIsMountedRef } from '../hooks/use-is-mounted-ref'
+import {
+  fetchPlansState,
+  getCachedPublicPlans,
+  PlansState,
+} from '../helpers/plans'
+import { useDynamicRef } from '../hooks/use-dynamic-ref'
 import { useAuth } from './AuthContext'
 
 export interface PlansProps {
   children: React.ReactNode
 }
 
-export interface PlansState {
-  freePlan: Plan | undefined
-  freeTrialDays: number
-  freeTrialPlan: Plan | undefined
-  paidPlans: Plan[]
-  plans: Plan[]
-  userPlanInfo: Plan | undefined
-}
-
 const initialState: PlansState = {
   freePlan: undefined,
   freeTrialDays: 0,
@@ -31,44 +25,27 @@ export const PlansContext = React.createContext(initialState)
 PlansContext.displayName = 'PlansContext'
 
 export function PlansProvider(props: PlansProps) {
-  const isMountedRef = useIsMountedRef()
-
-  const [state, setState] = useState(initialState)
+  const [state, setState] = useState(getCachedPublicPlans() || initialState)
 
   const { authData } = useAuth()
 
+  const stateRef = useDynamicRef(state)
   useEffect(() => {
+    if (stateRef.current === getCachedPublicPlans() && !authData.appToken)
+      return
     ;(async () => {
       try {
-        const response = await fetch(`${constants.API_BASE_URL}/plans`, {
-          method: 'GET',
-          headers: {
-            ...getDefaultDevHubHeaders({ appToken: authData.appToken }),
-            'Content-Type': 'application/json',
-          },
-        })
-
-        if (!isMountedRef.current) return
-
-        const data = (await response.json()) as PlansState
-
-        if (!(data && data.plans)) {
-          throw new Error('Something went wrong')
-        }
-
-        setState({
-          freePlan: data.freePlan,
-          freeTrialDays: data.freeTrialDays,
-          freeTrialPlan: data.freeTrialPlan,
-          paidPlans: data.plans.filter(plan => plan.amount > 0),
-          plans: data.plans,
-          userPlanInfo: data.userPlanInfo,
-        })
+        const s = await fetchPlansState(authData.appToken)
+        setState(s)
       } catch (error) {
-        if (!isMountedRef.current) return
+        //
       }
     })()
-  }, [authData.appToken, authData.plan && authData.plan.id])
+  }, [
+    !!authData.appToken,
+    authData.github.login,
+    authData.plan && authData.plan.id,
+  ])
 
   return (
     <PlansContext.Provider value={state}>

landing/src/helpers/index.ts

@@ -136,7 +136,9 @@ export function toKebabCase(str: string) {
   return matches.map(s => s.toLowerCase()).join('-')
 }
 
-export function getPurchaseOrSubscribeRoute(activePlans: Plan[]) {
+export function getPurchaseOrSubscribeRoute(
+  activePlans: Array<Plan | undefined>,
+) {
   return activePlans.some(p => !!(p && p.amount > 0 && p.interval))
     ? 'subscribe'
     : 'purchase'