hardforkio · mergify · Jul 29, 2020 · Jul 10, 2020 · Jul 27, 2020 · levino
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -2,7 +2,6 @@
   "parser": "@typescript-eslint/parser",
   "extends": [
     "react-app",
-    "plugin:@typescript-eslint/recommended",
     "prettier/@typescript-eslint",
     "plugin:prettier/recommended"
   ],

diff --git a/frontend/package.json b/frontend/package.json
@@ -9,16 +9,17 @@
     "yarn": ">=1.16.0"
   },
   "scripts": {
-    "start": "react-app-rewired start",
     "build-frontend": "react-app-rewired build",
     "build": "yarn build-frontend && yarn build-mock-backend",
     "build-mock-backend": "tsc mock-api/functions/*/**.ts",
+    "start-frontend": "react-app-rewired start",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject",
     "heroku-postbuild": "yarn run build",
     "lint": "eslint --ext .ts --ext .tsx src/",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "serve": "ts-node mock-api/server",
+    "start-mock-backend": "ts-node mock-api/server",
+    "start": "concurrently \"yarn start-frontend\" \"yarn start-mock-backend\"",
     "storybook": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public"
   },
@@ -44,13 +45,10 @@
     "ramda": "^0.27.0",
     "react": "^16.13.1",
     "react-animated-dots": "^1.0.0",
-    "react-dnd": "^9.4.0",
-    "react-dnd-cjs": "^9.4.0",
-    "react-dnd-html5-backend": "^9.4.0",
-    "react-dnd-html5-backend-cjs": "^9.4.0",
-    "react-dnd-multi-backend": "^4.0.0-0",
-    "react-dnd-touch-backend": "^9.4.0",
-    "react-dnd-touch-backend-cjs": "^9.4.0",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
+    "react-dnd-multi-backend": "^6.0.2",
+    "react-dnd-touch-backend": "^11.1.3",
     "react-dom": "^16.13.1",
     "react-highlight-words": "^0.16.0",
     "react-hot-keys": "^2.0.0-beta.2",
@@ -75,11 +73,6 @@
     "serverless-http": "^2.5.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-links": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
-    "@storybook/preset-create-react-app": "^3.1.4",
-    "@storybook/react": "^5.3.19",
     "@babel/core": "^7.10.5",
     "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-links": "^5.3.19",
@@ -91,7 +84,6 @@
     "@types/body-parser": "^1.19.0",
     "@types/classnames": "^2.2.10",
     "@types/cors": "^2.8.6",
-    "@types/eslint-plugin-prettier": "^3.1.0",
     "@types/express": "^4.17.3",
     "@types/history": "^4.7.6",
     "@types/jest": "^25.1.4",
@@ -103,7 +95,6 @@
     "@types/prettier": "^2.0.2",
     "@types/ramda": "^0.27.11",
     "@types/react": "^16.9.25",
-    "@types/react-dnd-multi-backend": "^4.0.1",
     "@types/react-dom": "^16.9.5",
     "@types/react-highlight-words": "^0.16.1",
     "@types/react-list": "^0.8.5",
@@ -122,6 +113,7 @@
     "@types/redux-thunk": "^2.1.0",
     "babel-loader": "^8.1.0",
     "body-parser": "^1.18.2",
+    "concurrently": "^5.2.0",
     "cors": "^2.8.5",
     "cross-env": "^5.1.3",
     "css-loader": "^3.4.2",

diff --git a/frontend/src/app-styles.sass b/frontend/src/app-styles.sass
@@ -4,3 +4,12 @@
 // Hide the previous queries filter options
 .previous-queries-filter
   display: none
+
+body
+  // In order to not highlight text etc. while dragging we need to disable these events.
+  -webkit-touch-callout: none /* iOS Safari */
+  -webkit-user-select: none /* Safari */
+  -khtml-user-select: none /* Konqueror HTML */
+  -moz-user-select: none /* Old versions of Firefox */
+  -ms-user-select: none /* Internet Explorer/Edge */
+  user-select: none
diff --git a/frontend/src/js/app/Content.tsx b/frontend/src/js/app/Content.tsx
@@ -1,15 +1,14 @@
 import React from "react";
 import { connect } from "react-redux";
 import styled from "@emotion/styled";
-// Also, set up the drag and drop context
 import { DndProvider } from "react-dnd";
-import HTML5Backend from "react-dnd-html5-backend";
-import TouchBackend from "react-dnd-touch-backend";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { TouchBackend } from "react-dnd-touch-backend";
 import MultiBackend, {
+  TouchTransition,
   Preview,
-  TouchTransition
+  usePreview
 } from "react-dnd-multi-backend";
-// import HTML5toTouch from "react-dnd-multi-backend/lib/HTML5toTouch";
 import { withRouter } from "react-router";
 
 import Tooltip from "../tooltip/Tooltip";
@@ -19,9 +18,16 @@ import type { TabT } from "../pane/types";
 import LeftPane from "./LeftPane";
 import RightPane from "./RightPane";
 import { ContentLayout } from "../ContentLayout";
+import { BackendFactory } from "dnd-core";
+
+interface PreviewItemProps {
+  theme?: any;
+  width: string;
+  height: string;
+}
 
 const PreviewItem = styled("div")`
-  background-color: ${({ theme }) => theme.col.grayVeryLight};
+  background-color: ${({ theme }: PreviewItemProps) => theme.col.grayVeryLight};
   opacity: 0.9;
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
   border-radius: ${({ theme }) => theme.borderRadius};
@@ -36,12 +42,16 @@ const PreviewItem = styled("div")`
 // Consider upgrading react-dnd BUT somehow try to keep IE11 compatibility
 //@ts-ignore
 
-const generatePreview = (type, item, style) => {
-  // eslint-disable-next-line no-console
-  console.log("PREVIEW RENDERED", item.width, item.height, style);
-  //@ts-ignore
-
-  return <PreviewItem width={item.width} height={item.height} style={style} />;
+const DragPreview = () => {
+  const { item, style, display } = usePreview();
+  if (!display) {
+    return null;
+  }
+  return (
+    <PreviewItem width={item.width} height={item.height} style={style}>
+      {item.label}
+    </PreviewItem>
+  );
 };
 
 type PropsType = {
@@ -57,23 +67,30 @@ export const CustomHTML5toTouch = {
     {
       backend: TouchBackend,
       transition: TouchTransition,
-      options: { enableMouseEvents: true }, // Note that you can call your backends with options
-      preview: true,
-      skipDispatchOnTransition: true
+      options: {
+        delayTouchStart: 100, //This enables touch to scroll and touch and hold to drag.
+        ignoreContextMenu: true
+      },
+      preview: true
     }
   ]
 };
 
 const Content = ({ displayTooltip, rightTabs }: PropsType) => {
   return (
-    <DndProvider backend={MultiBackend} options={CustomHTML5toTouch}>
+    <DndProvider
+      backend={(MultiBackend as unknown) as BackendFactory}
+      options={CustomHTML5toTouch}
+    >
       <ContentLayout
         info={displayTooltip ? <Tooltip /> : <ActivateTooltip />}
         editor={<RightPane tabs={rightTabs} />}
         tools={<LeftPane />}
       />
 
-      <Preview generator={generatePreview} />
+      <Preview>
+        <DragPreview />
+      </Preview>
     </DndProvider>
   );
 };

diff --git a/frontend/src/js/concept-trees/ConceptTreeNodeText.tsx b/frontend/src/js/concept-trees/ConceptTreeNodeText.tsx
@@ -17,7 +17,6 @@ const Root = styled("div")`
 `;
 
 const Text = styled("p")`
-  user-select: none;
   border-radius: ${({ theme }) => theme.borderRadius};
   margin: 0;
   padding: 0 10px;

diff --git a/frontend/src/js/concept-trees/ConceptTreeNodeTextContainer.tsx b/frontend/src/js/concept-trees/ConceptTreeNodeTextContainer.tsx
@@ -5,7 +5,6 @@ import { DragSource } from "react-dnd";
 import AdditionalInfoHoverable from "../tooltip/AdditionalInfoHoverable";
 import { isEmpty } from "../common/helpers";
 import * as dndTypes from "../common/constants/dndTypes";
-
 import type { AdditionalInfoHoverableNodeType } from "../tooltip/AdditionalInfoHoverable";
 import type { DraggedNodeType } from "../standard-query-editor/types";
 import type { SearchT } from "./reducer";
@@ -21,7 +20,7 @@ type PropsType = {
   open: boolean;
   depth: number;
   active?: boolean;
-  onTextClick?: Function;
+  onTextClick?: () => void;
   createQueryElement: () => DraggedNodeType;
   connectDragSource: Function;
   search?: SearchT;
@@ -40,24 +39,16 @@ function getResultCount(search, node) {
 }
 
 // Has to be a class because of https://github.com/react-dnd/react-dnd/issues/530
-class ConceptTreeNodeTextContainer extends React.Component {
+class ConceptTreeNodeTextContainer extends React.Component<PropsType> {
   render() {
     const {
-      //@ts-ignore
       node,
-      //@ts-ignore
       depth,
-      //@ts-ignore
       search,
-      //@ts-ignore
       active,
-      //@ts-ignore
       open,
-      //@ts-ignore
       connectDragSource,
-      //@ts-ignore
       onTextClick,
-      //@ts-ignore
       isStructFolder
     } = this.props;
 
@@ -77,7 +68,7 @@ class ConceptTreeNodeTextContainer extends React.Component {
         depth={depth}
         description={node.description}
         resultCount={resultCount}
-        searchWords={search.words}
+        searchWords={search && search.words}
         hasChildren={hasChildren}
         isOpen={open}
         isStructFolder={isStructFolder || active === false}

diff --git a/frontend/src/js/external-forms/form-configs/FormConfig.tsx b/frontend/src/js/external-forms/form-configs/FormConfig.tsx
@@ -185,8 +185,7 @@ const FormConfig: React.FC<PropsT> = ({
     label: config.label
   };
 
-  //@ts-ignore
-  const [collectedProps, drag] = useDrag({
+  const [, drag] = useDrag({
     item: dragItem,
     isDragging: monitor => monitor.isDragging()
   });

diff --git a/frontend/src/js/standard-query-editor/QueryNode.tsx b/frontend/src/js/standard-query-editor/QueryNode.tsx
@@ -90,19 +90,13 @@ type PropsType = {
   onEditClick: Function;
   onToggleTimestamps: Function;
   onExpandClick: Function;
-  // @ts-ignore
-  connectDragSource: Function;
   andIdx: number;
   orIdx: number;
-  // @ts-ignore
   connectDragSource: ConnectDragSource;
 };
 
 // Has to be a class because of https://github.com/react-dnd/react-dnd/issues/530
-class QueryNode extends React.Component {
-  // @ts-ignore
-  props: PropsType;
-
+class QueryNode extends React.Component<PropsType> {
   render() {
     const {
       node,

diff --git a/frontend/src/storybook/index.tsx b/frontend/src/storybook/index.tsx
@@ -15,6 +15,7 @@ import translationsDe from "../localization/de.json";
 import { de } from "date-fns/locale";
 import { AnyAction } from "redux";
 import * as R from "ramda";
+import { BackendFactory } from "dnd-core";
 
 initializeLocalization("de", de, translationsDe);
 
@@ -34,7 +35,10 @@ export const StoryWrapper: React.FC<StoryWrapperProps> = ({
   return (
     <Provider store={store}>
       <ThemeProvider theme={theme}>
-        <DndProvider backend={MultiBackend} options={CustomHTML5toTouch}>
+        <DndProvider
+          backend={(MultiBackend as unknown) as BackendFactory}
+          options={CustomHTML5toTouch}
+        >
           {children}
         </DndProvider>
       </ThemeProvider>

diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -21,8 +21,8 @@
     "forceConsistentCasingInFileNames": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "typeRoots" : ["./typings","./node_modules/@types"]
   },
-  "include": ["src", "node_modules/**/*/*.d.ts"],
-  "exclude": ["node_modules", "public", ".cache", ".idea", "src/ignored/*"],
+  "include": ["src"]
 }
diff --git a/frontend/typings/react-dnd-multi-backend/index.d.ts b/frontend/typings/react-dnd-multi-backend/index.d.ts
@@ -0,0 +1 @@
+declare module "react-dnd-multi-backend"; // Currently the DT types for this package are broken (the new API is missing). Until then we any this.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		declare module "react-dnd-multi-backend"; // Currently the DT types for this package are broken (the new API is missing). Until then we any this.