Autofocus input fields

client/src/components/NameInput.jsx

@@ -1,10 +1,16 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 
 function NameInput(props) {
   const [name, setName] = useState("");
   const [isNameMissing, setIsNameMissing] = useState(false);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    // Focus on the input field when the component mounts
+    inputRef.current.focus();
+  }, []);
 
   function handleChange(e) {
     const inputValue = e.target.value;
@@ -31,6 +37,8 @@ function NameInput(props) {
 
   function handleKeyDown(e) {
     if (e.key === "Enter") {
+      e.preventDefault(); // Prevent the default behavior of the Enter key
+
       enterSetup();
     }
   }
@@ -40,16 +48,19 @@ function NameInput(props) {
       <h3>please type your name to enter:</h3>
       <div className="input-icon-wrapper">
         <input
+          ref={inputRef}
           className="text-input name-input"
           type="text"
           value={name}
+          placeholder="your name"
           onChange={handleChange}
           onKeyDown={handleKeyDown}
         />
         <FontAwesomeIcon
           icon={faArrowRight}
           className="input-arrow"
           onClick={enterSetup}
+          style={{ cursor: "pointer" }}
         />
       </div>
       <h3 className={`${!isNameMissing ? "hidden" : ""}`}>

client/src/components/Setup.jsx

@@ -1,11 +1,12 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import FoodButton from "./FoodButton";
 
 function Setup({ onEnterCouncil }) {
   const [topic, setTopic] = useState("");
   const [selectedFoods, setSelectedFoods] = useState([]);
   const [isTopicMissing, setIsTopicMissing] = useState(false);
   const [areFoodsMissing, setAreFoodsMissing] = useState(false);
+  const topicTextareaRef = useRef(null);
 
   const foods = [
     "banana",
@@ -28,6 +29,10 @@ function Setup({ onEnterCouncil }) {
     alignItems: "center",
   };
 
+  useEffect(() => {
+    topicTextareaRef.current.focus();
+  }, []);
+
   function enterCouncil() {
     // Reset validation states
     setIsTopicMissing(false);
@@ -51,21 +56,17 @@ function Setup({ onEnterCouncil }) {
 
   function handleInputTopic(e) {
     const newTopic = e.target.value;
-    setTopic(newTopic);
+    const capitalizedTopic =
+      newTopic.charAt(0).toUpperCase() + newTopic.slice(1);
+    setTopic(capitalizedTopic);
 
-    if (newTopic.trim().length > 0) {
+    if (capitalizedTopic.trim().length > 0) {
       setIsTopicMissing(false);
     } else {
       setIsTopicMissing(true);
     }
   }
 
-  function handleKeyDown(e) {
-    if (e.key === "Enter") {
-      enterCouncil();
-    }
-  }
-
   function selectFood(foodName) {
     // Check if the foodName is already selected to prevent duplicates
     if (!selectedFoods.includes(foodName)) {
@@ -112,12 +113,13 @@ function Setup({ onEnterCouncil }) {
       <div>
         <h3>Topic:</h3>
         <textarea
-          className={`text-input ${isTopicMissing ? "input-error" : ""}`} // Apply error styling if topic is missing
+          ref={topicTextareaRef}
+          className={`text-input ${isTopicMissing ? "input-error" : ""}`}
           rows="2"
           cols="30"
           value={topic}
+          placeholder="your topic"
           onChange={handleInputTopic}
-          onKeyDown={handleKeyDown}
         ></textarea>
         <h3 className={`${!isTopicMissing ? "hidden" : ""}`}>
           please enter a topic to proceed