Feature Request: add Messages per Page and Page Numbers counter to top of Message Reivew

[ryanjcrump]

Problem There used to be a page count at the top and bottom of the Message Review list so that we don't need to scroll up and down to change.

Solution Can we add this back to the top?

[Arique1104]

During Pre-Meeting Jason K, Joe M, Kayla D, and Nate B, and Arique A learned the following to resolve this ticket.

The best document to begin in is AssignmentContactsList.jsx

The code that is responsible for pagnation is on lines 228-234

We are unclear what component it is tied to but need to resolve that understanding in order to take the next step in resolving this issue. Primarily raising this functionality to be at the top of the page. Secondary we want to add the page numbers back into this section.

Example: It does pagination but does not reflect what page you are on.

[colefiscus]

During HackNight (4/21), Cole F, Joe M, Arique A, and Kathy N learning the following:

The file where the related code lives in Spoke/src/components/IncomingMessageList/index.jsx.

The MUIDataTable is on lines 409 - 413.

We learned that the table shown in the Message Review section is a third-party library called MUI-Datatables (see link below), and that currently there is no way to place the pagination toolbar on top of the List table apart from creating a custom-built toolbar.

The next step from here would be to create a pull request for MUI-Datatable so future users can have a pagination toolbar on top and bottom of the tables.

See also: customToolbar in the MUI docs.

MUI-Datatable: https://www.npmjs.com/package/mui-datatables

[crayolakat]

I had a preliminary look at the MUI-Datatables code repo. Here are some starting steps you can take to make a PR for this issue there:

1. Fork the MUI-Datatables GitHub repo
2. In src/MUIDataTable.js, add an option to display the pagination component at the top of the table. Something like displayPaginationOnTop: PropTypes.bool in here: https://github.com/gregnb/mui-datatables/blob/b8d2eee6af4589d254b40918e5d7e70b1ee4baca/src/MUIDataTable.js#L164-L251
3. In src/MUIDataTable.js, set the default value of the displayPaginationOnTop option to false. Something like displayPaginationOnTop: false in here: https://github.com/gregnb/mui-datatables/blob/b8d2eee6af4589d254b40918e5d7e70b1ee4baca/src/MUIDataTable.js#L384-L430

Currently, the pagination component is displayed in src/components/TableFooter.js if the pagination option is enabled. See that defining code here: https://github.com/gregnb/mui-datatables/blob/b8d2eee6af4589d254b40918e5d7e70b1ee4baca/src/components/TableFooter.js#L34-L48. To display the pagination component at the top of the MUI-Datatable, do something similar in src/components/TableHead.js. Display pagination component in src/components/TableHead.js if the displayPaginationOnTop option is enabled. Here are some starting steps to do that:

1. Import the TablePagination into src/components/TableHead.js the same way it's imported in src/components/Footer.js
2. Update the signature of src/components/TableHead.js to contain all the parameters required for the pagination requirement. All the parameters required for the pagination requirement can be found in the signature of src/components/TableFooter.js: https://github.com/gregnb/mui-datatables/blob/b8d2eee6af4589d254b40918e5d7e70b1ee4baca/src/components/TableFooter.js#L15 (rowCount, page, rowsPerPage, changeRowsPerPage, and changePage). Take all those parameters and add them to the signature of src/components/TableHead.js here: https://github.com/gregnb/mui-datatables/blob/b8d2eee6af4589d254b40918e5d7e70b1ee4baca/src/components/TableHead.js#L26-L45
3. Conditionally render the pagination component in src/components/TableHead.js if the displayPaginationOnTop option is enabled. The pagination component would probably go right above the TableHeadRow component. The code to conditionally render would be something like:

   {options.displayPaginationOnTop &&
   <TablePagination
   ... Paste from src/components/TableHead.js  ...
   />
   }

4. In src/MUIDataTable.js, add all properties which are in TableFooterComponent but missing from TableHeadComponent to TableHeadComponent

Follow the below steps to test these MUI-Datatable changes in your Spoke local env:

1. Push the MUI-Datatables changes to a branch in your forked MUI-Datatables repo
2. In Spoke, delete mui-datatables from package.json
3. In Spoke, run nvm use followed by yarn install
4. In Spoke, run npm install "https://github.com/<username>/mui-datatables.git#<branch>" --save
5. In Spoke, add a displayPaginationOnTop: true option to the IncomingMessageList MUIDataTable options here: https://github.com/MoveOnOrg/Spoke/blob/ce5d1290a5c4ef3ea0a7d105dc839a1917545df1/src/components/IncomingMessageList/index.jsx#L348-L389
6. In Spoke, run yarn dev and test

[colefiscus]

Having difficulties implementing the paginationOnTop option within MUI-DataTable code.

After following roadmap above, I think the main issue lies in build process of the MUI code following the changes made above. Either that or something wrong with the packages being used.

Here is the build log I get through TravisCI:

And when trying to install the corresponding branch of the MUI code into Spoke, here are more errors received:

Already attempted: uninstalling/reinstalling the terser npm package, installing the branch by listing URL in place of the version in package.json, and changing the version of node being used.

Currently, when using the version of MUI-DataTables that Spoke is currently using, my dev environment works. So the problem either lies in the build process of MUI-Datatables after making changes to the code, or the installation of the changed code as a dependency in Spoke. Will have to work to isolate problem further.