added useContext to demo app

Author: garrettlchow

demo-app/src/client/Components/Home.tsx

@@ -1,22 +1,74 @@
 import React from 'react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useAuth } from '../../contexts/AuthContext';
 
 function Home(): JSX.Element {
+  const { theme } = useTheme();
+  const { user, login, logout } = useAuth();
+
   return (
-    <div className='about'>
+    <div
+      className='about'
+      style={{
+        backgroundColor: theme.backgroundColor,
+        color: theme.textColor,
+      }}
+    >
       <h2>REACTIME - DEMO APP</h2>
+
+      {user ? (
+        <div>
+          <p>Welcome, {user.username}!</p>
+          <button
+            onClick={logout}
+            style={{
+              backgroundColor: theme.primaryColor,
+              color: theme.backgroundColor,
+              padding: '8px 16px',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+            }}
+          >
+            Logout
+          </button>
+        </div>
+      ) : (
+        <div>
+          <p>Please log in:</p>
+          <button
+            onClick={() => login('testUser')}
+            style={{
+              backgroundColor: theme.primaryColor,
+              color: theme.backgroundColor,
+              padding: '8px 16px',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+            }}
+          >
+            Login as Test User
+          </button>
+          <button
+            onClick={() => login('admin')}
+            style={{
+              backgroundColor: theme.secondaryColor,
+              color: theme.backgroundColor,
+              padding: '8px 16px',
+              border: 'none',
+              borderRadius: '4px',
+              marginLeft: '8px',
+              cursor: 'pointer',
+            }}
+          >
+            Login as Admin
+          </button>
+        </div>
+      )}
+
       <p>
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-      </p>
-      <p>
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
-        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        ut labore et dolore magna aliqua..."
       </p>
     </div>
   );

demo-app/src/client/Components/ThemeToggle.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useTheme } from '../../contexts/ThemeContext';
+
+const ThemeToggle = (): JSX.Element => {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <button
+      onClick={toggleTheme}
+      style={{
+        backgroundColor: theme.primaryColor,
+        color: theme.backgroundColor,
+        padding: '8px 16px',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        position: 'fixed',
+        top: '10px',
+        right: '10px',
+      }}
+    >
+      Toggle Theme
+    </button>
+  );
+};
+
+export default ThemeToggle;

demo-app/src/client/Router.tsx

@@ -1,17 +1,21 @@
+// src/client/Router.tsx
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { ThemeProvider } from '../contexts/ThemeContext';
+import { AuthProvider } from '../contexts/AuthContext';
 import Nav from './Components/Nav';
 import Board from './Components/Board';
 import Home from './Components/Home';
 import Buttons from './Components/Buttons';
 import ReducerCounter from './Components/ReducerCounter';
 import FunctionalReducerCounter from './Components/FunctionalReducerCounter';
-// import ButtonsWithMoreHooks from './Components/ButtonsWithMoreHooks';
 import FunctionalStateCounter from './Components/FunctionalStateCounter';
+import ThemeToggle from './Components/ThemeToggle';
 
 const domNode = document.getElementById('root');
+if (!domNode) throw new Error('Root element not found');
 const root = createRoot(domNode);
 
 const CounterPage = () => (
@@ -41,21 +45,18 @@ const CounterPage = () => (
 );
 
 root.render(
-  <BrowserRouter key='BrowserRouter'>
-    <Nav key='Nav' />
-    <Routes key='Routes'>
-      <Route path='/' element={<Home key='Home' />} />
-      <Route path='/tictactoe' element={<Board key='Board' />} />
-      {/* Switch between the two "buttons" paths below via commenting/uncommenting to alternate between
-          the public facing Buttons page and the fiber node hooks research page "ButtonsWithMoreHooks" */}
-      <Route path='/buttons' element={<Buttons key='Buttons' />} />
-      {/* <Route path='/buttons' element={<ButtonsWithMoreHooks key='ButtonsWithMoreHooks'/>} /> */}
-      <Route path='/reducer' element={<CounterPage key='CounterPage' />} />
-    </Routes>
-  </BrowserRouter>,
-
-  /** Comment out everything above this and uncomment the line below as ButtonsWithMoreHooks import statement to skip all of the
-   *  router components and make fiber node hooks research easier */
-
-  // <ButtonsWithMoreHooks/>
+  <AuthProvider>
+    <ThemeProvider>
+      <BrowserRouter>
+        <ThemeToggle />
+        <Nav />
+        <Routes>
+          <Route path='/' element={<Home />} />
+          <Route path='/tictactoe' element={<Board />} />
+          <Route path='/buttons' element={<Buttons />} />
+          <Route path='/reducer' element={<CounterPage />} />
+        </Routes>
+      </BrowserRouter>
+    </ThemeProvider>
+  </AuthProvider>,
 );

demo-app/src/contexts/AuthContext.tsx

@@ -0,0 +1,37 @@
+import React, { createContext, useState, useContext } from 'react';
+
+type User = {
+  username: string;
+  isAdmin: boolean;
+} | null;
+
+type AuthContextType = {
+  user: User;
+  login: (username: string) => void;
+  logout: () => void;
+};
+
+export const AuthContext = createContext<AuthContextType>({
+  user: null,
+  login: () => {},
+  logout: () => {},
+});
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [user, setUser] = useState<User>(null);
+
+  const login = (username: string) => {
+    setUser({
+      username,
+      isAdmin: username === 'admin',
+    });
+  };
+
+  const logout = () => {
+    setUser(null);
+  };
+
+  return <AuthContext.Provider value={{ user, login, logout }}>{children}</AuthContext.Provider>;
+};
+
+export const useAuth = () => useContext(AuthContext);

demo-app/src/contexts/ThemeContext.tsx

@@ -0,0 +1,49 @@
+import React, { createContext, useState, useContext } from 'react';
+
+type Theme = {
+  backgroundColor: string;
+  textColor: string;
+  primaryColor: string;
+  secondaryColor: string;
+};
+
+type ThemeContextType = {
+  theme: Theme;
+  toggleTheme: () => void;
+};
+
+const defaultTheme: Theme = {
+  backgroundColor: '#ffffff',
+  textColor: '#330002',
+  primaryColor: '#f00008',
+  secondaryColor: '#62d6fb',
+};
+
+const darkTheme: Theme = {
+  backgroundColor: '#222222',
+  textColor: '#ffffff',
+  primaryColor: '#ff6569',
+  secondaryColor: '#6288fb',
+};
+
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: defaultTheme,
+  toggleTheme: () => {},
+});
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [isDark, setIsDark] = useState(false);
+
+  const toggleTheme = () => {
+    setIsDark(!isDark);
+  };
+
+  const value = {
+    theme: isDark ? darkTheme : defaultTheme,
+    toggleTheme,
+  };
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
+
+export const useTheme = () => useContext(ThemeContext);

src/app/components/StateRoute/ComponentMap/ToolTipDataDisplay.tsx

@@ -37,7 +37,6 @@ const ToolTipDataDisplay = ({ containerName, dataObj }) => {
     return reducerStates.reduce((acc, reducer) => {
       acc[reducer.hookName || 'Reducer'] = {
         state: reducer.state,
-        lastAction: reducer.lastAction,
       };
       return acc;
     }, {});

src/backend/controllers/createTree.ts

@@ -243,6 +243,20 @@ export default function createTree(currentFiberNode: Fiber): Tree {
       }
     }
 
+    if (tag === ContextProvider) {
+      // Extract context information
+      console.log('ele', elementType);
+      console.log('memo', memoizedState);
+      const contextData = {
+        displayName: elementType._context?.displayName || 'Anonymous Context',
+        currentValue: memoizedState?.deps?.[0]?._currentValue || memoizedProps?.value,
+        defaultValue: elementType._context?._defaultValue,
+        consumers: [], // how do we track consumers?
+      };
+
+      componentData.context = contextData;
+    }
+
     // -----------------ADD COMPONENT DATA TO THE OUTPUT TREE-------------------
 
     /**