fix(settings): Prevent invalid state when booting save with Home scre…

…en disabled (#471)

* fix(ui): prevent crash when loading a save that has home screen hidden

* fix(cow): avoid setting image states on unmounted components

src/components/CowCard/CowCard.js

@@ -31,6 +31,7 @@ import {
 } from '../../utils'
 import { PURCHASEABLE_COW_PENS } from '../../constants'
 import { OFFER_COW_FOR_TRADE, WITHDRAW_COW_FROM_TRADE } from '../../templates'
+import { useMountState } from '../../hooks/useMountState'
 
 import Subheader from './Subheader'
 
@@ -119,13 +120,19 @@ export const CowCard = (
     isCowOfferedForTradeByPeer && cowIdOfferedForTrade.length > 0
   )
 
+  const { isMounted } = useMountState()
+
   useEffect(() => {
     ;(async () => {
-      setCowImage(await getCowImage(cow))
+      const cowImage = await getCowImage(cow)
+
+      if (isMounted() === false) return
+
+      setCowImage(cowImage)
     })()
 
     setDisplayName(getCowDisplayName(cow, id, allowCustomPeerCowNames))
-  }, [cow, id, allowCustomPeerCowNames])
+  }, [cow, id, allowCustomPeerCowNames, isMounted])
 
   useEffect(() => {
     if (isSelected) {

src/components/CowPen/CowPen.js

@@ -34,6 +34,7 @@ export class Cow extends Component {
   repositionTimeoutId = null
   animateHugTimeoutId = null
   tweenable = new Tweenable()
+  isComponentMounted = false
 
   static flipAnimationDuration = 1000
   static transitionAnimationDuration = 3000
@@ -162,15 +163,21 @@ export class Cow extends Component {
   }
 
   componentDidMount() {
+    this.isComponentMounted = true
     this.scheduleMove()
     ;(async () => {
-      this.setState({ cowImage: await getCowImage(this.props.cow) })
+      const cowImage = await getCowImage(this.props.cow)
+
+      if (!this.isComponentMounted) return
+
+      this.setState({ cowImage: cowImage })
     })()
   }
 
   componentWillUnmount() {
     ;[this.repositionTimeoutId, this.animateHugTimeoutId].forEach(clearTimeout)
 
+    this.isComponentMounted = false
     this.tweenable.cancel()
   }
 

src/components/Farmhand/Farmhand.js

@@ -91,6 +91,7 @@ import {
   STAGE_TITLE_MAP,
   STANDARD_LOAN_AMOUNT,
   Z_INDEX,
+  STANDARD_VIEW_LIST,
 } from '../../constants'
 import {
   HEARTBEAT_INTERVAL_PERIOD,
@@ -363,8 +364,8 @@ export default class Farmhand extends FarmhandReducers {
   }
 
   get viewList() {
-    const { CELLAR, COW_PEN, FIELD, HOME, WORKSHOP, SHOP } = stageFocusType
-    const viewList = [SHOP, FIELD]
+    const { CELLAR, COW_PEN, HOME, WORKSHOP } = stageFocusType
+    const viewList = [...STANDARD_VIEW_LIST]
 
     if (this.state.showHomeScreen) {
       viewList.unshift(HOME)

src/constants.js

@@ -280,6 +280,8 @@ export const EXPERIENCE_VALUES = {
   SMELTER_ACQUIRED: 10,
 }
 
+export const STANDARD_VIEW_LIST = [stageFocusType.SHOP, stageFocusType.FIELD]
+
 export const Z_INDEX = {
   END_DAY_BUTTON: 1100,
 }

src/hooks/useMountState/index.ts

@@ -0,0 +1 @@
+export * from './useMountState'

src/hooks/useMountState/useMountState.ts

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react'
+
+export const useMountState = () => {
+  const isMountedRef = useRef(false)
+
+  useEffect(() => {
+    isMountedRef.current = true
+
+    return () => {
+      isMountedRef.current = false
+    }
+  }, [isMountedRef])
+
+  const isMounted = () => isMountedRef.current
+
+  return { isMounted }
+}

src/utils/index.js

@@ -47,6 +47,7 @@ import {
   fertilizerType,
   genders,
   itemType,
+  stageFocusType,
   standardCowColors,
   toolLevel,
 } from '../enums'
@@ -80,6 +81,7 @@ import {
   STORAGE_EXPANSION_BASE_PRICE,
   STORM_CHANCE,
   STORAGE_EXPANSION_SCALE_PREMIUM,
+  STANDARD_VIEW_LIST,
 } from '../constants'
 import { random } from '../common/utils'
 
@@ -944,7 +946,7 @@ export const unlockTool = (currentToolLevels, toolType) => {
  * @return {farmhand.state}
  */
 export const transformStateDataForImport = state => {
-  const sanitizedState = { ...state }
+  let sanitizedState = { ...state }
 
   const rejectedKeys = ['version']
   rejectedKeys.forEach(rejectedKey => delete sanitizedState[rejectedKey])
@@ -953,6 +955,13 @@ export const transformStateDataForImport = state => {
     sanitizedState.experience = farmProductsSold(sanitizedState.itemsSold)
   }
 
+  if (
+    sanitizedState.showHomeScreen === false &&
+    sanitizedState.stageFocus === stageFocusType.HOME
+  ) {
+    sanitizedState = { ...sanitizedState, stageFocus: STANDARD_VIEW_LIST[0] }
+  }
+
   return sanitizedState
 }