Technigo · Vera-Sjunnesson · Mar 19, 2023 · Mar 19, 2023 · Mar 19, 2023 · Mar 20, 2023
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/package.json b/code/package.json
@@ -11,7 +11,8 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.10"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/code/public/index.html b/code/public/index.html
@@ -13,7 +13,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Technigo React App</title>
+    <title>The Arthouse Cinema Generator</title>
+    <meta property="og:title" content="The Arthouse Cinema Generator">       
+    <meta property="og:description" content="Survey Project by Vera Sjunnesson">
+    <meta property="og:image" content="https://i.postimg.cc/WzMST7pW/survey-project.png">
+    <link rel="stylesheet" href="https://use.typekit.net/pou7yve.css">
+    <script src="https://kit.fontawesome.com/4af0a9e375.js" crossorigin="anonymous"></script>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,154 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import './index.css'
+
+import isabellefilms from './isabellefilms.json';
+import generalfilms from './generalfilms.json';
+
+import Intro from './components/Intro'
+import Name from './components/Name'
+import Isabelle from './components/Isabelle'
+import Theme from './components/Theme'
+import Location from './components/Location';
+import MixedQuestions from './components/MixedQuestions'
+import Summary from './components/Summary'
+import Result1 from './components/Result1';
+import Result2 from './components/Result2';
+import ProgressBar from './components/ProgressBar';
 
 export const App = () => {
+  const [counter, setCounter] = useState(0)
+  const [name, setName] = useState('');
+  const [isabelle, setIsabelle] = useState('');
+  const [isabelleTheme, setIsabelleTheme] = useState('');
+  const [theme, setTheme] = useState('');
+  const [continent, setContinent] = useState('');
+  const [country, setCountry] = useState('');
+  const [open, setOpen] = useState('');
+  const [genre, setGenre] = useState('');
+
+  const handleGoback = () => {
+    setCounter(counter - 1);
+  }
+
+  const handleReset = () => {
+    setCounter(0);
+    setName('');
+    setIsabelle('');
+    setIsabelleTheme('');
+    setTheme('');
+    setContinent('');
+    setCountry('');
+    setOpen('');
+    setGenre('');
+  };
+
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
-  );
+    <>
+      {counter !== 7 && (<ProgressBar counter={counter} totalCount={5} />)}
+      <div className="main-wrapper">
+        {counter === 0 && (
+          <Intro counter={counter} setCounter={setCounter} />
+        )}
+        {counter === 1 && (
+          <Name
+            name={name}
+            setName={setName}
+            counter={counter}
+            setCounter={setCounter} />
+        )}
+        {counter === 2 && (
+          <Isabelle
+            isabelle={isabelle}
+            setIsabelle={setIsabelle}
+            counter={counter}
+            setCounter={setCounter} />
+        )}
+        {counter === 3 && (
+          <Theme
+            isabelle={isabelle}
+            isabelleTheme={isabelleTheme}
+            setIsabelleTheme={setIsabelleTheme}
+            theme={theme}
+            setTheme={setTheme}
+            counter={counter}
+            setCounter={setCounter} />
+        )}
+        {counter === 4 && (
+          <Location
+            isabelleTheme={isabelleTheme}
+            continent={continent}
+            setContinent={setContinent}
+            country={country}
+            setCountry={setCountry}
+            counter={counter}
+            setCounter={setCounter} />
+        )}
+        {counter === 5 && (
+          <MixedQuestions
+            continent={continent}
+            open={open}
+            setOpen={setOpen}
+            genre={genre}
+            setGenre={setGenre}
+            counter={counter}
+            setCounter={setCounter} />
+        )}
+        {counter === 6 && (
+          <Summary
+            name={name}
+            isabelle={isabelle}
+            isabelleTheme={isabelleTheme}
+            theme={theme}
+            continent={continent}
+            country={country}
+            open={open}
+            genre={genre}
+            counter={counter}
+            setCounter={setCounter} />
+        )}
+        {counter === 7 && isabelle === 'love' ? (
+          <Result1
+            isabelleTheme={isabelleTheme}
+            continent={continent}
+            open={open}
+            isabellefilms={isabellefilms} />
+        ) : counter === 7 && (
+          <Result2
+            theme={theme}
+            country={country}
+            genre={genre}
+            generalfilms={generalfilms} />
+        )}
+        {counter > 0 && counter < 6 && (
+          <div className="button-container">
+            <button
+              type="button"
+              onClick={handleGoback}
+              tabIndex="0"
+              aria-label="Go backwards button">
+              <i className="fa-solid fa-chevron-left" />
+            </button>
+            <button
+              type="button"
+              onClick={handleReset}
+              tabIndex="0"
+              aria-label="Reset Button">
+              Reset All
+            </button>
+          </div>)}
+        {counter === 7 && (
+          <div className="button-container">
+            <button
+              type="button"
+              onClick={handleReset}
+              tabIndex="0"
+              aria-label="Reset Button">
+              Do it again
+            </button>
+          </div>)}
+      </div>
+    </>
+  )
 }
+
diff --git a/code/src/components/Intro.js b/code/src/components/Intro.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Background } from './styles/Background';
+
+const Intro = ({ counter, setCounter }) => {
+  const handleIncreaseCounterClick = () => {
+    setCounter(counter + 1);
+  }
+  return (
+    <Background counter={counter}>
+      <div className="survey-wrapper">
+        <h1>
+          <span>The Arthouse Cinema Generator</span>
+        </h1>
+        <p>
+          <span>Answer these questions to explore my handpicked favorites</span>
+        </p>
+        <button
+          type="button"
+          onClick={handleIncreaseCounterClick}
+          tabIndex="0"
+          aria-label="Start button">
+            Start
+        </button>
+      </div>
+    </Background>)
+}
+
+export default Intro
diff --git a/code/src/components/Isabelle.js b/code/src/components/Isabelle.js
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Background } from './styles/Background';
+
+const Isabelle = ({ isabelle, setIsabelle, counter, setCounter }) => {
+  const [error, setError] = useState(false);
+  const handleRadioChange = (event) => {
+    setIsabelle(event.target.value)
+  }
+
+  const handleIncreaseCounterClick = () => {
+    if (isabelle === '') {
+      setError(true)
+    } else {
+      setCounter(counter + 1);
+    }
+  }
+
+  return (
+    <Background counter={counter}>
+      <div className="survey-wrapper isabelle">
+        <h3><span>What do you think about Isabelle Huppert&apos;s acting?</span></h3>
+        <form className="isabelle-form">
+          {error && (<p>* Please select an option</p>)}
+          <label key="loveHer" htmlFor="loveHer">
+            <input
+              type="radio"
+              id="loveHer"
+              value="love"
+              role="button"
+              tabIndex={0}
+              onChange={handleRadioChange}
+              checked={isabelle === 'love'} />
+            I love her
+          </label>
+          <label key="whoIsShe" htmlFor="whoIsShe">
+            <input
+              type="radio"
+              id="whoIsShe"
+              value="don't know much"
+              role="button"
+              tabIndex={0}
+              onChange={handleRadioChange}
+              checked={isabelle === "don't know much"} />
+            Who is she?
+          </label>
+        </form>
+        <button
+          type="button"
+          onClick={handleIncreaseCounterClick}
+          aria-label="Next button">
+        Next
+        </button>
+      </div>
+    </Background>
+  );
+}
+
+export default Isabelle
diff --git a/code/src/components/Location.js b/code/src/components/Location.js
@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { Background } from './styles/Background';
+
+const Location = ({
+  isabelleTheme,
+  continent,
+  setContinent,
+  country,
+  setCountry,
+  counter,
+  setCounter
+}) => {
+  const [error, setError] = useState(false);
+
+  const nextStepContinent = () => {
+    if (continent === '') {
+      setError(true)
+    } else {
+      setCounter(counter + 1);
+    }
+  }
+
+  const nextStepCountry = () => {
+    if (country === '') {
+      setError(true)
+    } else {
+      setCounter(counter + 1);
+    }
+  }
+
+  return (
+    <Background counter={counter}>
+      <div className="survey-wrapper location">
+        {isabelleTheme ? (
+          <form>
+            <h3>
+              <span>
+                In what continent do you want your Isabelle Huppert film to be set?
+              </span>
+            </h3>
+            {error && (<p>* Please select an option</p>)}
+            <label htmlFor="continent">
+              <select
+                id="continent"
+                aria-label="Drop down menu to select a continent"
+                onChange={(event) => setContinent(event.target.value)}
+                value={continent}>
+                <option value="" disabled>Select continent</option>
+                <option value="an European">Europe</option>
+                <option value="an Asian">Asia</option>
+                <option value="an African">Africa</option>
+                <option value="an undecided">Any continent</option>
+              </select>
+            </label>
+            <button
+              type="button"
+              onClick={nextStepContinent}
+              aria-label="Next button">
+            Next
+            </button>
+          </form>
+        ) : (
+          <form>
+            <h3><span>Where do you want your film to be set?</span></h3>
+            {error && (<p>* Please select an option</p>)}
+            <label htmlFor="country">
+              <select
+                id="country"
+                aria-label="Drop down menu to select a country"
+                onChange={(event) => setCountry(event.target.value)}
+                value={country}>
+                <option value="" disabled>Select genre</option>
+                <option value="in Iran">Iran</option>
+                <option value="in Austria">Austria</option>
+                <option value="in Belgium">Belgium</option>
+                <option value="in the UK">the UK</option>
+                <option value="in Taiwan">Taiwan</option>
+                <option value="in Australia">Australia</option>
+                <option value="anywhere in the world">Anywhere in the world</option>
+              </select>
+            </label>
+            <button
+              type="button"
+              onClick={nextStepCountry}
+              aria-label="Next button">
+              Next
+            </button>
+          </form>
+        )}
+      </div>
+    </Background>
+  );
+};
+
+export default Location