From dd084d2ac7255b7eebd9c5c1710d897ea6c4d2ac Mon Sep 17 00:00:00 2001 From: Jeremy Kahn Date: Sun, 1 Dec 2024 10:52:54 -0600 Subject: [PATCH] fix(closes #527): Enable cow renaming (#528) * chore(tsconfig): set moduleResolution: node * fix(#527): enable cow renaming * fix(#526): improve flakey inventory test * refactor(#527): use usehooks-ts implementation of isMounted --- src/components/CowCard/CowCard.js | 10 +++---- src/components/CowCard/CowCard.test.js | 35 ++++++++++++++++++++++ src/components/Inventory/Inventory.test.js | 2 +- src/hooks/useMountState/index.js | 1 - src/hooks/useMountState/useMountState.js | 17 ----------- tsconfig.json | 2 +- 6 files changed, 41 insertions(+), 26 deletions(-) delete mode 100644 src/hooks/useMountState/index.js delete mode 100644 src/hooks/useMountState/useMountState.js diff --git a/src/components/CowCard/CowCard.js b/src/components/CowCard/CowCard.js index 748bc16ef..bfcdef884 100644 --- a/src/components/CowCard/CowCard.js +++ b/src/components/CowCard/CowCard.js @@ -16,6 +16,7 @@ import Typography from '@mui/material/Typography/index.js' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import classNames from 'classnames' import { faMars, faVenus } from '@fortawesome/free-solid-svg-icons' +import { useIsMounted } from 'usehooks-ts' import FarmhandContext from '../Farmhand/Farmhand.context.js' @@ -34,7 +35,6 @@ import { OFFER_COW_FOR_TRADE, WITHDRAW_COW_FROM_TRADE, } from '../../templates.js' -import { useMountState } from '../../hooks/useMountState/index.js' import Subheader from './Subheader/index.js' @@ -123,7 +123,7 @@ export const CowCard = ( isCowOfferedForTradeByPeer && cowIdOfferedForTrade.length > 0 ) - const { isMounted } = useMountState() + const isMounted = useIsMounted() useEffect(() => { ;(async () => { @@ -187,10 +187,8 @@ export const CowCard = ( {...{ disabled: id !== cow.originalOwnerId, onChange: e => { - if (debounced) { - setDisplayName(e.target.value) - debounced.handleCowNameInputChange({ ...e }, cow) - } + setDisplayName(e.target.value) + debounced?.handleCowNameInputChange({ ...e }, cow) }, placeholder: 'Name', value: displayName, diff --git a/src/components/CowCard/CowCard.test.js b/src/components/CowCard/CowCard.test.js index e7e85e4f1..d54e2468d 100644 --- a/src/components/CowCard/CowCard.test.js +++ b/src/components/CowCard/CowCard.test.js @@ -1,5 +1,6 @@ import React from 'react' import { render, screen } from '@testing-library/react' +import userEvent from '@testing-library/user-event' import { generateCow } from '../../utils/index.js' import { noop } from '../../utils/noop.js' @@ -342,4 +343,38 @@ describe('CowCard', () => { }) }) }) + + describe('custom naming', () => { + // NOTE: Validates the fix for: + // https://github.com/jeremyckahn/farmhand/issues/527 + test('cows orignally owned by the player can be renamed', () => { + const renderComponent = () => { + render( + renderComponent(), + }, + }} + /> + ) + } + + renderComponent() + + const nameInput = screen.getByPlaceholderText('Name') + + const customName = 'Custom' + userEvent.clear(nameInput) + userEvent.type(nameInput, customName) + + expect(nameInput).toHaveValue(customName) + }) + }) }) diff --git a/src/components/Inventory/Inventory.test.js b/src/components/Inventory/Inventory.test.js index c3a4dfd80..74a4cda78 100644 --- a/src/components/Inventory/Inventory.test.js +++ b/src/components/Inventory/Inventory.test.js @@ -66,7 +66,7 @@ describe('Inventory Component', () => { const searchInput = screen.getByPlaceholderText('Search inventory...') fireEvent.change(searchInput, { target: { value: 'Carrot' } }) - vitest.runAllTimers() + vitest.advanceTimersByTime(1000) expect(screen.getByText('Carrot')).toBeInTheDocument() expect(screen.queryByText('Pumpkin Seed')).not.toBeInTheDocument() diff --git a/src/hooks/useMountState/index.js b/src/hooks/useMountState/index.js deleted file mode 100644 index 6ee724ea8..000000000 --- a/src/hooks/useMountState/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './useMountState.js' diff --git a/src/hooks/useMountState/useMountState.js b/src/hooks/useMountState/useMountState.js deleted file mode 100644 index 14331f958..000000000 --- a/src/hooks/useMountState/useMountState.js +++ /dev/null @@ -1,17 +0,0 @@ -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 } -} diff --git a/tsconfig.json b/tsconfig.json index 3b5ce50b5..abe004330 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -46,7 +46,7 @@ // "noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */ /* Module Resolution Options */ - // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ + "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */, // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */