feat: Uploaded file displayed and Date fix

src/pages/ViewPublicationPage/questions/Date.tsx

@@ -1,3 +1,4 @@
+import dayjs from "dayjs";
 import { DatePicker } from "@mui/x-date-pickers";
 import { Box, Typography } from "@mui/material";
 
@@ -14,10 +15,9 @@ type DateProps = {
 
 export const Date = ({ currentQuestion }: DateProps) => {
   const { answers } = useQuizViewStore();
-  const { answer } =
+  const answer = answers.find(
-    answers.find(
+    ({ questionId }) => questionId === currentQuestion.content.id
-      ({ questionId }) => questionId === currentQuestion.content.id
+  )?.answer as string;
-    ) ?? {};
   const [day, month, year] = answer?.split(".") || [];
 
   return (
@@ -32,50 +32,50 @@ export const Date = ({ currentQuestion }: DateProps) => {
         }}
       >
         <DatePicker
-            slots={{
+          slots={{
-                openPickerIcon: () => <CalendarIcon />,
+            openPickerIcon: () => <CalendarIcon />,
-            }}
+          }}
-          selected={
+          value={dayjs(
             answer
               ? new window.Date(`${month}.${day}.${year}`)
               : new window.Date()
-          }
+          )}
-          onChange={(date) =>
+          onChange={(date) => {
             updateAnswer(
               currentQuestion.content.id,
               String(
-                date?.toLocaleDateString("ru-RU", {
+                new window.Date(date?.toDate()).toLocaleDateString("ru-RU", {
                   year: "numeric",
                   month: "2-digit",
                   day: "2-digit",
                 })
               )
-            )
+            );
-          }
+          }}
-            slotProps={{
+          slotProps={{
-                openPickerButton: {
+            openPickerButton: {
-                    sx: {
+              sx: {
-                        p: 0,
+                p: 0,
-                    },
+              },
-                    "data-cy": "open-datepicker",
+              "data-cy": "open-datepicker",
-                },
+            },
-            }}
+          }}
-            sx={{
+          sx={{
-                "& .MuiInputBase-root": {
+            "& .MuiInputBase-root": {
-                    backgroundColor: "#F2F3F7",
+              backgroundColor: "#F2F3F7",
-                    borderRadius: "10px",
+              borderRadius: "10px",
-                    maxWidth: "250px",
+              maxWidth: "250px",
-                    pr: "22px",
+              pr: "22px",
-                    "& input": {
+              "& input": {
-                        py: "11px",
+                py: "11px",
-                        pl: "20px",
+                pl: "20px",
-                        lineHeight: "19px",
+                lineHeight: "19px",
-                    },
+              },
-                    "& fieldset": {
+              "& fieldset": {
-                        borderColor: "#9A9AAF",
+                borderColor: "#9A9AAF",
-                    },
+              },
-                },
+            },
-            }}
+          }}
         />
       </Box>
     </Box>

src/pages/ViewPublicationPage/questions/File.tsx

@@ -16,13 +16,18 @@ type FileProps = {
 
 export const File = ({ currentQuestion }: FileProps) => {
   const { answers } = useQuizViewStore();
-  const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {};
+  const answer = answers.find(
+    ({ questionId }) => questionId === currentQuestion.content.id
+  )?.answer as string;
 
   const uploadFile = ({ target }: ChangeEvent<HTMLInputElement>) => {
     const file = target.files?.[0];
 
     if (file) {
-      updateAnswer(currentQuestion.content.id, `${file.name}|${URL.createObjectURL(file)}`);
+      updateAnswer(
+        currentQuestion.content.id,
+        `${file.name}|${URL.createObjectURL(file)}`
+      );
     }
   };
 
@@ -47,6 +52,28 @@ export const File = ({ currentQuestion }: FileProps) => {
           />
           <UploadBox icon={<UploadIcon />} text="5 MB максимум" />
         </ButtonBase>
+        {answer && currentQuestion.content.type === "picture" && (
+          <img
+            src={answer.split("|")[1]}
+            alt=""
+            style={{
+              marginTop: "15px",
+              maxWidth: "300px",
+              maxHeight: "300px",
+            }}
+          />
+        )}
+        {answer && currentQuestion.content.type === "video" && (
+          <video
+            src={answer.split("|")[1]}
+            style={{
+              marginTop: "15px",
+              maxWidth: "300px",
+              maxHeight: "300px",
+              objectFit: "cover",
+            }}
+          />
+        )}
         {answer?.split("|")[0] && (
           <Typography sx={{ marginTop: "15px" }}>
             {answer?.split("|")[0]}