Quiz_dashboard/src/Components/exercise/Header.tsx
2024-09-14 14:52:14 +03:00

86 lines
2.2 KiB
TypeScript

import { useFormikContext } from "formik";
import React from "react";
import { useTranslation } from "react-i18next";
import { GoArrowSwitch } from "react-icons/go";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { QUESTION_OBJECT_KEY } from "../../config/AppKey";
import { Popconfirm, Popover } from "antd";
import { CombinationKeyEnum } from "../../enums/CombinationKeyEnum";
import { PopconfirmProps } from "antd/lib";
const Header = () => {
const [t] = useTranslation();
const { values, setFieldValue, setValues } = useFormikContext<any>();
const { isBseQuestion, setIsBseQuestion } = useObjectToEdit();
const { setSavedQuestionData } = useObjectToEdit();
const handleChange = () => {
setSavedQuestionData(null);
localStorage.removeItem(QUESTION_OBJECT_KEY);
if (isBseQuestion) {
setIsBseQuestion(false);
setValues(null);
setFieldValue("isBase", 0);
} else {
setIsBseQuestion(true);
setValues(null);
setFieldValue("isBase", 1);
}
};
const confirm: PopconfirmProps['onConfirm'] = (e) => {
console.log(e);
setTimeout(() => {
handleChange()
}, 500);
};
const content = (
<div>
<p>
{" "}
(CTRL + SHIFT + {CombinationKeyEnum.CHOICE}) {t("header.add_choice")}{" "}
</p>
<p>
{" "}
(CTRL + SHIFT + {CombinationKeyEnum.QUESTION}){" "}
{t("header.add_question")}{" "}
</p>
</div>
);
return (
<header className="exercise_add_header mb-4">
<article>
<Popover content={content} title={t("practical.Abbreviations")}>
<img src="/Icon/QuestionIcon.svg" alt="" />
</Popover>
<div>
{t("practical.add")} {t("models.exercise")}{" "}
</div>
</article>
<div>
<Popconfirm
title={t("header.this_will_un_do_all_your_changes")}
okText={t("practical.yes")}
cancelText={t("practical.no")}
onConfirm={()=>{confirm()}}
defaultOpen={false}
>
<GoArrowSwitch className="m-2" />
</Popconfirm>
{isBseQuestion || values?.isBase === 1
? t("header.malty_exercise")
: t("header.exercise")}
</div>
</header>
);
};
export default Header;