From d2c912aa1965b9cf5faee0f16b101fc54246f935 Mon Sep 17 00:00:00 2001 From: Belle Date: Tue, 27 Aug 2024 12:27:21 +0800 Subject: [PATCH] update drag and drop --- pages/api/arcade/showcase/cohort/active.js | 7 +- pages/arcade/showcase/vote.js | 171 ++++++++++++--------- 2 files changed, 105 insertions(+), 73 deletions(-) diff --git a/pages/api/arcade/showcase/cohort/active.js b/pages/api/arcade/showcase/cohort/active.js index 053b89a5..862f9986 100644 --- a/pages/api/arcade/showcase/cohort/active.js +++ b/pages/api/arcade/showcase/cohort/active.js @@ -25,10 +25,9 @@ async function getShowcasesFromAuth(authToken) { }) const showcases = await airtable.read({ - filterByFormula: `AND( - FIND("${authToken}", ARRAYJOIN({Allowed Voter Keys})) > 0, - {Has Active Cohort} = TRUE() - )`, + filterByFormula: ` + FIND("${authToken}", ARRAYJOIN({Allowed Voter Keys})) > 0 + `, fields: ['Name', 'Code Link', 'Play Link', 'Description', 'color', 'textColor', 'ScreenshotLink', 'ReadMeLink', 'View link'] }) diff --git a/pages/arcade/showcase/vote.js b/pages/arcade/showcase/vote.js index 0d4abfd9..9f98728f 100644 --- a/pages/arcade/showcase/vote.js +++ b/pages/arcade/showcase/vote.js @@ -223,6 +223,7 @@ const Vote = () => { const [overall, setOverall] = useState([]) const [voted, setVoted] = useState(false) // const [userId, setUserId] = useState('') + /* change what is shown on page */ const [showCreative, setShowCreative] = useState(true) const [showTechnical, setShowTechnical] = useState(false) @@ -237,7 +238,6 @@ const Vote = () => { const [activeDroppableId, setActiveDroppableId] = useState(null) const [activeDroppable, setActiveDroppable] = useState(true) const dragItemRef = useRef(null) - const [dragging, setDragging] = useState(false) const [votes, setVotes] = useState({}) /* check if it's loaded */ @@ -314,18 +314,27 @@ const Vote = () => { const dialogRef = useRef(null) - useEffect(() => { - const handleClickOutside = event => { - if (dialogRef.current) { - dialogRef.current.close() - } - } + // useEffect(() => { + // const handleClickOutside = event => { + // if (dialogRef.current) { + // const rect = dialogRef.current.getBoundingClientRect() - document.addEventListener('mousedown', handleClickOutside) - return () => { - document.removeEventListener('mousedown', handleClickOutside) - } - }, []) + // if ( + // event.clientX < rect.left || + // event.clientX > rect.right || + // event.clientY < rect.top || + // event.clientY > rect.bottom + // ) { + // dialogRef.current.close() + // } + // } + // } + + // document.addEventListener('mousedown', handleClickOutside) + // return () => { + // document.removeEventListener('mousedown', handleClickOutside) + // } + // }, []) /* HANDLE DRAG AND DROP LOGIC BELOW*/ const [mousePosition, setMousePosition] = useState({ x: null, y: null }) @@ -380,70 +389,94 @@ const Vote = () => { const boundingBoxes = getBoundingBoxes() - useEffect(() => { - if (dragging) { - let insideVotingBox = false + // useEffect(() => { + // if (dragging) { + // console.log("DRAGGING") - for (const box of boundingBoxes) { - if ( - box.id.startsWith('votes') && - isCursorInsideBoundingBox(mousePosition, box) - ) { - insideVotingBox = true - if (activeDroppableId != box.id) { - setActiveDroppable(true) - setActiveDroppableId(box.id) - } - break - } - } + // let insideVotingBox = false - if (!insideVotingBox && activeDroppable) { - setActiveDroppable(false) - setActiveDroppableId(null) - } - } - }, [mousePosition]) + // for (const box of boundingBoxes) { + // if ( + // box.id.startsWith('votes') && + // isCursorInsideBoundingBox(mousePosition, box) + // ) { + // insideVotingBox = true + // if (activeDroppableId != box.id) { + // setActiveDroppable(true) + // setActiveDroppableId(box.id) + // } + // break + // } + // } + + // // if (!insideVotingBox && activeDroppable) { + // // setActiveDroppable(false) + // // setActiveDroppableId(null) + // // } + // } + // }, [mousePosition]) const onDragUpdate = update => { - setDragging(true) - } - - const onDragEnd = result => { - setDragging(false) - const { source, destination } = result - if (!destination) return - let destinationId = '' + let insideVotingBox = false for (const box of boundingBoxes) { + console.log(mousePosition) if ( box.id.startsWith('votes') && isCursorInsideBoundingBox(mousePosition, box) ) { - destinationId = box.id - setActiveDroppable(false) - - const linkId = result.draggableId - const voteId = destinationId - - setVotes(prevVotes => { - const updatedVotes = { - ...prevVotes, - [voteId]: linkId - } - - const votedProjectIds = Object.values(updatedVotes) - - const updatedProjects = originalProjects.filter( - project => !votedProjectIds.includes(project.id) - ) - - setProjects(updatedProjects) - - return updatedVotes - }) + insideVotingBox = true + if (activeDroppableId != box.id) { + setActiveDroppable(true) + setActiveDroppableId(box.id) + } + break } } + + if (!insideVotingBox && activeDroppable) { + setActiveDroppable(false) + setActiveDroppableId(null) + } + } + + const onDragEnd = result => { + const { source, destination } = result + + if (!destination) return + + console.log(destination) + + if (destination.droppableId == 'projects') { + console.log('projects') + return + } + + if (activeDroppableId && activeDroppableId.startsWith('votes')) { + const linkId = result.draggableId + const voteId = activeDroppableId + + setVotes(prevVotes => { + const updatedVotes = { + ...prevVotes, + [voteId]: linkId + } + + console.log(updatedVotes) + const votedProjectIds = Object.values(updatedVotes) + + const updatedProjects = originalProjects.filter( + project => !votedProjectIds.includes(project.id) + ) + + setProjects(updatedProjects) + + return updatedVotes + }) + + setActiveDroppableId(null) + setActiveDroppable(false) + } } const deleteVote = voteId => { @@ -747,7 +780,7 @@ const Vote = () => { py: 4, pl: 4, overflowY: 'scroll', - height: '100vh' + height: '100%' }} > @@ -793,7 +826,6 @@ const Vote = () => { sx={{ ...provided.draggableProps.style }} - // onMouseDown={handleMouseDown} > { )} -
+
Choose top 5 for{' '} @@ -841,7 +873,7 @@ const Vote = () => { id={voteId} sx={{ width: '100%', - height: ['14vh', '14vh', '12vh'], + height: ['14vh', '14vh', '13.5vh'], minHeight: '80px', border: '2px dashed #09AFB4', borderRadius: '10px', @@ -922,7 +954,8 @@ const Vote = () => { sx={{ borderRadius: '10px', border: '3px dashed #09AFB4', - width: '70vw' + width: '70vw', + position: 'relative' }} className="gaegu" >