Drag And Drop For Choosing Questions Made

package-lock.json

@@ -19,6 +19,7 @@
         "lottie-web": "^5.8.1",
         "mapir-react-component": "^2.0.1",
         "react": "^17.0.2",
+        "react-beautiful-dnd": "^13.1.0",
         "react-colorful": "^5.5.1",
         "react-dom": "^17.0.2",
         "react-draft-wysiwyg": "^1.14.7",
@@ -5645,6 +5646,14 @@
         "postcss": "^8.3"
       }
     },
+    "node_modules/css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "dependencies": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.1.3",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz",
@@ -11758,6 +11767,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -14071,6 +14085,11 @@
         "performance-now": "^2.1.0"
       }
     },
+    "node_modules/raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -14148,6 +14167,24 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-beautiful-dnd": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
+      "integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2",
+        "css-box-model": "^1.2.0",
+        "memoize-one": "^5.1.1",
+        "raf-schd": "^4.0.2",
+        "react-redux": "^7.2.0",
+        "redux": "^4.0.4",
+        "use-memo-one": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.5 || ^17.0.0",
+        "react-dom": "^16.8.5 || ^17.0.0"
+      }
+    },
     "node_modules/react-colorful": {
       "version": "5.5.1",
       "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz",
@@ -16149,6 +16186,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
+      "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
+    },
     "node_modules/tinyqueue": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
@@ -16478,6 +16520,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-memo-one": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz",
+      "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -21590,6 +21640,14 @@
         "postcss-selector-parser": "^6.0.7"
       }
     },
+    "css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "requires": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
     "css-declaration-sorter": {
       "version": "6.1.3",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz",
@@ -26043,6 +26101,11 @@
         "fs-monkey": "1.0.3"
       }
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -27556,6 +27619,11 @@
         "performance-now": "^2.1.0"
       }
     },
+    "raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -27617,6 +27685,20 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-beautiful-dnd": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
+      "integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==",
+      "requires": {
+        "@babel/runtime": "^7.9.2",
+        "css-box-model": "^1.2.0",
+        "memoize-one": "^5.1.1",
+        "raf-schd": "^4.0.2",
+        "react-redux": "^7.2.0",
+        "redux": "^4.0.4",
+        "use-memo-one": "^1.1.1"
+      }
+    },
     "react-colorful": {
       "version": "5.5.1",
       "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz",
@@ -29099,6 +29181,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-invariant": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
+      "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
+    },
     "tinyqueue": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
@@ -29338,6 +29425,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "use-memo-one": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz",
+      "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==",
+      "requires": {}
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -14,6 +14,7 @@
     "lottie-web": "^5.8.1",
     "mapir-react-component": "^2.0.1",
     "react": "^17.0.2",
+    "react-beautiful-dnd": "^13.1.0",
     "react-colorful": "^5.5.1",
     "react-dom": "^17.0.2",
     "react-draft-wysiwyg": "^1.14.7",

src/redux/reducers/exam.js

@@ -219,6 +219,17 @@ export default function addExamReduser(state = initialState, { type, payload })
                 ...state,
                 questions: state.questions.filter(itm => itm.questionId !== payload.questionId)
             }
+            case 'REMOVE_QUESTION_FROM_BANK': 
+            return {
+                ...state,
+                questionBank: state.questionBank.filter(itm => itm.questionId !== payload.questionId)
+            }
+            case 'GET_QUESTION_BACK_TO_BANK':
+                return {
+                    ...state,
+                    questionBank : [...state.questionBank, payload]
+                }
+
 
         default:
             return state;

src/view/addExam/views/AddQuestionsFromBank.js

@@ -1,6 +1,7 @@
 
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import AnswerSheet from "../../../components/AnswerSheet";
 import Button from "../../../components/Button";
 import DatePicker from "../../../components/Calendar/CalendarComponents/DatePicker";
@@ -22,7 +23,7 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
         fileUrl: '',
     });
     const [showCoursesInList, setShowCoursesInList] = useState([]);
-    const [choosedQuestionaries, seChoosedQuestionaries] = useState([]);
+    const [choosedQuestion, seChoosedQuestion] = useState(null);
     const [selectedCourse, setSelectedCourse] = useState({
         id: null,
         title: ''
@@ -56,7 +57,23 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
 
     const payload = { name: name, description: description, type: type };
 
+ const handleOnDragEnd = (result) => {
+     const {source, destination} = result;
 
+     if(source.droppableId !== destination.droppableId){
+         if(destination.droppableId == 'Choosed_Questions_Form_Bank'){
+        dispatch({ type: 'ADD_EXAM_QUESTIONS', payload: choosedQuestion })
+        dispatch({ type: 'REMOVE_QUESTION_FROM_BANK', payload: choosedQuestion })
+
+         }else{
+            dispatch({ type: 'REMOVE_EXAM_QUESTIONS', payload: choosedQuestion })
+            dispatch({type: 'GET_QUESTION_BACK_TO_BANK', payload: choosedQuestion})
+         }
+
+     }else{
+         console.log(result)
+     }
+ }
 
     return (
         <>
@@ -175,73 +192,97 @@ const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backS
                 </div>
 
             </div>
+            <DragDropContext onDragEnd={result => handleOnDragEnd(result)} 
+            onDragStart={(result) => 
+            {
+                console.log(result)
+                if(result.source.droppableId == 'Choosed_Questions_Form_Bank'){
+                    seChoosedQuestion(addExamState.questions.find(itm => itm.questionId == result.source.index))
+                }else{
+                seChoosedQuestion(addExamState.questionBank.find(itm => itm.questionId == result.source.index))
+                }
+            }}>
+                <div className="w-full flex  px-10">
+                    <Droppable droppableId="Choosed_Questions_Form_Bank">
+                        {(provided) => (
+
+
+                            <div className="w-1/2 border-l flex flex-col border-gray-300 py-10" {...provided.droppableProps} ref={provided.innerRef}>
+                                {
+                                    selectedCourse.id !== null && (<>
+                                        <h1 className="text-blue3A  w-full font-bold text-lg text-right">
+                                            {selectedCourse.title}
+                                        </h1>
+                                        <div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{ height: '500px' }}>
+                                            <div className="w-4/5 ">
+
+                                                {
+                                                    addExamState.questions.filter(itm => itm.courseId == selectedCourse.id).map(
+                                                        (item, index) => (
+                                                            <Draggable draggableId={`_${item.questionId}`} index={item.questionId} key={`CHOOSED_QUESTIONS_${index}`}>
+                                                                {(provided) => (
+                                                                    <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+                                                                        <Question data={item} />
+                                                                    </div>
+                                                                )}
+                                                            </Draggable>
+                                                        )
+                                                    )
+                                                }
+                                            </div>
 
-            <div className="w-full flex  px-10">
+                                        </div>
-
+                                    </>)
-                <div className="w-1/2 border-l flex flex-col border-gray-300 py-10">
+                                }
-                    {
+                                {/* {selectedQuestionare.id !== null &&
-                        selectedCourse.id !== null && (<>
-                        <h1 className="text-blue3A  w-full font-bold text-lg text-right">
-                            {selectedCourse.title}
-                        </h1>
-                        <div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{height: '500px'}}>
-                            <div className="w-4/5 ">
-
-                            {
-                                addExamState.questions.filter(itm => itm.courseId == selectedCourse.id).map(
-                                    (item) => (
-                                        <Question data={item} />
-
-                                    )
-                                )
-                            }
-                        </div>
-
-                        </div>
-                        </>)
-                    }
-                    {/* {selectedQuestionare.id !== null &&
                         <div className="w-full flex justify-center mt-10">
                         <button className=" bg-gray-300 text-xl text-gray-500 border-gray-500 w-1/3 h-12 rounded-xl border" onClick={() => setAddCoursePopup(true)}>
                                 افزودن درس
                         </button>
                         </div>} */}
-                </div>
+                          {provided.placeholder}
-                <div className="w-1/2 flex justify-center">
+                            </div>
-                    <div className="w-4/5 py-8">
-                        {/* <AnswerSheet questionsQuantity={selectedCourse.questionsQuantity} optionsQuantity={4} selectedCourseId={selectedCourse.id}
-                    passAnswers={data => {setAnswers(data); setFakeState(fakeState - 2)}}/> */}
-                        {selectedCourse.id !== null &&
-                            addExamState.questionBank.filter(itm => itm.courseId == selectedCourse.id).map(
-                                (course , index) => (
-
-                                    <div className="flex items-start justify-between w-full">
-                                        <Checkbox name={`PICK_QUESTIONS_${index}_${course.courseId}`}
-                                            onChange={(e) =>
-                                                e.target.checked ?
-                                                    dispatch({ type: 'ADD_EXAM_QUESTIONS', payload: course })
-                                                    // console.log('asodjasd')
-                                                    :
-
-
-                                                    dispatch({ type: 'REMOVE_EXAM_QUESTIONS', payload: course })
-
-
-                                            }
 
-                                        />
+                        )}
-                                        {/* <button onClick={() => dispatch({ type: 'ADD_EXAM_QUESTIONS', payload: course })}>ادد کردن</button> */}
+                    </Droppable>
+                    <div className="w-1/2 flex justify-center">
+                        <Droppable droppableId="QUESTIONS_IN_BANK">
+                            {(provided) => (
+
+
+                                <div className="w-4/5 py-8" {...provided.droppableProps} ref={provided.innerRef}>
+                                    {/* <AnswerSheet questionsQuantity={selectedCourse.questionsQuantity} optionsQuantity={4} selectedCourseId={selectedCourse.id}
+                                  passAnswers={data => {setAnswers(data); setFakeState(fakeState - 2)}}/> */}
+                                    {selectedCourse.id !== null &&
+                                        addExamState.questionBank.filter(itm => itm.courseId == selectedCourse.id).map(
+                                            (course, index) => (
+                                                <Draggable draggableId={`_${course.questionId}`} index={course.questionId} key={`CHOOSED_QUESTIONS_${course.questionId}`}>
+                                                    {(provided) => (
+                                                        <div className="flex items-start justify-between w-full">
+                                                         
+
+
+                                                            <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+                                                                <Question data={course} />
+                                                            </div>
+
+
+                                                        </div>
+                                                    )}
+                                                </Draggable>
+                                            )
+                                        )
+                                    }
+                                    {/* <Question /> */}
+                                        {provided.placeholder}
+                                </div>
 
-                                        <Question data={course} />
+                            )}
-                                    </div>
+                        </Droppable>
-                                )
-                            )
-                        }
-                        {/* <Question /> */}
                     </div>
-                </div>
 
-            </div>
+                </div>
+            </DragDropContext>
 
 
             <div className="flex w-full px-10 items-center justify-end">

yarn.lock

@@ -3282,6 +3282,13 @@
   dependencies:
     "postcss-selector-parser" "^6.0.7"
 
+"css-box-model@^1.2.0":
+  "integrity" "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw=="
+  "resolved" "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz"
+  "version" "1.2.1"
+  dependencies:
+    "tiny-invariant" "^1.0.6"
+
 "css-declaration-sorter@^6.0.3":
   "integrity" "sha512-SvjQjNRZgh4ULK1LDJ2AduPKUKxIqmtU7ZAyi47BTV+M90Qvxr9AB6lKlLbDUfXqI9IQeYA8LbAsCZPpJEV3aA=="
   "resolved" "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz"
@@ -6351,6 +6358,11 @@
   dependencies:
     "fs-monkey" "1.0.3"
 
+"memoize-one@^5.1.1":
+  "integrity" "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+  "resolved" "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz"
+  "version" "5.2.1"
+
 "merge-descriptors@1.0.1":
   "integrity" "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
   "resolved" "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz"
@@ -7609,6 +7621,11 @@
   "resolved" "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz"
   "version" "2.0.0"
 
+"raf-schd@^4.0.2":
+  "integrity" "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+  "resolved" "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz"
+  "version" "4.0.3"
+
 "raf@^3.4.1":
   "integrity" "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA=="
   "resolved" "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz"
@@ -7650,6 +7667,19 @@
     "regenerator-runtime" "^0.13.9"
     "whatwg-fetch" "^3.6.2"
 
+"react-beautiful-dnd@^13.1.0":
+  "integrity" "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA=="
+  "resolved" "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz"
+  "version" "13.1.0"
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    "css-box-model" "^1.2.0"
+    "memoize-one" "^5.1.1"
+    "raf-schd" "^4.0.2"
+    "react-redux" "^7.2.0"
+    "redux" "^4.0.4"
+    "use-memo-one" "^1.1.1"
+
 "react-colorful@^5.5.1":
   "integrity" "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg=="
   "resolved" "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz"
@@ -7690,7 +7720,7 @@
     "strip-ansi" "^6.0.1"
     "text-table" "^0.2.0"
 
-"react-dom@*", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0", "react-dom@^16.11.0", "react-dom@^17.0.2", "react-dom@>=0.14.0", "react-dom@>=16", "react-dom@>=16.8", "react-dom@>=16.8.0", "react-dom@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x":
+"react-dom@*", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0", "react-dom@^16.11.0", "react-dom@^16.8.5 || ^17.0.0", "react-dom@^17.0.2", "react-dom@>=0.14.0", "react-dom@>=16", "react-dom@>=16.8", "react-dom@>=16.8.0", "react-dom@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x":
   "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
   "version" "17.0.2"
@@ -7793,7 +7823,7 @@
     "react-date-object" "^2.1.5"
     "react-element-popper" "^2.1.6"
 
-"react-redux@^7.2.6":
+"react-redux@^7.2.0", "react-redux@^7.2.6":
   "integrity" "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ=="
   "resolved" "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz"
   "version" "7.2.6"
@@ -7895,7 +7925,7 @@
   dependencies:
     "clsx" "^1.1.1"
 
-"react@*", "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.11.0", "react@^16.8.3 || ^17", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>=0.14.0", "react@>=16", "react@>=16.8", "react@>=16.8.0", "react@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x", "react@17.0.2":
+"react@*", "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.11.0", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^16.8.5 || ^17.0.0", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>=0.14.0", "react@>=16", "react@>=16.8", "react@>=16.8.0", "react@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x", "react@17.0.2":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   "version" "17.0.2"
@@ -7957,7 +7987,7 @@
   "resolved" "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz"
   "version" "2.4.1"
 
-"redux@^3.1.0 || ^4.0.0", "redux@^4", "redux@^4.0.0", "redux@^4.1.2":
+"redux@^3.1.0 || ^4.0.0", "redux@^4", "redux@^4.0.0", "redux@^4.0.4", "redux@^4.1.2":
   "integrity" "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw=="
   "resolved" "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz"
   "version" "4.1.2"
@@ -8952,6 +8982,11 @@
   "resolved" "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
   "version" "0.3.0"
 
+"tiny-invariant@^1.0.6":
+  "integrity" "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
+  "resolved" "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz"
+  "version" "1.2.0"
+
 "tinyqueue@^2.0.3":
   "integrity" "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
   "resolved" "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz"
@@ -9194,6 +9229,11 @@
   dependencies:
     "punycode" "^2.1.0"
 
+"use-memo-one@^1.1.1":
+  "integrity" "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ=="
+  "resolved" "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz"
+  "version" "1.1.2"
+
 "util-deprecate@^1.0.1", "util-deprecate@^1.0.2", "util-deprecate@~1.0.1":
   "integrity" "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
   "resolved" "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"