Upcoming updates November 2021 (done)

[tima101]

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

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

---

• style for spinner from nprogress (change content inside chapter in question):
  • NProgress example on 2-begin may be faulty #162 (comment)
• flash of font (change content inside chapter in question)

---

• add comment about passing quantity to createSession for per seat subscription (change content inside chapter in question)
• (will not implement, no taxes for SaaS software, Stripe charges 0.5%) Stripe: look into taxes:
  • Integration of Stripe Tax #167
  • https://stripe.com/docs/tax/checkout

---

• node v14.18.1
• next v12.0.3 (webpack v5, add two plugins for babel, react and react-dom v17.0.2)
• @mui/material v5.0.6 (breaking changes)
• 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

---

• 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:

  • getInitialProps vs getServerProps vercel/next.js#11211
  • https://stackoverflow.com/questions/66492971/page-with-getinitialprops-and-getstaticprops

• fixed redirect for logged-in user:

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

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

• c1f02ef 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]);
  
  
  

---

• 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');

• move changes from book/11-end to book/10-end; remove book/11-begin and book/11-end
• replace codebase inside saas with codebase inside book/10-end
• 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
• 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.