wevote / webapp Goto Github PK

nf071590 [10:45 AM]
We should add a step for committing. developers should run npm test before git push —set-upstream origin my-branch to make sure their code passes the build proccess. This alleviates issues for failing pull requests.(edited)
maybe also add references for eslint documentation to help resolve issues.

dalemcgrew [10:48 AM]
That makes a lot of sense. Perhaps in README_WORKING_WITH_WEB_APP.md?
In “## Checking In Code” section?

nf071590 [10:54 AM]
Yeah possibly, I’m not sure… I’d want to run it by rob because he’s been organizing a lot of the documentation. It’s up to you though I don’t know

We need to pass the voter_device_id from a cookie in the voter's browser, over the wire to the API server. The API server won't have access to the voter_device_id cookie from the WebApp running in the browser. If we pass voter_device_id as a GET variable, routers that pass along the URL will show the voter_device_id, which needs to remain secret. Do we need to convert all API calls to POST, so the voter_device_id remains secret?

My network tab shows 3-5 requests for each unique organization on the more opinions page.

This is the page you click through to when you click on a Candidate's name from the Ballot list.
src/js/routes/Ballot/Candidate.jsx

• Add Organization placeholder icon, web_app/assets/fonts/icon-org-placeholder-6_2.svg
• If the organization has a logo (as displayed on the "More Opinions" or "Opinions I Follow" pages), show that instead of the placeholder.
• Comment out the link on the "Organization Name TEMP" line for now. We will turn that link back on after we complete Version 1.
• Comment out the link on the candidate's name for now. We will turn that link back on after we complete Version 1.
• Please create (or find) Javascript date formatting function that takes "2016-02-20 23:31:56.859465+00:00" and converts it to dates like: Yesterday at 3:15PM OR 2 days ago OR 6 months ago
• Add the candidate name to the right of Supports or Opposes: "Supports Marco Rubio"
• Please double-check the Support / Oppose logic is correct in the Javascript layer. Currently on my dev machine the number supporting Marco Rubio for example ("2 support") doesn't match the number of orgs listed that support him. NOTE: This may be an API issue.
  

Load localhost:3000/opinions. Click some buttons.
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

If the voter hasn't followed any organizations yet when they visit the "Opinions I'm Following" page, redirect to the "More Opinions" page. Ideally we would also show a message after the redirect to the "More Opinions" page ("You are not following any organizations or people yet. Please follow those that match your points of view."), but this can wait until we get our messages framework in place.

@DaleMcGrew @nf071590 - I believe that we should have a base shell for the app and only certain views will change. Get away from the concept of pages and rather think in views. For example, on the ballot you have a base shell and the only thing that happens when you go to a candidate is that the candidate list view goes to a candidate view. By doing this we are limiting the changes of the view for the user to only change what is requested from the event that the user took.

I am no longer able to check in with PyCharm, and when I check in with the command line, files get picked up that I don't intend to check in. Would it be possible to resolve these errors early today (by removing the pre-commit test) so we can check in more easily today? In general I would prefer that we implement procedure once we hit Version 1.0.

Error:Native thread-sleep not available.
This will result in much slower performance, but it will still work.
You should re-install spawn-sync or upgrade to the lastest version of node if possible.
Check /Users/dalemcgrew/PythonProjects/webapp/node_modules/pre-commit/node_modules/spawn-sync/error.log for more details
... WARNINGS REMOVED HERE ...
pre-commit: We've failed to pass the specified git pre-commit hooks as the test
pre-commit: hook returned an exit code (1). If you're feeling adventurous you can
pre-commit: skip the git pre-commit hooks by adding the following flags to your commit:
pre-commit:
pre-commit: git commit -n (or --no-verify)
pre-commit:
pre-commit: This is ill-advised since the commit is broken.
pre-commit:

(https://files.slack.com/files-pri/T02GXHKU0-F0MUQRF28/pasted_image_at_2016_02_18_09_17_am.png)

Going to be troubleshooting and debugging this...

Rob's proposal: If a pull request gets 2 thumbs up - it can be merged

There are functions in service.js such as "candidatesRetrieve" that seem to be duplicated by BallotAPIWorker in BallotStore.js
Needs to delete the ones we are not using.

When I visit Hillary Clinton's candidate page:
http://localhost:3000/candidate/wv02cand1
I see 18 support and 11 oppose, even though I've only followed about 10 orgs. This is an issue with the API server and we have a bug for that:
wevote/WeVoteServer#82

Since City, State ZIP (what we get from Geocoding) is not enough info retrieve a ballot from the Google Civic API, @DaleMcGrew will be creating the following system to make sure voters always get an actual ballot (if they are in an area where we are supporting), even before they provide their full address.

Functional sequence:

1. Voter visits wevote.me, geolocation works and returns "City, State ZIP" and this is stored in the database
2. We find the closest ballot to this location that we have stored (pre-stored during the "Retrieve ballots" Admin tool, using polling location addresses to query Google Civic ballot data)
3. Display that ballot to the voter with this message:
   “We made our best guess at your location, and are showing a ballot for a nearby polling location. If you would like to find your actual ballot, please enter your full address.”

1. Visit the Ballot page
2. Enter a valid address "2208 Ebb Tide Rd, Virginia Beach, VA 23451"
3. You are taken to the Ballot and see all of your ballot items
4. Go to "My Ballot Location" and update the address to an address that doesn't return ballot items, like "Oakland, CA 94608"
5. You are redirected to http://localhost:3000/ballot/empty but the address in the header doesn't update (it should)
6. If you go back to the ballot, the address hasn't updated either
7. If you go to "My Ballot Location" the address hasn't updated
8. Go back to the ballot page and refresh -- you will see the address update to "Oakland, CA 94608"

I believe the cause of this is that we are relying on a "location" cookie, and instead we should be updating this value in the VoterStore and not use a cookie. We should avoid caching data in cookies that should live in a Store.

1. In WebApp, visit "More Opinions" page
2. Navigate back to Ballot
3. Visit "More Opinions" page again
4. You will see these "flattenChildren" errors in the browser console log

Warning: flattenChildren(...): Encountered two children with the same key, .$wv02vg6. Child keys must be unique; when two children share a key, only the first child will be used.

Let voters save and switch between multiple ballots, whether they be from this or prior elections. We can discuss the interface when it is time to implement. @lisamcho has updated the back end to work with an array of elections already.

There's tons of calls to retrieve data from the API but the app is very inconsistent in terms of how information is passed, where API calls to fetch data are made, how the views update themselves. Can we discuss the advantages/disadvantages and standardize it? Not sure what pattern to follow because there's so many in the app. Also it just makes it harder to work with when it's not consistent.

1. Sometimes there is an APIWorker, sometimes there isn't.
2. Some (Opinions.jsx) directly make AJAX calls within the component, passing in setState.
3. Others (Ballot.jsx) call a Store initialize or retrieve method, passing in setState. Store's method in turn calls APIWorkers, eventually resolving promise and calling the callback(the setState).
4. Others (PositionItem.jsx) call a Store retrieve method. Store calls APIWorkers, which fire an action when the data is retrieved. AppDispatcher register event, updates the store and emits change, which updates the component because component has registered changeListener.
5. There are other minor variations of these patterns....

components/Navigator.jsx Styling

• For the "Ballot", "Requests", "Connect" and "Activity" icons that are NOT selected (in both mobile and desktop mode), please make the navigation icons (and text links) gray instead of blue, with text underline on roll-over and darker gray for both text and icon
• Do not use roll-over on the "selected" icon (as it currently works)
• Create an "at" state for Ballot/Requests/Connect/Activity with the icon and text blue.
• Please use the blue currently used for "not selected" for the "selected" state
• Make these changes in both mobile and desktop modes

I'd like to propose that we take some time (no rush) when we are on a call together to discuss function name standards. I propose:

• retrieve for pulling data from permanent store (i.e., reaching out to an endpoint) (ex/ retrieveVoterObject)
• get for getting a value from local store (ex/ getVoterObject)
• save for saving to permanent store (i.e., saving to an endpoint) (ex/ saveVoterGuide)

There have been some questions about when to leave or remove comments in the code. Let's discuss.

It seems like npm test is only checking certain folders for lint errors. Add all folders with code we want to verify. Does not seem to pick up .jsx files.

Specific folders that don't seem to be included:
/src/js/components
/src/js/routes

We might want to exclude:
/src/js/mock-data

Hi Rob, I would like to use these buttons for our social sign in pages:
https://lipis.github.io/bootstrap-social/

Could you please set up our style sheet(s) show these styles?
You can see test buttons here:
WebApp/src/components/Facebook/FacebookSignIn.jsx
WebApp/src/components/Facebook/FacebookDisconnect.jsx

Which can be seen on this page:
http://localhost:3000/more/sign_in

I am working on another laptop and started up the app. When I went to the app I continued to get the loading spinner without any notice of why it continued to load. The response looks like so:

https://api.wevoteusa.org/apis/v1/voterBallotItemsRetrieve?voter_device_id=a7AeW6jxVfq0716ebMsxmbogmFkgBzIlnbpcrHIgPmZHiqcX5ZvDwbKQfOSg6omMZTcjyGyR0YlMiuGLzttdKxTk

{
  "success": false,
  "voter_device_id": "a7AeW6jxVfq0716ebMsxmbogmFkgBzIlnbpcrHIgPmZHiqcX5ZvDwbKQfOSg6omMZTcjyGyR0YlMiuGLzttdKxTk",
  "google_civic_election_id": "4167",
  "ballot_item_list": [],
  "status": "NO_BALLOT_ITEMS_FOUND_0"
}

Request URL:https://api.wevoteusa.org/apis/v1/voterBallotItemsRetrieve?voter_device_id=a7AeW6jxVfq0716ebMsxmbogmFkgBzIlnbpcrHIgPmZHiqcX5ZvDwbKQfOSg6omMZTcjyGyR0YlMiuGLzttdKxTk
Request Method:GET
Status Code:301 MOVED PERMANENTLY (from cache)
Remote Address:52.33.188.152:443

For any UI that there is no feedback or there is no data retrieved for one reason or the other, we should think about a timeout letting someone know possible reasons as to why we could not retrieve the data they are wanting.

If you load the Ballot, then navigate to Candidate page, and then back to Ballot you are fine.
If you load the web app starting with the Candidate Page or refresh the page while you're on the Candidate Page (which fetches a single candidate), then navigate to the Ballot, the Ballot does not initialize. This is because the Ballot initialize method checks for a length of zero before fetching all the Ballot items.

@DaleMcGrew @nf071590 Should we update the README so it only shows the steps to get the webapp started locally since it is now hitting external end points? At the bottom of the README we can have a link to the backend that someone can head over to that repo and fork if they want to have the backend locally.

Correct Invision link here: https://projects.invisionapp.com/share/2R41VR3XW#/screens/94226088
File location: /src/js/routes/Guide/PositionList.jsx
In interface: http://localhost:3000/guidepositions/wv02org111

I have redirected the 'Ballot' page to the address page when the ballot is empty, but there is still an issue...

If I delete all my browser cookies on localhost, it redirects and prompts to enter an address as expected. If I enter 2208 Ebb Tide Rd, Virginia Beach, VA, the page loads the ballot as expected.

If I enter the default San Francisco CA (or my full, valid home address in San Francisco), the backend saves the address, but can't get a Google Civic ID (API status response is ADDRESSED SAVED ... GOOGLE_CIVIC_API_ERROR: Election unknown). Hence the ballot is still empty, and the front end stays on the enter address page (though there is no explanation why).

Is this a backend issue? Where if we get GOOGLE_CIVIC_API_ERROR: Election unknown", we assign a default election #? Or else we handle the error on the frontend by redirecting to an empty ballot page and displaying a message to the users that their address was saved but there are no elections in their area currently, check back later.?

Hmmmm, after pulling down the latest changes, the ballot page doesn't seem to load the list of candidates anymore. In previous versions when you just go to the root url or localhost:3000/ballot, the candidates appear after a brief delay, but now the spinner displays perpetually. The VoterGuideStore is not being initialized??

In desktop mode, the ballot items often drop beneath the left-hand "More" menu.

Remove these cookies, and any dependencies on them: location, voter_id
Instead of using the cookies, reference the data in the VoterStore.
Leave these cookies in place: voter_device_id, voter_api_device_id

This will start with simple tests that can be worked on with hopes that eventually each commit will come with a test to demonstrate that it will not break the app.

We will use a very simple test names Tape. You can look at the package.json for more information.

Gulp does not always see the changes and pick them up.

Main Ballot (In /src/js/components/ItemActionbar): If you have Supported a candidate, change the color of the up-arrow to green (red for down-arrow) and bump up the size of the word "Support" (or "Oppose") slightly.
Candidate Page (In /src/js/components/ItemActionBar2): If you have Supported a candidate, change the color of the up-arrow to green (red for down-arrow).

This is related to Issue #93 (which happens if you refresh the page while on the Sign On screen), but is not a currently breaking warning.

1. Start not signed in on the ballot page
2. Go to the "Sign In" page
3. Click Sign In with Facebook
   You will see a FB.login() error in the console

Currently when you go to the "More Opinions" or "Opinions I'm Following" pages, it takes 3-4 seconds to load the opinions. I would like to call VoterGuideStore.initialize and load this data from the API server right after the ballot is loaded, so the voter doesn't perceive a loading delay.

http://localhost:9090/ballot/candidate/2/org/27 (web_app/app/containers/ballot/BallotCandidateOnePositionPage.jsx)

• Like/Share icon positioning: Make the horizontal spacing of each action even relative to each other.
• Adjust the size of the text. Adjust the color of the text to be gray, even on roll-over.

When address is populated in the header region, it goes beneath the icons to the left

Jeff (@ixley) is finishing up a new design for this, item 5.2. This is the current design brief: https://docs.google.com/document/d/1xlaUN6FyjKSp8lgctH5fC3bgOEYmpNqbyU8nBsm9vEY/edit#

Hi Rob, with the 'develop' branch this morning (Feb 4, 2106) I am getting these two errors:
Failed to decode downloaded font: http://localhost:3000/fonts/app-fonts.woff
OTS parsing error: invalid version tag

The responsive switching between mobile and desktop, turns on the More menu (on the left) at a different page-width than when the header/footer navigation changes.

When loading the root url, I get error logged to console:

Uncaught (in promise) Object {voter_device_id: "tAPbsZ8RlToFeproGtair2P6yW41scZDizoQbwpVt9vLXQjwGIRj3PtNcWZoymQEVSOOI5XEAgyZ9vbZiMngOSLu"}.

Tracing back it seems to be a problem with this code in service.js:
res.body.status is undefined, so it errors out.

return new Promise(function (resolve, reject) {
return request.get(opts.WE_VOTE_SERVER_API_ROOT_URL).accept(opts.dataType).query(opts.query).withCredentials().end(function (err, res) {
if (err || !res.body.status) {
if (opts.error instanceof Function === true) {
opts.error(err || res.body);

When you come to We Vote, check to see if there is an address saved from voterAddressRetrieve API:
https://api.wevoteusa.org/apis/v1/docs/voterAddressRetrieve/

If there isn't an address already saved, retrieve the "best guess" address from: https://api.wevoteusa.org/apis/v1/docs/voterLocationRetrieveFromIP/
...and then save the address found "voterLocationRetrieveFromIP" with:
https://api.wevoteusa.org/apis/v1/docs/voterAddressSave/

At any time, allow voter to type in a new address and save here:
https://api.wevoteusa.org/apis/v1/docs/voterAddressSave/

Note that whenever we call "voterAddressSave" we automatically (on the API server, behind the scenes) retrieve a ballot from the Google Civic API, so the WebApp needs to refresh the ballot data with:
https://api.wevoteusa.org/apis/v1/docs/voterBallotItemsRetrieve/

On the main ballot page, the More Opinions page takes you to a list of all Voter Guides that relate to any item on this ballot. This is great. What we need to add is this:
When you are on one candidate's page, clicking on the "More Opinions" should only offer the Voter Guides that have a position relating to that particular candidate. This is the API end point to use, and to example candidates to filter for:
https://api.wevoteusa.org/apis/v1/docs/voterGuidesToFollowRetrieve/
Ben Carson is wv02cand5
Marco Rubio is wv02cand14

As I work with the current MVP (almost ready for 0.9), I think it is currently not possible to find issues that relate to certain candidates, so I am bumping this issue #8 up to be required for us to hit Version 0.9.

I am no longer able to see the Facebook information needed to operate the Facebook sign in. Lisa, I think your changes with this pull request might have caused this. Can you please take a look?:
https://github.com/wevote/WebApp/pull/91/files

1. Visit the ballot
2. Click the Hamburger in the upper left, or use the navigation on the left side
3. Choose "Sign In" or "Account Settings"
4. You should see the "Uncaught TypeError: listener must be a function" error

When the hamburger icon is clicked in mobile mode, please display a slide out more menu (populated from the "src/js/components/MoreMenu" component) that only fills ~250px of the left side of the screen. When you click anywhere to the right of the slide-out (or if you click the hamburger icon again), the more menu should slide off the screen.

In order to get the sign in features to work, we need a way to call the API endpoint voterRetrieve and have the fresh data update '_voter' in the VoterStore. I can do this after Issues #46, #16 and #2 are resolved.

In desktop mode, the more menu pushes all the other components to the bottom.

Also, when in mobile view; More Menu hamburger icon displays more menu but clicking it again does not close the menu. There is no way to close the more menu when in mobile view.

On the "More Opinions" page page:
*) When you click "Follow" it should toggle to "Following"
*) When you click "Following" it should toggle to "Follow"

1. Go to http://localhost:3000/ballot and make sure you see candidates
2. Shrink the browser width down to mobile size so the navigation is along the bottom of the screen
3. The Candidate name and "1 support 1 oppose" text is dropping below the photo, and should be to the right of the photo and candidate name (like it is in desktop mode)
   

(Tested in Chrome)

On the ballot (/src/js/components/Ballot/CandidateItem.jsx) and candidate pages (/src/js/routes/Ballot/Candidate.jsx) the photo and candidate name info are both in a “col-xs-6”. Since the photo doesn’t need as much room as the candidate name, I was hoping to change the photo div to use “col-xs-4”, and the candidate name to use “col-xs-8”. When I tried this, I discovered some responsive code that doesn’t allow this simple change:
@media all and (max-width: 695px) { .no-show { display: none; } .col-xs-8 { width: 100%; } }