Tim add Materials List page

[tdkent]

Description

Add the Materials List page (Phase 2), a table of all purchased materials being used by the organization in their building projects.

• Docs
• Wireframes

Related PRS (if any):

To test this PR you need to checkout backend PR #567

Main changes explained:

• Adds route “bmdashboard/materials-list”
• Adds bmdashboard subdirectory to the actions, components, and reducers folders with related JS, JSX, and CSS files.
• On page load, an API request is sent to the backend to fetch the data (see backend PR for more). The response (either an error or the data) is added to Redux state and mapped to props.
• Based on the fetch result, the page will display either the error, the data, or a zero results page if there is no data.
  • Note: data values are arbitrary
• Data can be sorted by project
• Each data entry contains additional Usage, Updates, and Purchase info accessible via a button that opens a modal. There are also edit icons that currently return null but will eventually access Edit forms.

How to test:

• Follow steps to test backend PR 567
• git checkout Tim_bm_materials_list_index
• npm install
• npm run start:local
• Log into HGN as a volunteer
• Verify your credentials at “localhost:3000/bmdashboard”, then navigate to “localhost:3000/bmdashboard/materials-list”
  • Note: you will need to manually enter this into your URL bar as there are currently no nav links
• The Materials List page should display a table with about 25 rows of dummy data by default
• Test the Projects filter properly filters the results by project
• Test the “View” buttons for various rows to test that a modal with new data is displayed
• Test modal overflow: in row Tim Test Project 1 > River Sand (default first row), open the Usage, Updates, and Records modals. Each have enough data rows added to ensure the modal will overflow the results. Try scrolling the modal to test overflow is working properly.
• Test the page and modals are adaptive to page width.
  • Modal widths are reactstrap defaults (I cannot figure out how to change this) and not very good. I added overflow styling so the modals should be able to handle x-axis overflow at narrower screen widths.
  • Main page styling is also mostly reactstrap defaults, but the table should also handle x-axis overflow at narrower screen widths.
• Test error state: if the fetch attempt returns an error, the page will display the error information with a button to reload the page and try again.
  • Easy way to test client-side error: open the file actions/bmdashboard/materialsAction.js. In the fetchAllMaterials function, edit the ENDPOINTS.BM_MATERIALS_LIST string so the request is sent to an incorrect endpoint (404 error).
    • Refresh the page to send a fresh request
  • Easy to way to test server-side error: deactivate the backend so that no response object is included in the error object (503 error)
• Test ‘no results’ state: if no data is returned from the database, table layout will be replaced with “No materials data” text and the Project filter will be disabled
  • How to test: in fetchAllMaterials func, change dispatch(setMaterials(res.data)) to dispatch(setMaterials([]))
  • Note: you made need to refresh the page twice

Screenshots or videos of changes:

materials-list-demo.mov

Notes:

• The Edit icons (pencils) currently are not hooked up to anything and simply return null
• Error toasts that may pop up from a server-side error are coming from other error handling in the app
• Some reviewers are experiencing an issue where "/bmdashboard/materials-list" is displaying the error page instead of the data. To fix try running git pull then npm run build on the backend branch to make sure the branch is up to date.

[ChirayuRai]

Great work on implementing everything! It looks quite nice, and it's also responsive. Scrolling works on the table all throughout, and the code seems to all be in order. Error handling also properly shows error toasts.

I have noticed that if there's a 503 error, then 7 toasts pop up on the page with different timings for all of them. I also cannot close them by pressing the "x" in the top right corner sometimes. I have also noticed that all the buttons on screen seem to stop working when the error messages pop up, and after they are gone as well.

Screen.Recording.2023-10-11.at.3.05.26.PM.mov

Also, it seems there is nothing that occurs when the edit button is pressed.

Screen.Recording.2023-10-11.at.2.49.16.PM.mov

[tdkent]

Great work on implementing everything! It looks quite nice, and it's also responsive. Scrolling works on the table all throughout, and the code seems to all be in order. Error handling also properly shows error toasts.

I have noticed that if there's a 503 error, then 7 toasts pop up on the page with different timings for all of them. I also cannot close them by pressing the "x" in the top right corner sometimes. I have also noticed that all the buttons on screen seem to stop working when the error messages pop up, and after they are gone as well.

Screen.Recording.2023-10-11.at.3.05.26.PM.mov
Also, it seems there is nothing that occurs when the edit button is pressed.

Screen.Recording.2023-10-11.at.2.49.16.PM.mov

Thanks for your comment. The error toasts are the result of other error handling in the app. The edit buttons are currently not hooked up to anything and return null for now. I've updated the PR description to make this more clear.

[DavidC0126]

Hi @tdkent I tested your PR and it works as intended.

1. Display row data normally, and filter the result properly by project.

2. "View" buttons and overflow data work as described

Screen.Recording.2023-10-12.at.1.12.29.AM.mov

3. Error state and no data state are shown as described in the test.

Screen.Recording.2023-10-12.at.1.19.32.AM.mov

[olenadanykh]

hi @tdkent. I've tested your PR, and it appears to be working as intended. The table displays properly, the row data is shown correctly, and the filtering by project works as expected. Also "View" and "Tim Admin" buttons works as described.

Screen.Recording.2023-10-12.at.1.05.26.PM.mov

[lacnoskillz]

hello @tdkent
I pulled your backend #567 and front end code
After messing with it for longer than id like to admit and realizing I forgot to run build in the backend I got your changes to work! ha-ha
Everything is working as described!

Untitled_.Oct.12.2023.1_43.PM.webm

I would note in galaxy fold view port the projects dropdown is a little off center but no big deal

tested no materials data

Nice work!

[emunkh404]

I attempted to test it, and it displayed this: http://localhost:3000/dashboard/bmdashboard. However, when I tried various methods, it didn't display anything similar to http://localhost:3000/bmdashboard/materials-list.

[tdkent]

I attempted to test it, and it displayed this: http://localhost:3000/dashboard/bmdashboard. However, when I tried various methods, it didn't display anything similar to http://localhost:3000/bmdashboard/materials-list.

Did you check out and build the backend PR? What errors displayed in your console? Please provide more info so it's possible to debug the issue you are having.

ETA: the correct route is localhost:3000/bmdashboard

[tsunami776]

Hi @tdkent, I followed the steps in your PR and tested locally with the BE PR using a volunteer account.
The functionalities mentioned in the PR work as described. After logging into /bmdashboard, user can access material list page. I tested Modal overflow by shrinking x-axis, and the content will adjust accordingly. For error states, I followed your test instructions, and error states are handled correctly. Great work!

1401.mp4

[StrawberryCalpico]

Hi I test your PR. Worked as expected, great job!

video1378241017.mp4

[Iris-Song]

Hi, when I test login in as volunteer, I got a 404 page. Does it mean I don't have credentials or something wrong?

Screen.Recording.2023-10-13.at.10.50.58.mov

[JeffLi117]

Changes work as intended. Good job!

Initial view of "/bmdashboard/materials-list” after verifying credentials at "/bmdashboard":

Filtering by projects works; here is one view:

Testing the "View" buttons, modal overflow, and different screen width:

Client-side error:

Server-side error:

No results state:

Great job!

[malikjahanzaib]

Hi @tdkent, I tested this PR locally and all the features implemented work as described including error states. Below are my Test recordings. Great Job!!!
P.S. The only issue is that the FE gets "Compiled with warnings". I saw the same error in your recording as well so I assume you are aware of that.

Test Rec:

13.10.2023_17.38.01_REC.mp4

13.10.2023_17.40.22_REC.mp4

[RheaWu1212]

Hi, I'm testing your PR, however, I didn't get anything expected. I've tried to 'git checkout Tim_bm_materials_list_index' and latest branch, but it keeps giving me 404. I've cleaned cache several times and manually put the link, result shows like this:

[yurisokolovicz]

Hi Tim,

Minimal adjustments are required to match it exactly with the Figma. Check below:

[yurisokolovicz]

Hi Tim, while checking Figma, in order for the path in the navbar header component to match with this, it should be "/bmdashboard/material-list," right?

[TuanDinh140194]

Hi Tim! I have tested your PR with the following instruction:
First, I have logged in as volunteer, and go to the “localhost:3000/bmdashboard/materials-list” and the lists have display as expected with 25 rows of data and I can scroll down to see the overflow data.
Next, the filter of project is work great with filter the result of data/
I also have open the Usage, Updates, and Record modal and everything is responsive.
The page wildths is also work. I have test with the smaller screen and it can scroll horizontal to see the over flow data.
Next, for the test error, I have change the ENDPOINTS.BM_MATERIALS_LIST string on the code, and it only show the red modal with the unexpected error. Is it need to be show the incorrect endpoint (404 error)?
Finally, I have remove the res.data in function dispatch(setMaterials(res.data)) and it show “No materials data” . Below is my video of testing

HGN.APP.-.Google.Chrome.2023-10-14.08-32-37.mp4

[tdkent]

Hi Tim,

Minimal adjustments are required to match it exactly with the Figma. Check below:

There is no requirement to exactly match the wireframes.

[yurisokolovicz]

Hi Tim,
Minimal adjustments are required to match it exactly with the Figma. Check below:

There is no requirement to exactly match the wireframes.

Yes, no problem. It needs to match the navbar link URL address, so I will update it in the header to "/bmdashboard/materials-list" instead of "/bmdashboard/material-list.

[one-community]

Thank you all, moving to final review!

[beblicarl]

This functionality works as intended and the code is great!!

screencast-bpconcjcammlapcogcnnelfmaeghhagj-2023.10.18-12_13_04.webm

[KurtisIvey]

Great job on this. Everything looks really good. The functionality is 100% there and it's fully responsive:

Your error handling within the page works flawlessly as you described in the instructions as well:

I just had some small fixes to suggest and some things I'd like to clarify.

This one isn't related to my request for changes, but it's something that I noticed while checking out your PR. The back to top button seems to be malfunctioning and showing while at the top of the page. (Note: not pr1401 that caused this but the back to top button).

I noticed you were using index as the key in the props. Not sure why linting isn't catching this, but it's generally considered bad practice to do so. If you need to, you could create a unique key through the use of combining the date timestamp & createdBy._id.

I was also wondering your thoughts on implementing a sorting algorithm to sort these by date on the following modals as the date is not sorted chronologically. This could be implemented directly within the mongodb query on the backend:

The only other thing I noticed was a css warning due to use of "end" instead of "flex-end"

Other than those small things, it's all pretty stellar.

List of my requested changes:

• fix the use of "i" as the key
• implement chronological sorting in mongodb query
• fix css use of "align-items: end" to "align-items: flex-end" so the warning goes away

[tdkent]

@KurtisIvey Thanks for your comments. I pretty much agree with your suggestions!

1. I'm aware that using the array index as a key is not recommended. However in this case the data being displayed is entirely dummy data, most of it duplicated, so combining props as you suggest may result in duplicated key errors, so I used the index as a temporary workaround. (Btw, the linter did pick up the error but I disabled that lint rule for this). For now I will change the key as you suggest and remove the lint exception. Once we can manually create new materials on the frontend (in progress) I will need to revisit anyway.
2. I fully intend that sorting and advanced filtering should be available for the data, however I decided it was unnecessary to implement that at this time and more important to get this already large update up and running. I should have been more clear about my intentions in the description though!
3. Thanks for the catch on flex-end. I glazed over the error but have fixed it now.

[KurtisIvey]

Everything checks out. Great job. The error handling still works without issue as well after the recent changes.

Just like you mentioned, the keys caused a duplicate error. However, it's not important since this was something you said you'd address later. Thanks for taking the time to explain things to me about how a lot of this is still in development