website works

shiinasugi · Aug 6, 2023 · 0356546 · 0356546
1 parent 23f6507
commit 0356546
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 40 deletions.
diff --git a/src/Homepage-component/GetFeelingCircle.jsx b/src/Homepage-component/GetFeelingCircle.jsx
@@ -11,8 +11,8 @@ const FeelingCircle = ({
   selectedEmotions,
   setSelectedEmotions,
   renderResult,
+  setRenderResult,
 }) => {
-  // const [renderResult, setRenderResult] = useState(false); // use in Homepage component
 
   const data = {
     datasets: [
@@ -93,12 +93,11 @@ const FeelingCircle = ({
     );
   } else {
     return (
-      <>
         <ResultsPage
           selectedEmotions={selectedEmotions}
           setSelectedEmotions={setSelectedEmotions}
+          setRenderResult={setRenderResult}
         />
-      </>
     );
   }
 };

diff --git a/src/Homepage-component/Homepage.jsx b/src/Homepage-component/Homepage.jsx
@@ -60,6 +60,7 @@ const Homepage = () => {
               selectedEmotions={selectedEmotions}
               setSelectedEmotions={setSelectedEmotions}
               renderResult={renderResult}
+              setRenderResult={setRenderResult}
             />
           </div>
         </div>

diff --git a/src/Results-component/ResultsPage.css b/src/Results-component/ResultsPage.css
@@ -34,7 +34,7 @@ body {
   margin: 0 5px;
   padding: 5px 10px;
   text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.31);
-  font-family: 'Karla', sans-serif;
+  font-family: "Karla", sans-serif;
   font-size: 40px;
   margin-left: 10px;
   border-radius: 5px;
@@ -78,9 +78,9 @@ body {
 .prompt2 {
   margin-top: 20px;
   width: 1500px;
-  color: #FFFFFF;
+  color: #ffffff;
   text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.31);
-  font-family: 'Karla', sans-serif;
+  font-family: "Karla", sans-serif;
   font-size: 30px; /* Adjust font size */
   text-align: center;
   padding: 20px; /* Add padding for spacing */
@@ -106,7 +106,7 @@ body {
 }
 
 .back-arrow {
-  color: #019D9F;
+  color: #019d9f;
   font-weight: 500;
   font-size: 25px;
   margin-right: px;
@@ -117,13 +117,13 @@ body {
 }
 
 .back-arrow:hover {
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .material-symbols-outlined {
   font-size: 36px;
 }
-  
+
 /* Use media queries to adjust styles for different screen sizes */
 @media screen and (max-width: 768px) {
   .sorted-keys {

diff --git a/src/Results-component/results.js b/src/Results-component/results.js
@@ -1,25 +1,25 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 import { useParams, Link } from "react-router-dom";
-import jsonData from '../message_pairs.json'
-
-
-// import './feelingsImages'
+import jsonData from "../message_pairs.json";
 
 import "./ResultsPage.css";
 
-const feelingsToImages = {
-  anxious: "./feelingsImages/anxious.jpeg",
-  confident: "./feelingsImages/confident.avif",
-  depressed: "./feelingsImages/depressed.avif",
-  disappointed: "./feelingsImages/disappointed.jpeg",
-  excited: "src/Results-component/feelingsImages/excited.jpeg",
-  insecure: "./feelingsImages/insecure.jpeg",
-  joyful: "./feelingsImages/joyful.jpeg",
-  surprised: "src/Results-component/feelingsImages/surprised.jpeg",
-};
-
-
-const ResultsPage = ({ selectedEmotions, setSelectedEmotions }) => {
+// const feelingsToImages = {
+//   anxious: "./feelingsImages/anxious.jpeg",
+//   confident: "./feelingsImages/confident.avif",
+//   depressed: "./feelingsImages/depressed.avif",
+//   disappointed: "./feelingsImages/disappointed.jpeg",
+//   excited: "src/Results-component/feelingsImages/excited.jpeg",
+//   insecure: "./feelingsImages/insecure.jpeg",
+//   joyful: "./feelingsImages/joyful.jpeg",
+//   surprised: "src/Results-component/feelingsImages/surprised.jpeg",
+// };
+
+const ResultsPage = ({
+  selectedEmotions,
+  setSelectedEmotions,
+  setRenderResult,
+}) => {
   let [arg1, arg2] = [selectedEmotions[0], selectedEmotions[1]];
   const [randomString, setRandomString] = useState(null);
 
@@ -45,18 +45,18 @@ const ResultsPage = ({ selectedEmotions, setSelectedEmotions }) => {
     }
   }, [arg1, arg2]); // Use arg1 and arg2 as dependencies
 
+  const reset = () => {
+    setSelectedEmotions([]);
+    setRenderResult(false);
+  };
+
   return (
     <div className="results-container">
       <div className="sorted-keys-container">
         <h2 className="sorted-keys">
           Looks like you are feeling <span className="arg1">{arg1}</span> and{" "}
           <span className="arg2">{arg2}</span>!
         </h2>
-
-        {/* <div className="images">
-          <img src='./feelingsImages/excited.jpg' alt={arg1} className="image" />
-          <img src='./feelingsImages/excited.jpg' alt={arg2} className="image" />
-        </div> */}
       </div>
 
       <div className="prompt-container">
@@ -70,16 +70,11 @@ const ResultsPage = ({ selectedEmotions, setSelectedEmotions }) => {
       </div>
 
       <div className="back-button">
-        <Link to="../" className="back-arrow">
+        <Link to="../" className="back-arrow" onClick={reset}>
+          <div>Generate another kind message!</div>
 
           <div>
-            Generate another kind message!
-          </div>
-
-          <div>
-            <span class="material-symbols-outlined">
-              replay
-            </span>
+            <span class="material-symbols-outlined">replay</span>
           </div>
         </Link>
       </div>