Updated docs routing

frontend/src/Docs.js

@@ -32,7 +32,7 @@ const hrefStyle = {
 }
 
 const Docs = (props) => {
-  	const { isLoaded, globalUrl } = props;
+  const { isLoaded, globalUrl } = props;
 
 	const [data, setData] = useState("");
 	const [firstrequest, setFirstrequest] = useState(true);
@@ -55,16 +55,81 @@ const Docs = (props) => {
 			fetchDocs()
 			return
 		}
+
+		// Continue this, and find the h2 with the data in it lol
+		if (window.location.hash.length > 0) {
+			console.log("HELLO")
+
+			var parent = document.getElementById("markdown_wrapper")
+			if (parent !== null) {
+				var elements = parent.getElementsByTagName('h2')
+
+				const name = window.location.hash.slice(1, window.location.hash.lenth).toLowerCase().split("%20").join(" ")
+
+				console.log(name)
+				var found = false
+				for (var key in elements) {
+					const element = elements[key]
+					if (element.innerHTML === undefined) {
+						continue
+					}
+
+					// Fix location..
+					if (element.innerHTML.toLowerCase() === name) {
+						element.scrollIntoView({behavior: "smooth"})
+						found = true
+						//element.scrollTo({
+						//	top: element.offsetTop-100,
+						//	behavior: "smooth"
+						//})
+					}
+				}
+
+				// H#
+				if (!found) {
+					var elements = parent.getElementsByTagName('h3')
+					console.log(name)
+					var found = false
+					for (var key in elements) {
+						const element = elements[key]
+						if (element.innerHTML === undefined) {
+							continue
+						}
+
+						// Fix location..
+						if (element.innerHTML.toLowerCase() === name) {
+							element.scrollIntoView({behavior: "smooth"})
+							found = true
+							//element.scrollTo({
+							//	top: element.offsetTop-100,
+							//	behavior: "smooth"
+							//})
+						}
+					}
+				}
+			}
+			//console.log(element)
+
+			//console.log("NAME: ", name)
+			//console.log(document.body.innerHTML)
+			//   parent = document.getElementById(parent);
+
+			//var descendants = parent.getElementsByTagName(tagname);
+
+			// this.scrollDiv.current.scrollIntoView({ behavior: 'smooth' });
+
+			//$(".parent").find("h2:contains('Statistics')").parent();
+		}
 	})
 
 	const fetchDocList = () => {
 		fetch(globalUrl+"/api/v1/docs", {
-    	  	method: 'GET',
-				headers: {
-					'Content-Type': 'application/json',
-					'Accept': 'application/json',
-				},
-    		})
+    	method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json',
+			},
+    })
 		.then((response) => response.json())
     	.then((responseJson) => {
 			if (responseJson.success) {
@@ -101,8 +166,8 @@ const Docs = (props) => {
 		flex: "1",
 	}
 
-	function Link(props) {
-		return <a href={props.href} style={{color: "#f85a3e", textDecoration: "none"}}>{props.children}</a>
+	function OuterLink(props) {
+		return <Link to={props.href} style={{color: "#f85a3e", textDecoration: "none"}}>{props.children}</Link>
 	}
 
 	function Img(props) {
@@ -117,7 +182,7 @@ const Docs = (props) => {
 	//	);
 	//}
 
-  	const postDataBrowser = 
+  const postDataBrowser = 
 		<div style={Body}>
 			<div style={SideBar}>
 				<ul style={{listStyle: "none", paddingLeft: "0"}}>
@@ -139,11 +204,12 @@ const Docs = (props) => {
 					})}
 				</ul>
 			</div>
-			<div style={markdownStyle}>
+			<div id="markdown_wrapper" style={markdownStyle}>
 				<ReactMarkdown 
+					id="markdown_wrapper" 
 					escapeHtml={false}
 					source={data} 
-	 				renderers={{link: Link, image: Img}}
+	 				renderers={{link: OuterLink, image: Img}}
 				/>
 			</div>
 		</div>
@@ -180,9 +246,10 @@ const Docs = (props) => {
 			</Menu>
 			<div style={markdownStyle}>
 				<ReactMarkdown 
+					id="markdown_wrapper" 
 					escapeHtml={false}
 					source={data} 
-	 				renderers={{link: Link, image: Img}}
+	 				renderers={{link: OuterLink, image: Img}}
 				/>
 			</div>
 			<Divider style={{marginTop: "10px", marginBottom: "10px", backgroundColor: dividerColor}}/>