import React from "react" ; import { IQuestion } from "../../Backend/model/Question-model" ; import { useCategory } from "../../context/CategoryContext" ; type DragEvent = React . DragEvent < HTMLDivElement > | React . DragEvent < HTMLTableRowElement > ; async function _fetch ( type , payload ) { return await fetch ( `/proxy/api/category/${ type }/update` , { method : "POST" , credentials : "include" , headers : { "content-type" : "application/json" } , body : JSON . stringify ( payload ) , } ) ; } export default function useDragDropHook ( ) { const { dispatch , easyQuestions , dismiss , mediumQuestions , hardQuestions } = useCategory ( ) ; React . useEffect ( ( ) => { } , [ dispatch ] ) ; function onDragStart ( event , payload ) { event . stopPropagation ( ) ; setTimeout ( ( ) => { localStorage . setItem ( "draggedItem" , JSON . stringify ( payload ) ) ; } , 0 ) ; } function onDragOver ( event ) { event . stopPropagation ( ) ; event . preventDefault ( ) ; } async function onDrop ( event ) { event . stopPropagation ( ) ; event . preventDefault ( ) ; const dropZone = event . currentTarget . id ; const draggedQuestion = JSON . parse ( localStorage . getItem ( "draggedItem" ) as string ) ; localStorage . clear ( ) ; if ( draggedQuestion === undefined ) { console . error ( "Man... I am empty" , draggedQuestion ) ; } if ( dropZone === "easy" ) { const updatedQuestionLists = [ ... easyQuestions , draggedQuestion , ] ; await _fetch ( dropZone , updatedQuestionLists ) . catch ( ( e ) => alert ( e . message ) ) ; dispatch ( { type : "CAT_EASY" , payload : { questions : updatedQuestionLists , message : "Question has been added to the easy category!" , } , } ) ; } else if ( dropZone === "medium" ) { const updatedQuestionLists = [ ... mediumQuestions , draggedQuestion , ] ; await _fetch ( dropZone , updatedQuestionLists ) . catch ( ( e ) => alert ( e . message ) ) ; dispatch ( { type : "CAT_MEDIUM" , payload : { questions : updatedQuestionLists , message : "Question has been added to the medium category!" , } , } ) ; } else if ( dropZone === "hard" ) { const updatedQuestionLists = [ ... hardQuestions , draggedQuestion , ] ; await _fetch ( dropZone , updatedQuestionLists ) . catch ( ( e ) => alert ( e . message ) ) ; dispatch ( { type : "CAT_HARD" , payload : { questions : updatedQuestionLists , message : "Question has been added to the hard category!" , } , } ) ; } dismiss ( ( ) => dispatch ( { type : "RESET" } ) , 3 ) ; } return { onDrop , onDragOver , onDragStart , } ; }