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 /> [email protected]
- </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:[email protected]">
+ [email protected]
+ </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>
  );