Merge pull request #5098 from OneCommunityGlobal/Diya_UserStateFeature

Diya 🔥 feat: Enhanced existing User State Feature

Author: one-community

src/components/PermissionsManagement/__tests__/RolePermissions.test.jsx

@@ -206,7 +206,8 @@ describe('RolePermissions component', () => {
     const history = createMemoryHistory();
     renderComponent(store, history, roleName, roleId);
 
-    fireEvent.click(screen.getByTestId('edit-role-icon'));
+    const editIcon = await screen.findByTestId('edit-role-icon');
+    fireEvent.click(editIcon);
 
     const dialog = screen.getByRole('dialog');
 

src/components/TeamMemberTasks/TeamMemberTask.jsx

@@ -8,7 +8,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader, Progress, Table } from 'reactstrap';
 import CopyToClipboard from '~/components/common/Clipboard/CopyToClipboard';
 import UserStateDisplay from '../UserState/UserStateDisplay';
@@ -65,6 +65,9 @@ const TeamMemberTask = React.memo(
     const manager = 'Manager';
     const adm = 'Administrator';
     const owner = 'Owner';
+    const isOwnerOrAdmin = ['Owner', 'Administrator'].includes(userRole);
+
+    useEffect(() => {}, [userStateSelection]);
 
     const handleDashboardAccess = () => {
       // null checks
@@ -528,7 +531,9 @@ const TeamMemberTask = React.memo(
                               </div>
                               <UserStateDisplay
                                 userId={user.personId}
+                                userName={user.name}
                                 canEdit={displayUser?.email === 'jae@onecommunityglobal.org'}
+                                canManage={isOwnerOrAdmin}
                                 catalog={userStateCatalog}
                                 onCatalogChange={onCatalogChange}
                                 initialSelected={userStateSelection}

src/components/TeamMemberTasks/TeamMemberTasks.jsx

@@ -67,6 +67,7 @@ const TeamMemberTasks = React.memo(props => {
 
   const [userStateCatalog, setUserStateCatalog] = useState([]);
   const [userStateSelections, setUserStateSelections] = useState({});
+  const [selectionsLoaded, setSelectionsLoaded] = useState(false);
 
   useEffect(() => {
     axios
@@ -77,15 +78,19 @@ const TeamMemberTasks = React.memo(props => {
 
   // Fetch all selections in ONE call once teamList is ready
   useEffect(() => {
-    if (teamList.length === 0) return;
-    const userIds = teamList.map(u => u.personId);
-    const result = axios.post(ENDPOINTS.USER_STATE_SELECTIONS_BATCH, { userIds });
-    if (result && typeof result.then === 'function') {
-      result
-        .then(res => setUserStateSelections(res.data.selections || {}))
-        .catch(() => setUserStateSelections({}));
-    }
-  }, [teamList]);
+    if (usersWithTasks.length === 0) return;
+    const userIds = usersWithTasks.map(u => u.personId);
+    axios
+      .post(ENDPOINTS.USER_STATE_SELECTIONS_BATCH, { userIds })
+      .then(res => {
+        setUserStateSelections(res.data.selections || {});
+        setSelectionsLoaded(true);
+      })
+      .catch(() => {
+        setUserStateSelections({});
+        setSelectionsLoaded(true);
+      });
+  }, [usersWithTasks]);
 
   // Keep width reactive without putting window.innerWidth in deps (which never triggers)
   useEffect(() => {
@@ -718,7 +723,7 @@ const TeamMemberTasks = React.memo(props => {
           </thead>
 
           <tbody className={darkMode ? styles.darkTbody : ''}>
-            {teamList.length === 0 ? (
+            {teamList.length === 0 || !selectionsLoaded ? (
               <SkeletonLoading
                 template="TeamMemberTasks"
                 data-testid="skeleton-loading-team-member-tasks-row"

src/components/TeamMemberTasks/__tests__/TeamMemberTasks.test.jsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import thunk from 'redux-thunk';
 import { configureStore } from 'redux-mock-store';
@@ -88,12 +88,24 @@ const store = mockStore({
 
 vi.mock('axios');
 
+beforeEach(() => {
+  axios.get.mockResolvedValue({
+    status: 200,
+    data: { items: [] },
+  });
+  axios.post.mockResolvedValue({
+    status: 200,
+    data: { selections: {} },
+  });
+});
+
 describe('TeamMemberTasks component', () => {
   it('renders without crashing', () => {
     axios.get.mockResolvedValue({
       status: 200,
       data: '',
     });
+    axios.post.mockResolvedValue({ status: 200, data: { selections: {} } });
     render(
       <Provider store={store}>
         <MemoryRouter>
@@ -225,7 +237,7 @@ describe('TeamMemberTasks component', () => {
 
     expect(screen.getAllByTestId('team-member-tasks-row')).not.toHaveLength(0);
   });
-  it('check if the skeleton loading html elements are not shown when isLoading is false', () => {
+  it('check if the skeleton loading html elements are not shown when isLoading is false', async () => {
     axios.get.mockResolvedValue({
       status: 200,
       data: '',
@@ -238,7 +250,9 @@ describe('TeamMemberTasks component', () => {
         </MemoryRouter>
       </Provider>,
     );
-    expect(screen.queryByTestId('team-member-tasks-row')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.queryAllByTestId('team-member-tasks-row')).toHaveLength(0);
+    });
   });
   it('check if class names does not include color when dark mode is false', () => {
     axios.get.mockResolvedValue({

src/components/UserProfile/UserProfileEdit/__tests__/UserProfileEdit.test.jsx

@@ -47,8 +47,13 @@ describe("<UserProfileEdit />", () => {
       allProjects: mockProps.allProjects,
       theme: mockProps.theme,
     });
+    const axios = require('axios');
+    axios.get = vi.fn().mockResolvedValue({ status: 200, data: '' });
+    axios.post = vi.fn().mockResolvedValue({ status: 200, data: {} });
   });
 
+
+
   it("renders the UserProfileEdit component", async () => {
     render(
       <Provider store={store}>
@@ -62,7 +67,7 @@ describe("<UserProfileEdit />", () => {
       expect(mockProps.getUserProfile).toHaveBeenCalledWith("12345")
     );
     expect(screen.getByText(/Save Changes/i)).toBeInTheDocument();
-  });
+  }, 10000);
 
   it("displays loading spinner initially", () => {
     render(

src/components/UserState/ColorPicker.jsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import { COLOR_SWATCHES } from './constants';
+import styles from './UserState.module.css';
+
+function ColorPicker({ selectedColor, onSelect }) {
+  return (
+    <div className={styles.colorPickerWrapper}>
+      <span className={styles.colorPickerLabel}>Color:</span>
+      {COLOR_SWATCHES.map(swatch => (
+        <button
+          key={swatch.hex}
+          type="button"
+          title={swatch.label}
+          onClick={() => onSelect(swatch.hex)}
+          className={styles.colorSwatch}
+          style={{
+            background: swatch.hex,
+            border: selectedColor === swatch.hex ? '3px solid #000' : '2px solid transparent',
+            outline: selectedColor === swatch.hex ? '2px solid #fff' : 'none',
+            outlineOffset: '-4px',
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+ColorPicker.propTypes = {
+  selectedColor: PropTypes.string.isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default ColorPicker;

src/components/UserState/EmojiPicker.jsx

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import { EMOJI_OPTIONS } from './constants';
+import styles from './UserState.module.css';
+
+function EmojiPicker({ darkMode, onSelect }) {
+  return (
+    <div className={`${styles.emojiPickerGrid} ${darkMode ? styles.dark : styles.light}`}>
+      {EMOJI_OPTIONS.map(emoji => (
+        <button
+          key={emoji}
+          type="button"
+          onClick={() => onSelect(emoji)}
+          className={styles.emojiBtn}
+        >
+          {emoji}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+EmojiPicker.propTypes = {
+  darkMode: PropTypes.bool.isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default EmojiPicker;