Update packages

.eslintrc

@@ -8,7 +8,7 @@
       "jsx": true
     }
   },
-  "plugins": ["@typescript-eslint", "import", "prettier"],
+  "plugins": ["@typescript-eslint", "import", "prettier", "react-hooks"],
   "settings": {
     "react": {
       "version": "detect"
@@ -26,6 +26,8 @@
   "rules": {
     "no-console": 1, // Means warning
     "prettier/prettier": 2, // Means error
-    "@typescript-eslint/ban-ts-comment": "off"
+    "@typescript-eslint/ban-ts-comment": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
   }
 }

.github/workflows/ci.yml

@@ -116,6 +116,8 @@ jobs:
           npx -w ${APP_PACKAGE_NAME} microapps-publish nextjs-version -n ${PACKAGE_VERSION}
 
       - name: Build Serverless Next.js
+        env:
+          NODE_ENV: production
         run: |
           npx -w ${APP_PACKAGE_NAME} serverless
 

.nvmrc

@@ -1 +1 @@
-v16.4.2
+v16.17.1

.vscode/settings.json

@@ -3,6 +3,11 @@
     "cdk.out": true
     //"**/package-lock.json": true
   },
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/*.code-search": true
+  },
   "editor.formatOnSave": true,
   "editor.insertSpaces": true,
   "editor.tabSize": 2,

Dockerfile

@@ -18,7 +18,7 @@ RUN rm -rf image-lambda/node_modules/ && \
 
 
 
-FROM public.ecr.aws/lambda/nodejs:14 AS final
+FROM public.ecr.aws/lambda/nodejs:16 AS final
 
 # Copy in the munged code
 COPY --from=base /app .

package.json

@@ -15,15 +15,17 @@
     "packages/cdk-stack"
   ],
   "scripts": {
-    "clean": "npm run clean:dist && npm run clean:modules && npm run clean:tsbuildinfo",
+    "clean": "npm run clean:dist && npm run clean:tsbuildinfo",
+    "clean:deep": "npm run clean:dist && npm run clean:modules && npm run clean:tsbuildinfo",
     "clean:dist": "npm exec --workspaces -- npx rimraf dist && npx rimraf dist",
     "clean:modules": "npm exec --workspaces -- npx rimraf node_modules && npx rimraf node_modules",
     "clean:tsbuildinfo": "npm exec --workspaces -- npx rimraf *.tsbuildinfo",
     "cloc": "cloc --exclude-dir=node_modules,.storybook,.serverless,.serverless_nextjs,.next,storybook-static,cdk.out --exclude-ext=json .",
-    "dev": "DEBUG=true next dev",
+    "dev": "NODE_CONFIG_ENV=${NODE_CONFIG_ENV:-dev} DATABASE_TABLE_NAME=${DATABASE_TABLE_NAME:-microapps-dev} npm -w @pwrdrvr/microapps-app-release run dev",
     "build": "tsc --build tsconfig.json",
     "lint": "eslint ./packages/ --ext .ts --ext .tsx",
-    "lint-and-fix": "eslint ./packages/ --ext .ts --ext .tsx --fix"
+    "lint-and-fix": "eslint ./packages/ --ext .ts --ext .tsx --fix",
+    "start:app:next": "NODE_CONFIG_ENV=${NODE_CONFIG_ENV:-dev} npm -w @shutterstock/app-seo-service run start"
   },
   "eslintConfig": {
     "extends": [
@@ -54,8 +56,10 @@
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.23.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "rimraf": "3.0.2",
     "prettier": "^2.2.1",
-    "ts-node": "^9.1.1",
+    "ts-node": "^10.9.1",
     "typescript": "^4.3.5"
   }
 }

packages/app/next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/app/package.json

@@ -35,30 +35,29 @@
     "@aws-sdk/lib-dynamodb": "^3.19.0",
     "@carbon/themes": "^10.30.0",
     "@pwrdrvr/microapps-datalib": "^0.0.25",
-    "@reduxjs/toolkit": "^1.5.1",
-    "carbon-components": "^10.31.0",
-    "carbon-components-react": "^7.31.0",
+    "@reduxjs/toolkit": "^1.8.6",
+    "carbon-components": "^10.58.3",
+    "carbon-components-react": "^8.14.0",
     "carbon-icons": "^7.0.7",
     "clsx": "^1.1.1",
     "encoding": "^0.1.13",
     "immutable": "^4.0.0",
     "lambda-log": "^2.4.0",
-    "next": "10.0.7",
-    "next-redux-wrapper": "^7.0.0",
+    "next": "~12.3.1",
+    "next-redux-wrapper": "^7.0.5",
     "node-fetch": "^2.6.1",
-    "prop-types": "^15.7.2",
-    "react": "17.0.1",
+    "prop-types": "^15.8.1",
+    "react": "^17.0.0",
     "react-base-table": "^1.12.0",
-    "react-dom": "17.0.1",
+    "react-dom": "^17.0.0",
     "react-overlays": "^5.0.0",
-    "react-redux": "^7.2.3",
-    "redux-thunk": "^2.3.0",
+    "react-redux": "^8.0.4",
+    "redux-thunk": "^2.4.1",
     "semver": "^6.3.0",
-    "styled-components": "^5.2.3",
+    "styled-components": "^5.3.6",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.10",
     "@pwrdrvr/microapps-publish": "^0.0.26",
     "@pwrdrvr/serverless-nextjs-router": "^0.0.4",
     "@sls-next/serverless-component": "^1.19.0",
@@ -71,21 +70,16 @@
     "@types/carbon-components-react": "^7.30.0",
     "@types/lambda-log": "^2.2.0",
     "@types/node": "^14.14.31",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
-    "@types/react-window": "^1.8.2",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/semver": "^7.3.4",
     "@types/styled-components": "^5.1.9",
-    "babel-loader": "^8.2.2",
-    "babel-preset-react-app": "^10.0.0",
-    "chromatic": "^5.7.0",
     "css-loader": "^5.2.2",
     "file-loader": "^6.2.0",
     "sass": "^1.32.8",
     "sass-loader": "^10.1.5",
     "serverless": "^2.28.0",
     "style-loader": "^1.3.0",
-    "ts-node": "^9.1.1",
     "typescript": "^4.3.5"
   }
 }

packages/app/src/store/reducer.ts

@@ -1,4 +1,4 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from '@reduxjs/toolkit';
 // import { diff } from 'jsondiffpatch';
 // import { HYDRATE } from 'next-redux-wrapper';
 import mainPage from './main/index';

packages/app/src/store/store.ts

@@ -1,24 +1,36 @@
 import { Action, AnyAction, configureStore, ThunkAction, ThunkDispatch } from '@reduxjs/toolkit';
-import { createWrapper } from 'next-redux-wrapper';
-import rootReducer from './reducer';
-
-export type RootState = ReturnType<typeof rootReducer>;
+import { createWrapper, HYDRATE } from 'next-redux-wrapper';
+import combinedReducer from './reducer';
+
+export type RootState = ReturnType<typeof combinedReducer>;
+
+const reducer: typeof combinedReducer = (state, action) => {
+  if (action.type === HYDRATE) {
+    const nextState = {
+      ...state,
+      ...action.payload,
+    };
+    return nextState;
+  } else {
+    return combinedReducer(state, action);
+  }
+};
 
 /**
  * @param initialState The store's initial state (on the client side, the state of the server-side store is passed here)
  */
 const makeStore = () => {
-  const store = configureStore({ reducer: rootReducer });
+  const store = configureStore({ reducer });
 
   // @ts-ignore
-  if (process.env.NODE_ENV === 'development' && module.hot) {
-    // @ts-ignore
-    module.hot.accept('./reducer', () => {
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      const newRootReducer = require('./reducer').default;
-      store.replaceReducer(newRootReducer);
-    });
-  }
+  // if (process.env.NODE_ENV === 'development' && module.hot) {
+  //   // @ts-ignore
+  //   module.hot.accept('./reducer', () => {
+  //     // eslint-disable-next-line @typescript-eslint/no-var-requires
+  //     const newRootReducer = require('./reducer').default;
+  //     store.replaceReducer(newRootReducer);
+  //   });
+  // }
 
   return store;
 };

packages/app/src/utils/config.ts

@@ -20,7 +20,7 @@ export class Config implements IConfig {
   }
 
   public static get envLevel(): 'dev' | 'qa' | 'prod' | 'local' {
-    const nodeEnv = process.env.NODE_ENV || 'dev';
+    const nodeEnv = process.env.NODE_CONFIG_ENV || 'dev';
     if (nodeEnv.startsWith('prod')) {
       return 'prod';
     } else if ((nodeEnv as string) === 'qa') {

packages/app/tsconfig.json

@@ -2,7 +2,11 @@
   "extends": "../../tsconfig.packages.json",
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -13,8 +17,16 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
-  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["node_modules", "./next.config.js"]
+  "include": [
+    "next-env.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "./next.config.js"
+  ]
 }

packages/cdk-construct/src/index.ts

@@ -115,7 +115,8 @@ export class MicroAppsAppRelease extends Construct implements IMicroAppsAppRelea
       functionName,
       environment: {
         AWS_NODEJS_CONNECTION_REUSE_ENABLED: '1',
-        NODE_ENV: nodeEnv,
+        NODE_ENV: 'production',
+        NODE_CONFIG_ENV: nodeEnv,
         S3BUCKETNAME: staticAssetsS3Bucket.bucketName,
         DATABASE_TABLE_NAME: table.tableName,
       },

packages/cdk-stack/package.json

@@ -16,15 +16,13 @@
   },
   "devDependencies": {
     "@aws-cdk/assert": "^2.8.0",
-    "aws-cdk-lib": "^2.8.0",
-    "constructs": "^10.0.5",
+    "@pwrdrvr/microapps-app-release-cdk": "*",
     "@types/jest": "^26.0.10",
     "@types/node": "^12.0.0",
     "@types/source-map-support": "^0.5.3",
-    "jest": "^26.4.2",
+    "aws-cdk-lib": "^2.8.0",
+    "constructs": "^10.0.5",
     "source-map-support": "^0.5.16",
-    "ts-jest": "^26.2.0",
-    "ts-node": "^9.0.0",
     "typescript": "^4.3.5"
   }
 }