changing the practices for core lesson 2 and 3

Author: bradwestfall

react/core/02-state/practice/App.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react'
+import { Heading } from '~/Heading'
+// import { ConfirmationCode } from './ConfirmationCode.final'
+// import { LoginForm } from './LoginForm.final'
+import { ConfirmationCode } from './ConfirmationCode'
+import { LoginForm } from './LoginForm'
+
+type User = { userId: number }
+
+export function App() {
+  const [user, setUser] = useState<User | null>(null)
+
+  function onSubmit(user: User) {
+    setUser(user)
+  }
+
+  // Task 2
+  // Conditionally render the ConfirmationCode when the user object is set
+
+  return (
+    <div>
+      <Heading>Login</Heading>
+      <LoginForm onSubmit={onSubmit} />
+      {/* <ConfirmationCode /> */}
+    </div>
+  )
+}

react/core/02-state/practice/CartShippingBilling.final.tsx

@@ -0,0 +1,72 @@
+import { useRef } from 'react'
+
+export function ConfirmationCode() {
+  const inputRef1 = useRef<HTMLInputElement>(null!)
+  const inputRef2 = useRef<HTMLInputElement>(null!)
+  const inputRef3 = useRef<HTMLInputElement>(null!)
+  const inputRef4 = useRef<HTMLInputElement>(null!)
+
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+
+    const code =
+      inputRef1.current.value +
+      inputRef2.current.value +
+      inputRef3.current.value +
+      inputRef4.current.value
+
+    // // We don't need state or refs to get the values of a form
+    // const formData = new FormData(event.currentTarget)
+    // const v1 = formData.get('input1') as string
+    // const v2 = formData.get('input2') as string
+    // const v3 = formData.get('input3') as string
+    // const v4 = formData.get('input4') as string
+    // const code = v1 + v2 + v3 + v4
+
+    console.log(code)
+  }
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-3">
+      <p className="text-center">Enter your verification code:</p>
+      <div className="flex gap-3 m-auto">
+        <input
+          type="text"
+          name="input1"
+          className="form-field text-3xl text-center"
+          autoComplete="off"
+          ref={inputRef1}
+          onChange={() => inputRef2.current.focus()}
+        />
+        <input
+          type="text"
+          name="input2"
+          className="form-field text-3xl text-center"
+          autoComplete="off"
+          ref={inputRef2}
+          onChange={() => inputRef3.current.focus()}
+        />
+        <input
+          type="text"
+          name="input3"
+          className="form-field text-3xl text-center"
+          autoComplete="off"
+          ref={inputRef3}
+          onChange={() => inputRef4.current.focus()}
+        />
+        <input
+          type="text"
+          name="input4"
+          className="form-field text-3xl text-center"
+          autoComplete="off"
+          ref={inputRef4}
+        />
+      </div>
+      <div className="w-fit m-auto">
+        <button type="submit" className="button">
+          Verify
+        </button>
+      </div>
+    </form>
+  )
+}

react/core/02-state/practice/CartShippingBilling.tsx

@@ -0,0 +1,62 @@
+import { useRef } from 'react'
+
+export function ConfirmationCode() {
+  // Task 3
+  // Make 4 refs (one for each input)
+  const inputRef1 = useRef<HTMLInputElement>(null!)
+
+  // Then remember to attach them to their input DOM and you'll
+  // need to listen to each input's onChange to know when to
+  // focus on the next input
+
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+
+    // const code =
+    //   inputRef1.current.value +
+    //   inputRef2.current.value +
+    //   inputRef3.current.value +
+    //   inputRef4.current.value
+
+    // console.log(code)
+  }
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-3">
+      <p className="text-center">Enter your verification code:</p>
+      <div className="flex gap-3 m-auto">
+        <input
+          type="text"
+          name="input1"
+          className="form-field text-3xl text-center"
+          autoComplete="off"
+          // ref={}
+          // onChange={}
+        />
+        <input
+          type="text"
+          name="input2"
+          className="form-field text-3xl text-center"
+          autoComplete="off"
+        />
+        <input
+          type="text"
+          name="input3"
+          className="form-field text-3xl text-center"
+          autoComplete="off"
+        />
+        <input
+          type="text"
+          name="input4"
+          className="form-field text-3xl text-center"
+          autoComplete="off"
+        />
+      </div>
+      <div className="w-fit m-auto">
+        <button type="submit" className="button">
+          Verify
+        </button>
+      </div>
+    </form>
+  )
+}

react/core/02-state/practice/ConfirmationCode.final.tsx

@@ -2,19 +2,43 @@
 
 ## Goals
 
-Allow the user to fill out the "Shipping & Billing" form without having to duplicate their inputs when "Same as Shipping" is checked.
-
-1. If the checkbox is unchecked, the user will have to type both shipping and billing info
-2. If the checkbox is checked, the user will see the billing info populate as they type into the respective field of the shipping info.
+Allow the user to fill out the login form and submit. Then the user will see a confirmation form to enter a 4-digit code.
 
 ## Task 1
 
-There is already state for `isSame`. Get the checkbox programmed with an `onChange` event to toggle this boolean state
+Open `LoginForm.tsx` and add state for `username` and `password`. There's already some state for `loading` in case you need to see an example. After creating state:
+
+1. Add `value` and `onChange` props to the input fields to make them "controlled"
+2. After you do step 1, you should be able to login with any credentials and `console.log` the values from the `handleLogin` function.
+3. Notice that `handleLogin` will call `onSubmit` to set some `user` state in the parent component.
 
 ## Task 2
 
-Create two states for `billingName` and `billingAddress`. Make these input fields controlled in a way where the `value` of each one is either the billing or shipping information depending on `isSame`.
+When the `App` component gets a re-render because the login form set its user state, do some conditional JSX to display the `ConfirmationCode` component instead:
+
+Hint:
+
+```jsx
+<div>
+  {condition & <CompOne /> : <CompTwo />}
+</div>
+```
+
+## Task 3
+
+In the `ConfirmationCode` component, make 4 refs (one for each input). Then:
+
+1. Attach the refs to the DOM with `ref={inputRef1}`
+2. Use `onChange` on each input ref to focus on the next input after someone types a character
+
+Hint:
+
+```
+inputRef2.current.focus()
+```
+
+3. Enable the code in the `onSubmit` function to `console.log` the confirmation code
 
 ## Finished When
 
-You're finished when the form can be submitted and there is a `console.log` that outputs the form values that we want to submit.
+You're finished when you can see the `console.log` of the confirmation code