From 518c4b340d11d9e0b93993aa4e671778f0922a0d Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Wed, 13 Nov 2024 17:45:11 +0300
Subject: [PATCH] =?UTF-8?q?=D0=92=D1=81=D0=B5=20=D1=82=D0=B8=D0=BF=D1=8B?=
 =?UTF-8?q?=20=D0=B2=D0=BE=D0=BF=D1=80=D0=BE=D1=81=D0=BE=D0=B2=20=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D1=80=D1=8B=D0=B2=D0=B0=D1=8E=D1=82=20=D0=BA=D1=80?=
 =?UTF-8?q?=D0=BE=D0=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomSelect/CustomSelect.tsx  |  2 -
 .../IntegrationsModal/AmoCRMModal.tsx         |  2 -
 .../IntegrationsModal/AmoLogin/AmoLogin.tsx   |  1 -
 .../AmoModalTitle/AmoModalTitle.tsx           |  1 -
 .../OptionsAndPicture/OptionsAndPicture.tsx   | 16 +++----
 .../OptionsPicture/OptionsPicture.tsx         |  2 -
 src/pages/Questions/UploadImage/index.tsx     | 37 +++++++++------
 src/pages/createQuize/AvailablePrivilege.tsx  | 10 ----
 src/pages/startPage/dropZone.tsx              | 47 ++++++++++---------
 src/stores/questions/actions.ts               |  4 --
 src/stores/results/actions.ts                 |  2 -
 src/ui_kit/MediaSelectionAndDisplay.tsx       | 31 ++++++------
 src/ui_kit/Modal/CropModal/CropGeneral.tsx    |  7 ---
 src/ui_kit/Modal/CropModal/WorkSpace.tsx      |  2 +-
 src/ui_kit/Modal/CropModal/index.tsx          | 13 -----
 15 files changed, 69 insertions(+), 108 deletions(-)

diff --git a/src/components/CustomSelect/CustomSelect.tsx b/src/components/CustomSelect/CustomSelect.tsx
index 6776c0d3..bfe7bdcd 100644
--- a/src/components/CustomSelect/CustomSelect.tsx
+++ b/src/components/CustomSelect/CustomSelect.tsx
@@ -90,8 +90,6 @@ export const CustomSelect: FC<CustomSelectProps> = ({
 
   const menuItems = useMemo(() => {
     if (type === "typeUsers" && users && users.length !== 0) {
-      console.log(type)
-      console.log(users)
       return users.map((user) => (
         <MenuItem
           key={user.ID}
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx
index 312591a8..d3a40a69 100644
--- a/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx
+++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx
@@ -77,8 +77,6 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
     company: [],
     buyer: [],
   });
-  console.log(questionEntity)
-  console.log(tags)
 
   useEffect(() => {
     if (isModalOpen && quizID !== undefined && !isRemoveAccount) {
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoLogin/AmoLogin.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoLogin/AmoLogin.tsx
index 9682bbef..7e9bafa0 100644
--- a/src/pages/IntegrationsPage/IntegrationsModal/AmoLogin/AmoLogin.tsx
+++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoLogin/AmoLogin.tsx
@@ -27,7 +27,6 @@ export const AmoLogin: FC<IntegrationStep1Props> = ({ handleNextStep }) => {
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
 
   const onAmoClick = async () => {
-    console.log("Amo click");
     const [url, error] = await connectAmo();
     if (url && !error) {
       window.open(url, "_blank");
diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoModalTitle/AmoModalTitle.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoModalTitle/AmoModalTitle.tsx
index d155e105..5e31fe85 100644
--- a/src/pages/IntegrationsPage/IntegrationsModal/AmoModalTitle/AmoModalTitle.tsx
+++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoModalTitle/AmoModalTitle.tsx
@@ -24,7 +24,6 @@ export const AmoModalTitle: FC<AmoModalTitleProps> = ({
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
 
-    console.log(isSettingsBlock)
   const handleClick = useCallback(async () => {
     if (isSettingsBlock) {
       startRemoveAccount();
diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
index 59920abe..9e2143b0 100644
--- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
+++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
@@ -5,7 +5,7 @@ import {
   uploadQuestionImage,
 } from "@root/questions/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
 import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
 import { useDisclosure } from "../../../utils/useDisclosure";
@@ -35,6 +35,9 @@ export default function OptionsAndPicture({
   const [selectedVariantId, setSelectedVariantId] = useState<string | null>(
     null,
   );
+  const variant = useMemo(() => question.content.variants.find(
+    (variant) => variant.id === selectedVariantId,
+  ),[selectedVariantId])
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
   const quizQid = useCurrentQuiz()?.qid;
@@ -101,7 +104,7 @@ export default function OptionsAndPicture({
               largeCheck={question.content.largeCheck}
               variant={variant}
               isMobile={isMobile}
-              openCropModal={() => {}}
+              openCropModal={() => {setOpenCropModal(true)}}
               openImageUploadModal={openImageUploadModal}
               pictureUploding={pictureUploding}
               setSelectedVariantId={setSelectedVariantId}
@@ -114,13 +117,8 @@ export default function OptionsAndPicture({
           handleImageChange={handleImageUpload}
         />
         <CropModalInit
-          originalImageUrl={imge}
-          editedUrlImagesList={{
-            "desktop": imge,
-            "tablet": imge,
-            "mobile": imge,
-            "small": imge,
-          }}
+          originalImageUrl={variant?.originalImageUrl}
+          editedUrlImagesList={variant?.editedUrlImagesList}
           questionId={question.backendId.toString()}
           questionType={question.type}
           quizId={quizQid}
diff --git a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
index 9b1b43fc..8c673f8e 100644
--- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
+++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
@@ -43,8 +43,6 @@ export default function OptionsPicture({
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
   const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();
 
-  console.log(variant)
-
   const handleImageUpload = async (file: File) => {
     if (!selectedVariantId) return;
 
diff --git a/src/pages/Questions/UploadImage/index.tsx b/src/pages/Questions/UploadImage/index.tsx
index 2c87f6f8..e52a9027 100644
--- a/src/pages/Questions/UploadImage/index.tsx
+++ b/src/pages/Questions/UploadImage/index.tsx
@@ -4,6 +4,7 @@ import { updateQuestion, uploadQuestionImage } from "@root/questions/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useState } from "react";
 import { DropZone } from "../../../pages/startPage/dropZone";
+import { CropModalInit } from "@/ui_kit/Modal/CropModal";
 
 type UploadImageProps = {
   question: AnyTypedQuizQuestion;
@@ -18,10 +19,13 @@ export default function UploadImage({
   cropAspectRatio,
 }: UploadImageProps) {
   const [pictureUploding, setPictureUploading] = useState<boolean>(false);
+  const [openCropModal, setOpenCropModal] = useState(false);
+  
   const theme = useTheme();
   const quiz = useCurrentQuiz();
 
   if (!quiz) return null;
+  console.log(question)
 
   return (
     <Box sx={{ padding: "20px" }}>
@@ -42,9 +46,13 @@ export default function UploadImage({
           text={"5 MB максимум"}
           sx={{ maxWidth: "300px", width: "100%" }}
           cropAspectRatio={cropAspectRatio}
-          imageUrl={question.content.back}
+          imageUrl={question.content.originalBack}
           originalImageUrl={question.content.originalBack}
           onImageUploadClick={async (file) => {
+            alert("d")
+            if (question.content.originalBack) {
+              setOpenCropModal(true)
+            } else {
             setPictureUploading(true);
 
             await uploadQuestionImage(
@@ -57,29 +65,30 @@ export default function UploadImage({
               },
             );
 
+            setOpenCropModal(true)
             setPictureUploading(false);
+            }
           }}
           onDeleteClick={() => {
             updateQuestion(question.id, (question) => {
               question.content.back = null;
             });
           }}
-          onImageSaveClick={async (file) => {
-            setPictureUploading(true);
-
-            await uploadQuestionImage(
-              question.id,
-              quiz.qid,
-              file,
-              (question, url) => {
-                question.content.back = url;
-              },
-            );
-
-            setPictureUploading(false);
+          onImageSavedClick={() => {
+            setOpenCropModal(true)
           }}
         />
       )}
+      <CropModalInit
+        originalImageUrl={question.content.originalBack}
+        editedUrlImagesList={question.content?.editedUrlImagesList}
+        questionId={question.backendId.toString()}
+        questionType={question.type}
+        quizId={quiz.id}
+        open={openCropModal}
+        selfClose={() => setOpenCropModal(false)}
+        setPictureUploading={setPictureUploading}
+      />
     </Box>
   );
 }
diff --git a/src/pages/createQuize/AvailablePrivilege.tsx b/src/pages/createQuize/AvailablePrivilege.tsx
index c1a0e905..3ee17219 100644
--- a/src/pages/createQuize/AvailablePrivilege.tsx
+++ b/src/pages/createQuize/AvailablePrivilege.tsx
@@ -72,16 +72,6 @@ export default function AvailablePrivilege() {
   );
 
   const currentDate = moment();
-  console.log(quizUnlimDays);
-  console.log(moment());
-  console.log(
-    moment(
-      moment(userPrivileges?.quizUnlimTime?.created_at).add(
-        quizUnlimTime,
-        "days",
-      ),
-    ),
-  );
 
   return (
     <Box
diff --git a/src/pages/startPage/dropZone.tsx b/src/pages/startPage/dropZone.tsx
index 34fcdb20..6b8ad79f 100644
--- a/src/pages/startPage/dropZone.tsx
+++ b/src/pages/startPage/dropZone.tsx
@@ -15,6 +15,8 @@ import { UploadImageModal } from "../../pages/Questions/UploadImage/UploadImageM
 import { useDisclosure } from "../../utils/useDisclosure";
 import imge from "@/assets/card-1.png"
 import { CropModalInit } from "@/ui_kit/Modal/CropModal";
+import DeleteIcon from "@mui/icons-material/Delete";
+
 
 const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
 
@@ -25,7 +27,7 @@ interface Props {
   imageUrl: string | null;
   originalImageUrl: string | null;
   onImageUploadClick: (image: Blob) => void;
-  onImageSaveClick: (image: Blob) => void;
+  onImageSavedClick?: () => void;
   onDeleteClick: () => void;
   cropAspectRatio?: {
     width: number;
@@ -41,19 +43,15 @@ export const DropZone = ({
   imageUrl,
   originalImageUrl,
   onImageUploadClick,
-  onImageSaveClick,
+  onImageSavedClick,
   onDeleteClick,
   cropAspectRatio,
 }: Props) => {
   const theme = useTheme();
   const quiz = useCurrentQuiz();
 
-  const [pictureUploding, setPictureUploading] = useState<boolean>(false);
-  const [openCropModal, setOpenCropModal] = useState(false);
-
   const [isDropReady, setIsDropReady] = useState<boolean>(false);
-  const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] =
-    useDisclosure();
+  const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();
 
   if (!quiz) return null;
 
@@ -98,23 +96,8 @@ export const DropZone = ({
         onClose={closeImageUploadModal}
         handleImageChange={handleImageUpload}
       />
-      <CropModalInit
-        originalImageUrl={imge}
-        editedUrlImagesList={{
-          "desktop": imge,
-          "tablet": imge,
-          "mobile": imge,
-          "small": imge,
-        }}
-        questionId={'2'}
-        questionType={"images"}
-        quizId={quiz.id}
-        open={openCropModal}
-        selfClose={() => setOpenCropModal(false)}
-        setPictureUploading={setPictureUploading}
-      />
       <ButtonBase
-        onClick={ openImageUploadModal
+        onClick={ () => onImageSavedClick ? onImageSavedClick() : openImageUploadModal()
         }
         sx={{
           width: "100%",
@@ -153,7 +136,25 @@ export const DropZone = ({
             </Typography>
           </>
         )}
+  
       </ButtonBase>
+        {imageUrl && (
+          <IconButton
+            onClick={onDeleteClick}
+            sx={{
+              position: "absolute",
+              right: 0,
+              top: 0,
+              color: theme.palette.orange.main,
+              borderRadius: "8px",
+              borderBottomRightRadius: 0,
+              borderTopLeftRadius: 0,
+              ...deleteIconSx,
+            }}
+          >
+            <DeleteIcon />
+          </IconButton>
+        )}
     </Box>
   );
 };
diff --git a/src/stores/questions/actions.ts b/src/stores/questions/actions.ts
index dd0b1c22..3c1e31aa 100644
--- a/src/stores/questions/actions.ts
+++ b/src/stores/questions/actions.ts
@@ -82,10 +82,6 @@ export const createUntypedQuestion = (
     },
   );
 
-  console.log(
-    33,
-    useQuestionsStore.getState().questions.map((q) => q.type),
-  );
 };
 
 const removeQuestion = (questionId: string) =>
diff --git a/src/stores/results/actions.ts b/src/stores/results/actions.ts
index ca612c50..8641159f 100644
--- a/src/stores/results/actions.ts
+++ b/src/stores/results/actions.ts
@@ -110,7 +110,6 @@ export const ExportResults = async (
     return;
   }
 
-  console.log(typeof data);
 
   const blob = new Blob([data as BlobPart], {
     type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
@@ -118,7 +117,6 @@ export const ExportResults = async (
 
   const link = document.createElement("a");
   link.href = window.URL.createObjectURL(data as Blob);
-  console.log(link);
   link.download = `report_${new Date().getTime()}.xlsx`;
   link.click();
 };
diff --git a/src/ui_kit/MediaSelectionAndDisplay.tsx b/src/ui_kit/MediaSelectionAndDisplay.tsx
index 931dda3e..bb49399d 100644
--- a/src/ui_kit/MediaSelectionAndDisplay.tsx
+++ b/src/ui_kit/MediaSelectionAndDisplay.tsx
@@ -65,6 +65,8 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({
     });
   }
 
+  console.log(resultData)
+
   return (
     <Box
       sx={{
@@ -129,16 +131,14 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({
           handleImageChange={handleImageUpload}
         />
         <CropModalInit
-          originalImageUrl={imge}
-          editedUrlImagesList={{
-            "desktop": imge,
-            "tablet": imge,
-            "mobile": imge,
-            "small": imge,
-          }}
-          questionId={"12"}
-          questionType={"images"}
+          originalImageUrl={resultData.content.originalBack}
+          editedUrlImagesList={resultData.content?.editedUrlImagesList}
+          questionId={resultData.id}
+          questionType={resultData.type}
           quizId={quizQid}
+          open={openCropModal}
+          selfClose={() => setOpenCropModal(false)}
+          setPictureUploading={setPictureUploading}
         />
       </Box>
 
@@ -152,23 +152,20 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({
             mb: "30px",
           }}
         >
-          {/* <AddOrEditImageButton
+          <AddOrEditImageButton
             imageSrc={resultData.content.back}
             uploading={pictureUploding}
             onImageClick={() => {
               if (resultData.content.back) {
-                return openCropModal(
-                  resultData.content.back,
-                  resultData.content.originalBack,
-                );
+                setOpenCropModal(true)
+              } else {
+                openImageUploadModal();
               }
-
-              openImageUploadModal();
             }}
             onPlusClick={() => {
               openImageUploadModal();
             }}
-          /> */}
+          /> 
         </Box>
       )}
       {!resultData.content.useImage && (
diff --git a/src/ui_kit/Modal/CropModal/CropGeneral.tsx b/src/ui_kit/Modal/CropModal/CropGeneral.tsx
index 00bfca99..9e7bed64 100644
--- a/src/ui_kit/Modal/CropModal/CropGeneral.tsx
+++ b/src/ui_kit/Modal/CropModal/CropGeneral.tsx
@@ -160,9 +160,6 @@ export const CropGeneral: FC<Props> = ({
         }
     }
 
-    console.log("crop")
-    console.log(crop)
-
     return (
         <>
             <Box
@@ -180,9 +177,6 @@ export const CropGeneral: FC<Props> = ({
                 <ReactCrop
                     crop={crop}
                     onChange={(_, percentCrop) => editedImagesChange((old) => {
-                        console.log("БИБЛИОТЕКА КРОПАЕТ!!!!!!!!!")
-                        console.log("БИБЛИОТЕКА КРОПАЕТ!!!!!!!!")
-                        console.log("БИБЛИОТЕКА КРОПАЕТ!!!!!!")
                         return ({
                             newRules: {
                                 ...old.newRules,
@@ -206,7 +200,6 @@ export const CropGeneral: FC<Props> = ({
                         onLoad={(e) => {
                             setImageWidth(e.currentTarget.naturalWidth);
                             setImageHeight(e.currentTarget.naturalHeight);
-                            console.log("перелоад картинки")
 
                             calcCrop()
                         }}
diff --git a/src/ui_kit/Modal/CropModal/WorkSpace.tsx b/src/ui_kit/Modal/CropModal/WorkSpace.tsx
index c3950509..057d5975 100644
--- a/src/ui_kit/Modal/CropModal/WorkSpace.tsx
+++ b/src/ui_kit/Modal/CropModal/WorkSpace.tsx
@@ -46,7 +46,7 @@ export default function WorkSpace({
         modalModels[currentStepName]
     ), [currentStepName]);
 
-    console.log(" промежуточный рендер которому должно быть похуй")
+    // console.log(" промежуточный рендер которому должно быть похуй")
 
     return (
         <>
diff --git a/src/ui_kit/Modal/CropModal/index.tsx b/src/ui_kit/Modal/CropModal/index.tsx
index 4fe331ea..9c4bceba 100644
--- a/src/ui_kit/Modal/CropModal/index.tsx
+++ b/src/ui_kit/Modal/CropModal/index.tsx
@@ -40,12 +40,9 @@ export const CropModalInit: FC<CropOnOpenType> = ({
     const [acceptedOriginalImageUrl, setOriginalImageUrl] = useState("");
     const [editedImages, setEditedImages] = useState<Record<keyof WorkSpaceTypes, EditedImage> | null>(null);
     const [readyDelete, setReadyDelete] = useState(false);
-    console.log("editedImages index")
-    console.log(editedImages)
 
     useEffect(() => {
         if (open) {
-            console.log("дали ли на ссылочку? ", Boolean(originalImageUrl))
             //Если нам не дали с чем работать, то и работать не нужно
             if (Boolean(imageBlob) || Boolean(originalImageUrl)) {
                 (async () => {
@@ -58,7 +55,6 @@ export const CropModalInit: FC<CropOnOpenType> = ({
                     };
 
                     if (newImageBlob) {
-                        console.log("попытки пытки 0")
                         const isGif = await isImageBlobAGifFile(newImageBlob);
                         if (isGif) {
                             saveImagesAndRules(newImageBlob);
@@ -67,7 +63,6 @@ export const CropModalInit: FC<CropOnOpenType> = ({
                         //Для работы нам нужны урлы. Оригинальной и редактированных картинок
                         let newOriginalImageUrl = originalImageUrl || URL.createObjectURL(newImageBlob)
                         if (questionId) {
-                            console.log("попытки пытки 1")
                             if (questionType) {
                                 const workSpaceTypesCONST = workSpaceTypesList[questionType];
 
@@ -108,7 +103,6 @@ export const CropModalInit: FC<CropOnOpenType> = ({
                                 }
                                 setOriginalImageUrl(newOriginalImageUrl);
                                 setEditedImages(newEditedImagesList);
-                                console.log("попытки пытки ")
                             } else {
                                 throw new Error("Не передан тип вопроса")
                             }
@@ -161,13 +155,6 @@ export const CropModalInit: FC<CropOnOpenType> = ({
         // });
     };
 
-    console.log("acceptedOriginalImageUrl")
-    console.log("workSpaceTypesList")
-    console.log("editedImages")
-    console.log(acceptedOriginalImageUrl)
-    console.log(workSpaceTypesList)
-    console.log(editedImages)
-
     if (acceptedOriginalImageUrl.length === 0) return <></>
     if (workSpaceTypesList[questionType] === undefined) return <></>
     if (editedImages === null) return <></>