Add reset from clicking at navbar title

client/src/App.css

@@ -77,6 +77,7 @@ h4 {
 .link {
   color: white;
   text-decoration: none;
+  cursor: pointer;
 }
 
 .italic {

client/src/App.js

@@ -53,11 +53,17 @@ function App() {
     setCurrentView(pages[nextIndex]);
   }
 
-  function changeSettings(topic) {
-    // TODO: Restart discussion
-    setTopic(topic);
+  function reset(topic) {
+    setTopic(topic ?? "");
+    setFoods([]);
     setIsActiveOverlay(true);
-    setCurrentView("foods");
+
+    if (!topic) {
+      setHumanName("");
+      setCurrentView("landing");
+    } else {
+      setCurrentView("foods");
+    }
   }
 
   return (
@@ -77,7 +83,7 @@ function App() {
               humanName,
               topic,
               foods,
-              onChangeSettings: changeSettings,
+              onReset: reset,
             }}
           />
         )}

client/src/components/Council.jsx

@@ -5,7 +5,9 @@ import About from "./About";
 import Topics from "./Topics";
 import Contact from "./Contact";
 import Share from "./Share";
+import ResetWarning from "./ResetWarning";
 import Navbar from "./Navbar";
+import TextOutput from "./TextOutput";
 import useWindowSize from "../hooks/useWindowSize";
 
 function Council({ options }) {
@@ -24,6 +26,10 @@ function Council({ options }) {
     alignItems: "center",
   };
 
+  function displayResetWarning() {
+    setActiveOverlay("reset");
+  }
+
   // Function to handle overlay content based on navbar clicks
   const displayOverlay = (section) => {
     setActiveOverlay(section); // Update state to control overlay content
@@ -42,14 +48,21 @@ function Council({ options }) {
         return (
           <Topics
             currentTopic={options.topic}
-            onChangeSettings={options.onChangeSettings}
+            onReset={options.onReset}
             onCancel={removeOverlay}
           />
         );
       case "contact":
         return <Contact />;
       case "share":
         return <Share />;
+      case "reset":
+        return (
+          <ResetWarning
+            onReset={() => options.onReset()}
+            onCancel={removeOverlay}
+          />
+        );
       default:
         return null; // No overlay content if no section is active
     }
@@ -60,11 +73,7 @@ function Council({ options }) {
       <div className="wrapper">
         {activeOverlay === "" && (
           <div className="text-container" style={{ justifyContent: "end" }}>
-            <h2>
-              Lorem ipsum dolor sit.
-              <br />
-              Lorem ipsum dolor sit amet.
-            </h2>
+            <TextOutput />
           </div>
         )}
         <div style={foodsContainerStyle}>
@@ -86,6 +95,7 @@ function Council({ options }) {
           activeOverlay={activeOverlay}
           onDisplayOverlay={displayOverlay}
           onRemoveOverlay={removeOverlay}
+          onDisplayResetWarning={displayResetWarning}
         />
       </div>
     </div>

client/src/components/Navbar.jsx

@@ -4,7 +4,13 @@ import { capitalizeFirstLetter } from "../utils";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 
-function Navbar({ topic, activeOverlay, onDisplayOverlay, onRemoveOverlay }) {
+function Navbar({
+  topic,
+  activeOverlay,
+  onDisplayOverlay,
+  onRemoveOverlay,
+  onDisplayResetWarning,
+}) {
   const navbarStyle = {
     paddingTop: "10px",
     display: "flex",
@@ -26,7 +32,13 @@ function Navbar({ topic, activeOverlay, onDisplayOverlay, onRemoveOverlay }) {
     <nav style={navbarStyle} role="navigation">
       <div>
         <h3 style={{ margin: "0", padding: "0" }}>
-          <a className="link" href="/">
+          <a
+            className="link"
+            onClick={(e) => {
+              e.preventDefault();
+              onDisplayResetWarning();
+            }}
+          >
             COUNCIL OF FOODS
           </a>
         </h3>

client/src/components/ResetWarning.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { capitalizeFirstLetter } from "../utils";
+
+function ResetWarning({ message, onReset, onCancel }) {
+  return (
+    <div className="wrapper">
+      <div className="text-container" style={{ justifyContent: "center" }}>
+        <h4>
+          {message
+            ? capitalizeFirstLetter(message)
+            : capitalizeFirstLetter("this")}{" "}
+          will restart the discussion
+        </h4>
+        <div>
+          <button
+            className="outline-button"
+            onClick={onReset}
+            style={{ marginRight: "9px" }}
+          >
+            I understand
+          </button>
+          <button
+            className="outline-button"
+            onClick={onCancel}
+            style={{ marginLeft: "9px" }}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ResetWarning;

client/src/components/TextOutput.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+function TextOutput() {
+  const textOutputStyle = {
+    fontFamily: "Arial, sans-serif", 
+  };
+
+  return (
+    <div>
+      <h2 style={textOutputStyle}>
+        Lorem ipsum dolor sit.
+        <br />
+        Lorem ipsum dolor sit amet.
+      </h2>
+    </div>
+  );
+}
+
+export default TextOutput;

client/src/components/Topics.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import SettingsWarning from "./SettingsWarning";
+import ResetWarning from "./ResetWarning";
 import { capitalizeFirstLetter } from "../utils";
 
 function Topics(props) {
@@ -67,7 +67,7 @@ function Topics(props) {
   // Function to proceed with the selected or custom topic
   function onContinueForward() {
     if (props.currentTopic) {
-      // TODO: Check if there is a current topic, in that case show the warning...
+      // Current topic exists which means we are changing settings
       setDisplayWarning(true);
     } else {
       const topic = getTopic();
@@ -90,18 +90,16 @@ function Topics(props) {
     !(selectedTopic.toLowerCase() === "choose your own" && !customTopic.trim());
 
   return (
-    <div className="wrapper">
-      <div className="text-container">
-        {displayWarning ? (
-          <SettingsWarning
-            onChangeSettings={() => {
-              const topic = getTopic();
-              props.onChangeSettings(topic);
-            }}
-            onCancel={props.onCancel}
-          />
-        ) : (
-          <>
+    <>
+      {displayWarning ? (
+        <ResetWarning
+          message="changing settings"
+          onReset={() => props.onReset(getTopic())}
+          onCancel={props.onCancel}
+        />
+      ) : (
+        <div className="wrapper">
+          <div className="text-container">
             <h1>THE ISSUE:</h1>
             <div
               style={{
@@ -128,7 +126,6 @@ function Topics(props) {
                 selectedTopic === "choose your own" ? "" : "hidden"
               } text-input`}
               rows="2"
-              cols="30"
               value={customTopic}
               placeholder="your topic"
               onChange={handleInputTopic}
@@ -141,10 +138,10 @@ function Topics(props) {
             >
               Next
             </button>
-          </>
-        )}
-      </div>
-    </div>
+          </div>
+        </div>
+      )}
+    </>
   );
 }
 

client/src/utils.js

@@ -1,3 +1,7 @@
 export function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
+  if (string && typeof string === "string") {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  }
+
+  return string || "";
 }