From db8e8029d0558d66c8cdc2e25b8f2bcfb35e664e Mon Sep 17 00:00:00 2001
From: nflnkr <molohov.eugeny@yandex.ru>
Date: Fri, 13 Oct 2023 15:10:14 +0300
Subject: [PATCH] improve questions preview

---
 .../QuizPreviewQuestionTypes/File.tsx         | 38 +++++++++----------
 .../QuizPreviewQuestionTypes/Images.tsx       | 24 +++++++-----
 .../QuizPreviewQuestionTypes/Page.tsx         | 17 +++++++--
 .../QuizPreviewQuestionTypes/Varimg.tsx       |  6 +--
 4 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
index 70cf227f..72de0682 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/File.tsx
@@ -9,36 +9,36 @@ interface Props {
 
 export default function File({ question }: Props) {
     const fileInputRef = useRef<HTMLInputElement>(null);
-    const [files, setFiles] = useState<File[] | null>(null);
+    const [file, setFile] = useState<File | null>(null);
 
     function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
-        if (!event.target.files) return setFiles(null);
-        setFiles(Array.from(event.target.files));
+        if (!event.target.files?.[0]) return setFile(null);
+        setFile(event.target.files[0]);
     }
 
     return (
         <Box sx={{
             display: "flex",
             flexDirection: "column",
+            alignItems: "start",
             gap: 1,
         }}>
             <Typography variant="h6">{question.title}</Typography>
-            <Box>
-                <Button
-                    variant="contained"
-                    onClick={() => fileInputRef.current?.click()}
-                >
-                    Загрузить файл
-                    <input
-                        ref={fileInputRef}
-                        onChange={handleFileChange}
-                        type="file"
-                        style={{
-                            display: "none",
-                        }}
-                    />
-                </Button>
-            </Box>
+            <Button
+                variant="contained"
+                onClick={() => fileInputRef.current?.click()}
+            >
+                Загрузить файл
+                <input
+                    ref={fileInputRef}
+                    onChange={handleFileChange}
+                    type="file"
+                    style={{
+                        display: "none",
+                    }}
+                />
+            </Button>
+            {file && <Typography>Выбран файл: {file.name}</Typography>}
         </Box>
     );
 }
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
index 94c61677..d1bde9fc 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
@@ -53,16 +53,20 @@ export default function Images({ question }: Props) {
                             borderColor: selectedVariants.includes(index) ? theme.palette.brightPurple.main : "#E3E3E3",
                         }}
                     >
-                        <img
-                            src={variant.extendedText}
-                            alt="question variant"
-                            style={{
-                                width: "100%",
-                                display: "block",
-                                objectFit: "scale-down",
-                                flexGrow: 1,
-                            }}
-                        />
+                        {variant.extendedText ?
+                            <img
+                                src={variant.extendedText}
+                                alt="question variant"
+                                style={{
+                                    width: "100%",
+                                    display: "block",
+                                    objectFit: "scale-down",
+                                    flexGrow: 1,
+                                }}
+                            />
+                            :
+                            <Typography p={2}>Картинка отсутствует</Typography>
+                        }
                         <Divider sx={{ width: "100%" }} />
                         <Box sx={{
                             display: "flex",
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
index c56d1ad4..576a7333 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Page.tsx
@@ -12,12 +12,23 @@ export default function Page({ question }: Props) {
         <Box sx={{
             display: "flex",
             flexDirection: "column",
+            alignItems: "start",
             gap: 1,
         }}>
             <Typography variant="h6">{question.title}</Typography>
-            <Box>
-                <Typography>{question.content.text}</Typography>
-            </Box>
+            <Typography>{question.content.text}</Typography>
+            {question.content.picture &&
+                <img
+                    src={question.content.picture}
+                    alt=""
+                    style={{
+                        width: "100%",
+                        display: "block",
+                        objectFit: "scale-down",
+                        flexGrow: 1,
+                    }}
+                />
+            }
         </Box>
     );
 }
diff --git a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
index fb0001e9..1383be3a 100644
--- a/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
@@ -55,8 +55,6 @@ export default function Varimg({ question }: Props) {
             <Box sx={{
                 border: "1px solid #E3E3E3",
                 maxWidth: "400px",
-                minWidth: "200px",
-                minHeight: "150px",
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
@@ -64,7 +62,7 @@ export default function Varimg({ question }: Props) {
             }}>
                 {currentVariant?.extendedText ?
                     <img
-                        src={currentVariant?.extendedText}
+                        src={currentVariant.extendedText}
                         alt="question variant"
                         style={{
                             width: "100%",
@@ -74,7 +72,7 @@ export default function Varimg({ question }: Props) {
                         }}
                     />
                     :
-                    <Typography>Выберите вариант</Typography>
+                    <Typography p={2}>{selectedVariantIndex === -1 ? "Выберите вариант" : "Картинка отсутствует"}</Typography>
                 }
             </Box>
         </Box>