Update TypeScript to use optional-chaining and nullish-coalescing

Author: Robert S

craco.config.js

@@ -2,6 +2,12 @@ const path = require('path');
 
 module.exports = function({ env, paths }) {
   return {
+    babel: {
+      presets: [],
+      plugins: ['@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator'],
+      // loaderOptions: { /* Any babel-loader configuration options: https://github.com/babel/babel-loader. */ },
+      // loaderOptions: (babelLoaderOptions, { env, paths }) => { return babelLoaderOptions; }
+    },
     webpack: {
       alias: {
         environment: path.join(__dirname, 'src', 'environments', process.env.CLIENT_ENV),

package.json

@@ -2,6 +2,7 @@
   "name": "react-typescript",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://codebelt.github.io/react-redux-architecture",
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged",
@@ -16,6 +17,8 @@
     "prod": "cross-env CLIENT_ENV=production craco start",
     "---------- PRODUCTION ----------------------------------------------------------------------------------": "",
     "build": "cross-env CLIENT_ENV=production craco build",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "---------- TESTING -------------------------------------------------------------------------------------": "",
     "test": "cross-env CLIENT_ENV=test craco test",
     "type-check": "tsc --noEmit",
@@ -42,12 +45,12 @@
     "axios": "0.19.0",
     "classnames": "2.2.6",
     "connected-react-router": "6.5.2",
-    "dayjs": "1.8.16",
+    "dayjs": "1.8.17",
     "history": "4.10.1",
     "lodash.groupby": "4.6.0",
     "react": "16.11.0",
     "react-dom": "16.11.0",
-    "react-redux": "7.1.1",
+    "react-redux": "7.1.3",
     "react-router-dom": "5.1.2",
     "redux": "4.0.4",
     "redux-devtools-extension": "2.13.8",
@@ -57,33 +60,35 @@
     "semantic-ui-css": "2.4.1",
     "semantic-ui-react": "0.88.1",
     "sjs-base-model": "1.9.0",
-    "ts-optchain": "0.1.8",
     "uuid": "3.3.3"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.4.4",
+    "@babel/plugin-proposal-optional-chaining": "7.6.0",
     "@craco/craco": "5.6.1",
     "@types/classnames": "2.2.9",
     "@types/history": "4.7.3",
-    "@types/jest": "24.0.21",
-    "@types/node": "12.12.5",
+    "@types/jest": "24.0.22",
+    "@types/node": "12.12.7",
     "@types/react": "16.9.11",
-    "@types/react-dom": "16.9.3",
+    "@types/react-dom": "16.9.4",
     "@types/react-redux": "7.1.5",
     "@types/react-router-dom": "5.1.2",
     "@types/uuid": "3.4.6",
-    "@typescript-eslint/eslint-plugin": "2.6.1",
-    "@typescript-eslint/parser": "2.6.1",
+    "@typescript-eslint/eslint-plugin": "2.7.0",
+    "@typescript-eslint/parser": "2.7.0",
     "cross-env": "6.0.3",
     "eslint": "6.6.0",
     "eslint-config-prettier": "6.5.0",
     "eslint-plugin-prettier": "3.1.1",
     "eslint-plugin-react": "7.16.0",
     "generate-template-files": "2.2.0",
+    "gh-pages": "2.1.1",
     "husky": "3.0.9",
     "node-sass": "4.13.0",
-    "prettier": "1.18.2",
-    "pretty-quick": "2.0.0",
+    "prettier": "1.19.1",
+    "pretty-quick": "2.0.1",
     "react-scripts": "3.2.0",
-    "typescript": "3.6.4"
+    "typescript": "3.7.2"
   }
 }

src/utilities/HttpUtility.js

@@ -1,6 +1,5 @@
 import axios from 'axios';
 import HttpErrorResponseModel from '../models/HttpErrorResponseModel';
-import { oc } from 'ts-optchain';
 
 const RequestMethod = {
   Get: 'GET',
@@ -71,7 +70,7 @@ export default class HttpUtility {
         url: restRequest.url,
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded',
-          ...oc(config).headers(undefined),
+          ...config?.headers,
         },
       };
 

src/views/home-page/components/actors/components/ActorCard.jsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import { Card, Image } from 'semantic-ui-react';
-import { oc } from 'ts-optchain';
 
 export default class ActorCard extends React.PureComponent {
   render() {
     const { cardData } = this.props;
-    const image = oc(cardData).character.image.medium('');
+    const image = cardData?.character?.image?.medium;
     const missingImage = 'https://react.semantic-ui.com/images/wireframe/image.png';
 
     return (
       <Card key={cardData.person.name}>
         <Card.Content>
-          <Image floated="right" size="mini" src={image || missingImage} />
+          <Image floated="right" size="mini" src={image ?? missingImage} />
           <Card.Header>{cardData.person.name}</Card.Header>
           <Card.Meta>as {cardData.character.name}</Card.Meta>
           <Card.Description>

src/views/home-page/components/main-overview/MainOverview.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { Item } from 'semantic-ui-react';
-import { oc } from 'ts-optchain';
 import ShowsAction from '../../../../stores/shows/ShowsAction';
 
 const mapStateToProps = (state, ownProps) => ({
@@ -20,8 +19,8 @@ class MainOverview extends React.Component {
       return null;
     }
 
-    const image = oc(show).image.medium('');
-    const network = oc(show).network.name('');
+    const image = show?.image?.medium ?? '';
+    const network = show?.network?.name ?? '';
 
     return (
       <Item.Group>