Merge pull request #7020 from hotosm/feat/order-project-contribution

Enable sorting contributors list by mapped, validated, and combined tasks

Author: ramyaragupathy

frontend/src/components/taskSelection/contributions.js

@@ -42,6 +42,47 @@ export const MappingLevelIcon = ({ mappingLevel }) => {
   return null;
 };
 
+const sortByLits = [
+  {
+    sortId: 'mapped',
+    tooltipMessage: 'Sort by total number of mapped task',
+    icon: <MappedIcon className="h1 w1 blue-grey" />,
+  },
+  {
+    sortId: 'validated',
+    tooltipMessage: 'Sort by total number of validated task',
+    icon: <ValidatedIcon className="h1 w1 blue-grey" />,
+  },
+  {
+    sortId: 'total',
+    tooltipMessage: 'Sort by total number of mapped and validated (both combined) tasks',
+    icon: <AsteriskIcon className="h1 w1 blue-grey" />,
+  },
+];
+
+const SortingHeader = ({ sortBy, setSortBy }: Object) => {
+  return (
+    <div className="flex justify-end items-center">
+      {sortByLits?.map((sortByItem) => (
+        <div
+          key={sortByItem.sortId}
+          className="w-20 fl tr dib truncate"
+          title={sortByItem.tooltipMessage}
+        >
+          <button
+            className={`bn dib pt2 mr4 pointer ph2 pv2  hover-bg-black-10 br3 ${
+              sortBy === sortByItem?.sortId ? 'bg-black-10' : 'bg-transparent'
+            }`}
+            onClick={() => setSortBy(sortByItem?.sortId)}
+          >
+            {sortByItem?.icon}
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};
+
 function Contributor({ user, activeUser, activeStatus, displayTasks }: Object) {
   const intl = useIntl();
   const checkActiveUserAndStatus = (status, username) =>
@@ -132,12 +173,14 @@ const Contributions = ({ project, tasks, contribsData, activeUser, activeStatus,
   };
   const [level, setLevel] = useState(mappingLevels[0]);
   const [userFilter, setUserFilter] = useState(defaultUserFilter);
+  const [sortBy, setSortBy] = useState('total');
   const { percentMapped, percentValidated, percentBadImagery } = useComputeCompleteness(tasks);
 
   const contributors = useFilterContributors(
     contribsData || [],
     level && level.value,
     userFilter && userFilter.value,
+    sortBy,
   );
 
   const displayTasks = (taskIds, status, user) => {
@@ -194,6 +237,7 @@ const Contributions = ({ project, tasks, contribsData, activeUser, activeStatus,
           delay={50}
           ready={contributors !== undefined}
         >
+          <SortingHeader sortBy={sortBy} setSortBy={setSortBy} />
           {contributors.map((user, k) => (
             <Contributor
               user={user}

frontend/src/components/taskSelection/tests/contributions.test.js

@@ -36,9 +36,9 @@ describe('Contributions', () => {
     expect(screen.getAllByRole('link')[1].href).toBe('https://osmcha.org/?aoi=abc1234');
     // clicking on the number of tasks trigger selectTask
     await user.click(screen.getAllByText('5')[0]);
-    expect(selectTask).toHaveBeenLastCalledWith([1, 3, 5, 7], 'ALL', 'test');
+    expect(selectTask).toHaveBeenLastCalledWith([5, 36, 99, 115,142], 'MAPPED', 'test_1');
     await user.click(screen.getAllByText('5')[1]);
-    expect(selectTask).toHaveBeenLastCalledWith([5, 36, 99, 115, 142], 'MAPPED', 'test_1');
+    expect(selectTask).toHaveBeenLastCalledWith([1, 3, 5, 7], 'ALL', 'test');
     // filter ADVANCED users
     await selectEvent.select(container.querySelectorAll('input')[0], 'Advanced');
     expect(screen.queryByText('user_3')).not.toBeInTheDocument();
@@ -80,6 +80,6 @@ describe('Contributions', () => {
     );
     expect(container.querySelector('div.b--blue-dark')).toBeInTheDocument();
     await user.click(screen.getAllByText('5')[1]);
-    expect(selectTask).toHaveBeenLastCalledWith([]);
+    expect(selectTask).toHaveBeenLastCalledWith([1, 3, 5, 7], 'ALL', 'test');
   });
 });

frontend/src/hooks/UseFilterContributors.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { getPastMonths } from '../utils/date';
 
-export function useFilterContributors(contributors, level, username) {
+export function useFilterContributors(contributors, level, username, sortBy) {
   const [filteredContributors, setFilter] = useState([]);
 
   useEffect(() => {
@@ -19,7 +19,12 @@ export function useFilterContributors(contributors, level, username) {
     if (username) {
       users = users.filter((user) => user.username === username);
     }
+    if (sortBy && users?.length) {
+      users = [...users]?.sort((a, b) => b?.[sortBy] - a?.[sortBy]);
+    }
+
     setFilter(users);
-  }, [contributors, level, username]);
+  }, [contributors, level, username, sortBy]);
+
   return filteredContributors;
 }