Draggable component and move provider to _app

src/components/Draggable.tsx

@@ -0,0 +1,61 @@
+import React, { useRef } from "react";
+import { useDrag, useDrop } from "react-dnd";
+
+const type = "Draggable";
+
+const Draggable = ({
+  id, index, handleDrag, children,
+}) => {
+  const ref = useRef(null); // Initialize the reference
+
+  // useDrop hook is responsible for handling whether any item gets hovered or dropped on the element
+  const [, drop] = useDrop({
+    // accept receives a definition of what must be the type of the dragged item to be droppable
+    accept: type,
+    // This method is called when we hover over an element while dragging
+    hover(item: { index: number }) { // item is the dragged element
+      if (!ref.current) {
+        return;
+      }
+      const dragIndex = item.index;
+      // current element where the dragged element is hovered on
+      const hoverIndex = index;
+      // If the dragged element is hovered in the same place, then do nothing
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+      // If it is dragged around other elements, then move the image and set the state with position changes
+      handleDrag(dragIndex, hoverIndex);
+      /*
+        Update the index for dragged item directly to avoid flickering
+        when the image was half dragged into the next
+      */
+      // eslint-disable-next-line no-param-reassign
+      item.index = hoverIndex;
+    },
+  });
+
+  // useDrag will be responsible for making an element draggable. It also expose, isDragging method to add any styles while dragging
+  const [{ isDragging }, drag] = useDrag(() => ({
+    // what type of item this to determine if a drop target accepts it
+    type,
+    // data of the item to be available to the drop methods
+    item: { id, index },
+    // method to collect additional data for drop handling like whether is currently being dragged
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  }));
+
+  /*
+    Initialize drag and drop into the element using its reference.
+    Here we initialize both drag and drop on the same element (i.e., Image component)
+  */
+  drag(drop(ref));
+
+  return (
+    <div ref={ref}>{children}</div>
+  );
+};
+
+export default Draggable;

src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx

@@ -1,6 +1,6 @@
-import React, { useRef } from "react";
-import { useDrag, useDrop } from "react-dnd";
+import React from "react";
 import styled from "styled-components";
+import Draggable from "@components/Draggable";
 import colors from "@theme/colors";
 import { SignupFormQuestion } from "@models/Signup";
 import { Lang } from "../../../i18n";
@@ -8,63 +8,6 @@ import OptionsWidget from "./OptionsWidget";
 import TypeWidget from "./TypeWidget";
 import QuestionElement from "./Question";
 
-const type = "Draggable";
-
-const Draggable = ({
-  id, index, handleDrag, children,
-}) => {
-  const ref = useRef(null); // Initialize the reference
-
-  // useDrop hook is responsible for handling whether any item gets hovered or dropped on the element
-  const [, drop] = useDrop({
-    // accept receives a definition of what must be the type of the dragged item to be droppable
-    accept: type,
-    // This method is called when we hover over an element while dragging
-    hover(item: any) { // item is the dragged element
-      if (!ref.current) {
-        return;
-      }
-      const dragIndex = item.index;
-      // current element where the dragged element is hovered on
-      const hoverIndex = index;
-      // If the dragged element is hovered in the same place, then do nothing
-      if (dragIndex === hoverIndex) {
-        return;
-      }
-      // If it is dragged around other elements, then move the image and set the state with position changes
-      handleDrag(dragIndex, hoverIndex);
-      /*
-        Update the index for dragged item directly to avoid flickering
-        when the image was half dragged into the next
-      */
-      // eslint-disable-next-line no-param-reassign
-      item.index = hoverIndex;
-    },
-  });
-
-  // useDrag will be responsible for making an element draggable. It also expose, isDragging method to add any styles while dragging
-  const [{ isDragging }, drag] = useDrag(() => ({
-    // what type of item this to determine if a drop target accepts it
-    type,
-    // data of the item to be available to the drop methods
-    item: { id, index },
-    // method to collect additional data for drop handling like whether is currently being dragged
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-  }));
-
-  /*
-    Initialize drag and drop into the element using its reference.
-    Here we initialize both drag and drop on the same element (i.e., Image component)
-  */
-  drag(drop(ref));
-
-  return (
-    <div ref={ref}>{children}</div>
-  );
-};
-
 const WidgetRow = styled(Draggable)`
   margin-bottom: 1rem;
   display: flex;

src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx

@@ -1,7 +1,4 @@
 import React from "react";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import { TouchBackend } from "react-dnd-touch-backend";
 import styled from "styled-components";
 import shortid from "shortid";
 import colors from "@theme/colors";
@@ -63,25 +60,12 @@ const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, on
 
   const questions: SignupFormQuestion[] = JSON.parse(value);
 
-  // simple way to check whether the device support touch (it doesn't check all fallback, it supports only modern browsers)
-  const isTouchDevice = () => {
-    if ("ontouchstart" in window) {
-      return true;
-    }
-    return false;
-  };
-
-  // Assigning backend based on touch support on the device
-  const backendForDND = isTouchDevice() ? TouchBackend : HTML5Backend;
-
   return (
     <Widget>
-      <DndProvider backend={backendForDND}>
-        <QuestionList
-          questions={questions}
-          onChange={onValueChange}
-        />
-      </DndProvider>
+      <QuestionList
+        questions={questions}
+        onChange={onValueChange}
+      />
       <AddQuestionButton type="button" onClick={handleNewRowClick(questions)} data-e2e="admin-signup-new-question">
         <AddIcon />
         New Question

src/hooks/useIsTouchDevice.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+
+const useIsTouchDevice = () => {
+  const [isTouchDevice, setTouchDevice] = useState(false);
+  useEffect(() => {
+  // simple way to check whether the device support touch (it doesn't check all fallback, it supports only modern browsers)
+    if (window !== undefined && "ontouchstart" in window) {
+      setTouchDevice(true);
+    }
+  }, []);
+  return isTouchDevice;
+};
+
+export default useIsTouchDevice;

src/pages/_app.tsx

@@ -1,4 +1,7 @@
 import React from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { TouchBackend } from "react-dnd-touch-backend";
 import Head from "next/head";
 import { AppProps } from "next/app";
 import styled, { createGlobalStyle } from "styled-components";
@@ -10,6 +13,7 @@ import "react-mde/lib/styles/css/react-mde-all.css";
 import "react-toastify/dist/ReactToastify.css";
 import "normalize.css";
 
+import useIsTouchDevice from "@hooks/useIsTouchDevice";
 import LocaleStore from "../i18n";
 
 const fontFamily = "'Montserrat', sans-serif";
@@ -128,27 +132,35 @@ const AppContainer = styled.div`
   background-color: ${colors.white};
 `;
 
-const Web20App = ({ Component, pageProps }: AppProps): JSX.Element => (
-  <>
-    <Head>
-      <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
-      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <title>Aalto-yliopiston Sähköinsinöörikilta ry</title>
-      <meta
-        name="description"
-        content="Aalto-yliopiston Sähköinsinöörikilta ry on Otaniemessä vaikuttava opiskelijajärjestö, joka on perustettu vuonna 1921. Kilta järjestää kaikenlaista toimintaa liittyen opintoihin ja vapaa-ajan viettoon."
-      />
-      <meta name="keywords" content="SIK AYY" />
-    </Head>
-    <GlobalCommonStyles />
-    <LocaleStore>
-      <AppContainer>
-        <Component {...pageProps} />
-      </AppContainer>
-    </LocaleStore>
-    <ToastContainer position="bottom-right" />
-  </>
-);
+const Web20App = ({ Component, pageProps }: AppProps): JSX.Element => {
+  const isTouchDevice = useIsTouchDevice();
+  // Assigning backend based on touch support on the device
+  const backendForDND = isTouchDevice ? TouchBackend : HTML5Backend;
+
+  return (
+    <>
+      <Head>
+        <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Aalto-yliopiston Sähköinsinöörikilta ry</title>
+        <meta
+          name="description"
+          content="Aalto-yliopiston Sähköinsinöörikilta ry on Otaniemessä vaikuttava opiskelijajärjestö, joka on perustettu vuonna 1921. Kilta järjestää kaikenlaista toimintaa liittyen opintoihin ja vapaa-ajan viettoon."
+        />
+        <meta name="keywords" content="SIK AYY" />
+      </Head>
+      <GlobalCommonStyles />
+      <LocaleStore>
+        <AppContainer>
+          <DndProvider backend={backendForDND}>
+            <Component {...pageProps} />
+          </DndProvider>
+        </AppContainer>
+      </LocaleStore>
+      <ToastContainer position="bottom-right" />
+    </>
+  );
+};
 
 export default Web20App;