новая обработка ответа для новых версий ответа на стр заявок

CHANGELOG.md

@@ -1 +1,2 @@
+1.0.1 Страница заявок корректно отображает мультиответ
 1.0.0 Добавлены фичи "мультиответ", "перенос строки в своём ответе", "свой ответ", "плейсхолдер своего ответа"

src/pages/QuizAnswersPage/AnswerList.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { Box, Typography } from "@mui/material";
 import { DateDefinition, TimeDefinition } from "./helper";
-import { CardAnswer } from "./CardAnswer";
+import { CardAnswer } from "./cardAnswers/CardAnswer";
 import { Result } from "@root/results/store";
 
 interface AnswerListProps {

src/pages/QuizAnswersPage/cardAnswers/CardAnswer.tsx

@@ -1,9 +1,9 @@
 import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
 import { Box, IconButton, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { FC, MouseEvent, useState } from "react";
-import { ContactIcon } from "./icons/ContactIcon";
+import { ContactIcon } from "../icons/ContactIcon";
-import { MessageIcon } from "./icons/MessageIcon";
+import { MessageIcon } from "../icons/MessageIcon";
-import { PhoneIcon } from "./icons/PhoneIcon";
+import { PhoneIcon } from "../icons/PhoneIcon";
 import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
 
 import { deleteResult, obsolescenceResult } from "@root/results/actions";
@@ -12,10 +12,14 @@ import { useQuizStore } from "@root/quizes/store";
 import { useQuestionsStore } from "@root/questions/store";
 import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
 
-import { DeleteModal } from "./DeleteModal";
+import { DeleteModal } from "../DeleteModal";
 
 import type { AnyTypedQuizQuestion } from "@frontend/squzanswerer";
 import { useCurrentQuiz } from "@/stores/quizes/hooks";
+import { ListOfOptionsCardAnswer } from "./ListOfOptionsCardAnswer";
+import { ListOfImagesCardAnswer } from "./ListOfImagesCardAnswer";
+
+import { timewebContentFile, timewebContent } from "./helper"
 
 interface CardAnswerProps {
   isNew: boolean;
@@ -312,6 +316,26 @@ export const CardAnswer: FC<CardAnswerProps> = ({
                       qid = quest[i].backendId
                     }
                   }
+                  if (answer?.Version !== undefined) {
+                    if (typeOuestion === "variant" || typeOuestion === "emoji") return (
+                      <ListOfOptionsCardAnswer
+                        title={titleQuestion || ""}
+                        answer={answer.content}
+                        id={id}
+                      />
+                    )
+                    if (typeOuestion === "varimg" || typeOuestion === "images" && answer.content.includes("Image")) return (
+                      <ListOfImagesCardAnswer
+                        title={titleQuestion || ""}
+                        answer={answer.content}
+                        id={id}
+                        quizId={quiz?.id}
+                        questionId={qid}
+                      />
+                    )
+
+                  }
+
                   return (
                     <Box
                       key={answer.id}
@@ -325,7 +349,7 @@ export const CardAnswer: FC<CardAnswerProps> = ({
                       <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
                         {id + 1}. {titleQuestion}.
                       </Typography>
-                      {typeOuestion === "file" && (
+                      {typeOuestion === "file" && answer.content && (
                         <Link
                           download
                           href={timewebContentFile(quiz?.qid, answer.content, qid)}
@@ -366,6 +390,7 @@ export const CardAnswer: FC<CardAnswerProps> = ({
                       {!(typeOuestion === "file" || typeOuestion === "images" || typeOuestion === "varimg") && (
                         <Typography sx={{ fontSize: "18px" }}>{answer.content}</Typography>
                       )}
+
                     </Box>
                   );
                 })}
@@ -433,26 +458,3 @@ export const CardAnswer: FC<CardAnswerProps> = ({
     </>
   );
 };
-
-function timewebContentFile(editQuizId: string, content: string, qid: string) {
-  if (content.includes("<img")) {
-    //Старая версия: контент лежит в теге
-    //<img style="width:100%; max-width:250px; max-height:250px" src="https://s3.timeweb.cloud/3c580be9-30c7959dc17b/squizimages/03520c507b35e8/cq39gn7o73evdd30"/>
-    return content.split("<")[1].split('src="')[1].split('"/>')[0]
-  }
-  //Новая версия: контент просто записан с указанием расширения файла
-  return `https://s3.timeweb.cloud/3c580be9-cf31f296-d055-49cf-b39e-30c7959dc17b/squizanswer/${editQuizId}/${qid}/${content}`
-}
-function timewebContent(editQuizId: string, content: string, qid: string) {
-  if (content.includes("<img")) {
-    //Старая версия: контент лежит в теге
-    //<img style="width:100%; max-width:250px; max-height:250px" src="https://s3.timeweb.cloud/3c580be9-30c7959dc17b/squizimages/03520c507b35e8/cq39gn7o73evdd30"/>
-    return content.split("<")[1].split('src="')[1].split('"/>')[0]
-  }
-  if (content.includes(`"Image"`)) {
-    const data = JSON.parse(content)
-    return data.Image
-  }
-  //Новая версия: контент просто записан с указанием расширения файла(устарело)
-  return `https://s3.timeweb.cloud/3c580be9-cf31f296-d055-49cf-b39e-30c7959dc17b/squizimages/${editQuizId}/${content}`
-}

src/pages/QuizAnswersPage/cardAnswers/ListOfImagesCardAnswer.tsx

@@ -0,0 +1,55 @@
+import { Box, Typography } from "@mui/material";
+import { splitUserText, timewebContent } from "./helper";
+
+interface Props {
+    title: string;
+    id: number;
+    answer: string;
+    quizId: string;
+    questionId: string;
+}
+
+export const ListOfImagesCardAnswer = ({
+    title,
+    id,
+    answer,
+    quizId,
+    questionId,
+}: Props) => {
+    console.log('"' + answer + '"')
+    console.log(splitUserText('"' + answer + '"'))
+
+    return <Box
+        sx={{
+            display: "flex",
+            alignItems: "start",
+            gap: "13px",
+        }}
+        onClick={(e) => e.stopPropagation()}
+    >
+        <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
+            {id + 1}. {title}.
+        </Typography>
+        <Box>
+            {
+                splitUserText(answer)
+                    .filter(text => text.length)
+                    .map(text => {
+                        const { Image, Description } = JSON.parse(text)
+                        console.log("Image, Descripton")
+                        console.log(Image, Description)
+                        console.log("Image, Descripton")
+                        return (<>
+                            <img
+                                width={40}
+                                height={40}
+                                src={timewebContent(quizId, Image, questionId)}
+                            />
+                            <Typography sx={{ fontSize: "18px", wordBreak: "break-word" }}>{Description}</Typography>
+                        </>)
+
+                    })
+            }
+        </Box>
+    </Box>
+};

src/pages/QuizAnswersPage/cardAnswers/ListOfOptionsCardAnswer.tsx

@@ -0,0 +1,37 @@
+import { Box, Typography } from "@mui/material";
+import { splitUserText } from "./helper";
+
+interface Props {
+    title: string;
+    id: number;
+    answer: string;
+}
+
+export const ListOfOptionsCardAnswer = ({
+    title,
+    id,
+    answer
+}: Props) => {
+
+    return <Box
+        sx={{
+            display: "flex",
+            alignItems: "start",
+            gap: "13px",
+        }}
+        onClick={(e) => e.stopPropagation()}
+    >
+        <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
+            {id + 1}. {title}.
+        </Typography>
+        <Box>
+            {
+                splitUserText(answer)
+                .filter(text => text.length)
+                .map(text => <Typography sx={{ fontSize: "18px", wordBreak: "break-word" }}>{text}</Typography>)
+            }
+        </Box>
+                      
+                     
+    </Box>
+};

src/pages/QuizAnswersPage/cardAnswers/helper.ts

@@ -0,0 +1,38 @@
+export function splitUserText(input: string) {
+    // Регулярное выражение для поиска текста в обратных кавычках
+    const regex = /`([^`]*)`/g; // Изменено на ([^]*) для захвата пустых строк
+    let result = [];
+    let match;
+
+    // Найти все совпадения
+    while ((match = regex.exec(input)) !== null) {
+        // Добавляем найденный текст (включая пустые строки) в массив
+        result.push(match[1]);
+    }
+
+    return result;
+}
+
+export function timewebContentFile(editQuizId: string, content: string, qid: string) {
+    if (content.includes("<img")) {
+        //Старая версия: контент лежит в теге
+        //<img style="width:100%; max-width:250px; max-height:250px" src="https://s3.timeweb.cloud/3c580be9-30c7959dc17b/squizimages/03520c507b35e8/cq39gn7o73evdd30"/>
+        return content.split("<")[1].split('src="')[1].split('"/>')[0]
+    }
+    //Новая версия: контент просто записан с указанием расширения файла
+    return `https://s3.timeweb.cloud/3c580be9-cf31f296-d055-49cf-b39e-30c7959dc17b/squizanswer/${editQuizId}/${qid}/${content}`
+}
+export function timewebContent(editQuizId: string, content: string, qid: string) {
+    if (content.includes("<img")) {
+        //Старая версия: контент лежит в теге
+        //<img style="width:100%; max-width:250px; max-height:250px" src="https://s3.timeweb.cloud/3c580be9-30c7959dc17b/squizimages/03520c507b35e8/cq39gn7o73evdd30"/>
+        return content.split("<")[1].split('src="')[1].split('"/>')[0]
+    } else if (content.includes(`"Image"`)) {
+        const data = JSON.parse(content)
+        return data.Image
+    } else {
+        return content
+    }
+    //Новая версия: контент просто записан с указанием расширения файла(устарело)
+    return `https://s3.timeweb.cloud/3c580be9-cf31f296-d055-49cf-b39e-30c7959dc17b/squizimages/${editQuizId}/${content}`
+}