{"action":"created","issue":{"url":"https://api.github.com/repos/mozilla/teach.webmaker.org/issues/1060","labels_url":"https://api.github.com/repos/mozilla/teach.webmaker.org/issues/1060/labels{/name}","comments_url":"https://api.github.com/repos/mozilla/teach.webmaker.org/issues/1060/comments","events_url":"https://api.github.com/repos/mozilla/teach.webmaker.org/issues/1060/events","html_url":"https://github.com/mozilla/teach.webmaker.org/pull/1060","id":89712383,"number":1060,"title":"Refresh Events page with pre/during Maker Party design","user":{"login":"mmmavis","id":2896608,"avatar_url":"https://avatars.githubusercontent.com/u/2896608?v=3","gravatar_id":"","url":"https://api.github.com/users/mmmavis","html_url":"https://github.com/mmmavis","followers_url":"https://api.github.com/users/mmmavis/followers","following_url":"https://api.github.com/users/mmmavis/following{/other_user}","gists_url":"https://api.github.com/users/mmmavis/gists{/gist_id}","starred_url":"https://api.github.com/users/mmmavis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mmmavis/subscriptions","organizations_url":"https://api.github.com/users/mmmavis/orgs","repos_url":"https://api.github.com/users/mmmavis/repos","events_url":"https://api.github.com/users/mmmavis/events{/privacy}","received_events_url":"https://api.github.com/users/mmmavis/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/mozilla/teach.webmaker.org/labels/PR%20needs%20review","name":"PR needs review","color":"fbca04"}],"state":"open","locked":false,"assignee":{"login":"toolness","id":124687,"avatar_url":"https://avatars.githubusercontent.com/u/124687?v=3","gravatar_id":"","url":"https://api.github.com/users/toolness","html_url":"https://github.com/toolness","followers_url":"https://api.github.com/users/toolness/followers","following_url":"https://api.github.com/users/toolness/following{/other_user}","gists_url":"https://api.github.com/users/toolness/gists{/gist_id}","starred_url":"https://api.github.com/users/toolness/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/toolness/subscriptions","organizations_url":"https://api.github.com/users/toolness/orgs","repos_url":"https://api.github.com/users/toolness/repos","events_url":"https://api.github.com/users/toolness/events{/privacy}","received_events_url":"https://api.github.com/users/toolness/received_events","type":"User","site_admin":false},"milestone":null,"comments":3,"created_at":"2015-06-20T04:00:13Z","updated_at":"2015-06-30T15:06:55Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/mozilla/teach.webmaker.org/pulls/1060","html_url":"https://github.com/mozilla/teach.webmaker.org/pull/1060","diff_url":"https://github.com/mozilla/teach.webmaker.org/pull/1060.diff","patch_url":"https://github.com/mozilla/teach.webmaker.org/pull/1060.patch"},"body":"This fixes #900 "},"comment":{"url":"https://api.github.com/repos/mozilla/teach.webmaker.org/issues/comments/117220488","html_url":"https://github.com/mozilla/teach.webmaker.org/pull/1060#issuecomment-117220488","issue_url":"https://api.github.com/repos/mozilla/teach.webmaker.org/issues/1060","id":117220488,"user":{"login":"toolness","id":124687,"avatar_url":"https://avatars.githubusercontent.com/u/124687?v=3","gravatar_id":"","url":"https://api.github.com/users/toolness","html_url":"https://github.com/toolness","followers_url":"https://api.github.com/users/toolness/followers","following_url":"https://api.github.com/users/toolness/following{/other_user}","gists_url":"https://api.github.com/users/toolness/gists{/gist_id}","starred_url":"https://api.github.com/users/toolness/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/toolness/subscriptions","organizations_url":"https://api.github.com/users/toolness/orgs","repos_url":"https://api.github.com/users/toolness/repos","events_url":"https://api.github.com/users/toolness/events{/privacy}","received_events_url":"https://api.github.com/users/toolness/received_events","type":"User","site_admin":false},"created_at":"2015-06-30T15:06:55Z","updated_at":"2015-06-30T15:06:55Z","body":"Hmm, so I have some concerns about the [`unique-id-mixin`](https://www.npmjs.com/package/unique-id-mixin) module. After looking at its [source code](https://github.com/DelvarWorld/Unique-Id-Mixin/blob/master/index.js) it appears that it's storing module-level state (an `id` variable) that gets incremented every time a new ID is requested. Because this can't be configured on a per-page basis, the `id` of the pre-rendered page (generated by our static site build process or our dynamic lightweight server) may be different from the `id` of the user's browser, which will result in the following kinds of errors being logged:\r\n\r\n```\r\n\"Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:\r\n (client) nglist-signup-email-1\" class=\"sr-only\" d\r\n (server) nglist-signup-email-5\" class=\"sr-only\" d\"\r\n```\r\n\r\nThat's literally what's logged when I run `npm start` and visit `/events/`. If you run `npm run app` (the dynamic lightweight server) instead, you'll see that the `id`s the server is generating increase by 4 every time you reload the `/events/` page.\r\n\r\nSo rather than using the `unique-id-mixin`, could you just pass an `idPrefix` prop into the `FormMailingListSignup` class the same way that our `ModalAddOrChangeYourClub` in `clubs.jsx` does? And then just pass unique `idPrefix` props to the component when you use it in `EventsPage.render()`, e.g. `idPrefix=\"hero_unit_\"` for the top one and `idPrefix=\"page_end_cta_\"` for the bottom one? I know it's a bit more of a hassle, but it'll result in consistent markup between server and client, which helps speed up page loads.\r\n"}}