more toasts

diyhue · Dec 26, 2023 · 20a9734 · 20a9734
1 parent e293dd1
commit 20a9734
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 31 deletions.
diff --git a/src/views/HA.js b/src/views/HA.js
@@ -1,10 +1,8 @@
 import { useState, useEffect } from "react";
 import axios from "axios";
-import Flash from "../containers/Flash";
+import { toast } from 'react-hot-toast';
 
 const HA = ({ HOST_IP, API_KEY }) => {
-  const [type, setType] = useState("none");
-  const [message, setMessage] = useState("no message");
   const [enable, setEnable] = useState(false);
   const [homeAssistantIp, setHomeAssistantIp] = useState("127.0.0.1");
   const [homeAssistantPort, setHomeAssistantPort] = useState(8123);
@@ -50,26 +48,16 @@ const HA = ({ HOST_IP, API_KEY }) => {
       })
       .then((fetchedData) => {
         console.log(fetchedData.data);
-        setMessage("Successfully saved, please restart the service");
-        setType("success");
+        toast.success("Successfully saved, please restart the service");
       })
       .catch((error) => {
         console.error(error);
-        setMessage("Error occured, check browser console");
-        setType("error");
+        toast.error(`Error occurred: ${error.message}`);
       });
   };
 
   return (
     <div className="inner">
-      {type !== "none" && (
-        <Flash
-          type={type}
-          message={message}
-          duration="5000"
-          setType={setType}
-        />
-      )}
       <div className="contentContainer">
         <div className="headline">Home Assistant config</div>
         <form className="add-form" onSubmit={(e) => onSubmit(e)}>

diff --git a/src/views/Mqtt.js b/src/views/Mqtt.js
@@ -1,10 +1,8 @@
 import { useState, useEffect } from "react";
 import axios from "axios";
-import Flash from "../containers/Flash";
+import { toast } from 'react-hot-toast';
 
 const Mqtt = ({ HOST_IP, API_KEY }) => {
-  const [type, setType] = useState("none");
-  const [message, setMessage] = useState("no message");
   const [enable, setEnable] = useState(false);
   const [mqttServer, setMqttServer] = useState("mqtt");
   const [mqttPort, setMqttPort] = useState(1883);
@@ -30,6 +28,7 @@ const Mqtt = ({ HOST_IP, API_KEY }) => {
       })
       .catch((error) => {
         console.error(error);
+        toast.error(`Error occurred: ${error.message}`);
       });
   }, [HOST_IP, API_KEY]);
 
@@ -49,26 +48,16 @@ const Mqtt = ({ HOST_IP, API_KEY }) => {
       })
       .then((fetchedData) => {
         console.log(fetchedData.data);
-        setMessage("Successfully saved, please restart the service");
-        setType("success");
+        toast.success("Successfully saved, please restart the service");
       })
       .catch((error) => {
         console.error(error);
-        setMessage("Error occured, check browser console");
-        setType("error");
+        toast.error(`Error occurred: ${error.message}`);
       });
   };
 
   return (
     <div className="inner">
-      {type !== "none" && (
-        <Flash
-          type={type}
-          message={message}
-          duration="5000"
-          setType={setType}
-        />
-      )}
       <div className="contentContainer">
         <div className="headline">ZigBee2MQTT config</div>
         <form className="add-form" method="POST" onSubmit={(e) => onSubmit(e)}>
@@ -137,4 +126,4 @@ const Mqtt = ({ HOST_IP, API_KEY }) => {
   );
 };
 
-export default Mqtt;
+export default Mqtt;