{"action":"created","issue":{"url":"https://api.github.com/repos/streetmix/streetmix/issues/1019","repository_url":"https://api.github.com/repos/streetmix/streetmix","labels_url":"https://api.github.com/repos/streetmix/streetmix/issues/1019/labels{/name}","comments_url":"https://api.github.com/repos/streetmix/streetmix/issues/1019/comments","events_url":"https://api.github.com/repos/streetmix/streetmix/issues/1019/events","html_url":"https://github.com/streetmix/streetmix/pull/1019","id":329909652,"node_id":"MDExOlB1bGxSZXF1ZXN0MTkzMDQ1NzE5","number":1019,"title":"Migrating street segments to React","user":{"login":"mkong0216","id":17012261,"node_id":"MDQ6VXNlcjE3MDEyMjYx","avatar_url":"https://avatars2.githubusercontent.com/u/17012261?v=4","gravatar_id":"","url":"https://api.github.com/users/mkong0216","html_url":"https://github.com/mkong0216","followers_url":"https://api.github.com/users/mkong0216/followers","following_url":"https://api.github.com/users/mkong0216/following{/other_user}","gists_url":"https://api.github.com/users/mkong0216/gists{/gist_id}","starred_url":"https://api.github.com/users/mkong0216/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mkong0216/subscriptions","organizations_url":"https://api.github.com/users/mkong0216/orgs","repos_url":"https://api.github.com/users/mkong0216/repos","events_url":"https://api.github.com/users/mkong0216/events{/privacy}","received_events_url":"https://api.github.com/users/mkong0216/received_events","type":"User","site_admin":false},"labels":[{"id":936606045,"node_id":"MDU6TGFiZWw5MzY2MDYwNDU=","url":"https://api.github.com/repos/streetmix/streetmix/labels/not-ready","name":"not-ready","color":"057eaa","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":17,"created_at":"2018-06-06T15:05:54Z","updated_at":"2018-06-07T15:44:58Z","closed_at":null,"author_association":"COLLABORATOR","pull_request":{"url":"https://api.github.com/repos/streetmix/streetmix/pulls/1019","html_url":"https://github.com/streetmix/streetmix/pull/1019","diff_url":"https://github.com/streetmix/streetmix/pull/1019.diff","patch_url":"https://github.com/streetmix/streetmix/pull/1019.patch"},"body":"In an attempt to make progress on completing issue #912, this PR renders street segments using the Segment component now used for the Streetmix palette. The goal is to make all street segment functionalities \"React friendly\".\r\n\r\nStreet segments have the following functionalities:\r\n- Dragging and dropping existing or new segments onto the street\r\n- Increasing the width of the segment using either the drag handle or the WidthControl box\r\n- Switching between segment variants\r\n- Removing existing segments from the street through dragging or the Remove button\r\n\r\nThis PR renders street segments based on the data using React. Using CSSTransitions it also animates the switching of segment variants. The drag and drop functionality of the street segments are currently half React, half vanilla JS. The final rendering of the street segments after the drag and drop event is done through React, including removal of a Segment either through the Remove button or through dragging. However, the \"floating\" segment displayed when dragging and dropping is done by vanilla JS along with making spaces between segments when dragging a segment between them. More research will need to be done on how to achieve drag and drop in a React way. \r\n\r\nIncreasing the width of the segment is currently done using vanilla JS with the help of the `segmentsChanged` function. When attempting to remove the use of the function, the rendering of the street segments seem to be one step behind. I will attempt to figure out why in another PR. \r\n\r\nQuestions:\r\n- Is `segmentElControls` needed in [`handleSegmentMoveEnd`](https://github.com/streetmix/streetmix/compare/mkong0216/street-segments-2?expand=1#diff-49915f825d9438f2ca07da7690ea06e4R764)?\r\n- Currently, adding a `randSeed` to every street segment to be used as the `key`. Is this okay? \r\n- In the master branch, when a segment variant changes, `changeSegmentVariantLegacy` is called which  animates the switching away of the segment as well as saves the new street to the server using `saveStreetToServerIfNecessary`. Since we do not want to call `saveStreetToServerIfNecessary` directly in the Variant component, I called [`segmentsChanged`](https://github.com/streetmix/streetmix/pull/1019/files#diff-d38d718d141d25ed5e3dfdfd85783056R95) after dispatching the action that changes the variant. Is there a better way to do this? Should I simply call `saveStreetToServerIfNecessary`? "},"comment":{"url":"https://api.github.com/repos/streetmix/streetmix/issues/comments/395469213","html_url":"https://github.com/streetmix/streetmix/pull/1019#issuecomment-395469213","issue_url":"https://api.github.com/repos/streetmix/streetmix/issues/1019","id":395469213,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NTQ2OTIxMw==","user":{"login":"mkong0216","id":17012261,"node_id":"MDQ6VXNlcjE3MDEyMjYx","avatar_url":"https://avatars2.githubusercontent.com/u/17012261?v=4","gravatar_id":"","url":"https://api.github.com/users/mkong0216","html_url":"https://github.com/mkong0216","followers_url":"https://api.github.com/users/mkong0216/followers","following_url":"https://api.github.com/users/mkong0216/following{/other_user}","gists_url":"https://api.github.com/users/mkong0216/gists{/gist_id}","starred_url":"https://api.github.com/users/mkong0216/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mkong0216/subscriptions","organizations_url":"https://api.github.com/users/mkong0216/orgs","repos_url":"https://api.github.com/users/mkong0216/repos","events_url":"https://api.github.com/users/mkong0216/events{/privacy}","received_events_url":"https://api.github.com/users/mkong0216/received_events","type":"User","site_admin":false},"created_at":"2018-06-07T15:44:58Z","updated_at":"2018-06-07T15:44:58Z","author_association":"COLLABORATOR","body":"Hey @ryross, yes the latest commit that switches to using the normalized segment width seems to fix the problem you mentioned above. If you still see it, feel free to tell me. "}}
{"actor":{"display_login":"mkong0216"}}