remove ref forwarding on Minutes because it breaks for lessons

Author: bradwestfall

modules/app/Minutes.js

@@ -1,8 +1,8 @@
-import React, { useState, forwardRef } from 'react'
-import { format as formatDate } from 'date-fns'
-import { FaMinus, FaPlus } from 'react-icons/fa'
+import React, { useState } from "react"
+import { format as formatDate } from "date-fns"
+import { FaMinus, FaPlus } from "react-icons/fa"
 
-export default forwardRef(function Minutes({ date }, ref) {
+export default function Minutes({ date }) {
   const [minutes, setMinutes] = useState(30)
 
   const subtract = () => {
@@ -17,7 +17,7 @@ export default forwardRef(function Minutes({ date }, ref) {
 
   const handleInputChange = event => {
     const value = event.target.value
-    const specialCaseEmpty = value.trim() === ''
+    const specialCaseEmpty = value.trim() === ""
     if (specialCaseEmpty) {
       // allow them to delete all characters
       setMinutes(value)
@@ -31,17 +31,17 @@ export default forwardRef(function Minutes({ date }, ref) {
   }
 
   const handleInputBlur = event => {
-    if (event.target.value.trim() === '') {
+    if (event.target.value.trim() === "") {
       setMinutes(0)
     }
   }
 
   const handleInputKeyDown = event => {
     // preventDefault to keep cursor from going back/forth
-    if (event.key === 'ArrowUp') {
+    if (event.key === "ArrowUp") {
       event.preventDefault()
       add()
-    } else if (event.key === 'ArrowDown') {
+    } else if (event.key === "ArrowDown") {
       event.preventDefault()
       subtract()
     }
@@ -65,7 +65,6 @@ export default forwardRef(function Minutes({ date }, ref) {
         onChange={handleInputChange}
         onBlur={handleInputBlur}
         onKeyDown={handleInputKeyDown}
-        ref={ref}
       />
       <div>
         <button
@@ -77,8 +76,8 @@ export default forwardRef(function Minutes({ date }, ref) {
         </button>
       </div>
       <label className="Minutes_label" htmlFor="minutes">
-        Mins on {formatDate(date, 'MMM Do')}
+        Mins on {formatDate(date, "MMM Do")}
       </label>
     </div>
   )
-})
+}

modules/app/NewPost.js

@@ -17,7 +17,6 @@ export default function NewPost({ takeFocus, date, onSuccess, showAvatar }) {
   )
   const [saving, setSaving] = useState(false)
   const formRef = useRef()
-  const minutesRef = useRef()
   const messageRef = useRef()
 
   useEffect(() => {
@@ -41,7 +40,10 @@ export default function NewPost({ takeFocus, date, onSuccess, showAvatar }) {
     // eslint-disable-next-line
     createPost({
       message: messageRef.current.value,
-      minutes: parseInt(minutesRef.current.value, 10),
+      // We specifically want to avoid refs for Minutes because it would
+      // require ref forwarding and not all Minutes components (lectures)
+      // will use ref forwarding (because they don't need it)
+      minutes: parseInt(event.target.elements[3].value, 10),
       date: formatDate(date, DATE_FORMAT),
       uid: auth.uid
     }).then(post => {
@@ -53,12 +55,12 @@ export default function NewPost({ takeFocus, date, onSuccess, showAvatar }) {
 
   const handleSubmit = event => {
     event.preventDefault()
-    submit()
+    submit(event)
   }
 
   const handleMessageKeyDown = event => {
     if (event.metaKey && event.key === "Enter") {
-      submit()
+      submit(event)
     }
   }
 
@@ -86,7 +88,7 @@ export default function NewPost({ takeFocus, date, onSuccess, showAvatar }) {
         </div>
         <RecentPostsDropdown uid={auth.uid} onSelect={handleRecentSelect} />
         <div className="NewPost_buttons">
-          <Minutes date={date} ref={minutesRef} />
+          <Minutes date={date} />
           <div>
             <button disabled={saving} type="submit" className="icon_button cta">
               <FaDumbbell /> <span>Post</span>