added most recent history item to status

[0lafe]

Fixes #261

Screen.Recording.2022-03-03.at.10.57.40.PM.mov

I made some mistakes when trying to resolve the merge conflicts on the last PR. Hopefully this one will work instead

[github-actions]

Visit the preview URL for this PR (updated for commit 0lafe/advocacy-maps@1f1b000):

https://digital-testimony-dev--pr268-add-recent-history-t-vboxh12a.web.app

_{(expires Tue, 15 Mar 2022 23:06:02 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: bc0858669d4997df2a9165c2144bd1e2dbba0242}

[0lafe]

I took Alex's advice and abstracted the history table to its own reusable component. The only issue I found was how to format the props being passed to it. In history it is an array of history, however in the status it is a single element from an array. I opted to make the table component require an array, even of length 1, however I don't know what the best practice here would be.

[alexjball]

Thanks Ben! always requiring an array sgtm as it simplifies the component's interface

[alexjball]

Components should always be defined at the top level -- as it is this component is redefined each render. We should move this outside the BillHistoryTable, so it's defined at the module level, and then pass the props to it and have it access the documentHistoryActions from the props.

[0lafe]

Hey @alexjball I believe I accomplished what you intended, but I'm not exactly sure. If this is what you were asking for, do you mind letting me know what this does better? It seems more readable, but I assumed your comment was more related to repeating the mapping logic with additional rerenders, which I assume this would still do.

[alexjball]

Need to wrap the documentHistoryActions in curly braces to extract it from the props object:

const DocumentHistoryActionRows = ({documentHistoryActions}) => {

[alexjball]

Hey @0lafe this article goes into some detail: https://levelup.gitconnected.com/code-review-avoid-declaring-react-component-inside-parent-component-1768a645f523

When you define DocumentHistoryActionRows inside another component, you create a new function each render, so react sees <DocumentHistoryActionRows .../> as a new component each render, which causes additional unmounting and remounting. It would work fine in this case but can cause bugs in general (as in the article)

Will approve and merge once the curly braces are fixed (currently causes an error when I click status)