feat: refs and the dom step

Author: allforabit

src/challenges/step-03-uncontrolled-components/FilterFormChallenge.js

@@ -1,4 +1,4 @@
-export const FilterFormChallenge = () => {
+export const FilterFormChallenge = ({ ref }) => {
   // Add your code here
   return <form></form>
 }

src/challenges/step-06-forwarding-refs/FancyInputChallenge.js

@@ -0,0 +1,23 @@
+import { FilterFormChallenge } from '../step-03-uncontrolled-components/FilterFormChallenge.js'
+
+// Initially this will trigger an error. We will fix it in this step by forwarding
+// refs.
+const FancyInput = props => {
+  return (
+    <input
+      {...props}
+      style={{
+        padding: '16px',
+        fontWeight: 'bold',
+        border: '1px solid azure',
+        fontSize: '24px'
+      }}
+    />
+  )
+}
+
+export const FilterFormWithStyledInputChallenge = () => {
+  // To get started copy and paste the code from step 3 and paste in here
+  // and amend it to use our `FancyInput` instead of the plain input
+  return <FilterFormChallenge />
+}

src/challenges/step-06-forwarding-refs/FilterFormWithStyledInputChallenge.js

@@ -0,0 +1,7 @@
+import { FilterFormWithStyledInputChallenge } from '../step-06-forwarding-refs/FilterFormWithStyledInputChallenge'
+
+export const FilterFormWithAutofocusChallenge = () => {
+  // To get started copy and paste the code from step 6
+  // and add autofocus functionality using React dom refs
+  return <FilterFormWithStyledInputChallenge />
+}

src/challenges/step-07-refs-and-the-dom/FilterFormAutofocusChallenge.js

@@ -0,0 +1,5 @@
+import { FilterFormWithAutofocusChallenge } from '../step-07-refs-and-the-dom/FilterFormAutofocusChallenge'
+
+export const FilterFormFinalChallenge = () => {
+  return <FilterFormWithAutofocusChallenge />
+}

src/challenges/step-12-third-party-libs/FilterFormFinalChallenge.js

@@ -1,10 +1,10 @@
-import { FilterFormChallenge } from '../challenges/step-03-uncontrolled-components/FilterFormChallenge'
 import { useFilterStateChallenge } from '../challenges/step-02-context/useFilterStateChallenge.js'
 import { useMovieQueryChallenge } from '../challenges/step-01-server-state/useMovieQueryChallenge.js'
 import { FilterStateProviderChallenge } from '../challenges/step-02-context/FilterStateProviderChallenge'
 import { ErrorBoundaryChallenge } from '../challenges/step-04-error-boundaries/ErrorBoundaryChallenge'
 import { MovieList } from '../components/MovieList/MovieList.jsx'
 import { FilterModalChallenge } from '../challenges/step-05-portals/FilterModalChallenge.js'
+import { FilterFormFinalChallenge } from '../challenges/step-12-third-party-libs/FilterFormFinalChallenge'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateChallenge()
@@ -22,7 +22,7 @@ const MovieExplorerApp = () => {
     <ErrorBoundaryChallenge>
       <FilterStateProviderChallenge>
         <FilterModalChallenge>
-          <FilterFormChallenge />
+          <FilterFormFinalChallenge />
         </FilterModalChallenge>
         <MovieListContainer />
       </FilterStateProviderChallenge>

src/pages/index.jsx

@@ -1,10 +1,10 @@
-import { FilterFormChallenge } from '../../challenges/step-03-uncontrolled-components/FilterFormChallenge'
 import { FilterStateProviderChallenge } from '../../challenges/step-02-context/FilterStateProviderChallenge.js'
 import { MovieList } from '../../components/MovieList/MovieList.jsx'
 import { ErrorBoundaryChallenge } from '../../challenges/step-04-error-boundaries/ErrorBoundaryChallenge'
 import { useFilterStateChallenge } from '../../challenges/step-02-context/useFilterStateChallenge.js'
 import { useMovieQuerySolution } from '../../solutions/step-01-server-state/useMovieQuerySolution.js'
 import { FilterModalChallenge } from '../../challenges/step-05-portals/FilterModalChallenge.js'
+import { FilterFormFinalChallenge } from '../../challenges/step-12-third-party-libs/FilterFormFinalChallenge'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateChallenge()
@@ -22,7 +22,7 @@ const Step01ServerState = () => {
     <ErrorBoundaryChallenge>
       <FilterStateProviderChallenge>
         <FilterModalChallenge>
-          <FilterFormChallenge />
+          <FilterFormFinalChallenge />
         </FilterModalChallenge>
         <MovieListContainer />
       </FilterStateProviderChallenge>

src/pages/solutions/step-01-server-state.jsx

@@ -1,4 +1,3 @@
-import { FilterFormChallenge } from '../../challenges/step-03-uncontrolled-components/FilterFormChallenge'
 import { useMovieQuerySolution } from '../../solutions/step-01-server-state/useMovieQuerySolution.js'
 import {
   FilterStateProviderSolution,
@@ -7,6 +6,7 @@ import {
 import { MovieList } from '../../components/MovieList/MovieList.jsx'
 import { ErrorBoundaryChallenge } from '../../challenges/step-04-error-boundaries/ErrorBoundaryChallenge'
 import { FilterModalChallenge } from '../../challenges/step-05-portals/FilterModalChallenge.js'
+import { FilterFormFinalChallenge } from '../../challenges/step-12-third-party-libs/FilterFormFinalChallenge.js'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateSolution()
@@ -24,7 +24,7 @@ const Step02Context = () => {
     <ErrorBoundaryChallenge>
       <FilterStateProviderSolution>
         <FilterModalChallenge>
-          <FilterFormChallenge />
+          <FilterFormFinalChallenge />
         </FilterModalChallenge>
         <MovieListContainer />
       </FilterStateProviderSolution>

src/pages/solutions/step-02-context.jsx

@@ -3,11 +3,11 @@ import {
   FilterStateProviderSolution,
   useFilterStateSolution
 } from '../../solutions/step-02-context/FilterStateContextSolution.jsx'
-import { FilterFormSolution } from '../../solutions/step-03-uncontrolled-components/FilterFormSolution'
 import { MovieList } from '../../components/MovieList/MovieList'
 import { ErrorBoundarySolution } from '../../solutions/step-04-error-boundary/ErrorBoundarySolution'
 import { useEffect } from 'react'
 import { FilterModalChallenge } from '../../challenges/step-05-portals/FilterModalChallenge.js'
+import { FilterFormFinalChallenge } from '../../challenges/step-12-third-party-libs/FilterFormFinalChallenge'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateSolution()
@@ -29,7 +29,7 @@ const Step04ErrorBoundaries = () => {
     <ErrorBoundarySolution>
       <FilterStateProviderSolution>
         <FilterModalChallenge>
-          <FilterFormSolution />
+          <FilterFormFinalChallenge />
         </FilterModalChallenge>
         <MovieListContainer />
       </FilterStateProviderSolution>

src/pages/solutions/step-04-error-boundaries.jsx

@@ -8,6 +8,7 @@ import { MovieList } from '../../components/MovieList/MovieList'
 import { ErrorBoundarySolution } from '../../solutions/step-04-error-boundary/ErrorBoundarySolution'
 import { FilterModalChallenge } from '../../challenges/step-05-portals/FilterModalChallenge'
 import { FilterModalSolution } from '../../solutions/step-05-portals/FilterModalSolution'
+import { FilterFormFinalChallenge } from '../../challenges/step-12-third-party-libs/FilterFormFinalChallenge'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateSolution()

src/pages/solutions/step-05-portals.jsx

@@ -3,21 +3,15 @@ import {
   FilterStateProviderSolution,
   useFilterStateSolution
 } from '../../solutions/step-02-context/FilterStateContextSolution.jsx'
-import { FilterFormSolution } from '../../solutions/step-03-uncontrolled-components/FilterFormSolution'
 import { MovieList } from '../../components/MovieList/MovieList'
 import { ErrorBoundarySolution } from '../../solutions/step-04-error-boundary/ErrorBoundarySolution'
-import { useEffect } from 'react'
-import { FilterModalChallenge } from '../../challenges/step-05-portals/FilterModalChallenge.js'
 import { FilterModalSolution } from '../../solutions/step-05-portals/FilterModalSolution'
+import { FilterFormWithStyledInputSolution } from '../../solutions/step-06-forwarding-refs/FilterFormWithStyledInputSolution'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateSolution()
   const movieQuery = useMovieQuerySolution(filterState)
 
-  useEffect(() => {
-    throw new Error("I'm an error")
-  }, [])
-
   if (!movieQuery.data) {
     return null
   }
@@ -30,7 +24,7 @@ const StepO6ForwardingRefs = () => {
     <ErrorBoundarySolution>
       <FilterStateProviderSolution>
         <FilterModalSolution>
-          <FilterFormSolution />
+          <FilterFormWithStyledInputSolution />
         </FilterModalSolution>
         <MovieListContainer />
       </FilterStateProviderSolution>

src/pages/solutions/step-06-forwarding-refs.jsx

@@ -3,20 +3,15 @@ import {
   FilterStateProviderSolution,
   useFilterStateSolution
 } from '../../solutions/step-02-context/FilterStateContextSolution.jsx'
-import { FilterFormSolution } from '../../solutions/step-03-uncontrolled-components/FilterFormSolution'
 import { MovieList } from '../../components/MovieList/MovieList'
 import { ErrorBoundarySolution } from '../../solutions/step-04-error-boundary/ErrorBoundarySolution'
-import { useEffect } from 'react'
-import { FilterModalChallenge } from '../../challenges/step-05-portals/FilterModalChallenge.js'
+import { FilterFormWithAutofocusSolution } from '../../solutions/step-07-refs-and-the-dom/FilterFormWithAutofocusSolution.js'
+import { FilterModalSolution } from '../../solutions/step-05-portals/FilterModalSolution'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateSolution()
   const movieQuery = useMovieQuerySolution(filterState)
 
-  useEffect(() => {
-    throw new Error("I'm an error")
-  }, [])
-
   if (!movieQuery.data) {
     return null
   }
@@ -28,9 +23,9 @@ const Step07RefsAndTheDom = () => {
   return (
     <ErrorBoundarySolution>
       <FilterStateProviderSolution>
-        <FilterModalChallenge>
-          <FilterFormSolution />
-        </FilterModalChallenge>
+        <FilterModalSolution>
+          <FilterFormWithAutofocusSolution />
+        </FilterModalSolution>
         <MovieListContainer />
       </FilterStateProviderSolution>
     </ErrorBoundarySolution>

src/pages/solutions/step-07-refs-and-the-dom.jsx

@@ -1,6 +1,5 @@
 import { useFilterStateSolution } from '../step-02-context/FilterStateContextSolution.jsx'
 import { useRef } from 'react'
-import { FancyInputSolution } from '../step-06-forwarding-refs/FancyInputSolution'
 
 export const FilterFormSolution = () => {
   const filterState = useFilterStateSolution()
@@ -15,7 +14,7 @@ export const FilterFormSolution = () => {
     <form onSubmit={handleSubmit}>
       <label>
         Year:
-        <FancyInputSolution type="text" ref={inputRef} />
+        <input type="text" ref={inputRef} />
       </label>
       <input type="submit" value="Submit" />
     </form>

src/solutions/step-03-uncontrolled-components/FilterFormSolution.jsx

@@ -20,7 +20,7 @@ class ErrorBoundary extends React.Component {
   render() {
     if (this.state.hasError) {
       // You can render any custom fallback UI
-      return <h1>Something went wrong.</h1>
+      return <h1>Something went wrong!!!</h1>
     }
 
     return this.props.children

src/solutions/step-04-error-boundary/ErrorBoundarySolution.js

@@ -0,0 +1,39 @@
+import { forwardRef, useRef } from 'react'
+import { useFilterStateSolution } from '../step-02-context/FilterStateContextSolution.jsx'
+
+const FancyInput = forwardRef((props, ref) => {
+  return (
+    <input
+      {...props}
+      ref={ref}
+      style={{
+        padding: '16px',
+        fontWeight: 'bold',
+        border: '1px solid azure',
+        fontSize: '24px'
+      }}
+    />
+  )
+})
+
+FancyInput.displayName = 'FancyInput'
+
+export const FilterFormWithStyledInputSolution = () => {
+  const filterState = useFilterStateSolution()
+  const inputRef = useRef()
+
+  const handleSubmit = event => {
+    event.preventDefault()
+    inputRef.current.value && filterState.setYear(inputRef.current.value)
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Year:
+        <FancyInput type="text" ref={inputRef} />
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  )
+}

src/solutions/step-06-forwarding-refs/FancyInputSolution.js

@@ -0,0 +1,44 @@
+import { forwardRef, useEffect, useRef } from 'react'
+import { useFilterStateSolution } from '../step-02-context/FilterStateContextSolution.jsx'
+
+const FancyInput = forwardRef((props, ref) => {
+  return (
+    <input
+      {...props}
+      ref={ref}
+      style={{
+        padding: '16px',
+        fontWeight: 'bold',
+        border: '1px solid azure',
+        fontSize: '24px'
+      }}
+    />
+  )
+})
+
+FancyInput.displayName = 'FancyInput'
+
+export const FilterFormWithAutofocusSolution = () => {
+  const filterState = useFilterStateSolution()
+  const inputRef = useRef()
+
+  const handleSubmit = event => {
+    event.preventDefault()
+    inputRef.current.value && filterState.setYear(inputRef.current.value)
+  }
+
+  useEffect(() => {
+    console.log(inputRef, 'input')
+    inputRef.current?.focus()
+  }, [])
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Year:
+        <FancyInput type="text" ref={inputRef} />
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  )
+}