Capitalize and trim topic

Nonhuman-Nonsense · Mar 23, 2024 · 8650a96 · 8650a96
1 parent 5ea0272
commit 8650a96
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 15 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -52,7 +52,7 @@ function App() {
           <Setup onEnterCouncil={enterCouncil} />
         ) : (
           <div>
-            <Navbar />
+            <Navbar topic={topic} />
             <Council options={{ name: name, topic: topic, foods: foods }} />
           </div>
         )}

diff --git a/client/src/components/Council.jsx b/client/src/components/Council.jsx
@@ -23,7 +23,7 @@ function Council({ options }) {
     top: "50%",
     left: "50%",
     transform: "translate(-50%, -50%)",
-    width: "80%",
+    width: "70%",
     display: "flex",
     justifyContent: "space-around",
     alignItems: "center",
@@ -76,6 +76,7 @@ function Council({ options }) {
         className="text-input"
         rows="5"
         style={textAreaStyle}
+        disabled
       ></textarea>
       <div style={foodsContainerStyle}>
         {foods.map((food, index) => (

diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
@@ -1,11 +1,11 @@
 import React from "react";
 
-function Navbar() {
+function Navbar({ topic }) {
   const navbarStyle = {
     paddingTop: "10px",
     display: "flex",
     justifyContent: "space-between",
-    alignItems: "center",
+    alignItems: "start",
     color: "white",
     position: "absolute",
     top: 0,
@@ -26,14 +26,20 @@ function Navbar() {
 
   return (
     <div style={navbarStyle}>
-      <h3 style={navbarItemStyle}>
-        <a
-          className="link"
-          href="/"
-        >
-          COUNCIL OF FOODS
-        </a>
-      </h3>
+      <div>
+        <h3 style={navbarItemStyle}>
+          <a
+            className="link"
+            href="/"
+          >
+            COUNCIL OF FOODS
+          </a>
+        </h3>
+        <h4>
+          Topic: <br />
+          {topic}
+        </h4>
+      </div>
       <div style={{ display: "flex" }}>
         <h3 style={navbarItemStyle}>
           <a

diff --git a/client/src/components/Setup.jsx b/client/src/components/Setup.jsx
@@ -39,7 +39,7 @@ function Setup({ onEnterCouncil }) {
     setAreFoodsMissing(false);
 
     // Validate if topic is entered
-    if (!topic) {
+    if (!topic.trim()) {
       setIsTopicMissing(true);
     }
 
@@ -49,17 +49,21 @@ function Setup({ onEnterCouncil }) {
     }
 
     // If both validations pass, log the values (simulate entering the council)
-    if (topic && selectedFoods.length >= 2) {
-      onEnterCouncil(topic, selectedFoods);
+    if (topic.trim() && selectedFoods.length >= 2) {
+      onEnterCouncil(topic.trim(), selectedFoods);
     }
   }
 
   function handleInputTopic(e) {
     const newTopic = e.target.value;
+
+    // Trim leading and trailing spaces separately
     const capitalizedTopic =
       newTopic.charAt(0).toUpperCase() + newTopic.slice(1);
+
     setTopic(capitalizedTopic);
 
+    // Check if trimmed topic length is greater than 0
     if (capitalizedTopic.trim().length > 0) {
       setIsTopicMissing(false);
     } else {