Function App

exercises/02.side-effects/01.problem.effects/index.tsx:11–81

()

}

function App() {
	const [query, setQuery] = useState(getQueryParam)

	const words = query.split(' ')

	const dogChecked = words.includes('dog')
	const catChecked = words.includes('cat')
	const caterpillarChecked = words.includes('caterpillar')

	// 🐨 add a useEffect(() => {}, []) call here (we'll talk about that empty array later)
	// 🐨 in the useEffect callback, subscribe to window's popstate event
	// 🦉 if that doesn't make sense to you... don't worry, it's supposed to be broken! We'll fix it next
	// 🐨 your event handler should call setQuery to getQueryParam()
	// 📜 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

	function handleCheck(tag: string, checked: boolean) {
		const newWords = checked ? [...words, tag] : words.filter((w) => w !== tag)
		setQuery(newWords.filter(Boolean).join(' ').trim())
	}

	return (
		<div className="app">
			<form
				action={() => {
					setGlobalSearchParams({ query })
				}}
			>
				<div>
					<label htmlFor="searchInput">Search:</label>
					<input
						id="searchInput"
						name="query"
						type="search"
						value={query}
						onChange={(e) => setQuery(e.currentTarget.value)}
					/>
				</div>
				<div>
					<label>
						<input
							type="checkbox"
							checked={dogChecked}
							onChange={(e) => handleCheck('dog', e.currentTarget.checked)}
						/>{' '}
						🐶 dog
					</label>
					<label>
						<input
							type="checkbox"
							checked={catChecked}
							onChange={(e) => handleCheck('cat', e.currentTarget.checked)}
						/>{' '}
						🐱 cat
					</label>
					<label>
						<input
							type="checkbox"
							checked={caterpillarChecked}