Optimize return type and add destructuring assignment. (#16)

* refactor: update dependencies

* refactor: add return type and add destructuring assignment.

* feat: add sample to pass parameter from server to client

Author: treetips

package-lock.json

@@ -14,37 +14,37 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@material-ui/core": "^4.5.1",
+    "@material-ui/core": "^4.8.0",
     "@material-ui/icons": "^4.5.1",
-    "@material-ui/styles": "^4.5.0",
+    "@material-ui/styles": "^4.7.1",
     "@zeit/next-css": "^1.0.1",
     "compression": "^1.7.4",
     "express": "^4.17.1",
     "immer": "^4.0.2",
-    "next": "^9.1.1",
+    "next": "^9.1.5",
     "next-redux-wrapper": "^4.0.1",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "react-redux": "^7.1.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-redux": "^7.1.3",
     "redux": "^4.0.4",
     "typescript-fsa": "^3.0.0",
     "typescript-fsa-reducers": "^1.2.1"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-decorators": "^7.6.0",
+    "@babel/plugin-proposal-decorators": "^7.7.4",
     "@types/next-redux-wrapper": "^2.0.2",
-    "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.9.3",
+    "@types/react": "^16.9.16",
+    "@types/react-dom": "^16.9.4",
     "@types/react-jss": "^8.6.4",
     "@types/react-redux": "^7.1.5",
     "@types/redux": "^3.6.0",
     "@types/styled-jsx": "^2.2.8",
-    "prettier": "^1.18.2",
+    "prettier": "^1.19.1",
     "redux-devtools-extension": "^2.13.8",
-    "tslint": "^5.20.0",
+    "tslint": "^5.20.1",
     "tslint-config-prettier": "^1.18.0",
     "tslint-config-standard": "^8.0.1",
     "tslint-plugin-prettier": "^2.0.1",
-    "typescript": "^3.6.4"
+    "typescript": "^3.7.3"
   }
 }

package.json

@@ -38,15 +38,17 @@ function Error(props: Props) {
  * Server side rendering
  */
 Error.getInitialProps = async (ctx: AppContext): Promise<Props> => {
+  const { res, store } = ctx
+
   const pagePayload: IPagePayload = {
     selectedPage: Page.ERROR,
   }
-  ctx.store.dispatch({
+  store.dispatch({
     type: PageActions.changePage.toString(),
     payload: pagePayload,
   })
   return {
-    httpStatusCode: ctx.res.statusCode,
+    httpStatusCode: res.statusCode,
   }
 }
 

pages/_error.tsx

@@ -14,8 +14,10 @@ const useStyles = makeStyles((_: Theme) =>
   })
 )
 
-function About() {
-  const classes = useStyles({})
+type Props = {}
+
+function About(props: Props) {
+  const classes = useStyles(props)
   return (
     <Layout className={classes.root}>
       <HeaderArticleContainer>
@@ -30,14 +32,17 @@ function About() {
 /**
  * Server side rendering
  */
-About.getInitialProps = async (ctx: AppContext) => {
+About.getInitialProps = async (ctx: AppContext): Promise<Props> => {
+  const { store } = ctx
+
   const pagePayload: IPagePayload = {
     selectedPage: Page.ABOUT,
   }
-  ctx.store.dispatch({
+  store.dispatch({
     type: PageActions.changePage.toString(),
     payload: pagePayload,
   })
+  return {}
 }
 
 export default About

pages/about.tsx

@@ -1,17 +1,22 @@
 import { Typography } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
+import { AppContext } from "../components/AppContext"
 import { SpacingPaper } from "../components/atoms"
 import { HeaderArticleContainer } from "../components/organisms"
 import { Layout } from "../components/templates"
+import { Page } from "../constants"
+import { IPagePayload, PageActions } from "../store/page"
 
 const useStyles = makeStyles((_: Theme) =>
   createStyles({
     root: {},
   })
 )
 
-function Index() {
-  const classes = useStyles({})
+type Props = {}
+
+function Index(props: Props) {
+  const classes = useStyles(props)
   return (
     <Layout className={classes.root}>
       <HeaderArticleContainer>
@@ -30,4 +35,20 @@ function Index() {
   )
 }
 
+/**
+ * Server side rendering
+ */
+Index.getInitialProps = async (ctx: AppContext): Promise<Props> => {
+  const { store } = ctx
+
+  const pagePayload: IPagePayload = {
+    selectedPage: Page.TOP,
+  }
+  store.dispatch({
+    type: PageActions.changePage.toString(),
+    payload: pagePayload,
+  })
+  return {}
+}
+
 export default Index

pages/index.tsx

@@ -30,11 +30,17 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 )
 
-function Redux() {
-  const classes = useStyles({})
+type Props = {
+  // passed from getInitialProps
+  defaultInputNumber: number
+}
+
+function Redux(props: Props) {
+  const { defaultInputNumber: defaultCount } = props
+  const classes = useStyles(props)
   const dispatch = useDispatch()
   const count = useSelector(countSelector)
-  const [inputNumber, setInputNumber] = useState<number>(10)
+  const [inputNumber, setInputNumber] = useState<number>(defaultCount)
 
   /**
    * Increment
@@ -122,14 +128,19 @@ function Redux() {
 /**
  * Server side rendering
  */
-Redux.getInitialProps = async (ctx: AppContext) => {
+Redux.getInitialProps = async (ctx: AppContext): Promise<Props> => {
+  const { store } = ctx
+
   const pagePayload: IPagePayload = {
     selectedPage: Page.REDUX,
   }
-  ctx.store.dispatch({
+  store.dispatch({
     type: PageActions.changePage.toString(),
     payload: pagePayload,
   })
+  return {
+    defaultInputNumber: 2,
+  }
 }
 
 export default Redux