codeforboston / communityconnect Goto Github PK

Expected behavior:
When accepting the browsers request to use location, the users current location should be loaded into the application and used when measuring the distance to organizations (as seen on the OrganizationCard components)

Actual behavior:
The distance shown on the OrganizationCard components is inaccurate.

I checked and all of the correct coordinates are getting fed into the getDistance function, so I think there is something wonky with the algorithm itself.

Currently when you select multiple categories, the check box will show for what was selected, however the resource list only shows resources specific to the last category selected.

Each org now as a key called id.

If the URL contains an id (something like https://communityconnect.netlify.com?id=3), set the state as though the user has searched by that orgs name & clicked the pin on the map.

It would make sense in the callsheets function to create a hash where the key is the org's id and the value is the index of the org in the orgs array. @microcat49 is doing something similar for lat & long, so talk to him or @galiat if you have any questions about this

related to #93

Would love for people with an eye for design to chime in. When a category is selected & we are filtering results, it would be handy for our user to know that a filter is in place & what that filter is.

How it currently looks is displayed below. Was thinking:

• in the dropdown: have a checkmark or have the selected one be another color.
• in the header next to 'Categories' display the currently selected category.

Yes or no questions that filter through all the resources to only display relevant to the users situation. Ex. A young man with no children with a low SES status should not have pins for WIC and breastfeeding clinics. Some questions could include: "Do you have children?", "Is English your first language?", "Have you ever experienced food or housing insecurity?"

On the top of the screen, a search bar that pulls from the Name (Column C) and Combined Address (Column M) so that a user can find a resource that they may already know of without having to go through the filtering process or scrolling down the list.

Decrease the font size and spacing between each row

Goal is to surface more listings on the left column of the page so that users can view more within their search/filter. When the list grows, it's helpful to see more than 2-3 results on a single page.

I think app.js is getting pretty long and will be hard to read for newcomers. Can we refactor this with some javascript structure standard that I'm not aware of?

If someone selects a resource from the list, then the box with the pin to its physical location should come up - this way an individual doesn't have to manually find the address in the map after scrolling through the list and seeing a resource they want to visit/learn more about.

If a resource is selected on the left side, then the map should show that pin with the box of information open above it. Conversely, when a pin on the map is selected, the left side of the page should display relevant information for that resource. Currently, the two sides of the screen are acting like 2 separate entities.

note categories like

Job Training and Opportunity, Childhood Support, Education

Should be split

We need to make sure the application looks and works similar to the normal application in a phone view. Fixing minor issues like being able to click the "Category" drop-down while viewing on a phone, could be a start.

I think it would be helpful for users if along with the address of the location, we could add a distance in miles from the current user's location for each of our displayed result.

When multiple health resources have the same address, no information is shown when clicked on the cluster (goes from a blue cluster to yellow) at that point. It would be great to see a tiled list of all the resources available at the address in a similar fashion to the list on the left side of the screen.

Ex. 300 Ocean Avenue, Revere, MA 02151 has 10 health resources:

1. MILC (Mother Infant Lactation Club) Breastfeeding Support Group
2. Reach Out and Read
3. WIC (Women, Infants, Children)
4. Cambodian Diabetic Coaching Program
5. CORE Health
6. Diabetes Eye Program
7. Revere on the Move
8. ARCH (Access to Resources for Community Health
9. Revere HealthCare Center
10. Department of Transitional Assistance (DTA)

For example, the hotlines are not displaying a phone number right now.

Clicking on the link icon should open the resource's website in a new page/tab, but right now it zooms the map & opens the link in the same tab

• remove boilerplate
• link to spreadsheet
• more things

This can be done towards the end of the project so we can see the actual usage of our cool product!

I think having a home button or something similar on the top bar would be a great feature to have so that when someone is looking at information from the box of a selected resource, they can easily navigate back to where they started (original screen) without having to refresh the whole page.

Currently, the category list is a drop down feature that only allows user to select 1 category to filter resources. It also requires users to refresh the page to select another category or view the entire list again. However, we should add boxes next to the resources so that a user can select 1 or more categories and then have the option to clear them to bring back the full resource list (see image below).

Finda Github- https://github.com/codeforboston/finda

Rather than passing around haveCoords, see value of currentPos

Found during code review.

Before the recent header update, the "Community Connect - Revere" on the header was clickable and would refresh the page if a user wanted to start fresh after selecting multiple resources, categories, etc. This is no longer available. This could also be merged with #99 so that the logo is now the clickable option in the header.

Format those boxes to include the information from its row. A designated place for each row (ie. services provided, social media, comments, contact info, etc). Currently the box says "undefined" so maybe that is something to look at too!

For each resource listing, we can add an icon right next to the name of the organization so it's easy to see what type of resource it is. For example, if it's a park, the icon chosen can be a tree and if it's a farm, it can be represented it with a carrot or corn.

The goal is to easily differentiate this resource from other categories once we implement the free-text search input

Free icons/assets can be found here: https://fontawesome.com/

After the user enables location, a search option should be available to see all health resources within a specific radius. This options allows users in between 2 communities to access whatever is closer

(copied from todo list tab on spreadsheet)

We should use the Enzyme library to perform regression test on the application. We could create test that make sure the project renders and our components are working correctly.

https://github.com/airbnb/enzyme

When first loaded, the map is zoomed way out:

It'd be easier to use if it started zoomed into a level where individual entries are visible.

In the database, there's a column that includes the services provided by each resource (Column I). Currently, that information is not displayed on the org pin when the pin is selected on the map. Information like Email (Column Q), Phone (Column R), and Social Media (Column V-X) should also be displayed. For the org card, we could have a [more...] option that would direct the user to the org pin that already has the full information.

(Note: not critical)

Inspired by
#81

it would be best if the map's defaultZoom & defaultCenter were computed based on the data we want to display rather than hard coded

At a meeting with Social Workers and a few of their clients, I saw that they were having trouble finding a place to start with the tool. Emphasizing filtering through the resources rather than the map and full list of resources would give users an easier place to start from. Similar to TripAdvisor.com

Each org now as a key called id.

If the user is looking at 1 org update the URL in the browser, to look something like https://communityconnect.netlify.com?id=3

related to #92

Maybe as a followup task add something like this to the Org Card. I've never tried to do something & might be tricky, but worth quickly looking into.
https://stackoverflow.com/questions/3024745/cross-browser-bookmark-add-to-favorites-javascript

Example:

code currently uses:
https://docs.google.com/spreadsheets/d/108aVfUjdRr_je1Pzx-axkOZTMMtdug7iyVH1m3BsnRw/edit#gid=0

code should use:
https://docs.google.com/spreadsheets/d/e/2PACX-1vRVzMlKCR7IvRTTSqCzRq4CG7YiTtrkzNAkzuMfh-RgBtl7FFj650O5rwS1uE0xWwfnaFeyFmY6u1uk/pubhtml

The category list should stay open until the user has selected a sufficient amount of health categories. For example, if a user wanted to select 3 options, they would have to re-click the Category list after making their first and second selection. This will also help for mobile devices once the Category list becomes clickable.

If we can use an API to show relevant T stations and bus routes along with giving users the option of viewing the best route using public transportation between their location and the location of the business/organization, then I think it will further increase access by removing transportation barriers for individuals in vulnerable situations.

On mobile, the category function interferes with the search option and moves off the screen. Some reformatting needs to done so that the search bar and category drop down stay in place when using on a mobile device.

Login Form - username and password with forgot password/username option (see below - without the facebook, twitter, google, linkedin account option)

Login information will allow users to "favorite" certain resources to make them more accessible. This can be implemented by having a tab at the top of the web app. Currently, the category list is located on the top right of the web page. If we move the category list next to the resources themselves (similar to Finda - see below), this will free up the room at the top bar and to include user specific information.

Expected behavior:
When clicking an organization on the map, the organizations sidebar should scroll to the selected organization.

Actual behavior:
The organizations sidebar is not effected by map clicks. When running locally the page an error is given.

An error is caused in the OrganizationCard component when trying to make this call:
this.refs.cardRef.scrollIntoView({block: "center", inline: "center"}) on line 17 of the OrganizationCard component.

It looks like <div ref="cardRef"> was recently removed from the JSX section of the OrganizationCard file and caused this to break, so I'm adding it back in.

We need to add comments to our code for all the new people who come in and start working on it. It would be really helpful as the code is growing with every PR. We can do this along with code refactoring.

We can start by adding comments to our important files like app.js and header.js.