[#98] feat: add progress popup

2022-2-Graduation-Project · Mar 18, 2023 · 2d4796b · 2d4796b
1 parent a738011
commit 2d4796b
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 11 deletions.
diff --git a/bowwowcare/src/components/Alert.js b/bowwowcare/src/components/Alert.js
@@ -18,7 +18,9 @@ function Alert({
         <div className="fixed top-0 left-0 w-full h-screen bg-neutral-500/50 flex justify-center items-center">
           <div className="px-4 pt-8 pb-6 w-11/12 bg-white rounded-md flex flex-col items-center">
             {icon}
-            <div className="text-center py-4 whitespace-pre">{content}</div>
+            <div className="text-center py-4 whitespace-pre-wrap w-full">
+              {content}
+            </div>
             {handleSubmit ? (
               <div className="flex justify-between space-x-4 w-full">
                 <Button

diff --git a/bowwowcare/src/views/ExaminationPage/ExaminationPage.js b/bowwowcare/src/views/ExaminationPage/ExaminationPage.js
@@ -1,27 +1,79 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { useLocation } from "react-router-dom";
+import axios from "axios";
+import { API_URL } from "../../Config";
+import authHeader from "../../services/auth-header";
+
 import Header from "../../components/Header";
+import Alert from "../../components/Alert";
 import Examination from "./Sections/Examination";
 
-
 function ExaminationPage() {
   const location = useLocation();
+  const [open, setOpen] = useState(false);
+  const [alertMessage, setAlertMessage] = useState("");
+
+  useEffect(() => {
+    if (location?.state?.aggressionType && location?.state?.petId) {
+      axios({
+        method: "POST",
+        url: `${API_URL}/progress/aggression/${location.state.petId}`,
+        headers: authHeader(),
+        data: { aggressionType: location.state.aggressionType },
+      }).then((response) => {
+        if (response.status === 200) {
+          handleOpen();
+          setAlertMessage(
+            <div>
+              {response.data.message.map((m) => (
+                <div className="my-1">
+                  {m}
+                  <br />
+                </div>
+              ))}
+              <br />
+            </div>
+          );
+        }
+      });
+    }
+  }, []);
+
+  const handleOpen = (e) => {
+    setOpen(!open);
+  };
 
   return (
     <div className="container mx-auto w-screen h-screen px-8">
       <Header />
-      {location?.state?.type ? 
+      {location?.state?.type ? (
         <div>
-          {location.state.type==="aggression" ? (
-            <div className="mt-20 mb-6">아이가 어떤 상황에서 <span className="font-bold">앞의 행동</span>을 보이나요?</div>
+          {location.state.type === "aggression" ? (
+            <div className="mt-20 mb-6">
+              아이가 어떤 상황에서 <span className="font-bold">앞의 행동</span>
+              을 보이나요?
+            </div>
           ) : (
-            <div className="mt-20 mb-6">아이가 어떤 <span className="font-bold">행동</span>을 보이고 있나요?</div>
+            <div className="mt-20 mb-6">
+              아이가 어떤 <span className="font-bold">행동</span>을 보이고
+              있나요?
+            </div>
           )}
-          <Examination type={location.state.type} petId={location.state.petId} aggressionType={location.state.aggressionType} /> 
+          <Examination
+            type={location.state.type}
+            petId={location.state.petId}
+            aggressionType={location.state.aggressionType}
+          />
         </div>
-      : null}
+      ) : null}
+      <Alert
+        open={open}
+        handleOpen={handleOpen}
+        content={alertMessage}
+        icon={null}
+      />
     </div>
   );
 }
 
-export default ExaminationPage;
+export default ExaminationPage;
diff --git a/bowwowcare/src/views/SolutionPage/SolutionPage.js b/bowwowcare/src/views/SolutionPage/SolutionPage.js
@@ -38,6 +38,30 @@ function SolutionPage() {
         .catch((error) => {
           console.log(error?.response);
         });
+
+      if (location?.state?.petId && location?.state?.type === "anxiety") {
+        axios({
+          method: "POST",
+          url: `${API_URL}/progress/anxiety/${location.state.petId}`,
+          headers: authHeader(),
+          data: location.state.responses,
+        }).then((response) => {
+          if (response.status === 200) {
+            handleOpen();
+            setAlertMessage(
+              <div>
+                {response.data.message.map((m) => (
+                  <div className="my-1">
+                    {m}
+                    <br />
+                  </div>
+                ))}
+                <br />
+              </div>
+            );
+          }
+        });
+      }
     }
   }, []);
 
@@ -110,7 +134,7 @@ function SolutionPage() {
         open={open}
         handleOpen={handleOpen}
         content={alertMessage}
-        handleSubmit={handleLogin}
+        handleSubmit={localStorage.getItem("user") ? null : handleLogin}
       />
     </div>
   );