working on adding button for ax functions

Author: jguerrero35

src/app/components/StateRoute/Ax.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { JSONTree } from 'react-json-tree'; // React JSON Viewer Component;
-import { setCurrentTabInApp } from '../../slices/mainSlice';
+import { setCurrentTabInApp, toggleAxTree } from '../../slices/mainSlice';
 import { useDispatch } from 'react-redux';
 
 const theme = {
@@ -34,22 +34,40 @@ const AxTree = (props) => {
 
   const dispatch = useDispatch();
 
-  useEffect(() => {
-    dispatch(setCurrentTabInApp('AxTree')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'tree' to facilitate render.
-  }, []);
+  let AccessibilityHasBeenDisabled = true;
+  const enableAxTreeButton =  () => {
+    dispatch(toggleAxTree('toggleAxRecord'));
+    dispatch(setCurrentTabInApp('AxTree'));
+    AccessibilityHasBeenDisabled = false;
+  }
+
 
-  //removing/adding snapshot at beginning of return statement didn't change anything
   return (
-    <>
-      {' '}
-      {snapshot && (
+    <div>
+      {
+        AccessibilityHasBeenDisabled ? <button onClick={enableAxTreeButton}>Click Here to Enable Accessibility</button> : 
         <JSONTree
-          data={axSnapshots[currLocation.index]}
-          shouldExpandNodeInitially={() => true}
-          theme={theme}
-        />
-      )}
-    </>
-  );
+         data={axSnapshots[currLocation.index]}
+           // shouldExpandNodeInitially={() => false}
+           theme={theme}
+         /> 
+      }
+    </div>
+  )
+
+  // return (
+  //   <div>
+      
+  //     <p>A Note to Developers: Reactime is using the Chrome Debugging API in order to grab the Accessibility Tree. Enabling this option will allow you to record AxSnapshots, but will result in the Chrome browser notifying you that the Chrome Debugger has started.</p>
+  //     {<button onClick={enableAxTreeButton}>Click Here to Enable Accessibility</button>  
+  //       // <JSONTree
+  //       //   data={axSnapshots[currLocation.index]}
+  //       //   // shouldExpandNodeInitially={() => false}
+  //       //   theme={theme}
+  //       // /> : null
+  //     }
+
+  //   </div>
+  // );
 };
 export default AxTree;

src/app/slices/mainSlice.ts

@@ -1,6 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { InitialState } from '../FrontendTypes';
 import _ from 'lodash';
+import Action from '../components/Actions/Action';
 
 const initialState: InitialState = {
   // we initialize what our initialState is here
@@ -489,6 +490,16 @@ export const mainSlice = createSlice({
       state.connectRequested = false;
       state.connectionStatus = true;
     },
+
+    toggleAxTree: (state, action) => {
+      const { port, payload, tabs, currentTab } = state;
+
+      port.postMessage({
+        action: 'toggleAxRecord',
+        payload: action.payload,
+        tabId: currentTab,
+      })
+    }
   },
 });
 
@@ -523,4 +534,5 @@ export const {
   disconnected,
   startReconnect,
   endConnect,
+  toggleAxTree,
 } = mainSlice.actions;