Peterson impl feature finish my team filter or tasks tab

src/components/Badge/__tests__/NewBadges.test.js

@@ -64,8 +64,8 @@ describe('NewBadges component', () => {
     mockBadges.forEach(async (badge, index) => {
       fireEvent.mouseEnter(badgeImages[index]);
       await waitFor(() => {
-        expect(screen.getByText(badge.badge.badgeName)).toBeInTheDocument();
-        expect(screen.getByText(badge.badge.description)).toBeInTheDocument();
+        expect(screen.getByText(badge.badge.badge.badgeName)).toBeInTheDocument();
+        expect(screen.getByText(badge.badge.badge.description)).toBeInTheDocument();
       });
     });
   });

src/components/LeaderBoard/Leaderboard.jsx

@@ -2,7 +2,20 @@ import { useEffect, useState, useRef } from 'react';
 import './Leaderboard.css';
 import { isEqual } from 'lodash';
 import { Link } from 'react-router-dom';
-import { Table, Progress, Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import {
+  Table,
+  Progress,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Button,
+  Dropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+  Spinner,
+} from 'reactstrap';
 import Alert from 'reactstrap/lib/Alert';
 import {
   hasLeaderboardPermissions,
@@ -15,10 +28,13 @@ import MouseoverTextTotalTimeEditButton from 'components/mouseoverText/Mouseover
 import { toast } from 'react-toastify';
 import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfoModal';
 import moment from 'moment-timezone';
+import { boxStyle } from 'styles';
+import axios from 'axios';
 import { getUserProfile } from 'actions/userProfile';
 import { useDispatch } from 'react-redux';
 import { boxStyleDark } from 'styles';
 import '../Header/DarkMode.css';
+import { ENDPOINTS } from '../../utils/URL';
 
 function useDeepEffect(effectFunc, deps) {
   const isFirst = useRef(true);
@@ -65,6 +81,79 @@ function LeaderBoard({
     getMouseoverText();
     setMouseoverTextValue(totalTimeMouseoverText);
   }, [totalTimeMouseoverText]);
+  const [teams, setTeams] = useState([]);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [selectedTeamName, setSelectedTeamName] = useState('Select a Team');
+  const [textButton, setTextButton] = useState('My Team');
+  const [usersSelectedTeam, setUsersSelectedTeam] = useState([]);
+  const [isLoadingTeams, setIsLoadingTeams] = useState(false);
+  const [userRole, setUserRole] = useState();
+  const [teamsUsers, setTeamsUsers] = useState(leaderBoardData);
+  const [innerWidth, setInnerWidth] = useState();
+
+  useEffect(() => {
+    const fetchInitial = async () => {
+      const url = ENDPOINTS.USER_PROFILE(displayUserId);
+      try {
+        const response = await axios.get(url);
+        setTeams(response.data.teams);
+        setUserRole(response.data.role);
+      } catch (error) {
+        toast.error(error);
+      }
+    };
+
+    fetchInitial();
+  }, []);
+
+  useEffect(() => {
+    if (!isEqual(leaderBoardData, teamsUsers)) {
+      if (selectedTeamName === 'Select a Team') {
+        setTeamsUsers(leaderBoardData);
+      }
+    }
+  }, [leaderBoardData]);
+
+  useEffect(() => {
+    setInnerWidth(window.innerWidth);
+  }, [window.innerWidth]);
+
+  const toggleDropdown = () => setDropdownOpen(prevState => !prevState);
+
+  const renderTeamsList = async team => {
+    if (!team) {
+      setIsLoadingTeams(true);
+
+      setTimeout(() => {
+        setIsLoadingTeams(false);
+        setTeamsUsers(leaderBoardData);
+      }, 1000);
+    } else {
+      try {
+        setIsLoadingTeams(true);
+        const response = await axios.get(ENDPOINTS.TEAM_MEMBERS(team._id));
+        const idUsers = response.data.map(item => item._id);
+        const usersTaks = leaderBoardData.filter(item => idUsers.includes(item.personId));
+        setTeamsUsers(usersTaks);
+        setIsLoadingTeams(false);
+      } catch (error) {
+        toast.error('Error fetching team members:', error);
+        setIsLoadingTeams(false);
+      }
+    }
+  };
+
+  const handleToggleButtonClick = () => {
+    if (textButton === 'View All') {
+      setTextButton('My Team');
+      renderTeamsList(null);
+    } else if (usersSelectedTeam.length === 0) {
+      toast.error(`You have not selected a team or the selected team does not have any members.`);
+    } else {
+      setTextButton('View All');
+      renderTeamsList(usersSelectedTeam);
+    }
+  };
 
   const handleMouseoverTextUpdate = text => {
     setMouseoverTextValue(text);
@@ -79,7 +168,7 @@ function LeaderBoard({
       if (window.screen.width < 540) {
         const scrollWindow = document.getElementById('leaderboard');
         if (scrollWindow) {
-          const elem = document.getElementById(`id${userId}`); //
+          const elem = document.getElementById(`id${userId}`);
 
           if (elem) {
             const topPos = elem.offsetTop;
@@ -121,7 +210,14 @@ function LeaderBoard({
   };
   const updateLeaderboardHandler = async () => {
     setIsLoading(true);
-    await getLeaderboardData(userId);
+    if (isEqual(leaderBoardData, teamsUsers)) {
+      await getLeaderboardData(userId);
+      setTeamsUsers(leaderBoardData);
+    } else {
+      await getLeaderboardData(userId);
+      renderTeamsList(usersSelectedTeam);
+      setTextButton('View All');
+    }
     setIsLoading(false);
     toast.success('Successfuly updated leaderboard');
   };
@@ -130,6 +226,24 @@ function LeaderBoard({
     showTimeOffRequestModal(request);
   };
 
+  const teamName = (name, maxLength) =>
+    setSelectedTeamName(maxLength > 15 ? `${name.substring(0, 15)}...` : name);
+
+  const dropdownName = (name, maxLength) => {
+    if (innerWidth > 457) {
+      return maxLength > 50 ? `${name.substring(0, 50)}...` : name;
+    }
+    return maxLength > 27 ? `${name.substring(0, 27)}...` : name;
+  };
+
+  const TeamSelected = team => {
+    if (team.teamName.length !== undefined) {
+      teamName(team.teamName, team.teamName.length);
+    }
+    setUsersSelectedTeam(team);
+    setTextButton('My Team');
+  };
+
   return (
     <div>
       <h3>
@@ -155,6 +269,47 @@ function LeaderBoard({
           />
         </div>
       </h3>
+      {userRole === 'Administrator' || userRole === 'Owner' ? (
+        <section className="d-flex flex-row flex-wrap mb-3">
+          <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className=" mr-3">
+            <DropdownToggle caret>
+              {selectedTeamName} {/* Display selected team or default text */}
+            </DropdownToggle>
+            <DropdownMenu>
+              {teams.length === 0 ? (
+                <DropdownItem
+                  onClick={() => toast.warning('Please, create a team to use the filter.')}
+                >
+                  Please, create a team to use the filter.
+                </DropdownItem>
+              ) : (
+                teams.map(team => (
+                  <DropdownItem key={team._id} onClick={() => TeamSelected(team)}>
+                    {dropdownName(team.teamName, team.teamName.length)}
+                  </DropdownItem>
+                ))
+              )}
+            </DropdownMenu>
+          </Dropdown>
+
+          {teams.length === 0 ? (
+            <Link to="/teams">
+              <Button color="success" className="fw-bold" boxstyle={boxStyle}>
+                Create Team
+              </Button>
+            </Link>
+          ) : (
+            <Button
+              color="primary"
+              onClick={handleToggleButtonClick}
+              disabled={isLoadingTeams}
+              boxstyle={boxStyle}
+            >
+              {isLoadingTeams ? <Spinner animation="border" size="sm" /> : textButton}
+            </Button>
+          )}
+        </section>
+      ) : null}
       {!isVisible && (
         <Alert color="warning">
           <div className="d-flex align-items-center">
@@ -239,7 +394,7 @@ function LeaderBoard({
                 </span>
               </td>
             </tr>
-            {leaderBoardData.map(item => (
+            {teamsUsers.map(item => (
               <tr key={item.personId} className={darkMode ? 'bg-yinmn-blue' : ''}>
                 <td className="align-middle">
                   <div>
@@ -288,7 +443,7 @@ function LeaderBoard({
                         }
                       }}
                     >
-                      {hasLeaderboardPermissions(loggedInUser.role) &&
+                      {hasLeaderboardPermissions(item.role) &&
                       showStar(item.tangibletime, item.weeklycommittedHours) ? (
                         <i
                           className="fa fa-star"
@@ -428,7 +583,7 @@ function LeaderBoard({
                   <span
                     title={mouseoverTextValue}
                     id="Total time"
-                    className={item.totalintangibletime_hrs > 0 ? 'leaderboard-totals-title' : null}
+                    className={item.totalintangibletime_hrs > 0 ? 'boldClass' : null}
                   >
                     {item.totaltime}
                   </span>