diff --git a/src/App.tsx b/src/App.tsx
index 5626151..de98587 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { Alert, Grow, Rating, Typography } from "@mui/material";
+import { Alert, Grow, Rating, Slide, Typography } from "@mui/material";
import "./App.css";
import ButtonRow, { ActionProps } from "./components/ButtonRow";
import ReviewField, { ReviewFieldProps } from "./components/ReviewField";
@@ -9,6 +9,9 @@ function App() {
const [showAlert, changeAlert] = useState(false);
const [alertText, changeAlertText] = useState("");
+ const [showInfo, changeInfo] = useState(false);
+ const [infoText, changeInfoText] = useState("");
+
const fields: ReviewFieldProps[] = [
{
name: "Name",
@@ -42,22 +45,26 @@ function App() {
content: fields[2].dynamicState[0]
})
})
- .then(async ({ json }) => {
- const result = await json();
+ .then(async (response) => {
+ const result = await response.json();
- changeAlertText(result.error ? `${result.error.type}: ${result.error.message}` : `Success: ${result.message}`);
+ changeInfoText(result.error ? `${result.error.type}: ${result.error.message}` : `Success: ${result.message}`);
+
+ changeInfo(true);
+
+ setTimeout(() => {
+ changeInfo(false);
+ }, 2000);
})
- .catch((err) => changeAlertText(err.toString()));
-
- if (showAlert) {
- return;
- }
-
+ .catch((err) => {
+ changeAlertText(err.toString());
+
changeAlert(true);
setTimeout(() => {
changeAlert(false);
}, 2500);
+ });
}
const buttons: ActionProps[] = [
@@ -73,8 +80,14 @@ function App() {
},
];
- const alert = (
+ const info = (
+ {infoText}
+
+ );
+
+ const alert = (
+
{alertText}
);
@@ -108,9 +121,13 @@ function App() {
-
+
{alert}
+
+
+ {info}
+
>
);
}