search

codeforpdx / PASS

PASS project - with HMIS module integration
MIT License
26 stars 25 forks source link

#413 Convert the "To" field in New Message Modal to select contacts #451

Closed cnease10 closed 7 months ago

cnease10 commented 9 months ago

Change message recipient input to dropdown

This PR:

Resolves #413

1. The message recipient input was difficult for users to type the full webId, this simplifies messaging a contact by using your contacts' names

The files this PR effects:

Components

src/components/Modals/NewMessageModal.jsx

Tests

test/components/Modals/NewMessageModal.test.jsx

Screenshots (if applicable):

image

Additional Context (optional):

Using react autocomplete to present a dropdown of user contacts. Selecting a contact should display the name and set the recipient URL to the appropriate pod URL.

leekahung commented 7 months ago

If you want to test out the feature with two separate Pods, think you could either make another pod in your local Solid server at localhost or make another Pod on one of the test servers like solidcommunity.net.

Either would be a good choice. To mimic two separate users, you could login to one pod in your working window in the browser and a second pod in a private window.

DionSat commented 7 months ago

Okay, so I tried 2 different users by using 2 pods in different browsers and it seems to work. I was able to receive all the messages that I sent. There was an issue where they weren't appearing when using the refresh button for the inbox. But when I refreshed the entire page it seemed to show up.

leekahung commented 7 months ago

Okay, so I tried 2 different users by using 2 pods in different browsers and it seems to work. I was able to receive all the messages that I sent. There was an issue where they weren't appearing when using the refresh button for the inbox. But when I refreshed the entire page it seemed to show up.

It might be related to one of the states not updating when rendering. We can try checking the side effects with a console log.

If it ends up being that case, we could try to utilize the useEffect hook with a dependency array with the state.

leekahung commented 7 months ago

Another option would be to utilize the list from the custom useContactList hook itself and just filter it to get the specific contact and have that show up in the rendering

Edit: Never mind, I see that you're already trying that in the new commits.

DionSat commented 7 months ago

It was on the Firefox browser that it happened, so at first I thought it might be a browser issue. Chrome was able to use the refresh button and show the new messages. But now after refreshing the Firefox page it seems to be working. At least its not doing it anymore. Not sure if I can recreate it.

DionSat commented 7 months ago

Okay, it works without the asterisk so its not necessary. I also changed the tests to find the input from the autocomplete Id provided by Cierra, because there might be more than one autocomplete combobox role for the message in the future. Also Merry Christmas to you all.