From 6ce657d8919397c46ddf5c70afbc4d66d99e602a Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Fri, 11 Nov 2022 03:53:51 +0530 Subject: [PATCH] feat: drag and drop events (#57) --- packages/bruno-app/package.json | 12 ++++---- .../CollectionItem/StyledWrapper.js | 2 +- .../Collection/CollectionItem/index.js | 26 +++++++++++++++-- .../Sidebar/Collections/Collection/index.js | 28 +++++++++++-------- .../src/pageComponents/Index/StyledWrapper.js | 11 -------- packages/bruno-app/src/pages/_app.js | 12 +++++++- packages/bruno-graphql-docs/package.json | 7 ++--- 7 files changed, 61 insertions(+), 37 deletions(-) diff --git a/packages/bruno-app/package.json b/packages/bruno-app/package.json index 75a40dcdd..7ca31f8a2 100644 --- a/packages/bruno-app/package.json +++ b/packages/bruno-app/package.json @@ -1,5 +1,6 @@ { "name": "@usebruno/app", + "version": "0.3.0", "private": true, "scripts": { "dev": "next dev", @@ -15,8 +16,8 @@ "@reduxjs/toolkit": "^1.8.0", "@tabler/icons": "^1.46.0", "@tippyjs/react": "^4.2.6", - "@usebruno/schema": "0.2.0", "@usebruno/graphql-docs": "0.1.0", + "@usebruno/schema": "0.2.0", "axios": "^0.26.0", "classnames": "^2.3.1", "codemirror": "^5.65.2", @@ -34,16 +35,17 @@ "markdown-it": "^13.0.1", "mousetrap": "^1.6.5", "nanoid": "3.3.4", - "next": "12.3.1", + "next": "12.3.3", "path": "^0.12.7", "platform": "^1.3.6", "posthog-node": "^2.1.0", "qs": "^6.11.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "18.2.0", + "react-dnd": "^16.0.1", + "react-dnd-html5-backend": "^16.0.1", + "react-dom": "18.2.0", "react-hot-toast": "^2.4.0", "react-redux": "^7.2.6", - "react-tabs": "^3.2.3", "reckonjs": "^0.1.2", "sass": "^1.46.0", "split-on-first": "^3.0.0", diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js index 11f945b3e..ea58fe94e 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js @@ -70,7 +70,7 @@ const Wrapper = styled.div` } } - &.is-dragging .collection-item-name { + &.is-sidebar-dragging .collection-item-name { cursor: inherit; } `; diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js index b41940c98..97989baf3 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js @@ -2,6 +2,7 @@ import React, { useState, useRef, forwardRef, useEffect } from 'react'; import range from 'lodash/range'; import filter from 'lodash/filter'; import classnames from 'classnames'; +import { useDrag, useDrop } from 'react-dnd'; import { IconChevronRight, IconDots } from '@tabler/icons'; import { useSelector, useDispatch } from 'react-redux'; import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs'; @@ -23,8 +24,25 @@ import StyledWrapper from './StyledWrapper'; const CollectionItem = ({ item, collection, searchText }) => { const tabs = useSelector((state) => state.tabs.tabs); const activeTabUid = useSelector((state) => state.tabs.activeTabUid); - const isDragging = useSelector((state) => state.app.isDragging); + const isSidebarDragging = useSelector((state) => state.app.isDragging); const dispatch = useDispatch(); + const ref = useRef(null) + + const [{isDragging}, drag] = useDrag(() => ({ + type: 'collection-item', + collect: monitor => ({ + isDragging: !!monitor.isDragging(), + }) + })); + const [{ isOver, canDrop }, drop] = useDrop({ + accept: 'collection-item', + drop: () => console.log('dropped'), + canDrop: () => true, + collect: monitor => ({ + isOver: !!monitor.isOver(), + canDrop: !!monitor.canDrop() + }), + }); const [renameItemModalOpen, setRenameItemModalOpen] = useState(false); const [cloneItemModalOpen, setCloneItemModalOpen] = useState(false); @@ -91,7 +109,7 @@ const CollectionItem = ({ item, collection, searchText }) => { const isFolder = isItemAFolder(item); const className = classnames('flex flex-col w-full', { - 'is-dragging': isDragging + 'is-sidebar-dragging': isSidebarDragging }); if (searchText && searchText.length) { @@ -109,6 +127,8 @@ const CollectionItem = ({ item, collection, searchText }) => { const requestItems = filter(item.items, (i) => isItemARequest(i)); const folderItems = filter(item.items, (i) => isItemAFolder(i)); + drag(drop(ref)) + return ( {renameItemModalOpen && setRenameItemModalOpen(false)} />} @@ -116,7 +136,7 @@ const CollectionItem = ({ item, collection, searchText }) => { {deleteItemModalOpen && setDeleteItemModalOpen(false)} />} {newRequestModalOpen && setNewRequestModalOpen(false)} />} {newFolderModalOpen && setNewFolderModalOpen(false)} />} -
+
{indents && indents.length ? indents.map((i) => { diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js index 37fc85132..b0c44a8b9 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js @@ -2,6 +2,8 @@ import React, { useState, forwardRef, useRef, useEffect } from 'react'; import classnames from 'classnames'; import filter from 'lodash/filter'; import cloneDeep from 'lodash/cloneDeep'; +import { DndProvider } from 'react-dnd'; +import { HTML5Backend } from 'react-dnd-html5-backend'; import { IconChevronRight, IconDots } from '@tabler/icons'; import Dropdown from 'components/Dropdown'; import { collectionClicked } from 'providers/ReduxStore/slices/collections'; @@ -162,19 +164,21 @@ const Collection = ({ collection, searchText }) => {
{!collectionIsCollapsed ? ( -
- {requestItems && requestItems.length - ? requestItems.map((i) => { - return ; - }) - : null} + +
+ {requestItems && requestItems.length + ? requestItems.map((i) => { + return ; + }) + : null} - {folderItems && folderItems.length - ? folderItems.map((i) => { - return ; - }) - : null} -
+ {folderItems && folderItems.length + ? folderItems.map((i) => { + return ; + }) + : null} +
+ ) : null}
diff --git a/packages/bruno-app/src/pageComponents/Index/StyledWrapper.js b/packages/bruno-app/src/pageComponents/Index/StyledWrapper.js index ad638b665..4a70f8388 100644 --- a/packages/bruno-app/src/pageComponents/Index/StyledWrapper.js +++ b/packages/bruno-app/src/pageComponents/Index/StyledWrapper.js @@ -21,17 +21,6 @@ const Wrapper = styled.div` .fw-600 { font-weight: 600; } - - .react-tabs { - .react-tabs__tab-list { - padding-left: 1rem; - border-bottom: 1px solid #cfcfcf; - - .react-tabs__tab--selected { - border-color: #cfcfcf; - } - } - } `; export default Wrapper; diff --git a/packages/bruno-app/src/pages/_app.js b/packages/bruno-app/src/pages/_app.js index c896d77c6..f0b5bbce5 100644 --- a/packages/bruno-app/src/pages/_app.js +++ b/packages/bruno-app/src/pages/_app.js @@ -1,3 +1,4 @@ +import { useState, useEffect } from 'react'; import { Provider } from 'react-redux'; import { AppProvider } from 'providers/App'; import { ToastProvider } from 'providers/Toaster'; @@ -9,7 +10,6 @@ import ThemeProvider from 'providers/Theme/index'; import '../styles/app.scss'; import '../styles/globals.css'; import 'tailwindcss/dist/tailwind.min.css'; -import 'react-tabs/style/react-tabs.css'; import 'codemirror/lib/codemirror.css'; import 'graphiql/graphiql.min.css'; @@ -28,6 +28,16 @@ function NoSsr({ children }) { } function MyApp({ Component, pageProps }) { + const [domLoaded, setDomLoaded] = useState(false); + + useEffect(() => { + setDomLoaded(true); + }, []); + + if(!domLoaded) { + return null; + } + return ( diff --git a/packages/bruno-graphql-docs/package.json b/packages/bruno-graphql-docs/package.json index 8aee19f07..5eb4bfcd2 100644 --- a/packages/bruno-graphql-docs/package.json +++ b/packages/bruno-graphql-docs/package.json @@ -19,8 +19,8 @@ "graphql": "^16.6.0", "markdown-it": "^13.0.1", "postcss": "^8.4.18", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "18.2.0", + "react-dom": "18.2.0", "rollup": "3.2.5", "rollup-plugin-dts": "^5.0.0", "rollup-plugin-peer-deps-external": "^2.2.4", @@ -30,8 +30,7 @@ }, "peerDependencies": { "graphql": "^16.6.0", - "markdown-it": "^13.0.1", - "react": "^17.0.2" + "markdown-it": "^13.0.1" }, "overrides": { "rollup": "3.2.5"