#245: Started work on a new, simple tutorial system

frontend/src/views/Admin.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 
 import { makeStyles } from "@material-ui/styles";
 import { useTheme } from "@material-ui/core/styles";
-import { Link } from "react-router-dom";
+import { useNavigate, Link } from "react-router-dom";
 
 import {
   FormControl,
@@ -92,6 +92,8 @@ const Admin = (props) => {
   var to_be_copied = "";
   const theme = useTheme();
   const classes = useStyles();
+	let navigate = useNavigate();
+
   const [firstRequest, setFirstRequest] = React.useState(true);
   const [orgRequest, setOrgRequest] = React.useState(true);
   const [modalUser, setModalUser] = React.useState({});
@@ -1395,7 +1397,9 @@ const Admin = (props) => {
       console.log("Should get apps for categories.");
     }
 
-		props.history.push(`/admin?tab=${views[newValue]}`)
+		console.log("PROPS: ", props)
+
+		navigate(`/admin?tab=${views[newValue]}`)
 
     setModalUser({});
   };

frontend/src/views/AngularWorkflow.jsx

@@ -3,8 +3,8 @@ import { useInterval } from "react-powerhooks";
 import { makeStyles, useTheme } from "@material-ui/core/styles";
 
 import { v4 as uuidv4 } from "uuid";
-import { Link } from "react-router-dom";
-import { Prompt } from "react-router";
+import { Link, useParams } from "react-router-dom";
+// import { Prompt } from "react-router"; // FIXME
 import { useBeforeunload } from "react-beforeunload";
 import ReactJson from "react-json-view";
 import NestedMenuItem from "material-ui-nested-menu-item";
@@ -210,10 +210,16 @@ const svgSize = 24;
 //const referenceUrl = "https://shuffler.io/functions/webhooks/"
 //const referenceUrl = window.location.origin+"/api/v1/hooks/"
 
-const AngularWorkflow = (props) => {
-  const { globalUrl, isLoggedIn, isLoaded, userdata } = props;
+const AngularWorkflow = (defaultprops) => {
+  const { globalUrl, isLoggedIn, isLoaded, userdata } = defaultprops;
   const referenceUrl = globalUrl + "/api/v1/hooks/";
   const alert = useAlert()
+
+	const params = useParams();
+	var props = JSON.parse(JSON.stringify(defaultprops))
+	props.match = {}
+	props.match.params = params
+
   const green = "#86c142";
   const yellow = "#FECC00";
   //const theme = useTheme();
@@ -12636,7 +12642,9 @@ const AngularWorkflow = (props) => {
 
   return (
     <div>
-      <Prompt when={!lastSaved} message={unloadText} />
+      {/* Removed due to missing react router features
+				<Prompt when={!lastSaved} message={unloadText} />
+			*/}
       {loadedCheck}
     </div>
   );

frontend/src/views/AppCreator.jsx

@@ -37,7 +37,7 @@ import {
 } from "@material-ui/icons";
 
 import { v4 as uuidv4 } from "uuid";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import YAML from "yaml";
 import ChipInput from "material-ui-chip-input";
 import { useAlert } from "react-alert";
@@ -220,12 +220,17 @@ const parseCurl = (s) => {
 };
 
 // Should be different if logged in :|
-const AppCreator = (props) => {
-  const { globalUrl, isLoaded } = props;
+const AppCreator = (defaultprops) => {
+  const { globalUrl, isLoaded } = defaultprops;
   const classes = useStyles();
   const alert = useAlert();
   const theme = useTheme();
 
+	const params = useParams();
+	var props = JSON.parse(JSON.stringify(defaultprops))
+	props.match = {}
+	props.match.params = params
+
   var upload = "";
   const increaseAmount = 50;
   const actionNonBodyRequest = ["GET", "HEAD", "DELETE", "CONNECT"];

frontend/src/views/Docs.jsx

@@ -1,9 +1,9 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { useTheme } from "@material-ui/core/styles";
 import ReactMarkdown from "react-markdown";
 import { BrowserView, MobileView } from "react-device-detect";
-import { Link } from "react-router-dom";
+import { useParams, useNavigate, Link } from "react-router-dom";
 
 import {
   Tooltip,
@@ -39,10 +39,26 @@ const innerHrefStyle = {
   textDecoration: "none",
 };
 
-const Docs = (props) => {
-  const { globalUrl, selectedDoc, serverside, isMobile } = props;
+const Docs = (defaultprops) => {
+  const { globalUrl, selectedDoc, serverside, isMobile } = defaultprops;
 
+	let navigate = useNavigate();
   const theme = useTheme();
+
+	// Quickfix for react router 5 -> 6 
+	const params = useParams();
+	var props = JSON.parse(JSON.stringify(defaultprops))
+	props.match = {}
+	props.match.params = params
+
+	useEffect(() => {
+		if (params["key"] === undefined) {
+			navigate("/docs/about")
+			return
+		}
+	}, [])
+	//console.log("PARAMS: ", params)
+
   const [mobile, setMobile] = useState(isMobile === true ? true : false);
   const [data, setData] = useState("");
   const [firstrequest, setFirstrequest] = useState(true);
@@ -201,7 +217,15 @@ const Docs = (props) => {
     } else {
       if (!serverside) {
         fetchDocList();
-        fetchDocs(props.match.params.key);
+
+				console.log("PROPS: ", props)
+				//const propkey = props.match.params.key
+				//if (propkey === undefined) {
+				//	navigate("/docs/about")
+				//	return null
+				//}
+
+        fetchDocs(props.match.params.key)
       }
     }
   }
@@ -410,6 +434,7 @@ const Docs = (props) => {
                 {selectedMeta.contributors.slice(0, 7).map((data, index) => {
                   return (
                     <a
+											key={index}
                       rel="noopener noreferrer"
                       target="_blank"
                       href={data.url}

frontend/src/views/Introduction.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useTheme } from "@material-ui/core/styles";
+import { Link, useParams } from "react-router-dom";
 
 import Grid from "@material-ui/core/Grid";
 import Card from "@material-ui/core/Card";
@@ -9,9 +10,15 @@ import CardHeader from "@material-ui/core/CardHeader";
 import Typography from "@material-ui/core/Typography";
 import Button from "@material-ui/core/Button";
 
-const Workflows = (props) => {
-  const { globalUrl, isLoggedIn, isLoaded } = props;
+const Workflows = (defaultprops) => {
+  const { globalUrl, isLoggedIn, isLoaded } = defaultprops;
+
   const theme = useTheme();
+	const params = useParams();
+	var props = JSON.parse(JSON.stringify(defaultprops))
+	props.match = {}
+	props.match.params = params
+
   const [curView, setCurView] = useState(0);
   const [firstrequest, setFirstrequest] = useState(true);
   const [selectedItems, setSelectedItems] = useState([]);

frontend/src/views/RegisterLink.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
 
 import Paper from "@material-ui/core/Paper";
 
@@ -21,8 +22,13 @@ const bodyDivStyle = {
 // FIXME - add fetch for data fields
 // FIXME - remove tmpdata
 // FIXME: Use isLoggedIn :)
-const Settings = (props) => {
-  const { globalUrl, isLoaded, surfaceColor } = props;
+const Settings = (defaultprops) => {
+  const { globalUrl, isLoaded, surfaceColor } = defaultprops;
+
+	const params = useParams();
+	var props = JSON.parse(JSON.stringify(defaultprops))
+	props.match = {}
+	props.match.params = params
 
   const [firstRequest, setFirstRequest] = useState(true);
   const boxStyle = {

frontend/src/views/Workflows.jsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useContext } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import { useTheme } from "@material-ui/core/styles";
+import { Navigate } from "react-router-dom";
+//import { Redirect } from "react-router-dom";
 
 import SecurityFramework from '../components/SecurityFramework.jsx';
 import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
@@ -2536,10 +2538,17 @@ const Workflows = (props) => {
 		  );
 		}
 
-	//import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
   const WorkflowView = () => {
-		/*
     if (workflows.length === 0) {
+			/*
+			console.log("USER: ", userdata)
+			console.log("PROPS: ", props)
+			if (userdata.tutorials !== undefined && userdata.tutorials !== null && !userdata.tutorials.includes("getting-started")) {
+				//return <Redirect to='/getting-started' />;
+				return <Navigate to="/getting-started" replace />;
+			}
+			*/
+		
       return (
         <div style={emptyWorkflowStyle}>
           <Paper style={boxStyle}>
@@ -2585,9 +2594,9 @@ const Workflows = (props) => {
             </div>
           </Paper>
         </div>
-      );
+      )
+
     }
-		*/
 
 		var workflowDelay = -150
 		var appDelay = -75