From f456fd7ebd8bf8ee904daacfb16080f2eddd9ba0 Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <me+github@kentcdodds.com>
Date: Fri, 23 Feb 2024 09:14:15 -0700
Subject: [PATCH] sync external

---
 exercises/08.focus/01.solution/index.tsx      | 30 +++++++++----------
 .../09.sync-external/01.problem/README.mdx    |  1 +
 .../09.sync-external/01.problem/index.css     | 24 +++++++++++++++
 .../09.sync-external/01.problem/index.tsx     | 14 +++++++++
 .../09.sync-external/01.solution/README.mdx   |  1 +
 .../09.sync-external/01.solution/index.css    | 24 +++++++++++++++
 .../09.sync-external/01.solution/index.tsx    | 28 +++++++++++++++++
 .../09.sync-external/02.problem/README.mdx    |  1 +
 .../09.sync-external/02.problem/index.css     | 24 +++++++++++++++
 .../09.sync-external/02.problem/index.tsx     | 28 +++++++++++++++++
 .../09.sync-external/02.solution/README.mdx   |  1 +
 .../09.sync-external/02.solution/index.css    | 24 +++++++++++++++
 .../09.sync-external/02.solution/index.tsx    | 21 +++++++++++++
 .../02.solution/narrow-media-query.ts         | 15 ++++++++++
 exercises/09.sync-external/README.mdx         |  1 +
 15 files changed, 221 insertions(+), 16 deletions(-)
 create mode 100644 exercises/09.sync-external/01.problem/README.mdx
 create mode 100644 exercises/09.sync-external/01.problem/index.css
 create mode 100644 exercises/09.sync-external/01.problem/index.tsx
 create mode 100644 exercises/09.sync-external/01.solution/README.mdx
 create mode 100644 exercises/09.sync-external/01.solution/index.css
 create mode 100644 exercises/09.sync-external/01.solution/index.tsx
 create mode 100644 exercises/09.sync-external/02.problem/README.mdx
 create mode 100644 exercises/09.sync-external/02.problem/index.css
 create mode 100644 exercises/09.sync-external/02.problem/index.tsx
 create mode 100644 exercises/09.sync-external/02.solution/README.mdx
 create mode 100644 exercises/09.sync-external/02.solution/index.css
 create mode 100644 exercises/09.sync-external/02.solution/index.tsx
 create mode 100644 exercises/09.sync-external/02.solution/narrow-media-query.ts
 create mode 100644 exercises/09.sync-external/README.mdx

diff --git a/exercises/08.focus/01.solution/index.tsx b/exercises/08.focus/01.solution/index.tsx
index a68cedff..eef01ff3 100644
--- a/exercises/08.focus/01.solution/index.tsx
+++ b/exercises/08.focus/01.solution/index.tsx
@@ -1,5 +1,4 @@
 import { useRef, useState } from 'react'
-import { flushSync } from 'react-dom'
 import * as ReactDOM from 'react-dom/client'
 
 function EditableText({
@@ -18,7 +17,7 @@ function EditableText({
 	const [edit, setEdit] = useState(false)
 	const [value, setValue] = useState(initialValue)
 	const inputRef = useRef<HTMLInputElement>(null)
-	const buttonRef = useRef<HTMLButtonElement>(null)
+	// 🐨 add a button ref here
 
 	return edit ? (
 		<form
@@ -26,11 +25,10 @@ function EditableText({
 			onSubmit={event => {
 				event.preventDefault()
 				// here's where you'd send the updated value to the server
-				flushSync(() => {
-					setValue(inputRef.current?.value ?? '')
-					setEdit(false)
-				})
-				buttonRef.current?.focus()
+				// 🐨 wrap these calls in a flushSync
+				setValue(inputRef.current?.value ?? '')
+				setEdit(false)
+				// 🐨 after flushSync, focus the button with the button ref
 			}}
 		>
 			<input
@@ -43,28 +41,28 @@ function EditableText({
 				defaultValue={value}
 				onKeyDown={event => {
 					if (event.key === 'Escape') {
-						flushSync(() => {
-							setEdit(false)
-						})
-						buttonRef.current?.focus()
+						// 🐨 wrap this in a flushSync
+						setEdit(false)
+						// 🐨 after the flushSync, focus the button
 					}
 				}}
 				onBlur={event => {
+					// 🐨 wrap these in a flushSync
 					setValue(event.currentTarget.value)
 					setEdit(false)
+					// 🐨 after the flushSync, focus the button
 				}}
 			/>
 		</form>
 	) : (
 		<button
 			aria-label={buttonLabel}
+			// 🐨 add a ref prop for the button
 			type="button"
-			ref={buttonRef}
 			onClick={() => {
-				flushSync(() => {
-					setEdit(true)
-				})
-				inputRef.current?.select()
+				// 🐨 wrap this in a flushSync
+				setEdit(true)
+				// 🐨 after the flushSync, select all the text of the input
 			}}
 		>
 			{value || 'Edit'}
diff --git a/exercises/09.sync-external/01.problem/README.mdx b/exercises/09.sync-external/01.problem/README.mdx
new file mode 100644
index 00000000..964764c0
--- /dev/null
+++ b/exercises/09.sync-external/01.problem/README.mdx
@@ -0,0 +1 @@
+# useSyncExternalStore
diff --git a/exercises/09.sync-external/01.problem/index.css b/exercises/09.sync-external/01.problem/index.css
new file mode 100644
index 00000000..2c3ff326
--- /dev/null
+++ b/exercises/09.sync-external/01.problem/index.css
@@ -0,0 +1,24 @@
+main {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	padding: 3rem;
+}
+.editable-text {
+	button {
+		/* remove button styles. Make it look like text */
+		background: none;
+		border: none;
+		padding: 4px 8px;
+		font-size: 1.5rem;
+		font-weight: bold;
+	}
+
+	input {
+		/* make it the same size as the button */
+		font-size: 1.5rem;
+		font-weight: bold;
+		padding: 4px 8px;
+		border: none;
+	}
+}
diff --git a/exercises/09.sync-external/01.problem/index.tsx b/exercises/09.sync-external/01.problem/index.tsx
new file mode 100644
index 00000000..0db07d02
--- /dev/null
+++ b/exercises/09.sync-external/01.problem/index.tsx
@@ -0,0 +1,14 @@
+import * as ReactDOM from 'react-dom/client'
+
+function NarrowScreenNotifier() {
+	const isNarrow = false
+	return isNarrow ? 'You are on a narrow screen' : 'You are on a wide screen'
+}
+
+function App() {
+	return <NarrowScreenNotifier />
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)
diff --git a/exercises/09.sync-external/01.solution/README.mdx b/exercises/09.sync-external/01.solution/README.mdx
new file mode 100644
index 00000000..964764c0
--- /dev/null
+++ b/exercises/09.sync-external/01.solution/README.mdx
@@ -0,0 +1 @@
+# useSyncExternalStore
diff --git a/exercises/09.sync-external/01.solution/index.css b/exercises/09.sync-external/01.solution/index.css
new file mode 100644
index 00000000..2c3ff326
--- /dev/null
+++ b/exercises/09.sync-external/01.solution/index.css
@@ -0,0 +1,24 @@
+main {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	padding: 3rem;
+}
+.editable-text {
+	button {
+		/* remove button styles. Make it look like text */
+		background: none;
+		border: none;
+		padding: 4px 8px;
+		font-size: 1.5rem;
+		font-weight: bold;
+	}
+
+	input {
+		/* make it the same size as the button */
+		font-size: 1.5rem;
+		font-weight: bold;
+		padding: 4px 8px;
+		border: none;
+	}
+}
diff --git a/exercises/09.sync-external/01.solution/index.tsx b/exercises/09.sync-external/01.solution/index.tsx
new file mode 100644
index 00000000..21bc7d10
--- /dev/null
+++ b/exercises/09.sync-external/01.solution/index.tsx
@@ -0,0 +1,28 @@
+import { useSyncExternalStore } from 'react'
+import * as ReactDOM from 'react-dom/client'
+
+const mediaQuery = '(max-width: 600px)'
+function getSnapshot() {
+	return window.matchMedia(mediaQuery).matches
+}
+
+function subscribe(callback: () => void) {
+	const mediaQueryList = window.matchMedia(mediaQuery)
+	mediaQueryList.addEventListener('change', callback)
+	return () => {
+		mediaQueryList.removeEventListener('change', callback)
+	}
+}
+
+function NarrowScreenNotifier() {
+	const isNarrow = useSyncExternalStore(subscribe, getSnapshot)
+	return isNarrow ? 'You are on a narrow screen' : 'You are on a wide screen'
+}
+
+function App() {
+	return <NarrowScreenNotifier />
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)
diff --git a/exercises/09.sync-external/02.problem/README.mdx b/exercises/09.sync-external/02.problem/README.mdx
new file mode 100644
index 00000000..26fb3987
--- /dev/null
+++ b/exercises/09.sync-external/02.problem/README.mdx
@@ -0,0 +1 @@
+# Make Store Utility
diff --git a/exercises/09.sync-external/02.problem/index.css b/exercises/09.sync-external/02.problem/index.css
new file mode 100644
index 00000000..2c3ff326
--- /dev/null
+++ b/exercises/09.sync-external/02.problem/index.css
@@ -0,0 +1,24 @@
+main {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	padding: 3rem;
+}
+.editable-text {
+	button {
+		/* remove button styles. Make it look like text */
+		background: none;
+		border: none;
+		padding: 4px 8px;
+		font-size: 1.5rem;
+		font-weight: bold;
+	}
+
+	input {
+		/* make it the same size as the button */
+		font-size: 1.5rem;
+		font-weight: bold;
+		padding: 4px 8px;
+		border: none;
+	}
+}
diff --git a/exercises/09.sync-external/02.problem/index.tsx b/exercises/09.sync-external/02.problem/index.tsx
new file mode 100644
index 00000000..21bc7d10
--- /dev/null
+++ b/exercises/09.sync-external/02.problem/index.tsx
@@ -0,0 +1,28 @@
+import { useSyncExternalStore } from 'react'
+import * as ReactDOM from 'react-dom/client'
+
+const mediaQuery = '(max-width: 600px)'
+function getSnapshot() {
+	return window.matchMedia(mediaQuery).matches
+}
+
+function subscribe(callback: () => void) {
+	const mediaQueryList = window.matchMedia(mediaQuery)
+	mediaQueryList.addEventListener('change', callback)
+	return () => {
+		mediaQueryList.removeEventListener('change', callback)
+	}
+}
+
+function NarrowScreenNotifier() {
+	const isNarrow = useSyncExternalStore(subscribe, getSnapshot)
+	return isNarrow ? 'You are on a narrow screen' : 'You are on a wide screen'
+}
+
+function App() {
+	return <NarrowScreenNotifier />
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)
diff --git a/exercises/09.sync-external/02.solution/README.mdx b/exercises/09.sync-external/02.solution/README.mdx
new file mode 100644
index 00000000..26fb3987
--- /dev/null
+++ b/exercises/09.sync-external/02.solution/README.mdx
@@ -0,0 +1 @@
+# Make Store Utility
diff --git a/exercises/09.sync-external/02.solution/index.css b/exercises/09.sync-external/02.solution/index.css
new file mode 100644
index 00000000..2c3ff326
--- /dev/null
+++ b/exercises/09.sync-external/02.solution/index.css
@@ -0,0 +1,24 @@
+main {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	padding: 3rem;
+}
+.editable-text {
+	button {
+		/* remove button styles. Make it look like text */
+		background: none;
+		border: none;
+		padding: 4px 8px;
+		font-size: 1.5rem;
+		font-weight: bold;
+	}
+
+	input {
+		/* make it the same size as the button */
+		font-size: 1.5rem;
+		font-weight: bold;
+		padding: 4px 8px;
+		border: none;
+	}
+}
diff --git a/exercises/09.sync-external/02.solution/index.tsx b/exercises/09.sync-external/02.solution/index.tsx
new file mode 100644
index 00000000..2fe958f8
--- /dev/null
+++ b/exercises/09.sync-external/02.solution/index.tsx
@@ -0,0 +1,21 @@
+import { useSyncExternalStore } from 'react'
+import * as ReactDOM from 'react-dom/client'
+import { makeMediaQueryStore } from './narrow-media-query'
+
+const narrowScreenStore = makeMediaQueryStore('(max-width: 600px)')
+
+function NarrowScreenNotifier() {
+	const isNarrow = useSyncExternalStore(
+		narrowScreenStore.subscribe,
+		narrowScreenStore.getSnapshot,
+	)
+	return isNarrow ? 'You are on a narrow screen' : 'You are on a wide screen'
+}
+
+function App() {
+	return <NarrowScreenNotifier />
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)
diff --git a/exercises/09.sync-external/02.solution/narrow-media-query.ts b/exercises/09.sync-external/02.solution/narrow-media-query.ts
new file mode 100644
index 00000000..27cca0f1
--- /dev/null
+++ b/exercises/09.sync-external/02.solution/narrow-media-query.ts
@@ -0,0 +1,15 @@
+export function makeMediaQueryStore(mediaQuery: string) {
+	function getSnapshot() {
+		return window.matchMedia(mediaQuery).matches
+	}
+
+	function subscribe(callback: () => void) {
+		const mediaQueryList = window.matchMedia(mediaQuery)
+		mediaQueryList.addEventListener('change', callback)
+		return () => {
+			mediaQueryList.removeEventListener('change', callback)
+		}
+	}
+
+	return { subscribe, getSnapshot }
+}
diff --git a/exercises/09.sync-external/README.mdx b/exercises/09.sync-external/README.mdx
new file mode 100644
index 00000000..0243852c
--- /dev/null
+++ b/exercises/09.sync-external/README.mdx
@@ -0,0 +1 @@
+# Sync External State