Bunch of tweaks

Author: mjackson

lessons/03-controlled-components/lecture/Minutes.js

@@ -12,11 +12,11 @@ import { FaMinus, FaPlus } from "react-icons/fa"
 // In practical terms, an uncontrolled component is one whose value is changed
 // exclusively by the *user interacting with it*.
 //
-// You can still set the initial state of an uncontrolled component with 
+// You can still set the initial state of an uncontrolled component with
 // defaultValue (and defaultChecked).
 //
 // A controlled component is one that does not own its state, but rather its
-// state is controlled by the component that rendered it. 
+// state is controlled by the component that rendered it.
 //
 // In practical terms it means the state is controlled exclusively by the
 // *programmer*.
@@ -25,7 +25,7 @@ import { FaMinus, FaPlus } from "react-icons/fa"
 // value of an input by some other means than the user interacting with it.
 //
 // If you need the value of a component in your state, but you don't ever set
-// the value of the component with anything other thant he user interacting
+// the value of the component with anything other than the user interacting
 // with it, you can use either controlled or uncontrolled, it's the same. We
 // prefer uncontrolled in these situations just to communicate intent.
 
@@ -37,23 +37,13 @@ export default function Minutes({ date }) {
   return (
     <div className="Minutes">
       <div>
-        <button
-          type="button"
-          className="icon_button Minutes_button"
-        >
+        <button type="button" className="icon_button Minutes_button">
           <FaMinus />
         </button>
       </div>
-      <input
-        className="Minutes_input"
-        defaultValue={0}
-        id="minutes"
-      />
+      <input className="Minutes_input" defaultValue={0} id="minutes" />
       <div>
-        <button
-          type="button"
-          className="icon_button Minutes_button"
-        >
+        <button type="button" className="icon_button Minutes_button">
           <FaPlus />
         </button>
       </div>
@@ -64,7 +54,6 @@ export default function Minutes({ date }) {
   )
 }
 
-
 /******************************************************************************/
 // We want these two buttons to change the value of the input, but it doesn't
 // work when we use defaultValue, we need to use value.
@@ -112,8 +101,6 @@ export default function Minutes({ date }) {
 //   )
 // }
 
-
-
 /******************************************************************************/
 // But when we use defaultValue then the user can't type into the input
 // anymore. Why does that make sense? React eliminates time. It's declarative.
@@ -297,7 +284,6 @@ export default function Minutes({ date }) {
 //     }
 //   }
 
-
 //   return (
 //     <div className="Minutes">
 //       <div>
@@ -332,4 +318,3 @@ export default function Minutes({ date }) {
 //     </div>
 //   )
 // }
-

lessons/04-effects/exercise/NewPost.final.js

@@ -1,36 +1,43 @@
-import React, { useState, useEffect, useRef } from "react"
-import { useAppState } from "app/app-state"
-import Avatar from "app/Avatar"
-import Minutes from "app/Minutes"
-import { FaDumbbell } from "react-icons/fa"
-import RecentPostsDropdown from "app/RecentPostsDropdown"
-import { formatDate, DATE_FORMAT } from "app/utils"
+import React, { useState, useEffect, useRef } from 'react'
+import { FaDumbbell } from 'react-icons/fa'
+
+import { useAppState } from 'app/app-state'
+import { formatDate, DATE_FORMAT } from 'app/utils'
+import Avatar from 'app/Avatar'
+import Minutes from 'app/Minutes'
+import RecentPostsDropdown from 'app/RecentPostsDropdown'
 
 const MAX_MESSAGE_LENGTH = 200
 
 export default function NewPost({ takeFocus, date, showAvatar }) {
-  const storageKey = makeNewPostKey(date)
   const [{ auth }] = useAppState()
-  const [message, setMessage] = useState(getLocalStorageValue(storageKey) || "")
+  const [message, setMessage] = useState('')
   const messageTooLong = message.length > MAX_MESSAGE_LENGTH
   const messageRef = useRef()
 
-  const handleMessageChange = event => {
+  function handleMessageChange(event) {
     setMessage(event.target.value)
   }
 
+  const storageKey = makeNewPostKey(date)
+
+  // Initialize the message for this date from the value in storage.
+  useLayoutEffect(() => {
+    setMessage(getLocalStorageValue(storageKey) || '')
+  }, [storageKey])
+
+  // Save the message for this date as its value changes.
   useEffect(() => {
     setLocalStorage(storageKey, message)
-  }, [message, storageKey])
+  }, [storageKey, message])
 
+  // Automatically focus the <textarea> if it should take focus.
   useEffect(() => {
-    if (takeFocus) {
-      messageRef.current.focus()
-    }
+    if (takeFocus) messageRef.current.focus()
   }, [takeFocus, message])
 
   return (
-    <div className={"NewPost" + (messageTooLong ? " NewPost_error" : "")}>
+    <div className={'NewPost' + (messageTooLong ? ' NewPost_error' : '')}>
       {showAvatar && <Avatar uid={auth.uid} size={70} />}
       <form className="NewPost_form">
         <textarea

lessons/04-effects/exercise/NewPost.js

@@ -1,24 +1,25 @@
-import React, { useState, useEffect, useRef } from "react"
-import { useAppState } from "app/app-state"
-import Avatar from "app/Avatar"
-import Minutes from "app/Minutes"
-import { FaDumbbell } from "react-icons/fa"
-import RecentPostsDropdown from "app/RecentPostsDropdown"
-import { formatDate, DATE_FORMAT } from "app/utils"
+import React, { useState, useEffect, useRef } from 'react'
+import { FaDumbbell } from 'react-icons/fa'
+
+import { useAppState } from 'app/app-state'
+import { formatDate, DATE_FORMAT } from 'app/utils'
+import Avatar from 'app/Avatar'
+import Minutes from 'app/Minutes'
+import RecentPostsDropdown from 'app/RecentPostsDropdown'
 
 const MAX_MESSAGE_LENGTH = 200
 
 export default function NewPost({ takeFocus, date, onSuccess, showAvatar }) {
   const [{ auth }] = useAppState()
-  const [message, setMessage] = useState("Ran around the lake.")
+  const [message, setMessage] = useState('Ran around the lake.')
   const messageTooLong = message.length > MAX_MESSAGE_LENGTH
 
-  const handleMessageChange = event => {
+  function handleMessageChange(event) {
     setMessage(event.target.value)
   }
 
   return (
-    <div className={"NewPost" + (messageTooLong ? " NewPost_error" : "")}>
+    <div className={'NewPost' + (messageTooLong ? ' NewPost_error' : '')}>
       {showAvatar && <Avatar uid={auth.uid} size={70} />}
       <form className="NewPost_form">
         <textarea
@@ -49,10 +50,10 @@ function makeNewPostKey(date) {
 }
 
 function getLocalStorageValue(key) {
-  const val = localStorage.getItem(key)
-  if (!val) return null
+  const value = localStorage.getItem(key)
+  if (!value) return null
   try {
-    return JSON.parse(val)
+    return JSON.parse(value)
   } catch (e) {
     return null
   }

lessons/04-effects/exercise/README.md

@@ -1,6 +1,6 @@
 # Effects
 
-## Save state to local storag
+## Save state to local storage
 
 Save the message value into localStorage so that if the user accidentally closes the dialog or navigates away from the page, we can bring it back!
 

lessons/04-effects/lecture/Dashboard.js

@@ -1,6 +1,7 @@
 /******************************************************************************/
 // open NewPost.js
 import React, { useState, useEffect } from "react"
+
 import NewPost from "app/NewPost"
 
 // import App from "../../../modules/app/App"