From 5641161aa8945e3a5eaaba72d7f70ee9e0d73b26 Mon Sep 17 00:00:00 2001
From: rtm516 <ryantmilner@hotmail.co.uk>
Date: Thu, 26 Sep 2024 13:59:58 +0100
Subject: [PATCH] Add markdown step support

---
 src/components/TroubleshootingTree/index.tsx  | 20 ++++++++++++++++---
 .../steps/MarkDownStep.tsx                    | 10 ++++++++++
 .../TroubleshootingTree/steps/md/Test.mdx     |  2 ++
 3 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 src/components/TroubleshootingTree/steps/MarkDownStep.tsx
 create mode 100644 src/components/TroubleshootingTree/steps/md/Test.mdx

diff --git a/src/components/TroubleshootingTree/index.tsx b/src/components/TroubleshootingTree/index.tsx
index 4f9518f..e07cb4f 100644
--- a/src/components/TroubleshootingTree/index.tsx
+++ b/src/components/TroubleshootingTree/index.tsx
@@ -1,12 +1,16 @@
 import { Controls, Step, useControls, Wizard } from 'react-decision-tree-flow'
 
 import Step1 from './steps/Step1'
-import Error from './steps/Error'
-import Step3 from './steps/Step3'
 import Step2 from './steps/Step2'
+import Step3 from './steps/Step3'
+import Error from './steps/Error'
 import { useEffect, useState } from 'react'
 import { StepData } from './StepProps'
+import MarkDownStep from './steps/MarkDownStep'
 
+import Test from './steps/md/Test.mdx'
+
+// React components for each step
 const stepComponents = [
 	Step1,
 	Step2,
@@ -18,7 +22,14 @@ const stepComponents = [
 function formatStepName(name: string): string {
 	return name.charAt(0).toLowerCase() + name.slice(1)
 }
-const steps = Object.fromEntries(stepComponents.map((Component) => [formatStepName(Component.name), Component]))
+let steps = Object.fromEntries(stepComponents.map((Component) => [formatStepName(Component.name), Component]))
+
+// Add the markdown steps
+steps = {
+	test: MarkDownStep(Test),
+	...steps
+}
+
 
 // Make a tree so all steps can go to all others
 const tree = Object.fromEntries(Object.keys(steps).map((key, i, arr) => {
@@ -32,6 +43,9 @@ function TreeInternals(): JSX.Element {
 	
 	const { step } = useControls();
 	useEffect(() => {
+		if (step == 'internalStep') {
+			console.log()
+		}
 		setData(data => ({...data, path: [...data.path, step as string]}))
 	}, [step])
 
diff --git a/src/components/TroubleshootingTree/steps/MarkDownStep.tsx b/src/components/TroubleshootingTree/steps/MarkDownStep.tsx
new file mode 100644
index 0000000..7d2f4ad
--- /dev/null
+++ b/src/components/TroubleshootingTree/steps/MarkDownStep.tsx
@@ -0,0 +1,10 @@
+import { useControls } from "react-decision-tree-flow";
+import StepProps from "../StepProps";
+
+export default function MarkDownStep(Component: any): Function {
+	return function InternalStep({ data }: StepProps): JSX.Element {
+		const { step, tree, destinations, back } = useControls();
+
+		return (<Component step={step} tree={tree} destinations={destinations} back={back} data={data}/>)
+	}
+}
\ No newline at end of file
diff --git a/src/components/TroubleshootingTree/steps/md/Test.mdx b/src/components/TroubleshootingTree/steps/md/Test.mdx
new file mode 100644
index 0000000..a9c5337
--- /dev/null
+++ b/src/components/TroubleshootingTree/steps/md/Test.mdx
@@ -0,0 +1,2 @@
+I am step test<br />
+<button onClick={() => props.destinations.error({...props.data, path: [...props.data.path, props.step]})}>Go to error</button>