Merge branch 'dev' into feature/ellie

Author: elliesimens

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

@@ -21,20 +21,22 @@ type CounterAction =
   | { type: 'DECREMENT' }
   | { type: 'DOUBLE' }
   | { type: 'RESET' }
-  | { type: 'ADD'; payload: number };
+  | { type: 'ADD'; payload: number }
+  | { type: 'SET_STATE'; payload: CounterState };
 
-// New secondary reducer state and action types
 type SecondaryCounterState = {
   count: number;
   multiplier: number;
   lastOperation: string;
+  history: number[];
 };
 
 type SecondaryCounterAction =
   | { type: 'MULTIPLY' }
   | { type: 'DIVIDE' }
   | { type: 'SET_MULTIPLIER'; payload: number }
-  | { type: 'RESET' };
+  | { type: 'RESET' }
+  | { type: 'SET_STATE'; payload: SecondaryCounterState };
 
 function counterReducer(state: CounterState, action: CounterAction, step: number): CounterState {
   switch (action.type) {
@@ -72,12 +74,16 @@ function counterReducer(state: CounterState, action: CounterAction, step: number
         history: [...state.history, state.count + action.payload],
         lastAction: `ADD ${action.payload}`,
       };
+    case 'SET_STATE':
+      return {
+        ...action.payload,
+        lastAction: 'SET_STATE',
+      };
     default:
       return state;
   }
 }
 
-// New secondary reducer function
 function secondaryCounterReducer(
   state: SecondaryCounterState,
   action: SecondaryCounterAction,
@@ -87,26 +93,35 @@ function secondaryCounterReducer(
       return {
         ...state,
         count: state.count * state.multiplier,
+        history: [...state.history, state.count * state.multiplier],
         lastOperation: `Multiplied by ${state.multiplier}`,
       };
     case 'DIVIDE':
       return {
         ...state,
         count: state.count / state.multiplier,
+        history: [...state.history, state.count / state.multiplier],
         lastOperation: `Divided by ${state.multiplier}`,
       };
     case 'SET_MULTIPLIER':
       return {
         ...state,
         multiplier: action.payload,
+        history: [...state.history],
         lastOperation: `Set multiplier to ${action.payload}`,
       };
     case 'RESET':
       return {
         count: 0,
         multiplier: 2,
+        history: [],
         lastOperation: 'Reset',
       };
+    case 'SET_STATE':
+      return {
+        ...action.payload,
+        lastOperation: 'SET_STATE',
+      };
     default:
       return state;
   }
@@ -125,7 +140,6 @@ function FunctionalReducerCounter({
   const [lastClickTime, setLastClickTime] = useState<Date | null>(null);
   const [averageTimeBetweenClicks, setAverageTimeBetweenClicks] = useState<number>(0);
 
-  // First reducer
   const [state, dispatch] = useReducer(
     (state: CounterState, action: CounterAction) => counterReducer(state, action, step),
     {
@@ -135,10 +149,10 @@ function FunctionalReducerCounter({
     },
   );
 
-  // Second reducer
   const [secondaryState, secondaryDispatch] = useReducer(secondaryCounterReducer, {
     count: initialCount,
     multiplier: 2,
+    history: [],
     lastOperation: 'none',
   });
 
@@ -152,7 +166,6 @@ function FunctionalReducerCounter({
     >
       <h2>{title}</h2>
 
-      {/* Primary Counter Section */}
       <div className='counter-value'>
         <h3>Primary Counter: {state.count}</h3>
       </div>
@@ -166,7 +179,6 @@ function FunctionalReducerCounter({
       </div>
 
       <div className='counter-info'>
-        <h4>Last Action: {state.lastAction}</h4>
         <h4>History:</h4>
         <div className='history-list'>
           {state.history.map((value, index) => (
@@ -178,7 +190,6 @@ function FunctionalReducerCounter({
         </div>
       </div>
 
-      {/* Secondary Counter Section */}
       <div
         className='secondary-counter'
         style={{ marginTop: '2rem', borderTop: '1px solid #ccc', paddingTop: '1rem' }}
@@ -201,8 +212,16 @@ function FunctionalReducerCounter({
           <button onClick={() => secondaryDispatch({ type: 'RESET' })}>Reset</button>
         </div>
         <div className='counter-info'>
-          <h4>Last Operation: {secondaryState.lastOperation}</h4>
           <h4>Current Multiplier: {secondaryState.multiplier}</h4>
+          <h4>History:</h4>
+          <div className='history-list'>
+            {secondaryState.history.map((value, index) => (
+              <span key={index}>
+                {value}
+                {index < secondaryState.history.length - 1 ? ' → ' : ''}
+              </span>
+            ))}
+          </div>
         </div>
       </div>
     </div>

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

@@ -80,7 +80,6 @@ function FunctionalStateCounter({
       </div>
 
       <div className='counter-info'>
-        <h4>Last Action: {lastAction}</h4>
         <h4>History:</h4>
         <div className='history-list'>
           {history.map((value, index) => (

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/ReducerCounter.tsx

@@ -123,7 +123,6 @@ class ReducerCounter extends Component<CounterProps, CounterState> {
         </div>
 
         <div className='counter-info'>
-          <h4>Last Action: {this.state.lastAction}</h4>
           <h4>History:</h4>
           <div className='history-list'>
             {this.state.history.map((value, index) => (

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);