{"action":"created","comment":{"url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/pulls/comments/83786653","pull_request_review_id":4605911,"id":83786653,"diff_hunk":"@@ -1,17 +1,49 @@\n import React from \"react\";\n import Task from \"./Task\";\n+import { DragDropContext, DropTarget, DragSource } from \"react-dnd\";\n+import ReactDnDHTML5Backend from \"react-dnd-html5-backend\";\n+import request from 'superagent';\n \n+@DragDropContext(ReactDnDHTML5Backend)\n export default class TaskList extends React.Component {\n   render() {\n-    var tasks = this.props.data.map((task) => {\n-      return(\n-        <Task key={task.id} id={task.id} \n-              content={task.content} status={task.status} onTaskUpdate={this.props.onTaskUpdate} />\n-      );\n-    });\n-    return (\n+    return(\n       <tbody>\n-        {tasks}\n+      {\n+        this.props.data.map((task) => {\n+          return <Task\n+          key={task.id} id={task.id}\n+          content={task.content} status={task.status} onTaskUpdate={this.props.onTaskUpdate}\n+          onDrop={\n+            (toID, fromID) => {\n+              const tasks = this.props.data.slice();\n+              const toIndex = tasks.findIndex(i => i.id == toID);\n+              const fromIndex = tasks.findIndex(i => i.id == fromID);\n+              const toTask = tasks[toIndex];\n+              const fromTask = tasks[fromIndex];\n+              tasks[toIndex] = fromTask;\n+              tasks[fromIndex] = toTask;","path":"app/assets/javascripts/TaskList.js","position":33,"original_position":33,"commit_id":"f7a650f2a1d71a37ce8c062f848d3c5788748c39","original_commit_id":"f7a650f2a1d71a37ce8c062f848d3c5788748c39","user":{"login":"udzura","id":91011,"avatar_url":"https://avatars.githubusercontent.com/u/91011?v=3","gravatar_id":"","url":"https://api.github.com/users/udzura","html_url":"https://github.com/udzura","followers_url":"https://api.github.com/users/udzura/followers","following_url":"https://api.github.com/users/udzura/following{/other_user}","gists_url":"https://api.github.com/users/udzura/gists{/gist_id}","starred_url":"https://api.github.com/users/udzura/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/udzura/subscriptions","organizations_url":"https://api.github.com/users/udzura/orgs","repos_url":"https://api.github.com/users/udzura/repos","events_url":"https://api.github.com/users/udzura/events{/privacy}","received_events_url":"https://api.github.com/users/udzura/received_events","type":"User","site_admin":false},"body":"`props.data` に格納されているtasksをここで編集しているということですね","created_at":"2016-10-18T06:06:55Z","updated_at":"2016-10-18T06:06:55Z","html_url":"https://github.com/pepabo-college/kymmt90-todo-app/pull/13#discussion_r83786653","pull_request_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/pulls/13","_links":{"self":{"href":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/pulls/comments/83786653"},"html":{"href":"https://github.com/pepabo-college/kymmt90-todo-app/pull/13#discussion_r83786653"},"pull_request":{"href":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/pulls/13"}}},"pull_request":{"url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/pulls/13","id":89749828,"html_url":"https://github.com/pepabo-college/kymmt90-todo-app/pull/13","diff_url":"https://github.com/pepabo-college/kymmt90-todo-app/pull/13.diff","patch_url":"https://github.com/pepabo-college/kymmt90-todo-app/pull/13.patch","issue_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/issues/13","number":13,"state":"open","locked":false,"title":"リスト上の Task のドラッグアンドドロップを有効化","user":{"login":"kymmt90","id":9291031,"avatar_url":"https://avatars.githubusercontent.com/u/9291031?v=3","gravatar_id":"","url":"https://api.github.com/users/kymmt90","html_url":"https://github.com/kymmt90","followers_url":"https://api.github.com/users/kymmt90/followers","following_url":"https://api.github.com/users/kymmt90/following{/other_user}","gists_url":"https://api.github.com/users/kymmt90/gists{/gist_id}","starred_url":"https://api.github.com/users/kymmt90/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kymmt90/subscriptions","organizations_url":"https://api.github.com/users/kymmt90/orgs","repos_url":"https://api.github.com/users/kymmt90/repos","events_url":"https://api.github.com/users/kymmt90/events{/privacy}","received_events_url":"https://api.github.com/users/kymmt90/received_events","type":"User","site_admin":false},"body":"@qkake @udzura 確認お願いします。\r\n\r\n## 何を解決するのか\r\n\r\nreact-dnd を利用して、リスト上の Task の項目をドラッグアンドドロップで並べ替えできるようにします。\r\nranked-model を使って DB に order を保存しているので、画面更新後も順番は保存されます。\r\n\r\n## 注意点\r\n\r\nreact-dnd で JS の decorator が必要、かつ Babel v6 が decorator 未サポートなので、babel-plugin-transform-decorators-legacy をインストールしています。\r\n\r\n### decorator とは\r\n\r\nES7 で入る機能で、今回の PR でいうところの `@DropTarget` のような記法で使えるものです。\r\nデザインパターンの方とは別物。\r\n\r\n機能は Java のアノテーションと似ていて、class などの直前に記述することで、それらに対する付加情報を与えることができます。\r\nJava のアノテーションはフレームワークで用いられることが多い気がします。\r\n\r\nreact-dnd では、ドラッグ対象領域、ドラッグ対象、ドロップ対象の class それぞれについて、decorator でコールバック情報などを注入しています。\r\n\r\n## 現状の問題点\r\n\r\n- ドラッグアンドドロップ後のリスト更新が遅い\r\n- アニメーションがない\r\n\r\n## 参考\r\n\r\n- [react-dnd これだけ抑えておけばおｋ - Qiita](http://qiita.com/mizchi/items/9a426af4fe919cd9d9d5)\r\n- [Rails 4で作るドラッグアンドドロップで表示順を変更できるサンプルアプリ(スクリーンキャスト付き) - Qiita](http://qiita.com/jnchito/items/391fb16d3f69fda9bdae)","created_at":"2016-10-18T05:39:02Z","updated_at":"2016-10-18T06:06:58Z","closed_at":null,"merged_at":null,"merge_commit_sha":"dca24d450a94d0f3117881a30822c9a48b557d0e","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/pulls/13/commits","review_comments_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/pulls/13/comments","review_comment_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/pulls/comments{/number}","comments_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/issues/13/comments","statuses_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/statuses/f7a650f2a1d71a37ce8c062f848d3c5788748c39","head":{"label":"pepabo-college:dnd-list-items","ref":"dnd-list-items","sha":"f7a650f2a1d71a37ce8c062f848d3c5788748c39","user":{"login":"pepabo-college","id":22440065,"avatar_url":"https://avatars.githubusercontent.com/u/22440065?v=3","gravatar_id":"","url":"https://api.github.com/users/pepabo-college","html_url":"https://github.com/pepabo-college","followers_url":"https://api.github.com/users/pepabo-college/followers","following_url":"https://api.github.com/users/pepabo-college/following{/other_user}","gists_url":"https://api.github.com/users/pepabo-college/gists{/gist_id}","starred_url":"https://api.github.com/users/pepabo-college/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pepabo-college/subscriptions","organizations_url":"https://api.github.com/users/pepabo-college/orgs","repos_url":"https://api.github.com/users/pepabo-college/repos","events_url":"https://api.github.com/users/pepabo-college/events{/privacy}","received_events_url":"https://api.github.com/users/pepabo-college/received_events","type":"Organization","site_admin":false},"repo":{"id":70543623,"name":"kymmt90-todo-app","full_name":"pepabo-college/kymmt90-todo-app","owner":{"login":"pepabo-college","id":22440065,"avatar_url":"https://avatars.githubusercontent.com/u/22440065?v=3","gravatar_id":"","url":"https://api.github.com/users/pepabo-college","html_url":"https://github.com/pepabo-college","followers_url":"https://api.github.com/users/pepabo-college/followers","following_url":"https://api.github.com/users/pepabo-college/following{/other_user}","gists_url":"https://api.github.com/users/pepabo-college/gists{/gist_id}","starred_url":"https://api.github.com/users/pepabo-college/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pepabo-college/subscriptions","organizations_url":"https://api.github.com/users/pepabo-college/orgs","repos_url":"https://api.github.com/users/pepabo-college/repos","events_url":"https://api.github.com/users/pepabo-college/events{/privacy}","received_events_url":"https://api.github.com/users/pepabo-college/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/pepabo-college/kymmt90-todo-app","description":"Team A","fork":false,"url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app","forks_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/forks","keys_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/keys{/key_id}","collaborators_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/teams","hooks_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/hooks","issue_events_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/issues/events{/number}","events_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/events","assignees_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/assignees{/user}","branches_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/branches{/branch}","tags_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/tags","blobs_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/git/refs{/sha}","trees_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/git/trees{/sha}","statuses_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/statuses/{sha}","languages_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/languages","stargazers_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/stargazers","contributors_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/contributors","subscribers_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/subscribers","subscription_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/subscription","commits_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/commits{/sha}","git_commits_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/git/commits{/sha}","comments_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/comments{/number}","issue_comment_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/issues/comments{/number}","contents_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/contents/{+path}","compare_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/compare/{base}...{head}","merges_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/merges","archive_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/downloads","issues_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/issues{/number}","pulls_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/pulls{/number}","milestones_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/milestones{/number}","notifications_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/labels{/name}","releases_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/releases{/id}","deployments_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/deployments","created_at":"2016-10-11T01:26:08Z","updated_at":"2016-10-17T21:58:05Z","pushed_at":"2016-10-18T05:39:02Z","git_url":"git://github.com/pepabo-college/kymmt90-todo-app.git","ssh_url":"git@github.com:pepabo-college/kymmt90-todo-app.git","clone_url":"https://github.com/pepabo-college/kymmt90-todo-app.git","svn_url":"https://github.com/pepabo-college/kymmt90-todo-app","homepage":"","size":82,"stargazers_count":1,"watchers_count":1,"language":"Ruby","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":6,"forks":0,"open_issues":6,"watchers":1,"default_branch":"master"}},"base":{"label":"pepabo-college:master","ref":"master","sha":"37cf26e4568264a3ebfc5be77f8fd7d5ff3fcd9f","user":{"login":"pepabo-college","id":22440065,"avatar_url":"https://avatars.githubusercontent.com/u/22440065?v=3","gravatar_id":"","url":"https://api.github.com/users/pepabo-college","html_url":"https://github.com/pepabo-college","followers_url":"https://api.github.com/users/pepabo-college/followers","following_url":"https://api.github.com/users/pepabo-college/following{/other_user}","gists_url":"https://api.github.com/users/pepabo-college/gists{/gist_id}","starred_url":"https://api.github.com/users/pepabo-college/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pepabo-college/subscriptions","organizations_url":"https://api.github.com/users/pepabo-college/orgs","repos_url":"https://api.github.com/users/pepabo-college/repos","events_url":"https://api.github.com/users/pepabo-college/events{/privacy}","received_events_url":"https://api.github.com/users/pepabo-college/received_events","type":"Organization","site_admin":false},"repo":{"id":70543623,"name":"kymmt90-todo-app","full_name":"pepabo-college/kymmt90-todo-app","owner":{"login":"pepabo-college","id":22440065,"avatar_url":"https://avatars.githubusercontent.com/u/22440065?v=3","gravatar_id":"","url":"https://api.github.com/users/pepabo-college","html_url":"https://github.com/pepabo-college","followers_url":"https://api.github.com/users/pepabo-college/followers","following_url":"https://api.github.com/users/pepabo-college/following{/other_user}","gists_url":"https://api.github.com/users/pepabo-college/gists{/gist_id}","starred_url":"https://api.github.com/users/pepabo-college/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pepabo-college/subscriptions","organizations_url":"https://api.github.com/users/pepabo-college/orgs","repos_url":"https://api.github.com/users/pepabo-college/repos","events_url":"https://api.github.com/users/pepabo-college/events{/privacy}","received_events_url":"https://api.github.com/users/pepabo-college/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/pepabo-college/kymmt90-todo-app","description":"Team A","fork":false,"url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app","forks_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/forks","keys_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/keys{/key_id}","collaborators_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/teams","hooks_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/hooks","issue_events_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/issues/events{/number}","events_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/events","assignees_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/assignees{/user}","branches_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/branches{/branch}","tags_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/tags","blobs_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/git/refs{/sha}","trees_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/git/trees{/sha}","statuses_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/statuses/{sha}","languages_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/languages","stargazers_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/stargazers","contributors_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/contributors","subscribers_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/subscribers","subscription_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/subscription","commits_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/commits{/sha}","git_commits_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/git/commits{/sha}","comments_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/comments{/number}","issue_comment_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/issues/comments{/number}","contents_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/contents/{+path}","compare_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/compare/{base}...{head}","merges_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/merges","archive_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/downloads","issues_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/issues{/number}","pulls_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/pulls{/number}","milestones_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/milestones{/number}","notifications_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/labels{/name}","releases_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/releases{/id}","deployments_url":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/deployments","created_at":"2016-10-11T01:26:08Z","updated_at":"2016-10-17T21:58:05Z","pushed_at":"2016-10-18T05:39:02Z","git_url":"git://github.com/pepabo-college/kymmt90-todo-app.git","ssh_url":"git@github.com:pepabo-college/kymmt90-todo-app.git","clone_url":"https://github.com/pepabo-college/kymmt90-todo-app.git","svn_url":"https://github.com/pepabo-college/kymmt90-todo-app","homepage":"","size":82,"stargazers_count":1,"watchers_count":1,"language":"Ruby","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":6,"forks":0,"open_issues":6,"watchers":1,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/pulls/13"},"html":{"href":"https://github.com/pepabo-college/kymmt90-todo-app/pull/13"},"issue":{"href":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/issues/13"},"comments":{"href":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/issues/13/comments"},"review_comments":{"href":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/pulls/13/comments"},"review_comment":{"href":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/pulls/13/commits"},"statuses":{"href":"https://api.github.com/repos/pepabo-college/kymmt90-todo-app/statuses/f7a650f2a1d71a37ce8c062f848d3c5788748c39"}}}}
{"actor":{"display_login":"udzura"}}