[#9] feat: implement api integration

- GET /survey/:type
2022-2-Graduation-Project · Feb 23, 2023 · 5c2d7ab · 5c2d7ab
1 parent fb730ca
commit 5c2d7ab
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 36 deletions.
diff --git a/bowwowcare/src/views/SolutionPage/Sections/Solution.js b/bowwowcare/src/views/SolutionPage/Sections/Solution.js
@@ -6,7 +6,7 @@ import { solutions } from "../../../utils/Dictionary";
 
 import "../../../components/YoutubeEmbed/youtube.css";
 
-function Solution({ response, emotion }) {
+function Solution({ solution, emotion }) {
   const [popup, setPopup] = useState(false);
 
   const handleTrigger = () => {
@@ -15,34 +15,28 @@ function Solution({ response, emotion }) {
 
   return (
     <div>
-      {solutions[emotion]?.map((x) => {
-        if (response === x.id) {
-          return (
-            <div
-              key={response}
-              className="w-64 h-full text-center shadow-lg rounded-2xl flex flex-col justify-between px-8 pt-16 pb-8 mx-3"
-            >
-              <div>
-                <div className="font-bold pb-4">{x.question}</div>
-                <div>{x.solution}</div>
-              </div>
-              <button
-                onClick={() => setPopup(true)}
-                className="h-12 mt-8 px-4 rounded-md text-center bg-white border border-main-color text-main-color hover:bg-main-color hover:text-white"
-              >
-                <div className="hover:text-white">실천하기</div>
-              </button>
-              <Modal
-                trigger={popup}
-                handleTrigger={handleTrigger}
-                solution={x.solution}
-              >
-                <YoutubeEmbed embedId="w7aE4ihj7Ao" />
-              </Modal>
-            </div>
-          );
-        }
-      })}
+        <div
+          key={solution}
+          className="w-64 h-full text-center shadow-lg rounded-2xl flex flex-col justify-between px-8 pt-16 pb-8 mx-3"
+        >
+          <div>
+            <div className="font-bold pb-4">{solution.situation}</div>
+            <div>{solution.solution}</div>
+          </div>
+          <button
+            onClick={() => setPopup(true)}
+            className="h-12 mt-8 px-4 rounded-md text-center bg-white border border-main-color text-main-color hover:bg-main-color hover:text-white"
+          >
+            <div className="hover:text-white">실천하기</div>
+          </button>
+          <Modal
+            trigger={popup}
+            handleTrigger={handleTrigger}
+            solution={solution.solution}
+          >
+            <YoutubeEmbed embedId="w7aE4ihj7Ao" />
+          </Modal>
+        </div>
     </div>
   );
 }

diff --git a/bowwowcare/src/views/SolutionPage/SolutionPage.js b/bowwowcare/src/views/SolutionPage/SolutionPage.js
@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
+import axios from "axios";
+import { API_URL } from "../../Config";
 
 import Header from "../../components/Header";
 import Solution from "./Sections/Solution";
@@ -12,10 +14,25 @@ function SolutionPage() {
   const navigate = useNavigate();
   const [open, setOpen] = useState(false);
   const [alertMessage, setAlertMessage] = useState("");
+  const [solutions, setSolutions] = useState([]);
 
 
   useEffect(() => {
-    // TODO: POST location.state.responses and get { situation : solution }{} 
+    if (location?.state?.responses) {
+      axios({
+          method: 'post',
+          url: `${API_URL}/survey/${location?.state?.type}`,
+          data: location.state.responses
+      })
+      .then(response => {
+          if (response.status === 200) {
+            setSolutions(response.data);
+          }
+      })
+      .catch(error => {
+          console.log(error?.response);
+      });
+    }
   }, []);
 
   const handleOpen = (e) => {
@@ -37,12 +54,10 @@ function SolutionPage() {
       <Header />
       <div className="h-5/6 flex flex-col justify-between">
         <div className="h-2/3 overflow-x-auto flex mt-10 px-2 py-8">
-          {Object.entries(location?.state?.responses)?.map(([response, value]) => {
-            if (value === "예") {
-              return (
-                <Solution key={response} response={response} emotion={location?.state?.emotion} />
-              );
-            }
+          {solutions?.map(solution => {
+            return (
+              <Solution key={solution.id} solution={solution} emotion={location?.state?.emotion} />
+            );
           })}
         </div>
         <div className="w-full">