fix: open modal

src/pages/Questions/UploadImage.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import {
   Typography,
   Box,
@@ -8,6 +9,7 @@ import {
   InputAdornment,
 } from "@mui/material";
 import UploadBox from "@ui_kit/UploadBox";
+import { CroppingModal } from "@ui_kit/Modal/CroppingModal";
 import UploadIcon from "../../assets/icons/UploadIcon";
 import SearchIcon from "../../assets/icons/SearchIcon";
 import * as React from "react";
@@ -169,9 +171,11 @@ export default function UploadImage() {
       const [file] = fileArray;
       setImg(URL.createObjectURL(file));
       handleClose();
+      setOpened(true);
     }
   };
-  const [img, setImg] = React.useState("");
+  const [opened, setOpened] = useState<boolean>(false);
+  const [img, setImg] = useState("");
 
   const handleDrop = (event: DragEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -196,20 +200,12 @@ export default function UploadImage() {
         onClick={handleOpen}
         sx={{ width: "100%", maxWidth: "260px" }}
       >
-        {img ? (
+        <UploadBox
-          <img
+          handleDrop={handleDrop}
-            src={img}
+          sx={{ maxWidth: "260px" }}
-            alt="img"
+          icon={<UploadIcon />}
-            style={{ width: "100%", maxWidth: "400px" }}
+          text="5 MB максимум"
-          />
+        />
-        ) : (
-          <UploadBox
-            handleDrop={handleDrop}
-            sx={{ maxWidth: "260px" }}
-            icon={<UploadIcon />}
-            text="5 MB максимум"
-          />
-        )}
       </ButtonBase>
       <Modal
         open={open}
@@ -219,6 +215,11 @@ export default function UploadImage() {
       >
         <Modalka imgHC={imgHC} />
       </Modal>
+      <CroppingModal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        picture={img}
+      />
     </Box>
   );
 }

src/ui_kit/Modal/CroppingModal.tsx

@@ -1,8 +1,16 @@
-import React, { FC, useRef, useState } from "react";
+import React, { FC, useEffect, useRef, useState } from "react";
 import { saveAs } from "file-saver";
 import ReactCrop, { Crop } from "react-image-crop";
 import "react-image-crop/dist/ReactCrop.css";
-import { Box, Button, Modal, Slider, Typography, useMediaQuery, useTheme } from "@mui/material";
+import {
+  Box,
+  Button,
+  Modal,
+  Slider,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
 
 import quiz from "../../assets/quiz-template-6.png";
 import { ResetIcon } from "@icons/ResetIcon";
@@ -10,9 +18,10 @@ import { ResetIcon } from "@icons/ResetIcon";
 interface Iprops {
   opened: boolean;
   onClose: () => void;
+  picture?: string | ArrayBuffer;
 }
 
-export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
+export const CroppingModal: FC<Iprops> = ({ opened, onClose, picture }) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(786));
 
@@ -54,7 +63,13 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
   };
 
   const [src, setSrc] = useState<string | ArrayBuffer | null>(quiz);
-  const [crop, setCrop] = useState<Crop>({ unit: "px", y: 0, x: 0, width: 100, height: 100 });
+  const [crop, setCrop] = useState<Crop>({
+    unit: "px",
+    y: 0,
+    x: 0,
+    width: 100,
+    height: 100,
+  });
   const [completedCrop, setCompletedCrop] = useState<Crop | null>(null);
   const [imageSize, setImageSize] = useState(580);
   const [darken, setDarken] = useState(0);
@@ -62,6 +77,12 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
 
   console.log(src);
 
+  useEffect(() => {
+    if (picture) {
+      setSrc(picture);
+    }
+  }, [picture]);
+
   const onCropComplete = (crop: Crop) => {
     setCompletedCrop(crop);
   };
@@ -81,7 +102,12 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
 
   const handleDownloadClick = async () => {
     if (completedCrop && src) {
-      const croppedImageUrl = await getCroppedAndDarkenedImg(src, completedCrop, "cropped.jpeg", darken);
+      const croppedImageUrl = await getCroppedAndDarkenedImg(
+        src,
+        completedCrop,
+        "cropped.jpeg",
+        darken
+      );
       saveAs(croppedImageUrl, "cropped-image.jpeg");
     }
   };
@@ -178,7 +204,11 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
             justifyContent: "center",
           }}
         >
-          <ReactCrop crop={crop} onChange={(newCrop) => setCrop(newCrop)} onComplete={onCropComplete}>
+          <ReactCrop
+            crop={crop}
+            onChange={(newCrop) => setCrop(newCrop)}
+            onComplete={onCropComplete}
+          >
             {src && (
               <img
                 src={src as string}
@@ -205,12 +235,23 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
             marginBottom: "50px",
           }}
         >
-          <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>{Math.round(crop.width)}</Typography>x
+          <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
-          <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>{Math.round(crop.width)}</Typography>
+            {Math.round(crop.width)}
+          </Typography>
+          x
+          <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
+            {Math.round(crop.width)}
+          </Typography>
           px
         </Box>
 
-        <Box sx={{ display: isMobile ? "block" : "flex", alignItems: "end", justifyContent: "space-between" }}>
+        <Box
+          sx={{
+            display: isMobile ? "block" : "flex",
+            alignItems: "end",
+            justifyContent: "space-between",
+          }}
+        >
           <ResetIcon
             onClick={() => {
               setCrop((prevCrop: Crop) => ({
@@ -228,7 +269,9 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
             style={{ marginBottom: "10px", cursor: "pointer" }}
           />
           <Box>
-            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</Typography>
+            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
+              Размер
+            </Typography>
             <Slider
               sx={styleSlider}
               value={imageSize}
@@ -239,7 +282,9 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
             />
           </Box>
           <Box>
-            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</Typography>
+            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
+              Затемнение
+            </Typography>
             <Slider
               sx={styleSlider}
               value={darken}
@@ -250,7 +295,14 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
             />
           </Box>
         </Box>
-        <Box sx={{ marginTop: "40px", width: "100%", display: "flex", justifyContent: "end" }}>
+        <Box
+          sx={{
+            marginTop: "40px",
+            width: "100%",
+            display: "flex",
+            justifyContent: "end",
+          }}
+        >
           <input
             ref={fileInputRef}
             type="file"