Merge pull request #3195 from OneCommunityGlobal/Peterson-fixed-checkbox-under-column-reports-page-notification-functionality-to-be-fixed2

Peterson fixed checkbox under column reports page notification functionality to be fixed2

Author: one-community

src/actions/badgeManagement.js

@@ -380,7 +380,7 @@ export const createNewBadge = newBadge => async dispatch => {
 export const updateBadge = (badgeId, badgeData) => async dispatch => {
   try {
     await axios.put(ENDPOINTS.BADGE_BY_ID(badgeId), badgeData);
-    dispatch(fetchAllBadges());
+    // dispatch(fetchAllBadges());
   } catch (e) {
     if (e.response.status === 403 || e.response.status === 400) {
       dispatch(getMessage(e.response.data.error, 'danger'));

src/components/Badge/BadgeDevelopmentTable.jsx

@@ -162,9 +162,8 @@ function BadgeDevelopmentTable(props) {
     return filteredList;
   };
 
-  
   const handleSortName = () => {
-    console.log("here sort name");
+    console.log('here sort name');
     setSortRankState('default');
     setSortNameState(prevState => {
       // change the icon
@@ -174,8 +173,10 @@ function BadgeDevelopmentTable(props) {
 
       // Sort the badges by name
       const sorted = [...sortedBadges].sort((a, b) => {
-        if (newState === 'ascending') return a.badgeName.toLowerCase() > b.badgeName.toLowerCase() ? 1 : -1;
-        if (newState === 'descending') return a.badgeName.toLowerCase() < b.badgeName.toLowerCase() ? 1 : -1;
+        if (newState === 'ascending')
+          return a.badgeName.toLowerCase() > b.badgeName.toLowerCase() ? 1 : -1;
+        if (newState === 'descending')
+          return a.badgeName.toLowerCase() < b.badgeName.toLowerCase() ? 1 : -1;
         return 0;
       });
 
@@ -186,7 +187,7 @@ function BadgeDevelopmentTable(props) {
 
   const handleSortRank = () => {
     setSortNameState('default');
-    console.log("sort rank");
+    console.log('sort rank');
     setSortRankState(prevState => {
       // Change the icon state
       let newState = 'ascending';
@@ -203,11 +204,15 @@ function BadgeDevelopmentTable(props) {
       setSortedBadges(sorted);
       return newState;
     });
-    
   };
 
   const filteredBadges = sortedBadges;
 
+  const toggleCheckbox = id => {
+    // prettier-ignore
+    setSortedBadges(prev => prev.map(item => (item._id === id ? { ...item, showReport: !item.showReport } : item)));
+  };
+
   const reportBadge = badgeValue => {
     // Returns true for all checked badges and false for all unchecked
     const checkValue = !!badgeValue.showReport;
@@ -220,6 +225,7 @@ function BadgeDevelopmentTable(props) {
           checked={badgeValue.showReport || false}
           onChange={() => {
             const updatedValue = { ...badgeValue, showReport: !checkValue };
+            toggleCheckbox(badgeValue._id);
             props.updateBadge(badgeValue._id, updatedValue);
           }}
           style={{
@@ -236,14 +242,13 @@ function BadgeDevelopmentTable(props) {
     );
   };
 
-
   const onNameSort = () => {
-    setSortNameState((prevState) => {
+    setSortNameState(prevState => {
       if (prevState === 'ascending') return 'descending';
       if (prevState === 'descending') return 'default';
       return 'ascending';
     });
-  
+
     const sortedBadges = [...props.allBadgeData].sort((a, b) => {
       if (sortNameState === 'ascending') {
         return a.badgeName.toLowerCase() > b.badgeName.toLowerCase() ? 1 : -1;
@@ -252,18 +257,16 @@ function BadgeDevelopmentTable(props) {
       }
       return 0;
     });
-  
+
     return sortedBadges;
   };
-  
-const onRankSort = () => {
-    setSortRankState((prevState) => {
+
+  const onRankSort = () => {
+    setSortRankState(prevState => {
       if (prevState === 'ascending') return 'descending';
       if (prevState === 'descending') return 'default';
       return 'ascending';
     });
-  
-  
   };
 
   return (
@@ -272,14 +275,13 @@ const onRankSort = () => {
         className={`table table-bordered ${darkMode ? 'bg-yinmn-blue text-light dark-mode' : ''}`}
       >
         <thead>
-        <BadgeTableHeader
+          <BadgeTableHeader
             darkMode={darkMode}
             sortNameState={sortNameState}
             sortRankState={sortRankState}
             onNameSort={handleSortName}
             onRankSort={handleSortRank}
           />
-
         </thead>
         <tbody>
           {filteredBadges.map(value => (
@@ -316,7 +318,7 @@ const onRankSort = () => {
                   <Button
                     outline
                     color="info"
-                    disabled = {!canUpdateBadges}
+                    disabled={!canUpdateBadges}
                     onClick={() => onEditButtonClick(value)}
                     style={darkMode ? {} : boxStyle}
                   >
@@ -327,7 +329,7 @@ const onRankSort = () => {
                   <Button
                     outline
                     color="danger"
-                    disabled = {!canDeleteBadges}
+                    disabled={!canDeleteBadges}
                     onClick={() => onDeleteButtonClick(value._id, value.badgeName)}
                     style={darkMode ? {} : boxStyle}
                   >
@@ -400,4 +402,4 @@ const mapDispatchToProps = dispatch => ({
   hasPermission: permission => dispatch(hasPermission(permission)),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(BadgeDevelopmentTable);
+export default connect(mapStateToProps, mapDispatchToProps)(BadgeDevelopmentTable);

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

@@ -213,7 +213,7 @@ describe('BadgeDevelopmentTable component', () => {
     mockData.allBadgeData.forEach(async (item, index) => {
       const checkbox = container.querySelector(`#${item._id}`);
       if (index == 0) {
-        expect(checkbox.checked).toBe(true);
+        expect(checkbox.checked).toBe(false);
       } else {
         expect(checkbox.checked).toBe(false);
       }