Merge pull request #7 from LikaloLLC/D30-823-add-ability-to-re-order-…

…guided-tour-steps-in-extension

D30 823 add ability to re order guided tour steps in extension

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tourguide-js-chrome-extension",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Easily build, publish, update and maintain product tours in Docsie",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -14,7 +14,8 @@
     "pick-dom-element": "github:bordot/pick-dom-element",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "tourguidejs": "^0.3.0"
+    "react-sortablejs": "^6.1.4",
+    "tourguidejs": "^1.0.0"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.190",
@@ -29,4 +30,4 @@
     "webpack": "^5.73.0",
     "webpack-cli": "^4.9.2"
   }
-}
+}

src/declarations.d.ts

@@ -6,4 +6,12 @@ interface Step {
   image: null | string;
 }
 
+interface StepWithId {
+  id: string;
+  step: number;
+  title: string;
+  content: string;
+  selector: string;
+  image: null | string;
+}
 declare module 'tourguidejs';

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Docsie Tour Guide",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "icons": {
     "16": "images/icon-16.png",
     "24": "images/icon-24.png",
@@ -23,20 +23,42 @@
   },
   "content_scripts": [
     {
-      "matches": ["https://app.docsie.io/*", "https://beta.docsie.io/*"],
-      "js": ["scripts/docsie.js"]
+      "matches": [
+        "https://app.docsie.io/*",
+        "https://beta.docsie.io/*",
+        "https://staging.docsie.io/*"
+      ],
+      "js": [
+        "scripts/docsie.js"
+      ]
     }
   ],
   "externally_connectable": {
-    "ids": ["namnffimcbmhcpkllhaookfikmllhned"],
-    "matches": ["https://app.docsie.io/*", "https://beta.docsie.io/*"]
+    "ids": [
+      "namnffimcbmhcpkllhaookfikmllhned"
+    ],
+    "matches": [
+      "https://app.docsie.io/*",
+      "https://beta.docsie.io/*",
+      "https://staging.docsie.io/*"
+    ]
   },
-  "permissions": ["activeTab", "scripting", "webNavigation"],
-  "host_permissions": ["<all_urls>"],
+  "permissions": [
+    "activeTab",
+    "scripting",
+    "webNavigation"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
   "web_accessible_resources": [
     {
-      "resources": ["pages/*/*.html"],
-      "matches": ["<all_urls>"]
+      "resources": [
+        "pages/*/*.html"
+      ],
+      "matches": [
+        "<all_urls>"
+      ]
     }
   ]
-}
+}

src/pages/iframe/components/Body.tsx

@@ -1,11 +1,44 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { ReactSortable } from 'react-sortablejs';
 import { useIframeContext } from '../contexts/iframeContext';
 
 import { StepCard } from './StepCard';
 import { StepCardAdd } from './StepCardAdd';
 
 export const Body = () => {
   const iframeContext = useIframeContext();
+  const [list, setList] = useState<StepWithId[]>([]);
+
+  useEffect(() => {
+    if (iframeContext.state?.doc) {
+      const doc = iframeContext.state.doc.map((doc, index) => {
+        return {
+          ...doc,
+          id: 'step' + index,
+        };
+      });
+      setList(doc);
+    }
+  }, [iframeContext.state?.doc]);
+
+  const onDragDropEnds = (oldIndex: number, newIndex: number) => {
+    const cloneList = [...iframeContext.state.doc];
+    if (oldIndex !== newIndex) {
+      const stepRemoved = cloneList.splice(oldIndex, 1).pop();
+      cloneList.splice(newIndex, 0, stepRemoved);
+      const reMapperDoc: Step[] = cloneList.map((step, index) => {
+        return {
+          ...step,
+          step: index + 1,
+        };
+      });
+
+      iframeContext.dispatch({
+        type: 'DOC_SET',
+        payload: reMapperDoc,
+      });
+    }
+  };
 
   return !iframeContext.state.recording ? (
     <div className="step-container container-fluid border-bottom" style={{ height: 220 }}>
@@ -19,9 +52,19 @@ export const Body = () => {
       <div className="step-container container-fluid border-bottom flex-row">
         <div className="card-deck">
           <>
-            {iframeContext.state.doc.map((step, i) => (
-              <StepCard key={i} index={i} step={step} />
-            ))}
+            <ReactSortable
+              animation={150}
+              list={list}
+              handle=".dragHandle"
+              swapThreshold={0.65}
+              setList={() => {}}
+              style={{ display: 'flex' }}
+              onEnd={({ oldIndex, newIndex }) => onDragDropEnds(oldIndex, newIndex)}
+            >
+              {list.map((step, i) => (
+                <StepCard key={i} index={i} step={step} />
+              ))}
+            </ReactSortable>
             <StepCardAdd />
           </>
         </div>