Upcoming updates November 2021 (done)

[tima101]

Move changes to book/10-end, decided against creating Chapter 11:

• [x] retire inefficient generateNumberSlug and generateSlug - either use _id as slug or generate unique values with Math.random (Chapter 11, explain motivation)
• [x] bodyParser.raw to express.raw for Stripe's webhook (change content inside chapter in question)
• [x] GA events example (Chapter 11: screenshots from GA dashboard)

---

• [x] style for spinner from nprogress (change content inside chapter in question):
  • https://github.com/async-labs/saas/issues/162#issuecomment-907452613
• [x] flash of font (change content inside chapter in question)

---

• [x] add comment about passing quantity to createSession for per seat subscription (change content inside chapter in question)
• [x] (will not implement, no taxes for SaaS software, Stripe charges 0.5%) Stripe: look into taxes:
  • https://github.com/async-labs/saas/issues/167
  • https://stripe.com/docs/tax/checkout

---

• [x] node v14.18.1
• [x] next v12.0.3 (webpack v5, add two plugins for babel, react and react-dom v17.0.2)
• [x] @mui/material v5.0.6 (breaking changes)
• [x] retire dotenv for app; update next.config.js and update names for environmental variables; update README file

Notes:

• imports:

  npx @mui/codemod v5.0.0/preset-safe pages
  npx @mui/codemod v5.0.0/preset-safe components
  

• MyApp, MyDocument
• Select, event.stopPropagation()
• removed <InputLabel>Notification type</InputLabel>
• theme, createTheme, type -> mode
• versions for mobx, mobx-react
• version of eslint in api
• upgraded versions for socket.io-client, socket.io, @types/socket.io, remove @types/socket.io-client, update socket.ts, update store/index.ts

---

• [x] check if which page and store methods should be made private (see multiple methods in DiscussionPageComp)

• ~~see if it makes sense to replace getInitialProps with getStaticProps (fetch data at build time and render page) or getServerSideProps (fetch data at request time and render page) (InvitationPageComp: getInitialProps -> getServerSideProps)~~ Requires removing all getInitialProps, serializing data, separate export:

  • https://github.com/vercel/next.js/discussions/11211
  • https://stackoverflow.com/questions/66492971/page-with-getinitialprops-and-getstaticprops

• [x] fixed redirect for logged-in user:

  redirectUrl = `/your-settings?teamSlug=${user.defaultTeamSlug}`;
  asUrl = `/teams/${user.defaultTeamSlug}/your-settings`;
  

  t.slug === selectedTeamSlug || userObj.defaultTeamSlug

• [x] https://github.com/async-labs/saas/commit/c1f02ef4545141f91e831fbf7297a39a98ae1413 convertDiscussionPageComp page to functional component DiscussionPageCompFunctional (explain useState, useEffect, useRef, usePrevious, firstGridItem, Express routes for discussion-f page)

  • https://www.digitalocean.com/community/tutorials/five-ways-to-convert-react-class-components-to-functional-components-with-react-hooks
  • https://reactjs.org/docs/hooks-effect.html
  • https://stackoverflow.com/questions/62654874/replacing-componentdidupdate-with-useeffect
  • https://stackoverflow.com/questions/53446020/how-to-compare-oldvalues-and-newvalues-on-react-hooks-useeffect
  • https://stackoverflow.com/questions/53255951/equivalent-to-componentdidupdate-using-react-hooks
  • add to content:

  const mounted = useRef();
  
  useEffect(() => {
    if (!mounted.current) {
      // do componentDidMount logic
      mounted.current = true;
    } else {
      // do componentDidUpdate logic
    }
  
    return () => {
        // do componentWillUnmount logic
      }
    }, [someProp]);
  
  
  

---

• [x] explain firing of MyDocument.render and MyApp.getInitialProps:

console.log('MyDocument.render');
console.log('MyApp.getInitialProps');

explain firing of lifecycle methods:

console.log('DiscussionPageComp.componentDidMount');

console.log('before condition DiscussionPageComp.componentDidUpdate');

console.log('inside condition DiscussionPageComp.componentDidUpdate');

console.log('DiscussionPageComp.componentWillUnmount');

explain firing of useEffect hook:

console.log('useEffect 1 for DiscussionPageCompFunctional');

console.log('useEffect 2 for DiscussionPageCompFunctional');

• [x] move changes from book/11-end to book/10-end; remove book/11-begin and book/11-end
• [x] replace codebase inside saas with codebase inside book/10-end
• [x] review instructions for Node.js 14 running on 64bit Amazon Linux 2:
  • engines in package.json
  • build locally before deploy; only start script runs from package.json at AWS EB
  • review config.yml
  • review names of env vars
• [x] redeploy demo (https://saas-app.async-await.com and https://saas-api.async-await.com)

[marcosCapistrano]

About getInitialProps: https://nextjs.org/docs/api-reference/data-fetching/getInitialProps Should it be changed to the getStaticProps or getServerSideProps in fetching data for pages?

EDIT: sorry if this isn't the right place, is there a section for questions/suggestions?

[tima101]

@marcosCapistrano Thanks for suggestion. I don't think there are many (or any) instances for using getStaticProps (fetch data and render page at build time instead of request time). But worth looking into it. I added task to my list.