From af18895b0c6c4383c3d5f6ad56cff5a1212397da Mon Sep 17 00:00:00 2001
From: VaiTon <eyadlorenzo@gmail.com>
Date: Mon, 24 Jul 2023 19:36:44 +0200
Subject: [PATCH] chore: Convert flagged image page to TS

---
 .../flaggedImages/{index.jsx => index.tsx}    | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)
 rename src/pages/flaggedImages/{index.jsx => index.tsx} (78%)

diff --git a/src/pages/flaggedImages/index.jsx b/src/pages/flaggedImages/index.tsx
similarity index 78%
rename from src/pages/flaggedImages/index.jsx
rename to src/pages/flaggedImages/index.tsx
index 63d60972e..72cdb803e 100644
--- a/src/pages/flaggedImages/index.jsx
+++ b/src/pages/flaggedImages/index.tsx
@@ -10,16 +10,28 @@ import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import off from "../../off";
 import { OFF_IMAGE_URL } from "../../const";
 
-const getImageUrl = (code, imgid) =>
+type FlaggedImage = {
+  code: string;
+  imgid: number;
+  url: string;
+};
+
+type ApiRequest = {
+  result: FlaggedImage[];
+};
+
+const flagImageUrl = "https://amathjourney.com/api/off-annotation/flag-image/";
+
+const getImageUrl = (code: string, imgid: number) =>
   `${OFF_IMAGE_URL}/${off.getFormatedBarcode(code)}/${imgid}.jpg`;
 
 export default function FlaggedImages() {
   const { t } = useTranslation();
-  const [data, setData] = React.useState(null);
+  const [data, setData] = React.useState<FlaggedImage[] | null>(null);
 
   React.useEffect(() => {
     axios
-      .get("https://amathjourney.com/api/off-annotation/flag-image/")
+      .get<ApiRequest>(flagImageUrl)
       .then(({ data: { result } }) => setData(result))
       .catch(() => {
         setData([]);
@@ -56,15 +68,12 @@ export default function FlaggedImages() {
                 <td>
                   <IconButton
                     onClick={() => {
-                      axios.delete(
-                        `https://amathjourney.com/api/off-annotation/flag-image/${code}`,
-                        {
-                          mode: "no-cors",
-                          data: {
-                            imgid,
-                          },
-                        }
-                      );
+                      axios.delete(flagImageUrl + code, {
+                        mode: "no-cors",
+                        data: {
+                          imgid,
+                        },
+                      });
                       setData((prev) =>
                         prev.filter(
                           (line) => line.code !== code || line.imgid !== imgid