feat: drag and drop events (#57)

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",

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;
   }
 `;

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 (
     <StyledWrapper className={className}>
       {renameItemModalOpen && <RenameCollectionItem item={item} collection={collection} onClose={() => setRenameItemModalOpen(false)} />}
@@ -116,7 +136,7 @@ const CollectionItem = ({ item, collection, searchText }) => {
       {deleteItemModalOpen && <DeleteCollectionItem item={item} collection={collection} onClose={() => setDeleteItemModalOpen(false)} />}
       {newRequestModalOpen && <NewRequest item={item} collection={collection} onClose={() => setNewRequestModalOpen(false)} />}
       {newFolderModalOpen && <NewFolder item={item} collection={collection} onClose={() => setNewFolderModalOpen(false)} />}
-      <div className={itemRowClassName}>
+      <div className={itemRowClassName} ref={ref}>
         <div className="flex items-center h-full w-full">
           {indents && indents.length
             ? indents.map((i) => {

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,6 +164,7 @@ const Collection = ({ collection, searchText }) => {
 
       <div>
         {!collectionIsCollapsed ? (
+          <DndProvider backend={HTML5Backend}>
             <div>
               {requestItems && requestItems.length
                 ? requestItems.map((i) => {
@@ -175,6 +178,7 @@ const Collection = ({ collection, searchText }) => {
                   })
                 : null}
             </div>
+          </DndProvider>
         ) : null}
       </div>
     </StyledWrapper>

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;

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 (
     <SafeHydrate>
       <NoSsr>

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"