Authed patterns/aw/vadx panel discovery 1

src/applications/_mock-form-ae-design-patterns/hooks/useLocalStorage.js

@@ -1,20 +1,36 @@
-import React from 'react';
+import { useState, useEffect } from 'react';
 
-export const useLocalStorage = (storageKey, fallbackState) => {
-  const [value, setValue] = React.useState(
-    JSON.parse(localStorage.getItem(storageKey)) ?? fallbackState,
-  );
+/**
+ * useLocalStorage is a hook that provides a way to store and retrieve values from localStorage
+ * @param {string} key - The key to store the value under
+ * @param {any} defaultValue - The default value to use if the key does not exist
+ * @returns {array} An array with [value, setValue, clearValue]
+ */
+export const useLocalStorage = (key, defaultValue) => {
+  const [value, setValue] = useState(() => {
+    let currentValue;
+
+    try {
+      currentValue = JSON.parse(
+        localStorage.getItem(key) || String(defaultValue),
+      );
+    } catch (error) {
+      currentValue = defaultValue;
+    }
 
-  React.useEffect(
+    return currentValue;
+  });
+
+  useEffect(
     () => {
-      if (value === '') {
-        localStorage.removeItem(storageKey);
-        return;
-      }
-      localStorage.setItem(storageKey, JSON.stringify(value));
+      localStorage.setItem(key, JSON.stringify(value));
     },
-    [value, storageKey],
+    [value, key],
   );
 
-  return [value, setValue];
+  const clearValue = () => {
+    localStorage.removeItem(key);
+  };
+
+  return [value, setValue, clearValue];
 };

src/applications/_mock-form-ae-design-patterns/hooks/useMockedLogin.js

@@ -1,32 +1,47 @@
 import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { teardownProfileSession } from 'platform/user/profile/utilities';
 import { updateLoggedInStatus } from 'platform/user/authentication/actions';
 
 import { useLocalStorage } from './useLocalStorage';
 
-export const useMockedLogin = location => {
+export const useMockedLogin = () => {
   const [, setHasSession] = useLocalStorage('hasSession', '');
   const dispatch = useDispatch();
 
-  useEffect(
-    () => {
-      if (location?.query?.loggedIn === 'true') {
-        setHasSession('true');
-        dispatch(updateLoggedInStatus(true));
-      }
-
-      if (location?.query?.loggedIn === 'false') {
-        teardownProfileSession();
-        dispatch(updateLoggedInStatus(false));
-        setHasSession('');
-      }
-
-      // having the pollTimeout present triggers some api calls to be made locally and in codespaces
-      if (!window?.VetsGov?.pollTimeout) {
-        window.VetsGov.pollTimeout = 500;
-      }
-    },
-    [setHasSession, dispatch, location],
-  );
+  const logIn = () => {
+    setHasSession('true');
+    dispatch(updateLoggedInStatus(true));
+  };
+
+  const logOut = () => {
+    teardownProfileSession();
+    dispatch(updateLoggedInStatus(false));
+    setHasSession('');
+  };
+
+  const useLoggedInQuery = location => {
+    useEffect(
+      () => {
+        if (location?.query?.loggedIn === 'true') {
+          setHasSession('true');
+          dispatch(updateLoggedInStatus(true));
+        }
+
+        if (location?.query?.loggedIn === 'false') {
+          teardownProfileSession();
+          dispatch(updateLoggedInStatus(false));
+          setHasSession('');
+        }
+
+        // having the pollTimeout present triggers some api calls to be made locally and in codespaces
+        if (!window?.VetsGov?.pollTimeout) {
+          window.VetsGov.pollTimeout = 500;
+        }
+      },
+      [location],
+    );
+  };
+
+  return { logIn, logOut, useLoggedInQuery };
 };

src/applications/_mock-form-ae-design-patterns/mocks/endpoints/feature-toggles/index.js

@@ -1,18 +1,18 @@
 const { snakeCase } = require('lodash');
 
 // add and remove feature toggles here by name, but generally keep all values as false
 // instead use generateFeatureToggles in server.js to set the toggle values
 const profileToggles = {
+  aedpVADX: false,
   profileUseExperimental: false,
-  coeAccess: true,
+  coeAccess: false,
   showEduBenefits1990Wizard: true,
   showEduBenefits0994Wizard: true,
   showEduBenefits1995Wizard: true,
   showEduBenefits5495Wizard: true,
   showEduBenefits1990nWizard: true,
   showEduBenefits5490Wizard: true,
   showEduBenefits1990eWizard: true,
-  updated: '2024-10-08T05:02:34.754Z',
 };
 
 const makeAllTogglesTrue = toggles => {

src/applications/_mock-form-ae-design-patterns/mocks/server.js

@@ -1,4 +1,4 @@
 const delay = require('mocker-api/lib/delay');
 
 const address = require('./endpoints/address');
 const emailAddress = require('./endpoints/email-addresses');
@@ -46,8 +46,9 @@
       () =>
         res.json(
           generateFeatureToggles({
-            profileUseExperimental: true,
+            aedpVADX: true,
             coeAccess: true,
+            profileUseExperimental: true,
           }),
         ),
       secondsOfDelay,

src/applications/_mock-form-ae-design-patterns/reducers/index.js

@@ -1,4 +1,4 @@
 import {
   createSaveInProgressFormReducer,
   createSaveInProgressInitialState,
 } from 'platform/forms/save-in-progress/reducers';
@@ -9,6 +9,8 @@
   SET_NEW_FORM_CONFIG,
   UPDATE_SAVE_TO_PROFILE,
 } from '../actions/actions';
+
+// VADX reducer for app route (WIP)
 import { vadxReducer } from '../slice';
 
 const reducer = (state = { saveToProfile: null }, action) => {

src/applications/_mock-form-ae-design-patterns/routes.jsx

@@ -1,33 +1,50 @@
-import React from 'react';
+import React, { lazy } from 'react';
 import { createRoutesWithSaveInProgress } from 'platform/forms/save-in-progress/helpers';
+import { Toggler } from 'platform/utilities/feature-toggles';
 
 import greenFormConfig from './patterns/pattern1/TaskGreen/config/form';
 import yellowFormConfig from './patterns/pattern1/TaskYellow/config/form';
 import purpleFormConfig from './patterns/pattern1/TaskPurple/config/form';
 import ezrFormConfig from './patterns/pattern1/ezr/config/form';
 
 import grayTaskConfig from './patterns/pattern2/TaskGray/form/config/form';
-import CoeApp from './patterns/pattern2/TaskGray/form/containers/App';
-import Form1990Entry from './patterns/pattern2/TaskOrange/Form1990App';
+
 import blueFormConfig from './patterns/pattern2/TaskBlue/config/form';
 import { formConfigForOrangeTask } from './patterns/pattern2/TaskOrange/config/form';
 
-import App from './App';
 import ReviewPage from './patterns/pattern2/post-study/ReviewPage';
 
 import { LandingPage } from './shared/components/pages/LandingPage';
-import DevPanel from './dev/client/DevPanel';
+
 import { PatternConfigProvider } from './shared/context/PatternConfigContext';
-import { getPatterns, getTabs } from './utils/data/tabs';
+
+const App = lazy(() => import('./App'));
+const CoeApp = lazy(() =>
+  import('./patterns/pattern2/TaskGray/form/containers/App'),
+);
+const Form1990Entry = lazy(() =>
+  import('./patterns/pattern2/TaskOrange/Form1990App'),
+);
+
+import { plugin } from './shared/components/VADXPlugin';
+
+const DevPanel = lazy(() => import('./vadx/app/pages/DevPanel'));
+
+import { VADX } from './vadx';
+
+// Higher order component to wrap routes in the PatternConfigProvider and other common components
+const routeHoc = Component => props => (
+  <PatternConfigProvider {...props}>
+    <VADX plugin={plugin} featureToggleName={Toggler.TOGGLE_NAMES.aedpVADX}>
+      <Component {...props} />
+    </VADX>
+  </PatternConfigProvider>
+);
 
 const pattern1Routes = [
   {
     path: '/1/task-green',
-    component: props => (
-      <PatternConfigProvider {...props}>
-        <App {...props} />
-      </PatternConfigProvider>
-    ),
+    component: routeHoc(App),
     indexRoute: {
       onEnter: (nextState, replace) =>
         replace('/1/task-green/introduction?loggedIn=false'),
@@ -36,11 +53,7 @@
   },
   {
     path: '/1/task-yellow',
-    component: props => (
-      <PatternConfigProvider {...props}>
-        <App {...props} />
-      </PatternConfigProvider>
-    ),
+    component: routeHoc(App),
     indexRoute: {
       onEnter: (nextState, replace) =>
         replace('/1/task-yellow/introduction?loggedIn=true'),
@@ -49,11 +62,7 @@
   },
   {
     path: '/1/task-purple',
-    component: props => (
-      <PatternConfigProvider {...props}>
-        <App {...props} />
-      </PatternConfigProvider>
-    ),
+    component: routeHoc(App),
     indexRoute: {
       onEnter: (nextState, replace) =>
         replace('/1/task-purple/introduction?loggedIn=true'),
@@ -62,11 +71,7 @@
   },
   {
     path: '/1/ezr',
-    component: props => (
-      <PatternConfigProvider {...props}>
-        <App {...props} />
-      </PatternConfigProvider>
-    ),
+    component: routeHoc(App),
     indexRoute: {
       onEnter: (nextState, replace) =>
         replace('/1/ezr/introduction?loggedIn=true'),
@@ -78,11 +83,7 @@
 const pattern2Routes = [
   {
     path: '/2/task-gray',
-    component: props => (
-      <PatternConfigProvider {...props}>
-        <CoeApp {...props} />
-      </PatternConfigProvider>
-    ),
+    component: routeHoc(CoeApp),
     indexRoute: {
       onEnter: (nextState, replace) =>
         replace('/2/task-gray/introduction?loggedIn=true'),
@@ -91,11 +92,7 @@
   },
   {
     path: '/2/task-orange',
-    component: props => (
-      <PatternConfigProvider {...props}>
-        <Form1990Entry {...props} />
-      </PatternConfigProvider>
-    ),
+    component: routeHoc(Form1990Entry),
     indexRoute: {
       onEnter: (nextState, replace) =>
         replace('/2/task-orange/introduction?loggedIn=false'),
@@ -104,11 +101,7 @@
   },
   {
     path: '/2/task-blue',
-    component: props => (
-      <PatternConfigProvider {...props}>
-        <App {...props} />
-      </PatternConfigProvider>
-    ),
+    component: routeHoc(App),
     indexRoute: {
       onEnter: (nextState, replace) =>
         replace('/2/task-blue/introduction?loggedIn=true'),
@@ -117,11 +110,7 @@
   },
   {
     path: '/2/post-study',
-    component: props => (
-      <PatternConfigProvider {...props}>
-        <ReviewPage {...props} />,
-      </PatternConfigProvider>
-    ),
+    component: routeHoc(ReviewPage),
   },
 ];
 
@@ -130,27 +119,11 @@
   ...pattern2Routes,
   {
     path: '/dev',
-    component: props => (
-      <div className="vads-l-grid-container--full">
-        <DevPanel {...props} />
-      </div>
-    ),
+    component: routeHoc(DevPanel),
   },
   {
     path: '*',
-    component: props => (
-      <div className="vads-l-grid-container">
-        <div className="vads-l-row">
-          <div className="usa-width-two-thirds medium-8 columns">
-            <LandingPage
-              {...props}
-              getTabs={getTabs}
-              getPatterns={getPatterns}
-            />
-          </div>
-        </div>
-      </div>
-    ),
+    component: routeHoc(LandingPage),
   },
 ];
 

src/applications/_mock-form-ae-design-patterns/shared/components/TaskTabs.jsx

@@ -1,24 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { tabsConfig } from '../../utils/data/tabs';
 import { getStylesForTab } from '../../utils/helpers/tabs';
 
+const getActiveTabClass = (activeTab, tab) => {
+  const isActive = activeTab && activeTab.path === tab.path;
+
+  return `${isActive ? 'vads-u-font-weight--bold' : ''}`;
+};
+
 export const TaskTabs = ({ location, formConfig }) => {
   // get the pattern number from the URL
   const patternNumber = location.pathname.match(/^\/(\d+)\//)?.[1];
   const patternKey = `pattern${patternNumber}`;
-  const tabs = tabsConfig[patternKey];
+  const tabs = tabsConfig?.[patternKey];
+
+  // if there are no tabs for the current pattern/location, don't render the component
+  if (!tabs) {
+    return null;
+  }
 
   const activeTab = tabs.find(
     tab => location.pathname.includes(tab.path) && tab.path !== '/',
   );
 
-  const getActiveTabClass = tab => {
-    const isActive = activeTab && activeTab.path === tab.path;
-
-    return `${isActive ? 'vads-u-font-weight--bold' : ''}`;
-  };
-
   return (
     <nav aria-label="Research study task navigation">
       <ul
@@ -40,6 +45,7 @@
           <li
             key={tab.name}
             className={`vads-u-text-align--center vads-u-margin-bottom--0 ${getActiveTabClass(
+              activeTab,
               tab,
             )}`}
             style={getStylesForTab(tab)}