Dev-4347 account spending tables #1706

jameslee40 · 2020-05-29T16:43:53Z

High level description:

Adds account spending table to the agency v2 profile page.

Technical details:

Added / Updated account spending TableContainer with a parseAccount function, and loading / error states.
Added new data model BaseAccountSpendingRow and agency data mapping tableColumns.
Updated CountTabContainer and CountTab to include disabled prop when count === 0.

JIRA Ticket:
DEV-4347

Testing:
URL should use a FREC or CGAC code instead of the agency database id.
i.e. https://www.usaspending.gov/#/agency_v2/020

Mockup:
N/A

The following are ALL required for the PR to be merged:

Author:

Linked to this PR in JIRA ticket
Scheduled demo including Design/Testing/Front-end OR Provided instructions for testing in JIRA and PR if applicable
Verified cross-browser compatibility
Verified mobile/tablet/desktop/monitor responsiveness
Verified that this PR does not create any new accessibility issues (via Axe Chrome extension)
PR for accessibility violation
Added Unit Tests for methods in Container Components, reducers, and helper functions if applicable
[N/A] All componentWillReceiveProps, componentWillMount, and componentWillUpdate in relevant child/parent components/containers replaced with future compatible life-cycle methods per JIRA item 3339
[N/A] API contract updated if applicable
[Component Library Integration Status Report]
PR
(https://github.com/fedspendingtransparency/data-act-documentation/blob/data-transparency-ui/frontend_apps/component-library-integration-status.md) updated if applicable

Reviewer(s):

Design review complete if applicable
[N/A] API #1234 merged concurrently if applicable
Code review complete

…dget-func-table

… capability

jonhill13 · 2020-05-29T16:57:38Z

src/_scss/pages/agency/v2/_tabs.scss

@@ -66,6 +66,11 @@
                    line-height: rem(20);
                }
            }
+
+            &:disabled {
+                color: #737373;


looks a lot like our color variable $color-gray-medium in core/_variables.scss

jonhill13 · 2020-05-29T16:59:14Z

src/_scss/pages/agency/v2/_tabs.scss

+
+            &:disabled {
+                color: #737373;
+                background-color: #FAFAFA;


looks a lot like our color variable $color-gray-lightest in core/_variables.scss

jonhill13 · 2020-05-29T17:18:24Z

src/js/components/agency/v2/CountTab.jsx

 };

 const CountTab = (props) => (
    <button
        className={`count-tabs__button${props.active ? ' count-tabs__button_active' : ''}`}
-        onClick={() => props.setActiveTab(props.type)}>
+        onClick={() => props.setActiveTab(props.type)}


We should be avoiding binding and arrow function in render whenever possible from React docs Using an arrow function in render creates a new function each time the component renders, which may break optimizations based on strict identity comparison. ( https://reactjs.org/docs/faq-functions.html ). We can move this function out to be const setActiveTab = (e) => props.setActiveTab(e.target.value) and pass a value prop to the button by value={props.type}

Refactored.

jonhill13 · 2020-05-29T17:31:12Z

src/js/containers/agency/v2/AgencyContainerV2.jsx

+                const budgetaryResources = Object.create(BaseAgencyBudgetaryResources);
+                budgetaryResources.populate(res.data);
+                // store the data model object in Redux
+                dispatch(setBudgetaryResources(budgetaryResources));


jonhill13 · 2020-05-29T17:32:01Z

src/js/containers/agency/v2/AgencyContainerV2.jsx

+                budgetaryResources.populate(res.data);
+                // store the data model object in Redux
+                dispatch(setBudgetaryResources(budgetaryResources));
+            });


.catch() how are we handling errors for this content?

Added error handling for this, as well as, rendering the error.

jonhill13 · 2020-05-29T17:38:23Z

src/js/containers/agency/v2/accountSpending/TableContainer.jsx

+
+const TableContainer = (props) => {
+    const [currentPage, changePage] = useState(1);
+    const [pageSize, changeLimit] = useState(10);


changePageSize

jonhill13 · 2020-05-29T17:38:42Z

src/js/containers/agency/v2/accountSpending/TableContainer.jsx

+};
+
+const TableContainer = (props) => {
+    const [currentPage, changePage] = useState(1);


changeCurrentPage

jonhill13 · 2020-05-29T17:39:13Z

src/js/containers/agency/v2/accountSpending/TableContainer.jsx

+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(false);
+    // TODO - use totalObligation to calculate '% of Total Obligations' column value
+    const totalObligation = useSelector((state) => state.agencyV2.budgetaryResources._agencyTotalObligated);


jonhill13 · 2020-05-29T17:46:55Z

src/js/containers/agency/v2/accountSpending/TableContainer.jsx

+            sort: accountFields[sort],
+            order
+        };
+        const request = fetchSpendingByCategory(props.agencyId, props.type, params);


We should migrate this to it's own function with useCallback() since we are doing the same thing in two effects with the only difference setTotalItems(res.data.page_metadata.total); and we can just do that both times or add some logic to see it it has been populated and then call it.

I created a function using useCallback(), but not sure it's doing anything because we're not passing anything in its dependency array. Let me know, if you have any idea how it should work.

Looking good. Thank you. We cannot pass parameters to useCallback that I am aware of. So we would need to move

setLoading(true); // Make a request with the new page number const params = { fiscal_year: props.fy, limit: pageSize, page: currentPage, sort: accountFields[sort], order };

into fetchSpendingByCategoryCallback as well and then it should work.

jonhill13 · 2020-05-29T17:48:57Z

src/js/models/v2/account/BaseAccountSpendingRow.js

+    get percentOfTotalObligations() {
+        if (this._totalObligatedAmount > 0) {
+            const percentage = generatePercentage(this._obligatedAmount / this._totalObligatedAmount);
+            if (percentage === ('0.00%')) return 'Less than 0.01%';


curious as to why we have the parens around the ('0.00%')?

No reason, I removed it.

jonhill13 · 2020-05-29T19:32:56Z

src/js/components/agency/v2/CountTab.jsx

+            className={`count-tabs__button${props.active ? ' count-tabs__button_active' : ''}`}
+            onClick={setActiveTab}
+            disabled={props.disabled}
+            value={props.type}>


We do not need value anymore since we are not dynamically setting the value of this button. That was an oversight on my part.

Ok, I removed it. Thanks @jonhill13!

ebdabbs and others added 15 commits May 22, 2020 15:52

Initial Table Container

24e71c8

added pagination and additional column mappings

affca38

Merge remote-tracking branch 'origin/dev' into ftr/dev-4347-agency-bu…

136ecca

…dget-func-table

Added missing Fontawesome icons

698d41f

Store the agency's total obligation in Redux

40fb096

added unit tests

6735b51

added data model for account spending row, parsing function, and sort…

b350470

… capability

added loading and error states

e050da8

added BaseAccountSpendingRow test

0bf6de3

added disabled prop

722b2a0

added pagination buttons when loading or errored

64f11e2

updated percentage function in base model

aaa4541

added styling for table and count tabs

6de64d3

added word-break

0a4c413

Merge branch 'dev' into ftr/dev-4347-account-spending-tables

b0642b3

jonhill13 suggested changes May 29, 2020

View reviewed changes

jameslee40 added 2 commits May 29, 2020 15:01

updated tabs to use color variables

5516767

Refactored CountTab onClick for performance reasons

935dae9

jonhill13 reviewed May 29, 2020

View reviewed changes

jameslee40 added 6 commits May 29, 2020 15:49

added error state to AgencyContainerV2

a3d7648

Refactored state naming

bf90684

Removed useless parenthesis

0b72344

Refactored function to useCallback

a34c352

Removed value from button

3d1e8a8

moved params and setLoading inside callback instead of passing params

9448b7c

MaxwellKendall assigned jonhill13 Jun 1, 2020

jonhill13 approved these changes Jun 1, 2020

View reviewed changes

jameslee40 added 3 commits June 2, 2020 10:28

Merge branch 'dev' into ftr/dev-4347-account-spending-tables

c56e2cb

updated data-transparency-ui version

b8ecb06

Merge branch 'dev' into ftr/dev-4347-account-spending-tables

04d499a

jameslee40 merged commit f7ed2b8 into dev Jun 2, 2020

jameslee40 deleted the ftr/dev-4347-account-spending-tables branch June 2, 2020 14:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dev-4347 account spending tables #1706

Dev-4347 account spending tables #1706

jameslee40 commented May 29, 2020 •

edited by ebdabbs

Loading

jonhill13 May 29, 2020

jameslee40 May 29, 2020

jonhill13 May 29, 2020

jameslee40 May 29, 2020

jonhill13 May 29, 2020

jameslee40 May 29, 2020

jonhill13 May 29, 2020

jonhill13 May 29, 2020

jameslee40 May 29, 2020

jonhill13 May 29, 2020

jameslee40 May 29, 2020

jonhill13 May 29, 2020

jameslee40 May 29, 2020

jonhill13 May 29, 2020

jonhill13 May 29, 2020

jameslee40 May 29, 2020

jonhill13 Jun 1, 2020

jameslee40 Jun 1, 2020

jonhill13 May 29, 2020

jameslee40 May 29, 2020

jonhill13 May 29, 2020

jameslee40 May 29, 2020

Dev-4347 account spending tables #1706

Dev-4347 account spending tables #1706

Conversation

jameslee40 commented May 29, 2020 • edited by ebdabbs Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jameslee40 commented May 29, 2020 •

edited by ebdabbs

Loading