From 2e21b9ffa7cfc29968d8cb8bd1c00420380952c8 Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Mon, 13 May 2024 01:25:09 +0700
Subject: [PATCH] Add recommendation card UI

---
 frontend/src/api/RecommendData.tsx            | 18 ++++++
 frontend/src/components/Alert/Alert.tsx       | 55 +++++++++++++++++++
 frontend/src/components/Alert/DangerAlert.tsx |  4 +-
 frontend/src/components/Alert/GoodAlert.tsx   |  2 +-
 frontend/src/types/Recommend.ts               | 13 +++++
 frontend/src/types/general.ts                 |  2 +-
 6 files changed, 89 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/api/RecommendData.tsx
 create mode 100644 frontend/src/components/Alert/Alert.tsx
 create mode 100644 frontend/src/types/Recommend.ts

diff --git a/frontend/src/api/RecommendData.tsx b/frontend/src/api/RecommendData.tsx
new file mode 100644
index 0000000..971aaeb
--- /dev/null
+++ b/frontend/src/api/RecommendData.tsx
@@ -0,0 +1,18 @@
+import axios from 'axios';
+
+const fetchRecommendation = async (
+  data: HealthData,
+): Promise<RecommendationData[] | null> => {
+  try {
+    const response = await axios.post<RecommendationData[]>(
+      'http://127.0.0.1:8000/api/v1/recommend/recommendation/',
+      data,
+    );
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching recommendation:', error);
+    return null;
+  }
+};
+
+export default fetchRecommendation;
diff --git a/frontend/src/components/Alert/Alert.tsx b/frontend/src/components/Alert/Alert.tsx
new file mode 100644
index 0000000..2661c31
--- /dev/null
+++ b/frontend/src/components/Alert/Alert.tsx
@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import DangerAlert from './DangerAlert';
+import GoodAlert from './GoodAlert';
+import WarningAlert from './WarningAlert';
+import fetchRecommendation from '../../api/RecommendData';
+
+const Alert: React.FC<HealthData> = ({
+  indoor_temp,
+  outdoor_temp,
+  outdoor_pm25,
+  outdoor_pm10,
+  outdoor_humidity,
+}) => {
+  const [recommendation, setRecommendation] = useState<
+    string | null | undefined
+  >(null);
+  const [message, setMessage] = useState<string | undefined>('');
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await fetchRecommendation({
+        indoor_temp: indoor_temp,
+        outdoor_temp: outdoor_temp,
+        outdoor_pm25: outdoor_pm25,
+        outdoor_pm10: outdoor_pm10,
+        outdoor_humidity: outdoor_humidity,
+      });
+
+      if (data && data.length > 0) {
+        // priority: danger > warning > good
+        for (let i = 0; i < data.length; i++) {
+          if (data[i].status === 'danger' || data[i].status === 'warning') {
+            setRecommendation(data[i].status);
+            setMessage(data[i].recommendation);
+            return;
+          }
+        }
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  if (recommendation === 'good') {
+    return <GoodAlert message={message} />;
+  } else if (recommendation === 'warning') {
+    return <WarningAlert message={message} />;
+  } else if (recommendation === 'danger') {
+    return <DangerAlert message={message} />;
+  } else {
+    return <GoodAlert message="No tips today" />;
+  }
+};
+
+export default Alert;
diff --git a/frontend/src/components/Alert/DangerAlert.tsx b/frontend/src/components/Alert/DangerAlert.tsx
index e2fc4e5..c4ed297 100644
--- a/frontend/src/components/Alert/DangerAlert.tsx
+++ b/frontend/src/components/Alert/DangerAlert.tsx
@@ -19,9 +19,7 @@ const DangerAlert: React.FC<Message> = ({ message }) => {
         </svg>
       </div>
       <div className="w-full">
-        <h5 className="mb-3 font-semibold text-[#B45454]">
-          There were 1 errors with your submission
-        </h5>
+        <h5 className="mb-3 font-semibold text-[#B45454]">Dangerous!</h5>
         <ul>
           <li className="leading-relaxed text-[#CD5D5D]">{message}</li>
         </ul>
diff --git a/frontend/src/components/Alert/GoodAlert.tsx b/frontend/src/components/Alert/GoodAlert.tsx
index e2433f7..813e66d 100644
--- a/frontend/src/components/Alert/GoodAlert.tsx
+++ b/frontend/src/components/Alert/GoodAlert.tsx
@@ -20,7 +20,7 @@ const GoodAlert: React.FC<Message> = ({ message }) => {
       </div>
       <div className="w-full">
         <h5 className="mb-3 text-lg font-semibold text-black dark:text-[#34D399] ">
-          Message Sent Successfully
+          Everything is good
         </h5>
         <p className="text-base leading-relaxed text-body">{message}</p>
       </div>
diff --git a/frontend/src/types/Recommend.ts b/frontend/src/types/Recommend.ts
new file mode 100644
index 0000000..d145596
--- /dev/null
+++ b/frontend/src/types/Recommend.ts
@@ -0,0 +1,13 @@
+interface HealthData {
+  indoor_temp: number | undefined;
+  outdoor_temp: number | undefined;
+  outdoor_pm25: number | undefined;
+  outdoor_pm10: number | undefined;
+  outdoor_humidity: number | undefined;
+}
+
+interface RecommendationData {
+  timestamp?: Date;
+  recommendation?: string;
+  status?: string;
+}
diff --git a/frontend/src/types/general.ts b/frontend/src/types/general.ts
index c0c7cf1..f9a28a3 100644
--- a/frontend/src/types/general.ts
+++ b/frontend/src/types/general.ts
@@ -1,3 +1,3 @@
 interface Message {
-  message: string;
+  message: string | undefined;
 }