workspace visualizer by ID lookup

client/src/App.jsx

@@ -25,6 +25,7 @@ import ConfirmEmail from './views/TeacherLogin/ConfirmEmail';
 import { getConfirmed } from './Utils/AuthRequests';
 import MentorRegister from './views/Mentor/Dashboard/MentorRegister';
 import AddMentor from './views/Mentor/Dashboard/AddMentor';
+import CodeViz from './views/Researcher/viz';
 
 export function confirmRedirect () {
   const navigate = useNavigate();
@@ -57,6 +58,8 @@ const App = () => {
           <MentorRegister /></PrivateRoute>} />
         <Route path='/add-mentor' element={<PrivateRoute>
           <AddMentor /></PrivateRoute>} />
+        <Route path='/viz' element={<PrivateRoute>
+          <CodeViz /></PrivateRoute>} />
         <Route
           path='/report'
           element={

client/src/views/Researcher/DayLevelReportView.jsx

@@ -28,7 +28,7 @@ const DayLevelReportView = () => {
       .catch(error => {
         console.log(error)
       });
-      workspaceRef.current.dispose();
+      //workspaceRef.current.dispose();
       setSession(session.data);
 
       const fetchedStudents = session.data.students[0].name;

client/src/views/Researcher/viz.jsx

@@ -0,0 +1,97 @@
+import { message } from 'antd';
+import React, { useState, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import NavBar from '../../components/NavBar/NavBar';
+import { getArduinoXML } from '../../components/DayPanels/Utils/helpers';
+import { getSession } from '../../Utils/requests';
+import './viz.less';
+//import { findSuperAdmins } from '../../../../server/extensions/users-permissions/controllers/Auth';
+
+
+const useFormInput = (initialValue) => {
+  const [value, setValue] = useState(initialValue);
+
+  const handleChange = (e) => {
+    setValue(e.target.value);
+  };
+  return {
+    value,
+    onChange: handleChange,
+  };
+};
+
+export default function CodeViz() {
+  const rID = useFormInput('');
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+  const workspaceRef = useRef(null);
+  const superEmails = [];
+
+  const handleLogin = () => {
+    setLoading(true);
+    //console.log(rID)
+    getSession(parseInt(rID.value))
+      .then((response) => {
+        //console.log(response)
+        if (workspaceRef.current) {
+            workspaceRef.current.dispose()
+        }
+        workspaceRef.current = window.Blockly.inject('blockly-box', {
+            toolbox: document.getElementById('toolbox'),
+            readOnly: true,
+          });
+
+
+
+        if (response.data === '') {
+          workspaceRef.current.dispose();  
+          message.error('No workspace associated with ID');
+          setLoading(false);  
+        }
+        else {
+            setLoading(false);
+            console.log(getArduinoXML(response.data.saves[response.data.saves.length - 1].workspace, workspaceRef.current));
+        }
+
+
+      })
+      .catch((error) => {
+        message.error('Please enter a valid workspace ID');
+        setLoading(false);
+        workspaceRef.current.dispose();
+
+      });
+  };
+
+  return (
+    <div className='container nav-padding'>
+      <NavBar />
+      <div id='content-wrapper'>
+        <form
+          id='box'
+          onKeyPress={(e) => {
+            if (e.key === 'Enter') handleLogin();
+          }}
+        >
+          <div id='box-title'>Find Workspace</div>
+          <input
+            type='email'
+            {...rID}
+            placeholder='ID'
+            autoComplete='username'
+          />
+          <input
+            type='button'
+            value={loading ? 'Loading...' : 'Find Workspace'}
+            onClick={handleLogin}
+            disabled={loading}
+          />
+
+
+
+        </form>
+      </div>
+      <div id='blockly-box'></div>
+    </div>
+  );
+}