Fix/cld 306 remove ts optional chaining (#74)

* [CLD-306] Remove optional chaining

* [CLD-306] Add babel polyfill to webpack

jest.config.js

@@ -1,5 +1,5 @@
-const { pathsToModuleNameMapper } = require('ts-jest/utils');
-const { compilerOptions } = require('./tsconfig');
+const { pathsToModuleNameMapper } = require('ts-jest/utils')
+const { compilerOptions } = require('./tsconfig')
 
 module.exports = {
   preset: 'ts-jest',
@@ -8,17 +8,16 @@ module.exports = {
   collectCoverageFrom: ['<rootDir>/src/**/*.ts', '<rootDir>/src/**/*.tsx'],
   coverageDirectory: './src/tests/coverage',
   coveragePathIgnorePatterns: [
-    '<rootDir>[/\\\\](node_modules|src/types|src/tests|src/scripts)[/\\\\]', 'service-worker.ts'
+    '<rootDir>[/\\\\](node_modules|src/types|src/tests|src/scripts)[/\\\\]',
+    'service-worker.ts'
   ],
   modulePathIgnorePatterns: ['<rootDir>[/\\\\](node_modules)[/\\\\]'],
   moduleNameMapper: {
-    '^.+\.(?=.*scss|sass|css|jpg).*': '<rootDir>/src/scripts/css-stub.js',
+    '^.+.(?=.*scss|sass|css|jpg).*': '<rootDir>/src/scripts/css-stub.js',
     ...pathsToModuleNameMapper(compilerOptions.paths, {
-      prefix: '<rootDir>/',
+      prefix: '<rootDir>/'
     })
   },
-  globalSetup: "./jest-global-setup.js",
-  snapshotSerializers: [
-    "enzyme-to-json/serializer"
-  ],
-};
+  globalSetup: './jest-global-setup.js',
+  snapshotSerializers: ['enzyme-to-json/serializer']
+}

package.json

@@ -40,10 +40,10 @@
     "react-router-dom": "^5.0.1",
     "redux": "^4.0.1",
     "redux-persist": "^5.10.0",
-    "redux-saga": "^1.0.3",
-    "ts-optchain": "^0.1.7"
+    "redux-saga": "^1.1.3"
   },
   "devDependencies": {
+    "@babel/polyfill": "^7.7.0",
     "@redux-saga/testing-utils": "^1.0.5",
     "@types/enzyme": "^3.9.3",
     "@types/googlemaps": "^3.37.5",
@@ -81,7 +81,7 @@
     "mini-css-extract-plugin": "^0.7.0",
     "mockdate": "^2.0.5",
     "node-sass": "^4.12.0",
-    "prettier": "^1.17.1",
+    "prettier": "^1.19.1",
     "prettier-plugin-packagejson": "^2.0.1",
     "purgecss": "^1.3.0",
     "purgecss-whitelister": "^2.4.0",
@@ -94,11 +94,11 @@
     "ts-loader": "^6.0.1",
     "ts-node": "^8.3.0",
     "ts-paths-to-webpack-alias": "^0.3.1",
-    "tslint": "^5.16.0",
+    "tslint": "^5.20.1",
     "tslint-config-prettier": "^1.18.0",
-    "tslint-config-standard": "^8.0.1",
+    "tslint-config-standard": "^9.0.0",
     "tslint-plugin-prettier": "^2.0.1",
-    "typescript": "^3.5.1",
+    "typescript": "^3.7.2",
     "wdio-browserstack-reporter": "^0.1.1",
     "wdio-chromedriver-service": "^0.1.3",
     "wdio-jasmine-framework": "^0.3.8",

src/components/common/appointment-detail/appointment-detail.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import dayjs from 'dayjs'
 import { connect } from 'react-redux'
-import { oc } from 'ts-optchain'
 import { TiTimes, TiTick, TiMail, TiHome, TiPhoneOutline, TiDevicePhone } from 'react-icons/ti'
 import { FaClock, FaMale, FaHome, FaStickyNote, FaHandshake } from 'react-icons/fa'
 import { Dispatch } from 'redux'
@@ -179,7 +178,7 @@ export const renderApplicantAttendees = (attendees: AttendeeModel[], loginMode:
           <div className={appointmentDetailTextContainer}>
             <div className={styles.appointmentDetailIconContainer}>
               <FaMale />
-              <H6>{capitalizeFirstLetter(oc(attendee).type(''))}:</H6>
+              <H6>{capitalizeFirstLetter(attendee?.type || '')}:</H6>
             </div>
             <p>
               <div className="mb-2">
@@ -193,7 +192,7 @@ export const renderApplicantAttendees = (attendees: AttendeeModel[], loginMode:
                   <p>{attendee.name}</p>
                 </AcLink>
               </div>
-              {renderCommunicationDetail(oc(attendee).communicationDetails([]))}
+              {renderCommunicationDetail(attendee?.communicationDetails || [])}
             </p>
           </div>
         )
@@ -273,11 +272,11 @@ export const AppointmentModal: React.FC<AppointmentModalProps & AppointmentDetai
   additionalAttendees,
   applicantAttendees
 }) => {
-  let address = oc(appointment).property.address()
-  const typeId = oc(appointment).typeId()
-  const propertyId = oc(appointment).property.id()
+  let address = appointment?.property?.address
+  const typeId = appointment?.typeId
+  const propertyId = appointment?.property?.id
   const basicAddress = address
-    ? `${oc(address).buildingName('')} ${oc(address).buildingNumber('')} ${oc(address).line1('')}`
+    ? `${address?.buildingName || ''} ${address?.buildingNumber || ''} ${address?.line1 || ''}`
     : ''
 
   const type =
@@ -294,12 +293,12 @@ export const AppointmentModal: React.FC<AppointmentModalProps & AppointmentDetai
         <Loader />
       ) : (
         <>
-          {renderDateTime(oc(appointment).property.address(), appointment)}
+          {renderDateTime(appointment?.property?.address, appointment)}
           {renderAdditionalAttendees(additionalAttendees, loginMode)}
           {renderApplicantAttendees(applicantAttendees, loginMode)}
           {renderAddress(loginMode, address, propertyId)}
           {renderNotes(appointment.description)}
-          {renderArrangements(oc(appointment).property.arrangements(''))}
+          {renderArrangements(appointment?.property?.arrangements || '')}
         </>
       )}
     </Modal>
@@ -343,30 +342,30 @@ export const getLoggedInUser = (
 // Get attendees types: negotiator, office
 export const getAdditionalAttendees = (attendees: AttendeeModel[]) => {
   return attendees.filter(attendee => {
-    const attendeeType = oc(attendee).type('')
+    const attendeeType = attendee?.type || ''
     return ['negotiator', 'office'].includes(attendeeType)
   })
 }
 
 // Get attendees types: landlord, contact, applicant, tenant
 export const getApplicantAttendees = (attendees: AttendeeModel[]) => {
   return attendees.filter(attendee => {
-    const attendeeType = oc(attendee).type('')
+    const attendeeType = attendee?.type || ''
     return ['landlord', 'contact', 'applicant', 'tenant'].includes(attendeeType)
   })
 }
 
 export const mapStateToProps = (state: ReduxState): AppointmentDetailMappedProps => {
-  const appointment = oc(state).appointmentDetail.appointmentDetail({})
-  const userCode = oc(state).auth.loginSession.loginIdentity.userCode('')
+  const appointment = state?.appointmentDetail?.appointmentDetail || {}
+  const userCode = state?.auth?.loginSession?.loginIdentity?.userCode || ''
   return {
     appointment: appointment,
     visible: state.appointmentDetail.isModalVisible,
     isLoading: state.appointmentDetail.loading,
     appointmentTypes: state.appointments.appointmentTypes,
-    loginMode: oc(state).auth.refreshSession.mode('WEB'),
-    additionalAttendees: filterLoggedInUser(getAdditionalAttendees(oc(appointment).attendees([])), userCode),
-    applicantAttendees: getApplicantAttendees(oc(appointment).attendees([]))
+    loginMode: state?.auth?.refreshSession?.mode || 'WEB',
+    additionalAttendees: filterLoggedInUser(getAdditionalAttendees(appointment?.attendees || []), userCode),
+    applicantAttendees: getApplicantAttendees(appointment?.attendees || [])
   }
 }
 
@@ -378,10 +377,7 @@ export const mapDispatchToProps = (dispatch: Dispatch): AppointmentDetailMappedA
   afterClose: () => dispatch(appointmentDetailHideModal())
 })
 
-const AppointmentDetailWithRedux = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(AppointmentModal)
+const AppointmentDetailWithRedux = connect(mapStateToProps, mapDispatchToProps)(AppointmentModal)
 
 AppointmentDetailWithRedux.displayName = 'AppointmentDetailWithRedux'
 

src/components/container/__tests__/map.tsx

@@ -5,12 +5,11 @@ import { shallow } from 'enzyme'
 import { appointmentsDataStub } from '@/sagas/__stubs__/appointments'
 import { appointmentDataStub } from '@/sagas/__stubs__/appointment'
 import { TravelMode } from '../../ui/travel-mode'
-import { oc } from 'ts-optchain'
 
 describe('Map', () => {
   it('Should match snapshot', () => {
     const mockProps = {
-      appointments: oc(appointmentsDataStub).appointments.data([]),
+      appointments: appointmentsDataStub?.appointments?.data || [],
       destinationLatLng: { lat: 0, lng: 0 },
       travelMode: 'WALKING' as TravelMode,
       handleOnClick: jest.fn(),
@@ -52,7 +51,7 @@ describe('Map', () => {
       } as any
       const result = mapStateToProps(mockState)
       const expected = {
-        appointments: oc(appointmentsDataStub).appointments.data([]),
+        appointments: appointmentsDataStub?.appointments?.data || [],
         destinationLatLng: {
           lat: 52.1284,
           lng: -0.507145

src/components/container/map.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { CoordinateProps, Coords, Map, combineAddress } from '@reapit/elements'
-import { oc } from 'ts-optchain'
 import { connect } from 'react-redux'
 import { ReduxState } from '@/types/core'
 import { AppointmentModel, AddressModel } from '@/types/appointments'
@@ -70,10 +69,10 @@ export const MapContainer = ({
   const coordinates: CoordinateProps<any> = filterInvalidMarker(
     appointments.map(
       (appointment: AppointmentModel): Coordinate => {
-        const lat = oc(appointment).property.address.geolocation.latitude(UNDEFINED_LATLNG_NUMBER)
-        const lng = oc(appointment).property.address.geolocation.longitude(UNDEFINED_LATLNG_NUMBER)
-        const id = oc(appointment).id(UNDEFINED_NULL_STRING)
-        const address = oc(appointment).property.address({})
+        const lat = appointment?.property?.address?.geolocation?.latitude || UNDEFINED_LATLNG_NUMBER
+        const lng = appointment?.property?.address?.geolocation?.longitude || UNDEFINED_LATLNG_NUMBER
+        const id = appointment?.id || UNDEFINED_NULL_STRING
+        const address = appointment?.property?.address || {}
         return {
           id,
           address,
@@ -136,18 +135,18 @@ export const MapContainer = ({
 }
 
 export const mapStateToProps = (state: ReduxState): MapContainerMappedState => {
-  const appointments = oc(state).appointments.appointments.data([])
-  const destinationLat = oc(state).direction.destination.property.address.geolocation.latitude(undefined)
-  const destinationLng = oc(state).direction.destination.property.address.geolocation.longitude(undefined)
-  const destinationAddress = combineAddress(oc(state).direction.destination.property.address({}))
+  const appointments = state?.appointments?.appointments?.data || []
+  const destinationLat = state?.direction?.destination?.property?.address?.geolocation?.latitude
+  const destinationLng = state?.direction?.destination?.property?.address?.geolocation?.longitude
+  const destinationAddress = combineAddress(state?.direction?.destination?.property?.address || {})
   return {
     appointments,
     destinationLatLng: {
       lat: destinationLat,
       lng: destinationLng
     },
     destinationAddress,
-    desktopMode: oc(state).auth.refreshSession.mode() === 'DESKTOP'
+    desktopMode: state?.auth?.refreshSession?.mode === 'DESKTOP'
   }
 }
 
@@ -157,10 +156,7 @@ export const mapDispatchToProps = (dispatch: Dispatch): MapContainerMappedAction
   }
 })
 
-const MapContainerWithConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(MapContainer)
+const MapContainerWithConnect = connect(mapStateToProps, mapDispatchToProps)(MapContainer)
 
 MapContainerWithConnect.displayName = 'CurrentLocButtonWithConnect'
 

src/components/container/view-detail-button.tsx

@@ -35,10 +35,7 @@ export const mapDispatchToProps = (
   onClick: handleOnClick(dispatch, ownProps)
 })
 
-const CurrentLocButtonWithRedux = connect(
-  null,
-  mapDispatchToProps
-)(ViewDetailButton)
+const CurrentLocButtonWithRedux = connect(null, mapDispatchToProps)(ViewDetailButton)
 
 CurrentLocButtonWithRedux.displayName = 'CurrentLocButtonWithRedux'
 

src/components/hocs/error-boundary.tsx

@@ -59,7 +59,4 @@ export const mapDispatchToProps = (dispatch: Dispatch): ErrorMappedActions => ({
   errorThrownComponent: (error: ErrorData) => dispatch(errorThrownComponent(error))
 })
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ErrorBoundary)
+export default connect(mapStateToProps, mapDispatchToProps)(ErrorBoundary)

src/components/pages/__tests__/home.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { shallow } from 'enzyme'
-import { oc } from 'ts-optchain'
 import { appointmentsDataStub } from '@/sagas/__stubs__/appointments'
 import { appointmentDataStub } from '@/sagas/__stubs__/appointment'
+import { OnlineState } from '@/reducers/online'
+import { ReduxState } from '@/types/core'
 import {
   Home,
   HomeProps,
@@ -14,8 +15,19 @@ import {
   mapStateToProps,
   tabConfigs
 } from '../home'
-import { ReduxState } from '@/types/core'
-import { OnlineState } from '@/reducers/online'
+
+const props = {
+  appointmentsState: {
+    appointments: appointmentsDataStub.appointments,
+    loading: false,
+    time: 'Today',
+    selectedAppointment: appointmentsDataStub?.appointments?.data?.[0]
+  },
+  nextAppointmentState: {
+    data: null
+  },
+  desktopMode: false
+} as HomeProps
 
 describe('Home', () => {
   it('should match a snapshot', () => {
@@ -24,7 +36,7 @@ describe('Home', () => {
         appointments: appointmentsDataStub.appointments,
         loading: false,
         time: 'Today',
-        selectedAppointment: oc(appointmentsDataStub).appointments.data[0]()
+        selectedAppointment: appointmentsDataStub?.appointments?.data?.[0]
       },
       nextAppointmentState: {
         data: null
@@ -41,7 +53,7 @@ describe('Home', () => {
         appointments: appointmentsDataStub.appointments,
         loading: true,
         time: 'Today',
-        selectedAppointment: oc(appointmentsDataStub).appointments.data[0]()
+        selectedAppointment: appointmentsDataStub?.appointments?.data?.[0]
       },
       nextAppointmentState: {
         data: null

src/components/pages/home.tsx

@@ -4,7 +4,6 @@ import { withRouter, RouteComponentProps } from 'react-router'
 import { ReduxState } from '@/types/core'
 import ErrorBoundary from '@/components/hocs/error-boundary'
 import { AppointmentsState, AppointmentsTime } from '@/reducers/appointments'
-import { oc } from 'ts-optchain'
 import { Loader, Tabs, TabConfig, ButtonGroup, Button } from '@reapit/elements'
 import { AppointmentList } from '../ui/appointment-list'
 import { appointmentsRequestData, setSelectedAppointment } from '@/actions/appointments'
@@ -58,7 +57,7 @@ export const tabConfigs = ({ currentTab, changeHomeTab }): TabConfig[] => [
 const filterTimes: AppointmentsTime[] = ['Today', 'Tomorrow', 'Week View']
 
 export const handleUseEffect = ({ appointmentsState, requestNextAppointment, travelMode }) => () => {
-  const hasAppointments = oc(appointmentsState).appointments.data([]).length > 0
+  const hasAppointments = (appointmentsState?.appointments?.data || []).length > 0
   if (appointmentsState.time === 'Today' && hasAppointments && !appointmentsState.loading) {
     requestNextAppointment(travelMode)
   }
@@ -85,7 +84,7 @@ export const Home: React.FunctionComponent<HomeProps> = ({
   const unfetched = !appointmentsState.appointments
   const loading = appointmentsState.loading
   const selectedAppointment = appointmentsState.selectedAppointment
-  const list = oc<AppointmentsState>(appointmentsState).appointments.data([])
+  const list = appointmentsState?.appointments?.data || []
   const time = appointmentsState.time
   const [travelMode, setTravelMode] = React.useState<'DRIVING' | 'WALKING'>('DRIVING')
   const isMobileView = isMobile()
@@ -160,7 +159,7 @@ export const mapStateToProps = (state: ReduxState): HomeMappedProps => ({
   appointmentsState: state.appointments,
   nextAppointmentState: state.nextAppointment,
   currentTab: state.home.homeTab,
-  desktopMode: oc(state).auth.refreshSession.mode() === 'DESKTOP',
+  desktopMode: state?.auth?.refreshSession?.mode === 'DESKTOP',
   isOnline: selectOnlineStatus(state)
 })
 
@@ -179,9 +178,4 @@ export const mapDispatchToProps = (dispatch: any): HomeMappedActions => ({
   }
 })
 
-export default withRouter(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )(Home)
-)
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Home))

src/components/pages/login.tsx

@@ -112,9 +112,4 @@ export const mapDispatchToProps = (dispatch: Dispatch): LoginMappedActions => ({
   login: (params: LoginParams) => dispatch(authLogin(params))
 })
 
-export default withRouter(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )(Login)
-)
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login))