image upload

src/widgets/action-editor/ui/ActionEditor.tsx

@@ -1,10 +1,12 @@
 import { useState } from "react";
+import { uploadFile } from "@/shared/lib/uploadFile";
 import type { CommentAction } from "@/entities/action/schema";
 
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Box from "@mui/material/Box";
 import { Button, TextField } from "@mui/material";
+import CircularProgress from "@mui/material/CircularProgress";
 
 import TextFieldsIcon from "@mui/icons-material/TextFields";
 import ImageIcon from "@mui/icons-material/Image";
@@ -56,6 +58,10 @@ export default function ActionEditor({
   canExit = false,
 }: ActionEditorProps) {
   const [value, setValue] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  console.log(imageUrl);
 
   const [action, setAction] = useState<CommentAction>(
     initialAction ?? {
@@ -66,9 +72,64 @@ export default function ActionEditor({
   );
 
   const handleChange = (_: React.SyntheticEvent, newValue: number) => {
+    if (loading) return;
     setValue(newValue);
   };
 
+  async function handleFileChange(
+    event: React.ChangeEvent<HTMLInputElement>,
+    origin: "image" | "voice",
+  ) {
+    if (!event.target.files) return;
+    const file = event.target.files[0];
+
+    setLoading(true);
+    const fileUrl = await uploadFile(file);
+
+    if (!fileUrl) {
+      alert("К сожалению, не удалось загрузить файл");
+      setLoading(false);
+      return;
+    }
+
+    if (origin === "image") {
+      setImageUrl(fileUrl);
+    }
+
+    setLoading(false);
+  }
+
+  function handleSave() {
+    if (!onSave) return;
+
+    if (value === 0) {
+      if (!action.text) {
+        alert("Введите текст");
+        return;
+      }
+
+      onSave(actionIndex, {
+        actionType: action.actionType,
+        text: action.text,
+        fileUrls: [],
+      });
+    } else if (value === 1) {
+      if (!imageUrl) {
+        alert("Добавьте картинку");
+        return;
+      }
+
+      onSave(actionIndex, {
+        actionType: action.actionType,
+        text: action.text === "" ? null : action.text,
+        fileUrls: [imageUrl],
+      });
+    } else if (value === 2) {
+      alert("Unsupported");
+      return;
+    }
+  }
+
   return (
     <>
       <div className="min-h-[500px] w-[80%] rounded-sm bg-white shadow-md">
@@ -106,7 +167,32 @@ export default function ActionEditor({
           </TabPanel>
 
           <TabPanel value={value} index={1}>
-            In progress
+            <div className="flex items-center justify-between">
+              <input
+                type="file"
+                className="mb-4 select-none"
+                onChange={async (e) => await handleFileChange(e, "image")}
+              />
+              {loading && (
+                <div>
+                  <CircularProgress className="-mt-4" />
+                </div>
+              )}
+            </div>
+
+            <TextField
+              fullWidth
+              multiline
+              minRows={8}
+              maxRows={8}
+              value={action.text}
+              onChange={(event) =>
+                setAction((currentAction) => ({
+                  ...currentAction,
+                  text: event.target.value,
+                }))
+              }
+            />
           </TabPanel>
 
           <TabPanel value={value} index={2}>
@@ -119,6 +205,7 @@ export default function ActionEditor({
         {canExit && (
           <Button
             color="error"
+            disabled={loading}
             onClick={() => {
               if (onClose) onClose();
             }}
@@ -129,9 +216,8 @@ export default function ActionEditor({
         <Button
           variant="contained"
           type="submit"
-          onClick={() => {
+          disabled={loading}
-            if (onSave) onSave(actionIndex, action);
+          onClick={handleSave}
-          }}
         >
           Сохранить
         </Button>