From 869e857f2cc4e313c7120d49276ac64057664fa6 Mon Sep 17 00:00:00 2001 From: karimaldeen Date: Sat, 21 Sep 2024 12:52:06 +0300 Subject: [PATCH] fix lag question --- .vscode/settings.json | 1 + package-lock.json | 71 ++++++ package.json | 3 + .../ImageBoxField/ImageBoxField.tsx | 3 +- .../ImageBoxField/ImageBoxFieldMemo.tsx | 105 ++++++++ src/Components/LatextInput/LaTeXInputMemo.tsx | 106 ++++++++ .../LatextInput/areFieldPropsEqual.ts | 23 ++ .../question/Model/Field/ChoiceFields.tsx | 18 +- .../Admin/question/Model/Field/TextField.tsx | 72 ------ .../Model/Malty/ChoiceField/ChoiceFields.tsx | 233 ++++++++---------- .../Model/Malty/ChoiceField/Choices.tsx | 34 ++- src/Pages/Admin/question/Model/Malty/Form.tsx | 77 +----- .../Malty/QuestionFIeld/QuestionFIeld.tsx | 31 ++- .../Malty/QuestionFIeld/QuestionList.tsx | 9 + .../Model/Malty/components/MainInputs.tsx | 27 ++ .../Malty/components/Questions copy 2.tsx | 115 +++++++++ .../Model/Malty/components/Questions copy.tsx | 85 +++++++ .../Model/Malty/components/Questions.tsx | 126 ++++++++++ src/Pages/Admin/question/Model/ModelForm.tsx | 18 +- src/Pages/Admin/question/formUtil.ts | 6 +- src/Styles/Pages/exercise.scss | 10 +- src/utils/areFieldPropsEqual.ts | 23 ++ src/utils/parseTextAndLatex.ts | 4 +- 23 files changed, 890 insertions(+), 310 deletions(-) create mode 100644 src/Components/CustomFields/ImageBoxField/ImageBoxFieldMemo.tsx create mode 100644 src/Components/LatextInput/LaTeXInputMemo.tsx create mode 100644 src/Components/LatextInput/areFieldPropsEqual.ts delete mode 100644 src/Pages/Admin/question/Model/Field/TextField.tsx create mode 100644 src/Pages/Admin/question/Model/Malty/QuestionFIeld/QuestionList.tsx create mode 100644 src/Pages/Admin/question/Model/Malty/components/MainInputs.tsx create mode 100644 src/Pages/Admin/question/Model/Malty/components/Questions copy 2.tsx create mode 100644 src/Pages/Admin/question/Model/Malty/components/Questions copy.tsx create mode 100644 src/Pages/Admin/question/Model/Malty/components/Questions.tsx create mode 100644 src/utils/areFieldPropsEqual.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 69a50b5..3a595b0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -11,6 +11,7 @@ "handelnavigate", "Karim", "katex", + "Latext", "Popconfirm", "queryqlent", "registraion", diff --git a/package-lock.json b/package-lock.json index ce553f9..013e1ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,8 @@ "react-query": "^3.39.3", "react-router-dom": "^6.23.1", "react-toastify": "^9.1.3", + "react-window": "^1.8.10", + "react-window-dynamic": "^1.8.0-alpha.2", "reactstrap": "^9.2.2", "sass": "^1.77.4", "yup": "^1.4.0", @@ -52,6 +54,7 @@ "@types/react-helmet": "^6.1.11", "@types/react-katex": "^3.0.4", "@types/react-latex": "^2.0.3", + "@types/react-window": "^1.8.8", "@vitejs/plugin-legacy": "^5.4.1", "@vitejs/plugin-react": "^4.3.0", "jest": "^29.7.0", @@ -3660,6 +3663,15 @@ "redux": "^4.0.0" } }, + "node_modules/@types/react-window": { + "version": "1.8.8", + "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz", + "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/stack-utils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", @@ -9112,6 +9124,38 @@ "react-dom": ">=16.6.0" } }, + "node_modules/react-window": { + "version": "1.8.10", + "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz", + "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==", + "dependencies": { + "@babel/runtime": "^7.0.0", + "memoize-one": ">=3.1.1 <6" + }, + "engines": { + "node": ">8.0.0" + }, + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-window-dynamic": { + "version": "1.8.0-alpha.2", + "resolved": "https://registry.npmjs.org/react-window-dynamic/-/react-window-dynamic-1.8.0-alpha.2.tgz", + "integrity": "sha512-PYR1nu5kzEr+PDg9/+19uTqO1OqUCckYE5dDpjFpEGBtVTcq4smxE3jXhk+zLi4AOZlLVr9pJIjwPL68zwq5Ww==", + "dependencies": { + "@babel/runtime": "^7.0.0", + "memoize-one": ">=3.1.1 <6" + }, + "engines": { + "node": ">8.0.0" + }, + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0", + "react-dom": "^15.0.0 || ^16.0.0" + } + }, "node_modules/reactstrap": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.2.2.tgz", @@ -13436,6 +13480,15 @@ "redux": "^4.0.0" } }, + "@types/react-window": { + "version": "1.8.8", + "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz", + "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/stack-utils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", @@ -17409,6 +17462,24 @@ "prop-types": "^15.6.2" } }, + "react-window": { + "version": "1.8.10", + "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz", + "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==", + "requires": { + "@babel/runtime": "^7.0.0", + "memoize-one": ">=3.1.1 <6" + } + }, + "react-window-dynamic": { + "version": "1.8.0-alpha.2", + "resolved": "https://registry.npmjs.org/react-window-dynamic/-/react-window-dynamic-1.8.0-alpha.2.tgz", + "integrity": "sha512-PYR1nu5kzEr+PDg9/+19uTqO1OqUCckYE5dDpjFpEGBtVTcq4smxE3jXhk+zLi4AOZlLVr9pJIjwPL68zwq5Ww==", + "requires": { + "@babel/runtime": "^7.0.0", + "memoize-one": ">=3.1.1 <6" + } + }, "reactstrap": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.2.2.tgz", diff --git a/package.json b/package.json index 537ae72..cf0a973 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,8 @@ "react-query": "^3.39.3", "react-router-dom": "^6.23.1", "react-toastify": "^9.1.3", + "react-window": "^1.8.10", + "react-window-dynamic": "^1.8.0-alpha.2", "reactstrap": "^9.2.2", "sass": "^1.77.4", "yup": "^1.4.0", @@ -73,6 +75,7 @@ "@types/react-helmet": "^6.1.11", "@types/react-katex": "^3.0.4", "@types/react-latex": "^2.0.3", + "@types/react-window": "^1.8.8", "@vitejs/plugin-legacy": "^5.4.1", "@vitejs/plugin-react": "^4.3.0", "jest": "^29.7.0", diff --git a/src/Components/CustomFields/ImageBoxField/ImageBoxField.tsx b/src/Components/CustomFields/ImageBoxField/ImageBoxField.tsx index 6287c81..2f8a3cd 100644 --- a/src/Components/CustomFields/ImageBoxField/ImageBoxField.tsx +++ b/src/Components/CustomFields/ImageBoxField/ImageBoxField.tsx @@ -62,7 +62,8 @@ const ImageBoxField = ({ name }: any) => { fileInputRef.current.value = ""; } }; - + console.log(name); + return (
diff --git a/src/Components/CustomFields/ImageBoxField/ImageBoxFieldMemo.tsx b/src/Components/CustomFields/ImageBoxField/ImageBoxFieldMemo.tsx new file mode 100644 index 0000000..1ca6b31 --- /dev/null +++ b/src/Components/CustomFields/ImageBoxField/ImageBoxFieldMemo.tsx @@ -0,0 +1,105 @@ +import "./ImageBoxField.scss"; + import { useState, useRef, useEffect,memo } from "react"; + import ImageIcon from "./ImageIcon"; + import ImageCancelIcon from "./ImageCancelIcon"; + import { getNestedValue } from "../../../utils/getNestedValue"; + import { generateImagePreview } from "./generateImagePreview"; + import { useTranslation } from "react-i18next"; +import { areFieldPropsEqual } from "../../../utils/areFieldPropsEqual"; + + // Helper function to generate image preview from a File + + const ImageBoxFieldMemo = memo(({ form,field }: any) => { + const {values,setFieldValue} = form + const {name} = field; + const value = getNestedValue(values, name); + const [imagePreview, setImagePreview] = useState(null); + const fileInputRef = useRef(null); + const [t] = useTranslation(); + useEffect(() => { + if (value instanceof File) { + generateImagePreview(value, setImagePreview); + } else if (typeof value === "string") { + setImagePreview(value); + } else { + setImagePreview(null); + } + }, [value]); + + const handleFileChange = (event: any) => { + const file = event.target.files[0]; + + if (file) { + const maxSize = 2 * 1024 * 1024; + + if (file.size > maxSize) { + alert(t('validation.File_size_exceeds_2_MB_limit.')); + event.target.value = ''; + return; + } + + // Process the file + } + + if (file) { + generateImagePreview(file, setImagePreview); + + setFieldValue(name, file); + } + }; + + const handleButtonClick = () => { + const fileInput = fileInputRef.current; + if (fileInput) { + fileInput.click(); + } + }; + + const handleCancel = () => { + setImagePreview(""); + setFieldValue(name, null); + + if (fileInputRef.current) { + fileInputRef.current.value = ""; + } + }; + + console.log(name); + + return ( +
+
+ {imagePreview ? ( + <> + + + + ) : ( +
hidden
+ )} +
+
+ {imagePreview ? ( + Preview + ) : ( + + )} +
+ +
+ ); + }, (prevProps, nextProps) => { + return areFieldPropsEqual(prevProps, nextProps) + }); + + export default ImageBoxFieldMemo; diff --git a/src/Components/LatextInput/LaTeXInputMemo.tsx b/src/Components/LatextInput/LaTeXInputMemo.tsx new file mode 100644 index 0000000..a302601 --- /dev/null +++ b/src/Components/LatextInput/LaTeXInputMemo.tsx @@ -0,0 +1,106 @@ +import TextArea from 'antd/es/input/TextArea'; +import { useFormikContext } from 'formik'; +import React, { Suspense, useState } from 'react'; +import { parseTextAndLatex } from '../../utils/parseTextAndLatex'; +import LatexPreview from '../CustomFields/MathComponent'; +import { Checkbox } from 'antd'; +import { CheckboxProps } from 'antd/lib'; +import { useTranslation } from 'react-i18next'; +import { FaPlus } from 'react-icons/fa'; +import { useObjectToEdit } from '../../zustand/ObjectToEditState'; +import SpinContainer from '../Layout/SpinContainer'; +import { areFieldPropsEqual } from './areFieldPropsEqual'; + +const AddLazyModal = React.lazy(() => import("./AddLaTexModal")); +const EditLazyModal = React.lazy(() => import("./EditLaTexModal")); + + +const LaTeXInputMemo: React.FC = React.memo(({ field ,form, label, ...props }) => { + const { name ,value} = field; + + const { setFieldValue } = form; + + const { ShowLatexOption } = useObjectToEdit(); + const [showPreview, setShowPreview] = useState(false); + + const handleChangeInput = (e: React.ChangeEvent) => { + setFieldValue(name, e.target.value); + }; + console.log(name,"name"); + + const Preview = parseTextAndLatex(value ?? ""); + + const onPreviewChange: CheckboxProps['onChange'] = (e) => { + setShowPreview(e.target.checked); + }; + + const [t] = useTranslation(); + + const [isModalOpen, setIsModalOpen] = useState(false); + const [isEditModalOpen, setIsEditModalOpen] = useState(false); + const [Latex, setLatex] = useState(""); + + const showModal = () => { + setIsModalOpen(true); + }; + + const handleEditModal = (item: any) => { + console.log(item); + setLatex(item); + setIsEditModalOpen(true); + }; + + return ( +
+ + +
+