Merge branch 'dev' into 'staging'

realized videofile component, added logic to delete uploaded video, refactored... See merge request frontend/squiz!224
2024-03-31 00:13:42 +00:00 · 2024-03-31 00:13:42 +00:00 · 18272be5ad
commit 18272be5ad
parent a6987adc0a fe39bc1b32
21 changed files with 480 additions and 266 deletions
--- a/src/api/statistic.ts
+++ b/src/api/statistic.ts
@ -25,13 +25,15 @@ export type QuestionsResponse = {

 export const getDevices = async (
  quizId: string,
+  to: number,
+  from: number,
 ): Promise<[DevicesResponse | null, string?]> => {
  try {
    const devicesResponse = await makeRequest<unknown, DevicesResponse>({
      method: "POST",
      url: `${apiUrl}/${quizId}/devices`,
-      useToken: false,
      withCredentials: true,
+      body: { to, from },
    });

    return [devicesResponse];
@ -44,13 +46,15 @@ export const getDevices = async (

 export const getGeneral = async (
  quizId: string,
+  to: number,
+  from: number,
 ): Promise<[GeneralResponse | null, string?]> => {
  try {
    const generalResponse = await makeRequest<unknown, GeneralResponse>({
      method: "POST",
      url: `${apiUrl}/${quizId}/general`,
-      useToken: false,
      withCredentials: true,
+      body: { to, from },
    });

    return [generalResponse];
@ -63,13 +67,15 @@ export const getGeneral = async (

 export const getQuestions = async (
  quizId: string,
+  to: number,
+  from: number,
 ): Promise<[QuestionsResponse | null, string?]> => {
  try {
    const questionsResponse = await makeRequest<unknown, QuestionsResponse>({
      method: "POST",
      url: `${apiUrl}/${quizId}/questions`,
-      useToken: false,
      withCredentials: true,
+      body: { to, from },
    });

    return [questionsResponse];
--- a/src/assets/icons/ChartIcon.tsx
+++ b/src/assets/icons/ChartIcon.tsx
@ -1,43 +1,35 @@
-import { Box, useTheme } from "@mui/material";
-
-export default function ChartIcon() {
-  const theme = useTheme();
+import { Box, SxProps, Theme } from "@mui/material";

+export default function ChartLineUp(sx: SxProps<Theme>) {
  return (
-    <Box
-      sx={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
+    <Box sx={sx}>
      <svg
-        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M21 19.5H3V4.5"
-          stroke={theme.palette.brightPurple.main}
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
+          stroke="#7E2AEA"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
        />
        <path
          d="M19.5 6L12 13.5L9 10.5L3 16.5"
-          stroke={theme.palette.brightPurple.main}
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
+          stroke="#7E2AEA"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
        />
        <path
          d="M19.5 9.75V6H15.75"
-          stroke={theme.palette.brightPurple.main}
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
+          stroke="#7E2AEA"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
        />
      </svg>
    </Box>
--- a/src/pages/Analytics/Analytics.tsx
+++ b/src/pages/Analytics/Analytics.tsx
@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useLayoutEffect, useState } from "react";
 import {
  Box,
  Button,
@ -11,6 +11,8 @@ import {
 import { DatePicker } from "@mui/x-date-pickers";
 import { LineChart } from "@mui/x-charts";
 import moment from "moment";
+import { useQuizStore } from "@root/quizes/store";
+import { useAnalytics } from "@utils/hooks/useAnalytics";

 import HeaderFull from "@ui_kit/Header/HeaderFull";
 import SectionWrapper from "@ui_kit/SectionWrapper";
@ -20,11 +22,29 @@ import { AnswersStatistics } from "./Answers";
 import { Devices } from "./Devices";

 import CalendarIcon from "@icons/CalendarIcon";
+import { redirect } from "react-router-dom";

 export default function Analytics() {
+  const { editQuizId } = useQuizStore();
+
  const [isOpen, setOpen] = useState(false);
  const [isOpenEnd, setOpenEnd] = useState(false);
+  const [to, setTo] = useState(null);
+  const [from, setFrom] = useState(null);

+  const { devices, general, questions } = useAnalytics({
+    quizId: editQuizId?.toString(),
+    to,
+    from,
+  });
+
+  const resetTime = () => {
+    setTo(null);
+    setFrom(null);
+  };
+  useLayoutEffect(() => {
+    if (editQuizId === undefined) redirect("/list");
+  }, [editQuizId]);
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
@ -54,6 +74,9 @@ export default function Analytics() {
      handleClose();
    }
  };
+  console.log("questions", questions);
+  console.log("general", general);
+  console.log("devices", devices);

  const now = moment();
  return (
@ -110,6 +133,8 @@ export default function Analytics() {
                    },
                  },
                }}
+                value={to}
+                onChange={(newValue) => setTo(newValue)}
              />
            </Box>
            <Box>
@ -121,6 +146,8 @@ export default function Analytics() {
                  color: "4D4D4D",
                }}
              >
+                value={from}
+                onChange={(newValue) => setValue(setFrom)}
                Дата окончания
              </Typography>
              <DatePicker
@ -154,6 +181,7 @@ export default function Analytics() {
          </Box>

          <Button
+            onClick={resetTime}
            variant="outlined"
            sx={{
              minWidth: isMobile ? "144px" : "180px",
@ -172,9 +200,9 @@ export default function Analytics() {
            Сбросить
          </Button>
        </Box>
-        <General />
-        <AnswersStatistics />
-        <Devices />
+        <General data={general} />
+        <AnswersStatistics data={questions} />
+        <Devices data={devices} />
      </SectionWrapper>
    </>
  );
--- a/src/pages/Analytics/Answers/Answers.tsx
+++ b/src/pages/Analytics/Answers/Answers.tsx
@ -186,10 +186,16 @@ const Pagination = () => {
  );
 };

-export const Answers = () => {
-  const [answers, setAnswers] = useState<Record<string, number>>(ANSWERS_MOCK);
+export const Answers = (props) => {
  const theme = useTheme();
+  console.log(props.data);

+  if (Object.keys(props.data).length === 0)
+    return (
+      <Typography textAlign="center" m="10px 0">
+        нет данных об ответах
+      </Typography>
+    );
  return (
    <Box sx={{ flexGrow: 1 }}>
      <Paper
@ -244,7 +250,7 @@ export const Answers = () => {
            <NextIcon />
          </ButtonBase>
        </Box>
-        {Object.entries(answers).map(([title, percent], index) => (
+        {Object.entries(props.data).map(([title, percent], index) => (
          <Answer
            key={title}
            title={title}
--- a/src/pages/Analytics/Answers/Funnel.tsx
+++ b/src/pages/Analytics/Answers/Funnel.tsx
@ -16,9 +16,9 @@ type FunnelItemProps = {

 const FUNNEL_MOCK: Record<string, number> = {
  "Стартовая страница": 100,
-  "Воронка квиза": 69,
-  Заявки: 56,
-  Результаты: 56,
+  "Воронка квиза": 0,
+  Заявки: 0,
+  Результаты: 0,
 };

 const FunnelItem = ({ title, percent }: FunnelItemProps) => {
@ -100,12 +100,11 @@ const FunnelItem = ({ title, percent }: FunnelItemProps) => {
  );
 };

-export const Funnel = () => {
-  const [funnel, setFunnel] = useState<Record<string, number>>(FUNNEL_MOCK);
+export const Funnel = (props) => {
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1150));
  const isMobile = useMediaQuery(theme.breakpoints.down(850));
-
+  console.log(props);
  useEffect(() => {
    // const requestFunnel = async () => {
    //   const [funnelResponse, funnelError] = await getGeneral("14761");
@ -122,6 +121,12 @@ export const Funnel = () => {
    // requestFunnel();
  }, []);

+  if (Object.keys(props.data).length === 0)
+    return (
+      <Typography textAlign="center" m="10px 0">
+        нет данных о разделах
+      </Typography>
+    );
  return (
    <Paper
      sx={{
@ -132,8 +137,12 @@ export const Funnel = () => {
        maxWidth: isSmallMonitor && !isMobile ? "366px" : "none",
      }}
    >
-      {Object.entries(funnel).map(([title, percent]) => (
-        <FunnelItem key={title} title={title} percent={percent} />
+      {Object.entries(FUNNEL_MOCK).map(([title, percent], index) => (
+        <FunnelItem
+          key={title}
+          title={title}
+          percent={index > 0 ? props.data[index - 1] : percent}
+        />
      ))}
    </Paper>
  );
--- a/src/pages/Analytics/Answers/Results.tsx
+++ b/src/pages/Analytics/Answers/Results.tsx
@ -69,10 +69,15 @@ const Result = ({ title, percent, highlight }: ResultProps) => {
  );
 };

-export const Results = () => {
-  const [results, setResults] = useState<Record<string, number>>(RESULTS_MOCK);
+export const Results = (props) => {
  const theme = useTheme();

+  if (Object.keys(props.data).length === 0)
+    return (
+      <Typography margin="20px 0 0 0" textAlign="center" m="10px 0">
+        нет данных о результатах
+      </Typography>
+    );
  return (
    <Box>
      <Typography
@ -93,7 +98,7 @@ export const Results = () => {
          marginTop: "30px",
        }}
      >
-        {Object.entries(results).map(([title, percent], index) => (
+        {Object.entries(props.data).map(([title, percent], index) => (
          <Result
            key={title}
            title={title}
--- a/src/pages/Analytics/Answers/index.tsx
+++ b/src/pages/Analytics/Answers/index.tsx
@ -12,11 +12,13 @@ import { Results } from "./Results";

 import { ReactComponent as OpenIcon } from "@icons/Analytics/open.svg";

-export const AnswersStatistics = () => {
+export const AnswersStatistics = (props) => {
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1150));
  const isMobile = useMediaQuery(theme.breakpoints.down(850));

+  console.log(props);
+
  return (
    <Box sx={{ marginTop: "120px" }}>
      <Typography
@ -29,7 +31,7 @@ export const AnswersStatistics = () => {
      >
        Статистика по ответам
      </Typography>
-      <ButtonBase
+      {/* <ButtonBase
        sx={{
          marginTop: "35px",
          display: "flex",
@ -50,17 +52,17 @@ export const AnswersStatistics = () => {
        <Box>
          <OpenIcon />
        </Box>
-      </ButtonBase>
+      </ButtonBase> */}
      <Box
        sx={{
          display: isSmallMonitor && !isMobile ? "flex" : "block",
          gap: "40px",
        }}
      >
-        <Answers />
-        <Funnel />
+        <Answers data={props.data?.Questions || {}} />
+        <Funnel data={props.data?.Funnel || {}} />
      </Box>
-      <Results />
+      <Results data={props.data?.Results || {}} />
    </Box>
  );
 };
--- a/src/pages/Analytics/Devices.tsx
+++ b/src/pages/Analytics/Devices.tsx
@ -27,6 +27,9 @@ const DEVICES_MOCK: DevicesResponse = {

 const Device = ({ title, devices }: DeviceProps) => {
  const theme = useTheme();
+  console.log("devices ", devices);
+  if (devices === undefined || Object.keys(devices).length === 0)
+    return <Typography>{title} - нет данных</Typography>;
  const data = Object.entries(devices).map(([id, value], index) => ({
    id,
    value,
@ -95,33 +98,33 @@ const Device = ({ title, devices }: DeviceProps) => {
  );
 };

-export const Devices = () => {
-  const [devices, setDevices] = useState<DevicesResponse>(DEVICES_MOCK);
+export const Devices = ({ data = {} }) => {
+  const [devices, setDevices] = useState<DevicesResponse>(data);
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(700));

-  useEffect(() => {
-    const requestDevices = async () => {
-      const [devicesResponse, devicesError] = await getDevices("14761");
+  // useEffect(() => {
+  //   const requestDevices = async () => {
+  //     const [devicesResponse, devicesError] = await getDevices("14761");

-      if (devicesError) {
-        enqueueSnackbar(devicesError);
+  //     if (devicesError) {
+  //       enqueueSnackbar(devicesError);

-        return;
-      }
+  //       return;
+  //     }

-      if (!devicesResponse) {
-        enqueueSnackbar("Список девайсов пуст.");
+  //     if (!devicesResponse) {
+  //       enqueueSnackbar("Список девайсов пуст.");

-        return;
-      }
+  //       return;
+  //     }

-      setDevices(devicesResponse);
-    };
+  //     setDevices(devicesResponse);
+  //   };

-    // requestDevices();
-  }, []);
+  //   // requestDevices();
+  // }, []);

  return (
    <Box sx={{ marginTop: "120px" }}>
--- a/src/pages/Analytics/General.tsx
+++ b/src/pages/Analytics/General.tsx
@ -38,8 +38,7 @@ const GeneralItem = ({ title, general, color, numberType }: GeneralProps) => {
      : Object.entries(general).reduce(
          (total, [key, value]) => total + (value / Number(key)) * 100,
          0,
-        ) / Object.keys(general).length;
-
+        ) / Object.keys(general).length || Number(0);
  return (
    <Paper
      sx={{
@ -66,34 +65,17 @@ const GeneralItem = ({ title, general, color, numberType }: GeneralProps) => {
  );
 };

-export const General = () => {
-  const [general, setGeneral] = useState<GeneralResponse>(GENERAL_MOCK);
+export const General = (props: any) => {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(700));

-  useEffect(() => {
-    const requestGeneral = async () => {
-      const [generalResponse, generalError] = await getGeneral("14761");
-
-      if (generalError) {
-        enqueueSnackbar(generalError);
-
-        return;
-      }
-
-      if (!generalResponse) {
-        enqueueSnackbar("Список девайсов пуст.");
-
-        return;
-      }
-
-      setGeneral(generalResponse);
-    };
-
-    // requestGeneral();
-  }, []);
-
+  if (Object.keys(props.data).length === 0)
+    return (
+      <Typography textAlign="center" m="10px 0">
+        нет данных о ключевых метриках
+      </Typography>
+    );
  return (
    <Box sx={{ marginTop: "45px" }}>
      <Typography
@ -121,25 +103,25 @@ export const General = () => {
        <GeneralItem
          title="Открыли квиз"
          numberType="sum"
-          general={general.open}
+          general={props.data.open || { 0: 0 }}
          color={COLORS[0]}
        />
        <GeneralItem
          title="Получено заявок"
          numberType="sum"
-          general={general.result}
+          general={props.data.result || { 0: 0 }}
          color={COLORS[1]}
        />
        <GeneralItem
          title="Конверсия"
          numberType="percent"
-          general={general.conversation}
+          general={props.data.conversation || { 0: 0 }}
          color={COLORS[2]}
        />
        <GeneralItem
          title="Среднее время прохождения квиза"
          numberType="percent"
-          general={general.avtime}
+          general={props.data.avtime || { 0: 0 }}
          color={COLORS[3]}
        />
      </Box>
--- a/src/pages/Questions/DraggableList/index.tsx
+++ b/src/pages/Questions/DraggableList/index.tsx
@ -28,8 +28,8 @@ export const DraggableList = ({

  useEffect(() => {
    if (!isLoading && quiz && !filteredQuestions.length) {
-      console.log("useEffect", quiz)
-      console.log(Number(quiz.backendId))
+      console.log("useEffect", quiz);
+      console.log(Number(quiz.backendId));
      createUntypedQuestion(Number(quiz.backendId));
    }
  }, [quiz, filteredQuestions]);
--- a/src/pages/Questions/QuestionsPage.tsx
+++ b/src/pages/Questions/QuestionsPage.tsx
@ -36,7 +36,7 @@ export default function QuestionsPage({
    updateEditSomeQuestion();
  }, []);

-  console.log("quiz", quiz)
+  console.log("quiz", quiz);
  if (!quiz) return null;

  return (
--- a/src/pages/Tariffs/Tabs.tsx
+++ b/src/pages/Tariffs/Tabs.tsx
@ -4,8 +4,8 @@ import { CustomTab } from "./CustomTab";
 type TabsProps = {
  names: string[];
  items: string[];
-  selectedItem: "count" | "day";
-  setSelectedItem: (num: "count" | "day") => void;
+  selectedItem: "count" | "day" | "dop";
+  setSelectedItem: (num: "count" | "day" | "dop") => void;
 };

 export const Tabs = ({
@ -18,7 +18,7 @@ export const Tabs = ({
    sx={{ m: "25px" }}
    TabIndicatorProps={{ sx: { display: "none" } }}
    value={selectedItem}
-    onChange={(event, newValue: "count" | "day") => {
+    onChange={(event, newValue: "count" | "day" | "dop") => {
      setSelectedItem(newValue);
    }}
    variant="scrollable"
--- a/src/pages/Tariffs/Tariffs.tsx
+++ b/src/pages/Tariffs/Tariffs.tsx
@ -38,6 +38,7 @@ import { activatePromocode } from "@api/promocode";
 const StepperText: Record<string, string> = {
  count: "Тарифы на объём",
  day: "Тарифы на время",
+  dop: "Доп. услуги",
 };

 function TariffPage() {
@ -156,6 +157,19 @@ function TariffPage() {
    );
  });

+  const filteredBadgeTariffs = tariffs.filter((tariff) => {
+    return (
+      tariff.privileges[0].serviceKey === "squiz" &&
+      !tariff.isDeleted &&
+      !tariff.isCustom &&
+      tariff.privileges[0].privilegeId === "squizHideBadge" &&
+      tariff.privileges[0]?.type === "day"
+    );
+  });
+  const filteredBaseTariffs = filteredTariffs.filter((tariff) => {
+    return tariff.privileges[0].privilegeId !== "squizHideBadge";
+  });
+
  async function handleLogoutClick() {
    const [, logoutError] = await logout();

@ -251,6 +265,37 @@ function TariffPage() {
        setSelectedItem={setSelectedItem}
      />

+      <Box
+        sx={{
+          justifyContent: "left",
+          display: selectedItem === "dop" ? "flex" : "grid",
+          gap: "40px",
+          p: "20px",
+          gridTemplateColumns: `repeat(auto-fit, minmax(300px, ${
+            isTablet ? "436px" : "360px"
+          }))`,
+          flexDirection: selectedItem === "dop" ? "column" : undefined,
+        }}
+      >
+        {selectedItem === "day" &&
+          createTariffElements(
+            filteredBaseTariffs,
+            true,
+            user,
+            discounts,
+            openModalHC,
+          )}
+        {selectedItem === "count" &&
+          createTariffElements(
+            filteredTariffs,
+            true,
+            user,
+            discounts,
+            openModalHC,
+          )}
+        {selectedItem === "dop" && (
+          <>
+            <Typography fontWeight={500}>Убрать логотип "PenaQuiz"</Typography>
            <Box
              sx={{
                justifyContent: "left",
@ -263,13 +308,16 @@ function TariffPage() {
              }}
            >
              {createTariffElements(
-          filteredTariffs,
-          true,
+                filteredBadgeTariffs,
+                false,
                user,
                discounts,
                openModalHC,
              )}
            </Box>
+          </>
+        )}
+      </Box>
      <Modal
        open={Object.values(openModal).length > 0}
        onClose={() => setOpenModal({})}
--- a/src/pages/createQuize/QuizCard.tsx
+++ b/src/pages/createQuize/QuizCard.tsx
@ -19,6 +19,7 @@ import { makeRequest } from "@frontend/kitui";
 import { enqueueSnackbar } from "notistack";
 import { useDomainDefine } from "@utils/hooks/useDomainDefine";
 import CopyIcon from "@icons/CopyIcon";
+import ChartIcon from "@icons/ChartIcon";

 interface Props {
  quiz: Quiz;
@ -45,6 +46,10 @@ export default function QuizCard({
    setEditQuizId(quiz.backendId);
    navigate("/edit");
  }
+  function handleStatisticClick() {
+    setEditQuizId(quiz.backendId);
+    navigate(`/analytics`);
+  }

  const questionCount = useRef(quiz.questions_count.toString() || "");

@ -186,21 +191,24 @@ export default function QuizCard({
        >
          {isMobile ? "" : "Редактировать"}
        </Button>
-        {/* <Button
-          variant="outlined"
-          startIcon={<ChartIcon />}
+        <IconButton
+          onClick={handleStatisticClick}
          sx={{
-            minWidth: "46px",
-            padding: "10px 10px",
-            "& .MuiButton-startIcon": {
-              mr: 0,
-              ml: 0,
-            },
+            height: "44px",
+            width: "44px",
+            border: `${theme.palette.brightPurple.main} 1px solid`,
+            borderRadius: "6px",
          }}
-        /> */}
+        >
+          <ChartIcon />
+        </IconButton>
        <IconButton
          onClick={() => onClickCopy(quiz.id)}
-          sx={{ borderRadius: "6px", padding: "0 4px" }}
+          sx={{
+            height: "44px",
+            width: "44px",
+            borderRadius: "6px",
+          }}
        >
          <CopyIcon
            color={theme.palette.brightPurple.main}
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
@ -20,9 +20,9 @@ import {
  FormControlLabel,
  MenuItem,
  Select,
+  Skeleton,
  Tooltip,
  Typography,
-  Skeleton,
  useMediaQuery,
  useTheme,
 } from "@mui/material";
@ -45,6 +45,7 @@ import SelectableIconButton from "./SelectableIconButton";
 import { DropZone } from "./dropZone";
 import Extra from "./extra";
 import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
+import { VideoElement } from "./VideoElement";

 const designTypes = [
  [
@ -385,6 +386,8 @@ export default function StartPageSettings() {
            )}

            {quiz.config.startpage.background.type === "video" && (
+              <>
+                {!quiz.config.startpage.background.video ? (
                  <>
                    <Box
                      sx={{
@ -396,7 +399,10 @@ export default function StartPageSettings() {
                      }}
                    >
                      <Typography
-                    sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
+                        sx={{
+                          fontWeight: 500,
+                          color: theme.palette.grey3.main,
+                        }}
                      >
                        Добавить видео
                      </Typography>
@ -442,10 +448,10 @@ export default function StartPageSettings() {
                                  quiz.id,
                                  file,
                                  (quiz, url) => {
-                                quiz.config.startpage.background.video = url;
+                                    quiz.config.startpage.background.video =
+                                      url;
                                  },
                                );
-                            // setVideo(URL.createObjectURL(file));
                              }

                              setBackgroundUploading(false);
@ -463,14 +469,21 @@ export default function StartPageSettings() {
                            }}
                          />
                        </ButtonBase>
-                    {quiz.config.startpage.background.video && (
-                      <video
-                        src={quiz.config.startpage.background.video}
-                        width="400"
-                        controls
-                      />
+                      </>
                    )}
                  </>
+                ) : (
+                  <Box sx={{ marginTop: "20px" }}>
+                    <VideoElement
+                      videoSrc={quiz.config.startpage.background.video}
+                      theme={theme}
+                      onDeleteClick={() => {
+                        updateQuiz(quiz.id, (quiz) => {
+                          quiz.config.startpage.background.video = null;
+                        });
+                      }}
+                    />
+                  </Box>
                )}
              </>
            )}
--- a/src/pages/startPage/VideoElement.tsx
+++ b/src/pages/startPage/VideoElement.tsx
@ -0,0 +1,46 @@
+import Box from "@mui/material/Box";
+import { FC } from "react";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { IconButton, SxProps, Theme } from "@mui/material";
+
+type VideoElementProps = {
+  videoSrc: string;
+  width?: string;
+  theme: Theme;
+  onDeleteClick: () => void;
+  deleteIconSx?: SxProps<Theme>;
+};
+
+export const VideoElement: FC<VideoElementProps> = ({
+  videoSrc,
+  width = "300",
+  theme,
+  onDeleteClick,
+  deleteIconSx,
+}) => {
+  return (
+    <Box sx={{ position: "relative", width: `${width}px` }}>
+      <video
+        style={{ borderRadius: "8px" }}
+        src={videoSrc}
+        width={width}
+        controls
+      />
+      <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>
+  );
+};
--- a/src/stores/questions/actions.ts
+++ b/src/stores/questions/actions.ts
@ -44,7 +44,7 @@ export const createUntypedQuestion = (
 ) =>
  setProducedState(
    (state) => {
-      console.log("createUntypedQuestion", quizId)
+      console.log("createUntypedQuestion", quizId);
      const newUntypedQuestion = {
        id: nanoid(),
        quizId,
@ -278,7 +278,7 @@ export const updateQuestion = async <T = AnyTypedQuizQuestion>(
    if (!q) return;
    if (q.type === null)
      throw new Error("Cannot send update request for untyped question");
-console.log("отправляемый квешен", q)
+    console.log("отправляемый квешен", q);
    try {
      const response = await questionApi.edit(
        questionToEditQuestionRequest(replaceEmptyLinesToSpace(q)),
@ -449,8 +449,8 @@ export const createTypedQuestion = async (
  requestQueue.enqueue(`createTypedQuestion-${questionId}`, async () => {
    const questions = useQuestionsStore.getState().questions;
    const question = questions.find((q) => q.id === questionId);
-    console.log("createTypedQuestion", question)
-    console.log("createTypedQuestion", question?.quizId)
+    console.log("createTypedQuestion", question);
+    console.log("createTypedQuestion", question?.quizId);
    if (!question) return;
    if (question.type !== null)
      throw new Error("Cannot upgrade already typed question");
--- a/src/ui_kit/EmojiPicker.tsx
+++ b/src/ui_kit/EmojiPicker.tsx
@ -21,6 +21,28 @@ export const EmojiPicker = ({ onEmojiSelect }: EmojiPickerProps) => (
      onEmojiSelect={onEmojiSelect}
      theme="light"
      locale="ru"
+      exceptEmojis={ignoreEmojis}
    />
  </Box>
 );
+
+const ignoreEmojis = [
+  "two_men_holding_hands",
+  "two_women_holding_hands",
+  "man-kiss-man",
+  "woman-kiss-woman",
+  "man-heart-man",
+  "woman-heart-woman",
+  "man-man-boy",
+  "man-man-girl",
+  "man-man-girl-boy",
+  "man-man-girl-girl",
+  "man-man-boy-boy",
+  "woman-woman-boy",
+  "woman-woman-girl",
+  "woman-woman-girl-boy",
+  "woman-woman-girl-girl",
+  "woman-woman-boy-boy",
+  "rainbow-flag",
+  "transgender_flag",
+];
--- a/src/ui_kit/MediaSelectionAndDisplay.tsx
+++ b/src/ui_kit/MediaSelectionAndDisplay.tsx
@ -1,4 +1,4 @@
-import { useState, FC } from "react";
+import { FC, useState } from "react";
 import {
  Box,
  Button,
@ -7,7 +7,6 @@ import {
  Typography,
  useTheme,
 } from "@mui/material";
-import CustomTextField from "./CustomTextField";
 import { updateQuestion, uploadQuestionImage } from "@root/questions/actions";
 import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";

@ -19,6 +18,7 @@ import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
 import UploadBox from "@ui_kit/UploadBox";
 import UploadIcon from "@icons/UploadIcon";
 import InfoIcon from "@icons/InfoIcon";
+import { VideoElement } from "../pages/startPage/VideoElement";

 interface Iprops {
  resultData: AnyTypedQuizQuestion;
@ -166,6 +166,8 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
        </Box>
      )}
      {!resultData.content.useImage && (
+        <>
+          {!resultData.content.video ? (
            <>
              <Box
                sx={{
@ -225,9 +227,18 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
                  }}
                />
              </ButtonBase>
-          {resultData.content.video ? (
-            <video src={resultData.content.video} width="300" controls />
-          ) : null}
+            </>
+          ) : (
+            <VideoElement
+              videoSrc={resultData.content.video}
+              theme={theme}
+              onDeleteClick={() => {
+                updateQuestion(resultData.id, (question) => {
+                  question.content.video = null;
+                });
+              }}
+            />
+          )}
        </>
      )}
    </Box>
--- a/src/ui_kit/Modal/CropModal.tsx
+++ b/src/ui_kit/Modal/CropModal.tsx
@ -67,7 +67,7 @@ export const CropModal: FC<Props> = ({
  setCropModalImageBlob,
  onSaveImageClick,
  onClose,
-  questionId
+  questionId,
 }) => {
  const theme = useTheme();
  const [percentCrop, setPercentCrop] = useState<PercentCrop>();
@ -297,13 +297,13 @@ export const CropModal: FC<Props> = ({
              onChange={(_, newValue) => setDarken(newValue as number)}
            />
          </Box>
-          {questionId !== undefined &&
+          {questionId !== undefined && (
            <IconButton
              onClick={() => {
                updateQuestion(questionId, (question) => {
                  question.content.back = null;
                  question.content.originalBack = null;
-                })
+                });
                onClose();
              }}
              sx={{
@ -316,7 +316,7 @@ export const CropModal: FC<Props> = ({
            >
              <DeleteIcon />
            </IconButton>
-          }
+          )}
        </Box>
        <Box
          sx={{
@ -351,7 +351,8 @@ export const CropModal: FC<Props> = ({
              background: theme.palette.brightPurple.main,
              fontSize: "18px",
              color: "#7E2AEA",
-              border: `1px solid ${!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"
+              border: `1px solid ${
+                !completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"
              }`,
              backgroundColor: "transparent",
            }}
--- a/src/utils/hooks/useAnalytics.ts
+++ b/src/utils/hooks/useAnalytics.ts
@ -0,0 +1,32 @@
+import { getGeneral, getDevices, getQuestions } from "@api/statistic";
+import { useEffect, useState } from "react";
+import moment from "moment";
+
+interface Props {
+  quizId: string;
+  to: number;
+  from: number;
+}
+
+export function useAnalytics({ quizId, to, from }: Props) {
+  const formatTo = to === null ? 0 : moment(to).unix();
+  const formatFrom = from === null ? 0 : moment(from).unix();
+  console.log(to, from);
+  if (quizId === undefined) return {};
+  const [devices, setDevices] = useState({});
+  const [general, setGeneral] = useState({});
+  const [questions, setQuestions] = useState({});
+
+  useEffect(() => {
+    (async () => {
+      const gottenGeneral = await getGeneral(quizId, formatTo, formatFrom);
+      const gottenDevices = await getDevices(quizId, formatTo, formatFrom);
+      const gottenQuestions = await getQuestions(quizId, formatTo, formatFrom);
+      setDevices(gottenGeneral[0]);
+      setGeneral(gottenDevices[0]);
+      setQuestions(gottenQuestions[0]);
+    })();
+  }, [to, from]);
+
+  return { devices, general, questions };
+}