Add functionality to change settings

client/src/App.js

@@ -28,7 +28,7 @@ function App() {
   };
 
   useEffect(() => {
-    if (currentView === pages[0]) {
+    if (currentView === "landing") {
       setBackgroundImageURL("/images/backgrounds/zoomed-out.jpeg");
     } else {
       setBackgroundImageURL("/images/backgrounds/zoomed-in.png");
@@ -54,8 +54,10 @@ function App() {
     setCurrentView(pages[nextIndex]);
   }
 
-  function goBack() {
-    // Placeholder for goBack function implementation
+  function changeSettings() {
+    // TODO: Restart discussion
+    setIsActiveOverlay(true);
+    setCurrentView("foods");
   }
 
   return (
@@ -70,7 +72,14 @@ function App() {
         ) : currentView === "foods" ? (
           <Foods topic={topic} onContinueForward={continueForward} />
         ) : (
-          <Council options={{ humanName, topic, foods }} />
+          <Council
+            options={{
+              humanName,
+              topic,
+              foods,
+              onChangeSettings: changeSettings,
+            }}
+          />
         )}
       </Overlay>
     </div>

client/src/components/Contact.jsx

@@ -4,17 +4,28 @@ function Contact() {
   return (
     <div className="wrapper">
       <div className="text-container" style={{ justifyContent: "center" }}>
-        <h3>
+        <h4>
           The project is an initiative by art & design
           <br /> collective Nonhuman Nonsense developed in
           <br /> collaboration with Studio Other Spaces,
           <br /> In4Art, Elliot, Albin and others.
-        </h3>
-        <h3>
-          @nonhuman-nonsense
-          <br /> nonhuman-nonsense.com
-          <br /> hello@nonhuman-nonsense.com
-        </h3>
+        </h4>
+        <h4>
+          <a
+            className="link"
+            href="https://www.instagram.com/nonhuman-nonsense/"
+          >
+            @nonhuman-nonsense
+          </a>
+          <br />
+          <a className="link" href="https://nonhuman-nonsense.com">
+            nonhuman-nonsense.com
+          </a>
+          <br />
+          <a className="link" href="mailto:hello@nonhuman-nonsense.com">
+            hello@nonhuman-nonsense.com
+          </a>
+        </h4>
       </div>
     </div>
   );

client/src/components/Council.jsx

@@ -5,7 +5,7 @@ import About from "./About";
 import Topics from "./Topics";
 import Contact from "./Contact";
 import Share from "./Share";
-import Navbar from "./Navbar"; // Assuming you have this import
+import Navbar from "./Navbar";
 import useWindowSize from "../hooks/useWindowSize";
 
 function Council({ options }) {
@@ -29,13 +29,23 @@ function Council({ options }) {
     setActiveOverlay(section); // Update state to control overlay content
   };
 
+  function removeOverlay() {
+    setActiveOverlay("");
+  }
+
   // Conditional rendering of overlay content based on activeOverlay state
   const renderOverlayContent = () => {
     switch (activeOverlay) {
       case "about":
         return <About />;
       case "settings":
-        return <Topics currentTopic={options.topic} />;
+        return (
+          <Topics
+            currentTopic={options.topic}
+            onChangeSettings={options.onChangeSettings}
+            onCancel={removeOverlay}
+          />
+        );
       case "contact":
         return <Contact />;
       case "share":
@@ -48,7 +58,6 @@ function Council({ options }) {
   return (
     <div style={{ height: "100%", width: "100%" }}>
       <div className="wrapper">
-        (
         {activeOverlay === "" && (
           <div className="text-container" style={{ justifyContent: "end" }}>
             <h2>
@@ -58,7 +67,6 @@ function Council({ options }) {
             </h2>
           </div>
         )}
-        )
         <div style={foodsContainerStyle}>
           {foods.map((food, index) => (
             <FoodItem
@@ -77,6 +85,7 @@ function Council({ options }) {
           topic={options.topic}
           activeOverlay={activeOverlay}
           onDisplayOverlay={displayOverlay}
+          onRemoveOverlay={removeOverlay}
         />
       </div>
     </div>

client/src/components/Navbar.jsx

@@ -1,8 +1,10 @@
 import React from "react";
 import NavItem from "./NavItem";
 import { capitalizeFirstLetter } from "../utils";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 
-function Navbar({ topic, activeOverlay, onDisplayOverlay }) {
+function Navbar({ topic, activeOverlay, onDisplayOverlay, onRemoveOverlay }) {
   const navbarStyle = {
     paddingTop: "10px",
     display: "flex",
@@ -30,15 +32,27 @@ function Navbar({ topic, activeOverlay, onDisplayOverlay }) {
         </h3>
         <h4>{capitalizeFirstLetter(topic)}</h4>
       </div>
-      <div style={{ display: "flex" }}>
-        {navItems.map((item) => (
-          <NavItem
-            key={item}
-            name={item}
-            onDisplayOverlay={onDisplayOverlay}
-            isActive={activeOverlay === item} // Determine active state
+      <div
+        style={{ display: "flex", flexDirection: "column", alignItems: "end" }}
+      >
+        <div style={{ display: "flex" }}>
+          {navItems.map((item) => (
+            <NavItem
+              key={item}
+              name={item}
+              onDisplayOverlay={onDisplayOverlay}
+              isActive={activeOverlay === item} // Determine active state
+            />
+          ))}
+        </div>
+        {activeOverlay !== "" && (
+          <FontAwesomeIcon
+            icon={faXmark}
+            size="2x"
+            onClick={onRemoveOverlay}
+            style={{ cursor: "pointer", marginTop: "18px" }}
           />
-        ))}
+        )}
       </div>
     </nav>
   );

client/src/components/SettingsWarning.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+function SettingsWarning({ onChangeSettings, onCancel }) {
+  return (
+    <div>
+      <h4>Changing the settings will restart the discussion</h4>
+      <button
+        className="outline-button"
+        onClick={() => onChangeSettings()}
+        style={{ marginRight: "9px" }}
+      >
+        I understand
+      </button>
+      <button
+        className="outline-button"
+        onClick={() => onCancel()}
+        style={{ marginLeft: "9px" }}
+      >
+        Cancel
+      </button>
+    </div>
+  );
+}
+
+export default SettingsWarning;

client/src/components/Topics.jsx

@@ -1,9 +1,11 @@
 import React, { useState, useRef, useEffect } from "react";
+import SettingsWarning from "./SettingsWarning";
 import { capitalizeFirstLetter } from "../utils";
 
 function Topics(props) {
   const [selectedTopic, setSelectedTopic] = useState("");
   const [customTopic, setCustomTopic] = useState("");
+  const [displayWarning, setDisplayWarning] = useState(false);
   const topicTextareaRef = useRef(null);
 
   // Topics array remains unchanged
@@ -64,11 +66,22 @@ 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...
+      setDisplayWarning(true);
+    } else {
+      const topic = getTopic();
+      props.onContinueForward({ topic });
+    }
+  }
+
+  function getTopic() {
     const topic =
       selectedTopic.toLowerCase() === "choose your own"
         ? customTopic
         : selectedTopic;
-    props.onContinueForward({ topic });
+
+    return topic;
   }
 
   // Conditional rendering for showing the Next button
@@ -79,43 +92,57 @@ function Topics(props) {
   return (
     <div className="wrapper">
       <div className="text-container">
-        <h1>THE ISSUE:</h1>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "start",
-          }}
-        >
-          {topics.map((topic, index) => (
+        {displayWarning ? (
+          <SettingsWarning
+            onChangeSettings={() => {
+              const topic = getTopic();
+              props.onChangeSettings(topic);
+            }}
+            onCancel={props.onCancel}
+          />
+        ) : (
+          <>
+            <h1>THE ISSUE:</h1>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "start",
+              }}
+            >
+              {topics.map((topic, index) => (
+                <button
+                  key={index}
+                  className="outline-button wide-button"
+                  onClick={() => selectTopic(topic)}
+                  style={topicButtonStyle(topic)}
+                >
+                  {topic}
+                </button>
+              ))}
+              <h4>please select an issue for the discussion</h4>
+            </div>
+            <textarea
+              ref={topicTextareaRef}
+              className={`${
+                selectedTopic === "choose your own" ? "" : "hidden"
+              } text-input`}
+              rows="2"
+              cols="30"
+              value={customTopic}
+              placeholder="your topic"
+              onChange={handleInputTopic}
+            />
             <button
-              key={index}
-              className="outline-button wide-button"
-              onClick={() => selectTopic(topic)}
-              style={topicButtonStyle(topic)}
+              className={`${
+                shouldShowNextButton ? "" : "hidden"
+              } outline-button`}
+              onClick={onContinueForward}
             >
-              {topic}
+              Next
             </button>
-          ))}
-          <h4>please select an issue for the discussion</h4>
-        </div>
-        <textarea
-          ref={topicTextareaRef}
-          className={`${
-            selectedTopic === "choose your own" ? "" : "hidden"
-          } text-input`}
-          rows="2"
-          cols="30"
-          value={customTopic}
-          placeholder="your topic"
-          onChange={handleInputTopic}
-        />
-        <button
-          className={`${shouldShowNextButton ? "" : "hidden"} outline-button`}
-          onClick={onContinueForward}
-        >
-          Next
-        </button>
+          </>
+        )}
       </div>
     </div>
   );