Add disconnect function to useSchema - antonioru#31

CHANGELOG.md

@@ -130,10 +130,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [0.5.0] - 2020-11-20
 
-  ### Added
+### Added
 
-  - First implementation of draggable canvas
-  - First implementation of zoomable canvas
+- First implementation of draggable canvas
+- First implementation of zoomable canvas 
 
 ## [0.5.1] - 2020-11-27
 
@@ -142,3 +142,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Reverted changes in `0.5.0` related to draggable canvas and zoomable 
     canvas due to an uncaught bug. We will continue working on these features
     and release them in an upcoming version. Apologies everyone! 
+
+## [0.6.0] - 2020-12-12
+
+### Added
+
+- Added `disconnect` function exported in `useSchema` hook

package.json

@@ -1,6 +1,6 @@
 {
   "name": "beautiful-react-diagrams",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "A tiny collection of lightweight React components to build diagrams with ease",
   "main": "index.js",
   "module": "esm/index.js",
@@ -61,15 +61,15 @@
     "jsdom-global": "^3.0.2",
     "mini-css-extract-plugin": "^1.1.1",
     "mocha": "^8.2.0",
-    "node-sass": "^4.14.1",
+    "node-sass": "^5.0.0",
     "nyc": "^15.1.0",
     "postcss": "^8.1.2",
     "postcss-fixes": "^2.0.1",
     "postcss-normalize": "^9.0.0",
     "postcss-preset-env": "^6.7.0",
     "postcss-will-change": "3.0.0",
     "postcss-will-change-transition": "^1.2.0",
-    "react": "^16.14.0",
+    "react": "^17.0.1",
     "react-dom": "^16.12.0",
     "react-styleguidist": "^11.1.0",
     "rollup": "^2.32.1",
@@ -96,7 +96,7 @@
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": ">=16.14.0",
-    "react-dom": ">=16.12.0"
+    "react": ">=17.0.1",
+    "react-dom": ">=17.0.1"
   }
 }

src/hooks/useSchema/actionTypes.js

@@ -2,3 +2,4 @@ export const ON_CHANGE = 'bi-diagram/useSchema/change';
 export const ON_NODE_ADD = 'bi-diagram/useSchema/node/add';
 export const ON_NODE_REMOVE = 'bi-diagram/useSchema/node/remove';
 export const ON_CONNECT = 'bi-diagram/useSchema/connect';
+export const ON_DISCONNECT = 'bi-diagram/useSchema/disconnect';

src/hooks/useSchema/schemaReducer.js

@@ -1,5 +1,6 @@
 import findIndex from 'lodash.findindex';
-import { ON_CHANGE, ON_CONNECT, ON_NODE_ADD, ON_NODE_REMOVE } from './actionTypes';
+import isEqual from 'lodash.isequal';
+import { ON_CHANGE, ON_CONNECT, ON_DISCONNECT, ON_NODE_ADD, ON_NODE_REMOVE } from './actionTypes';
 import getNodePortsId from '../../shared/functions/getNodePortsId';
 
 /**
@@ -45,6 +46,11 @@ const schemaReducer = (state, action) => {
         nodes: state.nodes || [],
         links: state.links || [],
       });
+    case ON_DISCONNECT:
+      return ({
+        nodes: state.nodes || [],
+        links: state.links.filter((link) => !isEqual(link, action.payload.link)) || [],
+      });
     default:
       return state;
   }

src/hooks/useSchema/useSchema.js

@@ -1,7 +1,7 @@
 import { useReducer, useCallback } from 'react';
 import ensureNodeId from '../../shared/functions/ensureNodeId';
 import schemaReducer from './schemaReducer';
-import { ON_CHANGE, ON_CONNECT, ON_NODE_ADD, ON_NODE_REMOVE } from './actionTypes';
+import { ON_CHANGE, ON_CONNECT, ON_NODE_ADD, ON_NODE_REMOVE, ON_DISCONNECT } from './actionTypes';
 
 const initialState = { nodes: [], links: [] };
 
@@ -17,8 +17,9 @@ const useSchema = (initialSchema = initialState) => {
   const addNode = useCallback((node) => dispatch({ type: ON_NODE_ADD, payload: { node: ensureNodeId(node) } }), []);
   const removeNode = useCallback((node) => dispatch({ type: ON_NODE_REMOVE, payload: { nodeId: node.id } }), []);
   const connect = useCallback((input, output) => dispatch({ type: ON_CONNECT, payload: { link: { input, output } } }), []);
+  const disconnect = useCallback((input, output) => dispatch({ type: ON_DISCONNECT, payload: { link: { input, output } } }), []);
 
-  return [schema, Object.freeze({ onChange, addNode, removeNode, connect })];
+  return [schema, Object.freeze({ onChange, addNode, removeNode, connect, disconnect })];
 };
 /* eslint-enable max-len */
 

tests/useSchema.spec.js

@@ -1,7 +1,7 @@
 import useSchema from '../dist/hooks/useSchema';
 import schemaReducer from '../dist/hooks/useSchema/schemaReducer';
 import createSchema from '../dist/shared/functions/createSchema';
-import { ON_CHANGE, ON_CONNECT, ON_NODE_ADD, ON_NODE_REMOVE } from '../dist/hooks/useSchema/actionTypes';
+import { ON_CHANGE, ON_CONNECT, ON_NODE_ADD, ON_NODE_REMOVE, ON_DISCONNECT } from '../dist/hooks/useSchema/actionTypes';
 
 describe('useSchema reducer', () => {
   it('should return the same state if the action is invalid', () => {
@@ -96,6 +96,40 @@ describe('useSchema reducer', () => {
     expect(nextSchema.nodes).to.deep.equal([]);
     expect(nextSchema.links).to.deep.equal([link]);
   });
+
+  it('should remove the link between two nodes ON_DISCONNECT action', () => {
+    const schema = createSchema({
+      nodes: [
+        {
+          id: 'node-1',
+          content: 'Node 1',
+          coordinates: [1, 0],
+          outputs: [{ id: 'port-1' }],
+        },
+        {
+          id: 'node-2',
+          content: 'Node 2',
+          coordinates: [2, 0],
+          inputs: [{ id: 'port-2' }],
+        },
+        {
+          id: 'node-3',
+          content: 'Node 3',
+          coordinates: [3, 0],
+          inputs: [{ id: 'port-3' }],
+        },
+      ],
+      links: [{ input: 'port-2', output: 'port-1' }, { input: 'port-3', output: 'port-1' }],
+    });
+    const link = { input: 'port-3', output: 'port-1' };
+
+    const nextSchema = schemaReducer(schema, { type: ON_DISCONNECT, payload: { link } });
+
+    expect(nextSchema).to.have.property('nodes');
+    expect(nextSchema).to.have.property('links');
+    expect(nextSchema.nodes).to.deep.equal(schema.nodes);
+    expect(nextSchema.links).to.deep.equal([{ input: 'port-2', output: 'port-1' }]);
+  });
 });
 
 // TODO: test this hook